font-family: Arial, Helvetica, sans-serif;\r
}\r
\r
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ol, dl, dd, dt, footer {\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ol, dl, dd, footer {\r
font-family: Arial, Verdana, Helvetica, sans-serif\r
}\r
\r
/* Set default font to 9 pt */\r
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, pre, code {\r
font-size: 9pt;\r
}\r
\r
pre, code { \r
font-family: "Courier New", Courier, monospace;\r
- border: 1px solid #719cc7;\r
margin: 6px 1.5px;\r
padding: 1px 1px 1px 1px;\r
font-weight: normal;\r
margin-top: 16pt;\r
}\r
\r
-caption, p.caption { \r
+caption { \r
font-size: 9pt;\r
color: #1C1C1C;\r
font-weight: bold;\r
margin-bottom: 10px;\r
}\r
\r
-ol.tutorstep li {\r
- border-top: 2px solid #719cc7;\r
- list-style-position: inside;\r
- font-weight: bold;\r
- margin-top: 30px;\r
- margin-left: -20px;\r
- padding-top: 3px;\r
- font-size: 12pt;\r
-}\r
-\r
-ol.tutorstep li p{\r
- font-size: 9pt;\r
- font-weight: normal;\r
- margin-top: 10px;\r
-}\r
-\r
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
- font-size: 9pt;\r
- list-style-position: outside; \r
- margin-left: 0px;\r
- font-weight: normal;\r
-}\r
-\r
-ol.tutorstep ol li p, ol.tutorstep ul li p {\r
- font-size: 9pt;\r
- font-weight: normal; \r
- margin-top: 5px;\r
-}\r
-\r
ol li p, ul li p {\r
font-size: 9pt;\r
font-weight: normal;\r
margin-top: 2px;\r
}\r
\r
-ol ol , ol.tutorstep ol{\r
+ol ol {\r
font-size: 9pt;\r
font-weight: normal;\r
list-style-type: lower-alpha;\r
margin-top: 10px; \r
}\r
\r
-ol.tutorstep ul {\r
- margin-top: 10px;\r
- font-size: 9pt;\r
-}\r
-\r
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+ol ol li, ol ul li {\r
border-style: none;\r
margin-top: 5px;\r
font-size: 9pt;\r
vertical-align:top;\r
padding: 3px 20px 5px 20px;\r
}\r
-\r
-td.middle {\r
- border: 1px solid #c6d9f1;\r
- vertical-align:middle;\r
- padding: 3px 20px 5px 20px;\r
- } \r
\r
/* Notes stand out using a light top & bottom borders with yellow background */\r
-table.note {\r
- border-top: 2px solid #719cc7;\r
- border-left: 0px;\r
- border-right: 0px;\r
- width: 100%;\r
-}\r
\r
-tr.note {\r
- text-align: left;\r
+div.note {\r
+ background-color: #eeece1;\r
+ border: medium none;\r
+ color: #1c1c1c;\r
+ margin-bottom: 12px;\r
+ margin-top: 12px;\r
+ padding: 5px;\r
}\r
\r
-th.note {\r
- text-align: left;\r
- background-color: #ddd9c3;\r
- background-image: note.gif;\r
- border-top: 2px solid #719cc7;\r
- border-bottom:1px solid #719cc7;\r
- border-right: none;\r
-\r
+div.note > strong:first-child {\r
+ background-color: #ddd9c3;\r
+ border-bottom: 1px solid #719cc7;\r
+ border-right: medium none;\r
+ border-top: 2px solid #719cc7;\r
+ text-align: left;\r
+ color: #719cc7;\r
+ font-size: 9pt;\r
+ font-weight: bold;\r
+ margin: -4px -4px 4px -4px; \r
+ padding: 4px 0px 4px 4px;\r
+ display: block; \r
+ width: auto;\r
}\r
\r
-td.note, p.note {\r
- background-color: #eeece1;\r
- color: #1C1C1C;\r
- padding: 5px;\r
- margin-top:12px;\r
- margin-bottom:12px;\r
- border: none;\r
-}\r
- \r
-/* Figure titles are centered and bolded */\r
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
- text-align: center;\r
- font-weight: bold;\r
+div.note * strong:after {\r
+ content: "\a ";\r
+ white-space: pre-line;\r
}\r
\r
-/* Red background and white text for things that need fixing before release */\r
-.fix {\r
- background-color: red;\r
- font-weight: bold;\r
- color: white;\r
- }\r
-\r
-/* Classes for creating collapsible content */\r
-#banner {\r
- padding: 8px 4px 8px 4px;\r
- /* top right bottom left */\r
- border: 1px solid #7f7f7f;\r
- width: 100%;\r
- background-image: url("banner.png");\r
- text-align: left;\r
- font-weight: bold;\r
- font-size: 9pt;\r
- color: #ffffff;\r
-}\r
\r
#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
ul.devicespecifications li div.devicespec-con ul.con-list { width:100%; }\r
ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
\r
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
-\r
-.static-cont {width:100%; margin-bottom:40px;}\r
\r
.top {text-align: right;}\r
.toc, ul.toc{\r
}\r
\r
.footer {font-size: 8pt;}\r
+\r
+p.Table {\r
+ text-align: center;\r
+ margin-top: 40px;\r
+ margin-bottom: -19px;\r
+ padding: 0;\r
+}\r
\r
+p.Table strong {\r
+ font-family: Arial, Verdana, Helvetica, sans-serif;\r
+ font-size: 9pt;\r
+ color: #1C1C1C;\r
+ font-weight: bold;\r
+}\r
+\r
caption { \r
font-size: 9pt;\r
color: #1C1C1C;\r
margin-bottom: 0px;\r
}\r
\r
-div.qindex, div.navpath, div.navtab{\r
- background-color: #e8eef2;\r
- border: 1px solid #84b0c7;\r
- text-align: center;\r
- margin: 2px;\r
- padding: 2px;\r
-}\r
-\r
-div.qindex, div.navpath {\r
- width: 100%;\r
- line-height: 140%;\r
-}\r
-\r
-div.navtab {\r
- margin-right: 15px;\r
-}\r
-\r
-/* @group Link Styling */\r
-\r
-a:link {\r
- color: #719cc7;\r
- text-decoration: underline;\r
- font-weight: bold;\r
-}\r
-\r
-a:hover { \r
- color: #0e437d;\r
-}\r
-\r
-a:visited {\r
- text-decoration: underline;\r
- color: #719cc7;\r
- font-weight: bold;\r
-}\r
-\r
-a.qindex {\r
- font-weight: bold;\r
- padding: 2px;\r
-}\r
-\r
-a.qindex:hover {\r
- text-decoration: underline;\r
- color: #0e437d;\r
- padding: 2px;\r
-}\r
-\r
-a.qindex:visited {\r
- text-decoration: underline;\r
- font-weight: bold;\r
- color: #719cc7;\r
- padding: 2px;\r
-}\r
-\r
-a.qindexHL {\r
- text-decoration: underline;\r
- font-weight: bold;\r
- background-color: #6666cc;\r
- color: #ffffff;\r
- padding: 2px 6px;\r
- border: 1px double #9295C2;\r
-}\r
-\r
-a.qindexHL:hover {\r
- text-decoration: none;\r
- background-color: #6666cc;\r
- color: #ffffff;\r
- padding: 2px 6px;\r
-}\r
-\r
-dl.el { \r
- margin-left: -1cm \r
-}\r
-\r
-.fragment {\r
- font-family: monospace, fixed;\r
- font-size: 105%;\r
-}\r
-\r
-pre.fragment {\r
- border: 1px solid #CCCCCC;\r
- background-color: #f5f5f5;\r
- padding: 4px 6px;\r
- margin: 4px 8px 4px 2px;\r
-}\r
-\r
-div.fragment {\r
- border: 1px solid #CCCCCC;\r
- background-color: #f5f5f5;\r
- padding: 6px;\r
-}\r
-\r
-div.ah { \r
- background-color: black; \r
- font-weight: bold; \r
- color: #ffffff; \r
- margin-bottom: 3px; \r
- margin-top: 3px \r
-}\r
-\r
-td.md { \r
- background-color: #f5f5f5; \r
- font-weight: bold; \r
-}\r
-\r
-td.mdname1 { \r
- background-color: #f5f5f5; \r
- font-weight: bold; \r
- color: #602020; \r
-}\r
-\r
-td.mdname { \r
- background-color: #f5f5f5; \r
- font-weight: bold; \r
- color: #602020; \r
- width: 600px; \r
-}\r
-\r
-div.groupHeader {\r
- margin-left: 16px;\r
- margin-top: 12px;\r
- margin-bottom: 6px;\r
- font-weight: bold;\r
-}\r
-\r
-div.groupText { \r
- margin-left: 16px; \r
- font-style: italic; \r
-}\r
-\r
-td.indexkey {\r
- background-color: #eeeeff;\r
- font-weight: bold;\r
- border: 1px solid #CCCCCC;\r
- margin: 2px 0px 2px 0;\r
- padding: 2px 10px;\r
-}\r
-\r
-td.indexvalue {\r
- background-color: #eeeeff;\r
- border: 1px solid #CCCCCC;\r
- padding: 2px 10px;\r
- margin: 2px 0px;\r
-}\r
-\r
-tr.memlist {\r
- background-color: #f0f0f0; \r
-}\r
-\r
-p.formulaDsp { \r
- text-align: center; \r
-}\r
-\r
-img.formulaDsp { \r
-}\r
-\r
-img.formulaInl { \r
- vertical-align: middle; \r
-}\r
-\r
-/* @group Code Colorization */\r
-\r
-span.keyword { color: #008000 }\r
-span.keywordtype { color: #604020 }\r
-span.keywordflow { color: #e08000 }\r
-span.comment { color: #800000 }\r
-span.preprocessor { color: #806020 }\r
-span.stringliteral { color: #002080 }\r
-span.charliteral { color: #008080 }\r
-span.vhdldigit { color: #ff00ff }\r
-span.vhdlchar { color: #000000 }\r
-span.vhdlkeyword { color: #700070 }\r
-span.vhdllogic { color: #ff0000 }\r
-\r
-.mdTable {\r
- border: 1px solid #868686;\r
- background-color: #F4F4FB;\r
-}\r
-\r
-.mdRow {\r
- padding: 8px 10px;\r
-}\r
-\r
-/* @group Member Descriptions */\r
-\r
-.mdescLeft, .mdescRight,\r
-.memItemLeft, .memItemRight,\r
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
- background-color: #F4F4F4A;\r
- border: none;\r
- margin: 4px;\r
- padding: 3px 8px 4px 8px;\r
-}\r
-\r
-.mdescLeft, .mdescRight {\r
- padding: 0px 8px 4px 8px;\r
- color: #555;\r
-}\r
-\r
-.memItemLeft, .memItemRight, .memTemplParams {\r
- border-top: 1px solid #DBDBDB;\r
-}\r
-\r
-.memTemplParams {\r
- color: #606060;\r
-}\r
-\r
/* @end */\r
\r
/* @group Member Details */\r
\r
/* Styles for detailed member documentation */\r
\r
-.memtemplate {\r
- font-size: 80%;\r
- color: #606060;\r
- font-weight: normal;\r
- margin-left: 3px;\r
-}\r
-\r
-.memnav {\r
- background-color: #eeeeff;\r
- border: 1px solid #84b0c7;\r
- text-align: center;\r
- margin: 2px;\r
- margin-right: 15px;\r
- padding: 2px;\r
-}\r
-\r
.memitem {\r
padding: 0;\r
}\r
\r
-.memname {\r
- white-space: nowrap;\r
- font-weight: bold;\r
-}\r
-\r
-.memproto, .memdoc {\r
- border: 1px solid #9BBCDD; \r
-}\r
-\r
-.memproto {\r
- padding: 0;\r
- background-color: #D5E2EF;\r
- font-weight: bold;\r
- -webkit-border-top-left-radius: 8px;\r
- -webkit-border-top-right-radius: 8px;\r
- -moz-border-radius-topleft: 8px;\r
- -moz-border-radius-topright: 8px;\r
-}\r
-\r
-.memdoc {\r
- padding: 2px 5px;\r
- background-color: #eef3f5;\r
- border-top-width: 0;\r
- -webkit-border-bottom-left-radius: 8px;\r
- -webkit-border-bottom-right-radius: 8px;\r
- -moz-border-radius-bottomleft: 8px;\r
- -moz-border-radius-bottomright: 8px;\r
-}\r
-\r
-.memdoc p, .memdoc dl, .memdoc ul {\r
- margin: 6px 0;\r
-}\r
-\r
-.paramkey {\r
- text-align: right;\r
-}\r
-\r
-.paramtype {\r
- white-space: nowrap;\r
-}\r
-\r
-.paramname {\r
- color: #853E0E;\r
- white-space: nowrap;\r
-}\r
-.paramname em {\r
- font-style: normal;\r
-}\r
-\r
/* @end */\r
\r
-.search { color: #003399;\r
- font-weight: bold;\r
-}\r
-\r
-form.search {\r
- margin-bottom: 0px;\r
- margin-top: 0px;\r
-}\r
-\r
-input.search { font-size: 75%;\r
- color: #000080;\r
- font-weight: normal;\r
- background-color: #eeeeff;\r
-}\r
-\r
-td.tiny { \r
- font-size: 75%;\r
-}\r
-\r
.highlight {\r
- background-color:#E2E2FF;\r
+ background-color:#E2E2FF;\r
}\r
\r
-/*---------- ide-eclipse Styles ---------*/\r
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
- margin: 0px 0px;\r
- padding: -30px -30px -30px -30px;\r
- font-weight: normal;\r
- font-style: normal;}\r
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
-\r
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
-\r
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
-.sh_styleFromXML{color:#800000;font-weight:bold;}\r
-/*-------------------------------------------------------*/\r
-\r
-/*-------- Snippet Base Styles ----------*/\r
-.snippet-wrap {position:relative;}\r
-*:first-child+html .snippet-wrap {display:inline-block;}\r
-* html .snippet-wrap {display:inline-block;}\r
-.snippet-reveal{text-decoration:underline;}\r
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
-* html .snippet-wrap .snippet-hide {bottom:1px;}\r
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
--moz-border-radius:0px;\r
--webkit-border-radius:0px;\r
-border-radius:0px;\r
-box-shadow: 1px 1px px #000;\r
--moz-box-shadow: 2px 2px 1px #000;\r
--webkit-box-shadow: 1px 1px 1px #000;}\r
-.snippet-wrap pre.snippet-textonly {padding:1em;}\r
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
-.snippet-wrap .snippet-num li{padding-left:2px;}\r
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
-.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
-\r
-/* Layout fixing */\r
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
-.clfix {display: inline-block;}\r
-.clfix {display: block;}\r
-* html .clfix {height: 1%;} /* Hides from IE-mac */\r
-.clfix {zoom:1;} /*for IE 5.5-7*/\r
-\r
-.fl {float:left !important;}\r
-.fr {float:right !important;}\r
-.cl {clear:both;}\r
-.rel {position:relative;}\r
-.abs {position:absolute;}\r
-.ac {text-align:center !important;}\r
-.ar {text-align:right !important;}\r
-.al {text-align:left !important;}\r
-.at {vertical-align:top !important;}\r
-.am {vertical-align:middle !important;}\r
-.ab {vertical-align:bottom;}\r
-.hand {cursor:pointer;}\r
-.bgnone {background:none !important;}\r
-.brnone {border:none !important;}\r
-.b {font-weight:bold !important;}\r
-.n {font-weight:normal !important;}\r
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
-.mt5 {margin-top:5px !important;} \r
/* //Layout fixing */\r
\r
-@media print { .hide, .show { display: none; }}\r
-\r
div#profile {\r
position: relative;\r
}\r
p {\r
/* overflow: auto; */\r
}\r
-\r
-div.table {\r
- /* overflow: auto; */\r
-}
\ No newline at end of file
</li>
<li><a href="native/media/image_edit_n.htm">Image Editing</a></li>
<li><a href="native/media/thumbnail_images_n.htm">Thumbnail Images</a></li>
- <li><a href="native/media/image_barcode_n.htm">Barcode Detection</a></li>
+ <li><a href="native/media/media_vision_n.htm">Visual Detection and Recognition</a>
+ <ul>
+ <li><a href="native/media/image_barcode_n.htm">Barcode Detection and Generation</a></li>
+ <li><a href="native/media/face_detection_n.htm">Face Detection, Recognition, and Tracking</a></li>
+ <li><a href="native/media/image_recognition_n.htm">Image Recognition and Tracking</a></li>
+ </ul>
+ </li>
<li><a href="native/media/audio_n.htm">Audio Management</a>
<ul>
<li><a href="native/media/openal_n.htm">OpenAL</a></li>
<li><a href="native/connectivity/vpn_n.htm">VPN Connections</a></li>
<li><a href="native/connectivity/iotcon_n.htm">IoT Connectivity</a></li>
<li><a href="native/connectivity/nsd_n.htm">Network Service Discovery</a></li>
+ <li><a href="native/connectivity/d2d_connectivity_n.htm">Convergence</a></li>
</ul>
</li>
<li><a href="native/messaging/messaging_cover_n.htm">Messaging</a>
<li><a href="native/security/privilege_n.htm">Privilege Information</a></li>
<li><a href="native/security/yaca_n.htm">Cryptographic Operations</a></li>
<li><a href="native/security/dpm_n.htm">Device Policy Management</a></li>
+ <li><a href="native/security/csr_n.htm">Malware Scanning and Web Protection</a></li>
<li><a href="native/security/security_tip.htm">Security Tips</a></li>
</ul>
</li>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the alarm functionality:</p>
<ol>
-<li>To use the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:
+<li>To use the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/alarm.get</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the Alarm API, include the <span style="font-family: Courier New,Courier,monospace"><app_alarm.h></span> header file in your application:
+<li>To use the functions and data types of the Alarm API, include the <code><app_alarm.h></code> header file in your application:
<pre class="prettyprint">
#include <app_alarm.h>
</pre>
<h2 id="scenario_1" name="scenario_1">Setting an Alarm after Specific Time</h2>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Since 2.4, the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> function does not support an exact period and delay to minimize the wake-ups of the device. The system can adjust when the alarm expires.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Since 2.4, the <code>alarm_schedule_after_delay()</code> function does not support an exact period and delay to minimize the wake-ups of the device. The system can adjust when the alarm expires.
+ </div>
<p>To set an alarm after a specific time:</p>
<li>
<p>Implement the AlarmRegister application:</p>
<ol type="a"><li>
-<p>To identify which application to start when the alarm expires, the Alarm API needs the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> handle.</p>
-<p>Obtain the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> handle of a specific app by calling the <span style="font-family: Courier New,Courier,monospace">app_control_set_app_id()</span> function. You can get the AlarmTarget <span style="font-family: Courier New,Courier,monospace">app_id</span> from the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. </p>
+<p>To identify which application to start when the alarm expires, the Alarm API needs the <code>app_control_h</code> handle.</p>
+<p>Obtain the <code>app_control_h</code> handle of a specific app by calling the <code>app_control_set_app_id()</code> function. You can get the AlarmTarget <code>app_id</code> from the <code>tizen-manifest.xml</code> file. </p>
<pre class="prettyprint">
bool
<li>
- <p>To schedule an alarm after a delay, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> function:</p>
+ <p>To schedule an alarm after a delay, use the <code>alarm_schedule_after_delay()</code> function:</p>
<pre class="prettyprint">
ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &alarm_id);
<li>
<p>Implement the AlarmTarget application:</p>
-<p>A scheduled alarm calls AlarmTarget's <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback when the alarm expires:</p>
+<p>A scheduled alarm calls AlarmTarget's <code>app_control_cb()</code> callback when the alarm expires:</p>
<pre class="prettyprint">
void
<h2 id="scenario_2" name="scenario_2">Setting an Alarm on a Specific Date</h2>
-<p>To schedule an alarm on a specific date, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_at_date()</span> function.</p>
-<p>The second parameter defines the time of the first active alarm. It can be defined using the <span style="font-family: Courier New,Courier,monospace">tm</span> struct included in the <span style="font-family: Courier New,Courier,monospace"><time.h></span> header file. The following table lists the selected <span style="font-family: Courier New,Courier,monospace">tm</span> fields.</p>
+<p>To schedule an alarm on a specific date, use the <code>alarm_schedule_at_date()</code> function.</p>
+<p>The second parameter defines the time of the first active alarm. It can be defined using the <code>tm</code> struct included in the <code><time.h></code> header file. The following table lists the selected <code>tm</code> fields.</p>
-<table>
- <caption>
- Table: tm fields
- </caption>
+<p align="center" class="Table"><strong>Table: tm fields</strong></p>
+<table>
<tbody>
<tr>
<th>Member</th>
<th>Range</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_sec</span></td>
+ <td><code>tm_sec</code></td>
<td>int</td>
<td>Seconds after the minute</td>
<td>0-61*</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_min</span></td>
+ <td><code>tm_min</code></td>
<td>int</td>
<td>Minutes after the hour</td>
<td>0-59</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_hour</span></td>
+ <td><code>tm_hour</code></td>
<td>int</td>
<td>Hours since midnight</td>
<td>0-23</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_mday</span></td>
+ <td><code>tm_mday</code></td>
<td>int</td>
<td>Day of the month</td>
<td>1-31</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_mon</span></td>
+ <td><code>tm_mon</code></td>
<td>int</td>
<td>Months since January</td>
<td>0-11</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tm_year</span></td>
+ <td><code>tm_year</code></td>
<td>int</td>
<td>Years since 1900</td>
<td></td>
</table>
-<p>The following code schedules an application control to invoke after 4 seconds (using the <span style="font-family: Courier New,Courier,monospace">date.tm_sec</span> member). Using, for example, <span style="font-family: Courier New,Courier,monospace">date.tm_mday</span>, can set the alarm to another day of the month. Since the third parameter is set to 0, the alarm is executed only once.</p>
+<p>The following code schedules an application control to invoke after 4 seconds (using the <code>date.tm_sec</code> member). Using, for example, <code>date.tm_mday</code>, can set the alarm to another day of the month. Since the third parameter is set to 0, the alarm is executed only once.</p>
<pre class="prettyprint">
struct tm date;
ret = alarm_get_current_time(&date);
ret = alarm_schedule_at_date(app, &date, 0, &alarm_id);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">alarm_schedule_at_date()</span> function has been deprecated since Tizen 2.4. Use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_once_at_date()</span> function instead.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The <code>alarm_schedule_at_date()</code> function has been deprecated since Tizen 2.4. Use the <code>alarm_schedule_once_at_date()</code> function instead.
+ </div>
<h2 id="scenario_3" name="scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</h2>
-<p>To schedule an alarm on a specific time of the day with a recurrence, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_with_recurrence_week_flag()</span> function.</p>
-<p>The third parameter defines the day of the week on which the alarm recurs. The value is defined with the <span style="font-family: Courier New,Courier,monospace">enum alarm_week_flag_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1<<3 | 1<<6</span>.</p>
+<p>To schedule an alarm on a specific time of the day with a recurrence, use the <code>alarm_schedule_with_recurrence_week_flag()</code> function.</p>
+<p>The third parameter defines the day of the week on which the alarm recurs. The value is defined with the <code>enum alarm_week_flag_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <code>ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</code>. The value can also be a binary, such as <code>1<<3 | 1<<6</code>.</p>
<p>The following code schedules an application control to invoke on TUESDAY and FRIDAY:</p>
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>
-<p>To list all scheduled alarms, use the <span style="font-family: Courier New,Courier,monospace">alarm_foreach_registered_alarm()</span> function.</p>
+<p>To list all scheduled alarms, use the <code>alarm_foreach_registered_alarm()</code> function.</p>
-<p>To cancel a specific scheduled alarm, use the <span style="font-family: Courier New,Courier,monospace">alarm_cancel()</span> function with the alarm ID. To cancel all alarms registered by the application, use the <span style="font-family: Courier New,Courier,monospace">alarm_cancel_all()</span> function.</p>
+<p>To cancel a specific scheduled alarm, use the <code>alarm_cancel()</code> function with the alarm ID. To cancel all alarms registered by the application, use the <code>alarm_cancel_all()</code> function.</p>
-<p>The following code implements the callback for the <span style="font-family: Courier New,Courier,monospace">alarm_foreach_registered_alarm()</span> function. It lists all registered alarms and alarm recurrence days. At the end of the function, the <span style="font-family: Courier New,Courier,monospace">alarm_cancel()</span> function is called to cancel every scheduled alarm.</p>
+<p>The following code implements the callback for the <code>alarm_foreach_registered_alarm()</code> function. It lists all registered alarms and alarm recurrence days. At the end of the function, the <code>alarm_cancel()</code> function is called to cancel every scheduled alarm.</p>
<pre class="prettyprint">
static bool
on_foreach_registered_alarm(int alarm_id, void *user_data)
/* 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) {
<p>The following figure illustrates the rule components and their relations.
</p>
-<p class="figure">Figure: Rule components</p>
-<p align="center"><img alt="Rule components" src="../../images/context_trigger_rule_components.png" width="350"/></p>
+<p align="center"><strong>Figure: Rule components</strong></p>
+<p align="center"><img alt="Rule components" src="../../images/context_trigger_rule_components.png"/></p>
<p>The main features of the Contextual Trigger API include:</p>
<li>Rule management
<p>Once a rule is composed and registered successfully into the system, a unique rule ID is assigned to it. You can use the rule ID to <a href="#manage_rule">enable, disable, or permanently remove the rule</a>.</p>
-<p class="figure">Figure: Rule states</p>
+<p align="center"><strong>Figure: Rule states</strong></p>
<p align="center"><img alt="Rule States" src="../../images/context_trigger_rule_states.png" /></p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- A rule can be enabled, disabled, or removed only by the owner application that composed and registered the rule.
- </td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ A rule can be enabled, disabled, or removed only by the owner application that composed and registered the rule.
+ </div>
</li>
<li>Rule retrieval
<p>You can <a href="#retrieve_rule">retrieve a list of enabled and disabled rule IDs</a> owned by your application.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you only need to monitor a fundamental system event, such as the USB connection status, to launch a service application, and no condition is required, use <a href="../app_management/efl_ui_app_n.htm#callback">event callbacks</a>. In these cases, using the event system instead of the contextual trigger is more efficient, as the contextual trigger runs a rule engine to manage state changes of multiple event and condition items simultaneously.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ If you only need to monitor a fundamental system event, such as the USB connection status, to launch a service application, and no condition is required, use <a href="../app_management/efl_ui_app_n.htm#callback">event callbacks</a>. In these cases, using the event system instead of the contextual trigger is more efficient, as the contextual trigger runs a rule engine to manage state changes of multiple event and condition items simultaneously.
+ </div>
<h2 id="event_and_condition" name="event_and_condition">Events and Conditions</h2>
<p>Defining an event or a condition can involve <a href="#comparison_attributes">attribute comparisons</a> and input option parameter settings. The following example illustrates how to formulate a simple rule of "at 10 PM, if the battery is not charging":</p>
-<ol><li>Create a rule handle. The first parameter (<span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>) denotes how to combine all condition entries.
+<ol><li>Create a rule handle. The first parameter (<code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code>) denotes how to combine all condition entries.
<pre class="prettyprint">
context_trigger_rule_h rule = NULL;
context_trigger_rule_create(CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &rule);
</pre></li>
<li>Define the event ("at 10 PM every day").
-<p>A <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_TIME</span> type event entry is created, and a key-value comparison of <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY == 1320</span> is set to the event.
+<p>A <code>CONTEXT_TRIGGER_EVENT_TIME</code> type event entry is created, and a key-value comparison of <code>CONTEXT_TRIGGER_TIME_OF_DAY == 1320</code> is set to the event.
</p>
<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></li>
<li>Formulate the condition statement ("battery is not charging") and add it to the rule handle.
-<p>In the condition entry of <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_BATTERY</span>, the comparison statement is defined as the equality check (<span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EQUAL_TO</span>) between the left operand (<span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_CHARGING</span>) and the right operand (<span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_FALSE</span>).</p>
+<p>In the condition entry of <code>CONTEXT_TRIGGER_CONDITION_BATTERY</code>, the comparison statement is defined as the equality check (<code>CONTEXT_TRIGGER_EQUAL_TO</code>) between the left operand (<code>CONTEXT_TRIGGER_IS_CHARGING</code>) and the right operand (<code>CONTEXT_TRIGGER_FALSE</code>).</p>
<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);
<h3 id="options" name="options">Options</h3>
-<p>Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using <
span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_PLACE</span>, the target place must be specified by its ID that can be retrieved using the <a href="../location_sensors/geofences_n.htm#manager">Geofence Manager</a>, as in the following example:</p>
+<p>Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using <
code>CONTEXT_TRIGGER_EVENT_PLACE</code>, the target place must be specified by its ID that can be retrieved using the <a href="../location_sensors/geofences_n.htm#manager">Geofence Manager</a>, as in the following example:</p>
<pre class="prettyprint">
int place_id;
/* 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);
-
-/* Composing a condition "if the sender's number is the most frequently communicated number" */
+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>
+<p align="center" class="Table"><strong>Table: Options keys and corresponding values</strong></p>
<table>
- <caption>Table: Options keys and corresponding values</caption>
<tbody>
<tr>
<th>Event or condition</th>
<th>Valid value</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_PLACE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_PLACE_ID</span></td>
+ <td><code>CONTEXT_TRIGGER_EVENT_PLACE</code></td>
+ <td><code>CONTEXT_TRIGGER_PLACE_ID</code></td>
<td>Integer</td>
<td>
Place ID. For more information, see the <a href="../location_sensors/geofences_n.htm">Geofences</a> guide.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_APP_ID</span></td>
+ <td><code>CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</code></td>
+ <td><code>CONTEXT_TRIGGER_APP_ID</code></td>
<td>String</td>
<td>Application ID</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_ADDRESS</span></td>
+ <td><code>CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</code></td>
+ <td><code>CONTEXT_TRIGGER_ADDRESS</code></td>
<td>String</td>
<td>Phone number</td>
</tr>
<tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">
- CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_MUSIC_PLAYBACK_FREQUENCY</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_VIDEO_PLAYBACK_FREQUENCY
- </span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY</span></td>
+ <td rowspan="2"><code>
+ CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</code></p>
+ <p><code>CONTEXT_TRIGGER_CONDITION_MUSIC_PLAYBACK_FREQUENCY</code></p>
+ <p><code>CONTEXT_TRIGGER_CONDITION_VIDEO_PLAYBACK_FREQUENCY
+ </code></p></td>
+ <td><code>CONTEXT_TRIGGER_TIME_OF_DAY</code></td>
<td>String</td>
<td>Time interval of the day. For example, "13-15" denotes "from 1 PM to 3 PM".</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_WEEK</span></td>
+ <td><code>CONTEXT_TRIGGER_DAY_OF_WEEK</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_MON, CONTEXT_TRIGGER_TUE, CONTEXT_TRIGGER_WED, CONTEXT_TRIGGER_THU, CONTEXT_TRIGGER_FRI,
CONTEXT_TRIGGER_SAT, CONTEXT_TRIGGER_SUN, CONTEXT_TRIGGER_WEEKDAY, CONTEXT_TRIGGER_WEEKEND
- </span></td>
+ </code></td>
</tr>
</tbody>
</table>
</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>
+ <li><code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code>
<p>It denotes logical "AND". It means "true only if all components are true".</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>
+ <li><code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code>
<p>It denotes logical "OR". It means "true if at least 1 component is true".</p>
</li>
</ul>
<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);
-
-/* Composing a rule "when the battery level becomes critical, if GPS AND Wi-Fi are enabled" */
+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,
+ if GPS AND Wi-Fi are enabled"
+*/
context_trigger_rule_h conjunction_rule;
context_trigger_rule_create(<span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>, &conjunction_rule);
context_trigger_rule_add_entry(conjunction_rule, battery_event);
context_trigger_rule_add_entry(conjunction_rule, wifi_condition);
context_trigger_rule_set_action_notification(conjunction_rule, ...);
-/* Composing a rule "when the battery level becomes critical, if GPS OR Wi-Fi is enabled" */
+/*
+ Composing a rule "when the battery level becomes critical,
+ if GPS OR Wi-Fi is enabled"
+*/
context_trigger_rule_h disjunction_rule;
context_trigger_rule_create(<span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>, &disjunction_rule);
context_trigger_rule_add_entry(disjunction_rule, battery_event);
<li>Combining attributes into an event or condition
-<p>Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_TIME</span> to define a rule "at 4 PM every Monday", the comparisons regarding the 2 attributes, <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY</span> and <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_WEEK</span> must be satisfied together.</p>
-<p>On the contrary, using <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_APP_USE_FREQUENCY</span>, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, both comparisons against <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RANK</span> and <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TOTAL_COUNT</span> must be connected by a logical disjunction.</p>
+<p>Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use <code>CONTEXT_TRIGGER_EVENT_TIME</code> to define a rule "at 4 PM every Monday", the comparisons regarding the 2 attributes, <code>CONTEXT_TRIGGER_TIME_OF_DAY</code> and <code>CONTEXT_TRIGGER_DAY_OF_WEEK</code> must be satisfied together.</p>
+<p>On the contrary, using <code>CONTEXT_TRIGGER_APP_USE_FREQUENCY</code>, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, both comparisons against <code>CONTEXT_TRIGGER_RANK</code> and <code>CONTEXT_TRIGGER_TOTAL_COUNT</code> must be connected by a logical disjunction.</p>
<p>The following example illustrates the cases described above:</p>
<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);
-
-/* 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_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, /* 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);
+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);
</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>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__TRIGGER__MODULE.html">Contextual Trigger</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><context_trigger.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__TRIGGER__MODULE.html">Contextual Trigger</a> API, include the <code><context_trigger.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <context_trigger.h>
</pre>
<p>To compose a rule:</p>
<ol>
<li>Create a rule for "Notify if the battery is not charging and either Wi-Fi or GPS is enabled when the battery level becomes too low".
-<p>Create a rule handle using the <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_create()</span> function. Because both Wi-Fi and GPS conditions need not be met at the same time, the rule must be created with the <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span> operator.</p>
+<p>Create a rule handle using the <code>context_trigger_rule_create()</code> function. Because both Wi-Fi and GPS conditions need not be met at the same time, the rule must be created with the <code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code> operator.</p>
<pre class="prettyprint">
context_trigger_rule_h rule = NULL;
context_trigger_rule_create(CONTEXT_TRIGGER_LOGICAL_DISJUNCTION, &rule);
</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>
<h2 id="create_event" name="create_event">Creating an Event</h2>
-<p>To create a <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_EVENT_BATTERY</span> event to detect battery level changes:</p>
+<p>To create a <code>CONTEXT_TRIGGER_EVENT_BATTERY</code> event to detect battery level changes:</p>
<ol>
<li>
-<p>Create an event handle using the <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_event_create()</span> function:</p>
+<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 <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_EVENT_BATTERY</span> event, 2 types of contextual states are provided: <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_LEVEL</span> and <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_IS_CHARGING</span>. Because the application wants to check both if the battery level becomes too low and if the battery is not charging, <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span> must be applied.</p>
+<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>
-<li>Add the attribute key with the <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_key()</span> function.
+<li>Add the attribute key with the <code>context_trigger_rule_entry_add_key()</code> function.
<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 <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_LEVEL</span> key must be added with the <span style="font-family: Courier New,Courier,monospace;">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span> logical operator.</p>
+<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>
<li>Add the comparison operators and values for the attribute key.
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_comparison_int()</span> or <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_comparison_string()</span> function, depending on the data type.</p>
+<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:
<p>To create conditions to check Wi-Fi and GPS states:</p>
<ol>
<li>
-<p>Create an event handle using the <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_condition_create()</span> function:</p>
+<p>Create an event handle using the <code>context_trigger_rule_condition_create()</code> function:</p>
<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 <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_key()</span> function to specify the comparison terms for each condition:
+<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 <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_comparison_int()</span>, <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add_string()</span>, or <span style="font-family: Courier New,Courier,monospace;">context_trigger_rule_entry_add()</span> function, depending on the data type.</p>
+ <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:
<p>To set an application launch request:</p>
<pre class="prettyprint">
app_control_h app;
-/* Create an application control handle and set the details, such as application ID and operation */
+/*
+ Create an application control handle and set the details,
+ such as application ID and operation
+*/
context_trigger_rule_set_action_app_control(rule, app);
</pre>
<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>
<ol>
<li>To register a rule:
<ol type="a">
-<li>Register the rule with the <span style="font-family: Courier New,Courier,monospace;">context_trigger_add_rule()</span> function and acquire the rule ID:
+<li>Register the rule with the <code>context_trigger_add_rule()</code> function and acquire the rule ID:
<pre class="prettyprint">
int rule_id;
context_trigger_add_rule(rule, &rule_id);
</li>
<li>To remove a rule:
-<p>When no longer needed, delete the rule with the <span style="font-family: Courier New,Courier,monospace;">context_trigger_remove_rule()</span> function. Only disabled rules can be deleted.</p>
+<p>When no longer needed, delete the rule with the <code>context_trigger_remove_rule()</code> function. Only disabled rules can be deleted.</p>
<pre class="prettyprint">
context_trigger_remove_rule(rule_id);
</pre>
<ul>
<li>For integer-type attributes:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EQUAL_TO</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_NOT_EQUAL_TO</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_GREATER_THAN</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LESS_THAN</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO</span></li>
+ <li><code>CONTEXT_TRIGGER_EQUAL_TO</code></li>
+ <li><code>CONTEXT_TRIGGER_NOT_EQUAL_TO</code></li>
+ <li><code>CONTEXT_TRIGGER_GREATER_THAN</code></li>
+ <li><code>CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO</code></li>
+ <li><code>CONTEXT_TRIGGER_LESS_THAN</code></li>
+ <li><code>CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO</code></li>
</ul>
</li>
<li>For string-type attributes:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EQUAL_TO</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_NOT_EQUAL_TO</span></li>
+ <li><code>CONTEXT_TRIGGER_EQUAL_TO</code></li>
+ <li><code>CONTEXT_TRIGGER_NOT_EQUAL_TO</code></li>
</ul>
</li>
</ul>
<p>The following table summarizes the corresponding comparison attribute keys, with respect to the event and condition items, and the valid right operands for each attribute key. For information on the necessary privileges for each item, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__TRIGGER__MODULE.html">Contextual Trigger</a> API.</p>
+
+<p align="center" class="Table"><strong>Table: Attribute keys and corresponding operands</strong></p>
<table>
- <caption>Table: Attribute keys and corresponding operands</caption>
<tbody>
<tr>
<th>Event or condition</th>
<th>Valid operands</th>
</tr>
<tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_TIME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY</span></td>
+ <td rowspan="2"><code>CONTEXT_TRIGGER_EVENT_TIME</code></td>
+ <td><code>CONTEXT_TRIGGER_TIME_OF_DAY</code></td>
<td>Integer</td>
<td>From 0 to 1439 (minute)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_WEEK</span></td>
+ <td><code>CONTEXT_TRIGGER_DAY_OF_WEEK</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_MON, CONTEXT_TRIGGER_TUE, CONTEXT_TRIGGER_WED, CONTEXT_TRIGGER_THU, CONTEXT_TRIGGER_FRI,
CONTEXT_TRIGGER_SAT, CONTEXT_TRIGGER_SUN, CONTEXT_TRIGGER_WEEKDAY, CONTEXT_TRIGGER_WEEKEND
- </span></td>
+ </code></td>
</tr>
<tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_TIME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY</span></td>
+ <td rowspan="3"><code>CONTEXT_TRIGGER_CONDITION_TIME</code></td>
+ <td><code>CONTEXT_TRIGGER_TIME_OF_DAY</code></td>
<td>Integer</td>
<td>From 0 to 1439 (minute)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_WEEK</span></td>
+ <td><code>CONTEXT_TRIGGER_DAY_OF_WEEK</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_MON, CONTEXT_TRIGGER_TUE, CONTEXT_TRIGGER_WED, CONTEXT_TRIGGER_THU, CONTEXT_TRIGGER_FRI,
CONTEXT_TRIGGER_SAT, CONTEXT_TRIGGER_SUN, CONTEXT_TRIGGER_WEEKDAY, CONTEXT_TRIGGER_WEEKEND
- </span></td>
+ </code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_MONTH</span></td>
+ <td><code>CONTEXT_TRIGGER_DAY_OF_MONTH</code></td>
<td>Integer</td>
<td>From 1 to 31</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_CHARGER</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_USB</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_CHARGER</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_USB</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_CONNECTED</span></td>
+ <td><code>CONTEXT_TRIGGER_EVENT_CHARGER</code>
+ <p><code>CONTEXT_TRIGGER_EVENT_USB</code></p>
+ <p><code>CONTEXT_TRIGGER_CONDITION_CHARGER</code></p>
+ <p><code>CONTEXT_TRIGGER_CONDITION_USB</code></p></td>
+ <td><code>CONTEXT_TRIGGER_IS_CONNECTED</code></td>
<td>Integer</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</span></td>
+ <td><code>CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</code></td>
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_BATTERY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_BATTERY</span></p>
+ <code>CONTEXT_TRIGGER_EVENT_BATTERY</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_BATTERY</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_LEVEL</span></td>
+ <td><code>CONTEXT_TRIGGER_LEVEL</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_EMPTY, CONTEXT_TRIGGER_CRITICAL, CONTEXT_TRIGGER_LOW, CONTEXT_TRIGGER_NORMAL, CONTEXT_TRIGGER_HIGH, CONTEXT_TRIGGER_FULL
- </span></td>
+ </code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_CHARGING</span></td>
+ <td><code>CONTEXT_TRIGGER_IS_CHARGING</code></td>
<td>Integer</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</span></td>
+ <td><code>CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</code></td>
</tr>
<tr>
<td>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_POWER_SAVING_MODE</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_POWER_SAVING_MODE</span></p>
+ <p><code>CONTEXT_TRIGGER_EVENT_POWER_SAVING_MODE</code></p>
+ <p><code>CONTEXT_TRIGGER_CONDITION_POWER_SAVING_MODE</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_ENABLED</span></td>
+ <td><code>CONTEXT_TRIGGER_IS_ENABLED</code></td>
<td>Integer</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</span></td>
+ <td><code>CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</code></td>
</tr>
<tr>
<td>
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_GPS</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_GPS</span></p>
+ <code>CONTEXT_TRIGGER_EVENT_GPS</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_GPS</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_STATE</span></td>
+ <td><code>CONTEXT_TRIGGER_STATE</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
- CONTEXT_TRIGGER_DISABLED, CONTEXT_TRIGGER_SEARCHING, CONTEXT_TRIGGER_CONNECTED</span></td>
+ <td><code>
+ CONTEXT_TRIGGER_DISABLED, CONTEXT_TRIGGER_SEARCHING, CONTEXT_TRIGGER_CONNECTED</code></td>
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_HEADPHONE</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_HEADPHONE</span></p>
+ <code>CONTEXT_TRIGGER_EVENT_HEADPHONE</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_HEADPHONE</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_CONNECTED</span></td>
+ <td><code>CONTEXT_TRIGGER_IS_CONNECTED</code></td>
<td>Integer</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</span></td>
+ <td><code>CONTEXT_TRIGGER_TRUE, CONTEXT_TRIGGER_FALSE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TYPE</span></td>
+ <td><code>CONTEXT_TRIGGER_TYPE</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_NORMAL, CONTEXT_TRIGGER_HEADSET, CONTEXT_TRIGGER_BLUETOOTH
- </span></td>
+ <td><code>CONTEXT_TRIGGER_NORMAL, CONTEXT_TRIGGER_HEADSET, CONTEXT_TRIGGER_BLUETOOTH
+ </code></td>
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_WIFI</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_WIFI</span></p>
+ <code>CONTEXT_TRIGGER_EVENT_WIFI</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_WIFI</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_STATE</span></td>
+ <td><code>CONTEXT_TRIGGER_STATE</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_DISABLED, CONTEXT_TRIGGER_CONNECTED, CONTEXT_TRIGGER_UNCONNECTED
- </span></td>
+ </code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_BSSID</span></td>
+ <td><code>CONTEXT_TRIGGER_BSSID</code></td>
<td>String</td>
<td>Wi-Fi BSSID</td>
</tr>
<tr>
<td rowspan="3">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_CALL</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_CALL</span></p>
+ <code>CONTEXT_TRIGGER_EVENT_CALL</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_CALL</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_STATE</span></td>
+ <td><code>CONTEXT_TRIGGER_STATE</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_IDLE, CONTEXT_TRIGGER_CONNECTING, CONTEXT_TRIGGER_CONNECTED
- </span></td>
+ </code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_MEDIUM</span></td>
+ <td><code>CONTEXT_TRIGGER_MEDIUM</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_VOICE, CONTEXT_TRIGGER_VIDEO</span></td>
+ <td><code>CONTEXT_TRIGGER_VOICE, CONTEXT_TRIGGER_VIDEO</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_ADDRESS</span></td>
+ <td><code>CONTEXT_TRIGGER_ADDRESS</code></td>
<td>String</td>
<td>Phone number</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_EMAIL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT</span></td>
+ <td><code>CONTEXT_TRIGGER_EVENT_EMAIL</code></td>
+ <td><code>CONTEXT_TRIGGER_EVENT</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RECEIVED, CONTEXT_TRIGGER_SENT</span></td>
+ <td><code>CONTEXT_TRIGGER_RECEIVED, CONTEXT_TRIGGER_SENT</code></td>
</tr>
<tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_MESSAGE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT</span></td>
+ <td rowspan="2"><code>CONTEXT_TRIGGER_EVENT_MESSAGE</code></td>
+ <td><code>CONTEXT_TRIGGER_EVENT</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RECEIVED</span></td>
+ <td><code>CONTEXT_TRIGGER_RECEIVED</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TYPE</span></td>
+ <td><code>CONTEXT_TRIGGER_TYPE</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_SMS, CONTEXT_TRIGGER_MMS</span></td>
+ <td><code>CONTEXT_TRIGGER_SMS, CONTEXT_TRIGGER_MMS</code></td>
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_ACTIVITY_STATIONARY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_ACTIVITY_WALKING</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_ACTIVITY_RUNNING</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_ACTIVITY_IN_VEHICLE</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT</span></td>
+ <code>CONTEXT_TRIGGER_EVENT_ACTIVITY_STATIONARY</code>
+ <p><code>CONTEXT_TRIGGER_EVENT_ACTIVITY_WALKING</code></p>
+ <p><code>CONTEXT_TRIGGER_EVENT_ACTIVITY_RUNNING</code></p>
+ <p><code>CONTEXT_TRIGGER_EVENT_ACTIVITY_IN_VEHICLE</code></p></td>
+ <td><code>CONTEXT_TRIGGER_EVENT</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DETECTED</span></td>
+ <td><code>CONTEXT_TRIGGER_DETECTED</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_ACCURACY</span></td>
+ <td><code>CONTEXT_TRIGGER_ACCURACY</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_TRIGGER_HIGH, CONTEXT_TRIGGER_NORMAL, CONTEXT_TRIGGER_LOW
- </span></td>
+ </code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_PLACE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT</span></td>
+ <td><code>CONTEXT_TRIGGER_EVENT_PLACE</code></td>
+ <td><code>CONTEXT_TRIGGER_EVENT</code></td>
<td>String</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IN, CONTEXT_TRIGGER_OUT</span></td>
+ <td><code>CONTEXT_TRIGGER_IN, CONTEXT_TRIGGER_OUT</code></td>
</tr>
<tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</span></p>
+ <td rowspan="2"><code>CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RANK</span></td>
+ <td><code>CONTEXT_TRIGGER_RANK</code></td>
<td>Integer</td>
<td>Positive integer</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TOTAL_COUNT</span></td>
+ <td><code>CONTEXT_TRIGGER_TOTAL_COUNT</code></td>
<td>Integer</td>
<td>Non-negative integer</td>
</tr>
<tr>
<td>
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_MUSIC_PLAYBACK_FREQUENCY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_VIDEO_PLAYBACK_FREQUENCY</span></p>
+ <code>CONTEXT_TRIGGER_CONDITION_MUSIC_PLAYBACK_FREQUENCY</code>
+ <p><code>CONTEXT_TRIGGER_CONDITION_VIDEO_PLAYBACK_FREQUENCY</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TOTAL_COUNT</span></td>
+ <td><code>CONTEXT_TRIGGER_TOTAL_COUNT</code></td>
<td>Integer</td>
<td>Non-negative integer</td>
</tr>
<li>Explicit launch:
<p>Explicit launch means that you launch a specific application with the application ID. When you <a href="#explicit">request an explicit launch</a>:</p>
<ul>
- <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not used to select an application for an explicit launch.
+ <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <code>APP_CONTROL_ERROR_APP_NOT_FOUND</code> result. Additional information (such as operation, URI, or MIME type) is not used to select an application for an explicit launch.
</li>
- <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>
+ <li>If the operation setting in the <code>app_control</code> handle is set to <code>APP_CONTROL_OPERATION_DEFAULT</code>, the application ID must be set. Otherwise the <code>APP_CONTROL_ERROR_INVALID_PARAMETER</code> result is returned.</li>
</ul>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Be careful when using the explicit launch, because if the target application does not exist in the device, you need to handle the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> error. If you want to launch any application that supports a certain operation, use the implicit launch.</td>
- </tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Be careful when using the explicit launch, because if the target application does not exist in the device, you need to handle the <code>APP_CONTROL_ERROR_APP_NOT_FOUND</code> error. If you want to launch any application that supports a certain operation, use the implicit launch.
+</div>
</li>
<li>Implicit launch
<p>Implicit launch means that you launch any application which matches the operation, URI (or scheme), or MIME type you need. When you <a href="#implicit">request an implicit launch</a>:</p>
</li>
</ul>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Since Tizen 2.4, application controls used to launch service applications outside the current package are not supported. Because of this, the service application is only allowed to be launched explicitly by the application in the same package. All service applications are excluded from matches of implicit launch requests.</td>
- </tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Since Tizen 2.4, application controls used to launch service applications outside the current package are not supported. Because of this, the service application is only allowed to be launched explicitly by the application in the same package. All service applications are excluded from matches of implicit launch requests.
+</div>
<h2 id="request">Launch Requests</h2>
-<p>To launch an application with the application control, you must create a launch request. You must create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle, and add to the handle the conditions for selecting the application to be launched. You can add the following information:</p>
+<p>To launch an application with the application control, you must create a launch request. You must create an <code>app_control</code> handle, and add to the handle the conditions for selecting the application to be launched. You can add the following information:</p>
<ul>
<li>Operation: Action to be performed by the launched application.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The operation name format is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/<verb></span>. You can also use the related macro name, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_<VERB></span>.
- <p>The macro name can only be used in the <span style="font-family: Courier New,Courier,monospace">.c</span> files, not in the <a href="#export_appcontrol">application manifest file for the application control export</a>.</p></td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The operation name format is <code>http://tizen.org/appcontrol/operation/<verb></code>. You can also use the related macro name, <code>APP_CONTROL_OPERATION_<VERB></code>.
+ <p>The macro name can only be used in the <code>.c</code> files, not in the <a href="#export_appcontrol">application manifest file for the application control export</a>.</p>
+</div>
+
<p>The operation is mandatory information for sending the launch request.</p>
</li>
<li>URI: Data itself to be performed.</li>
<p>An exception is applied to the URIs with a "file" scheme for the value. If the launch request URI contains an existing file path and no MIME types are supplied, the filters that have the MIME type of the given file path are also added to the results.</p>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- A filter (application) that expects to match with any form of URI and any type of MIME must use <span style="font-family: Courier New, Courier, monospace">'*'</span> and <span style="font-family: Courier New, Courier, monospace">*/*</span> in their application control information in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file, instead of leaving the value to <span style="font-family: Courier New, Courier, monospace">NULL</span>. Otherwise, the application is discarded by the platform when the application control is resolved.</td>
- </tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ A filter (application) that expects to match with any form of URI and any type of MIME must use <code>'*'</code> and <code>*/*</code> in their application control information in the <code>tizen-manifest.xml</code> file, instead of leaving the value to <code>NULL</code>. Otherwise, the application is discarded by the platform when the application control is resolved.
+</div>
</li>
<li>Unlike the operation, the URI and MIME types support wildcards on the filters. Detailed conditions for matches are:
<li>The URI match can be an exact, partial (scheme), or pattern match according to the value in the filters. URI filters are matched with the launch request if:
<ul>
<li>Both URIs are exactly the same.</li>
- <li>Launch request URI passes the test with a <span style="font-family: Courier New, Courier, monospace">glob()</span>-like function with the filter URI.</li>
+ <li>Launch request URI passes the test with a <code>glob()</code>-like function with the filter URI.</li>
<li>Scheme and host part of the URI in the launch request and filters are the same.</li>
<li>Scheme part of the URI in the launch request and filters is the same.</li>
</ul>
<ul>
<li>Both MIME types are exactly the same.</li>
<li>MIME type in the launch request and filters has the same type and '*' for the subtype.</li>
- <li>The filters have <span style="font-family: Courier New, Courier, monospace">*/*</span> for the MIME type.</li>
+ <li>The filters have <code>*/*</code> for the MIME type.</li>
</ul>
</li>
</ul>
<ul>
<li>Request:
<ul>
-<li>Operation: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
-<li>URI: <span style="font-family: Courier New,Courier,monospace">NULL</span></li>
-<li>MIME: <span style="font-family: Courier New,Courier,monospace">NULL</span></li>
+<li>Operation: <code>http://tizen.org/appcontrol/operation/view</code></li>
+<li>URI: <code>NULL</code></li>
+<li>MIME: <code>NULL</code></li>
</ul>
</li>
<li>Result (the reason for the failure is marked in <strong>bold</strong>):</li>
</ul>
+<p align="center" class="Table"><strong>Table: Scenario when only the operation is provided</strong></p>
<table>
- <caption>
- Table: Scenario when only the operation is provided
- </caption>
<tbody>
<tr>
<th>Filter ID</th>
</tr>
<tr>
<td>1</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/default</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><strong><code>http://tizen.org/appcontrol/operation/default</code></strong></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
<td>Fail</td>
</tr>
<tr>
<td>3</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">file</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><strong><code>file</code></strong></td>
+ <td><code>NULL</code></td>
<td>Fail</td>
</tr>
</tbody>
<ul>
<li>Request:
<ul>
-<li>Operation: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
-<li>URI: <span style="font-family: Courier New,Courier,monospace">file:///usr/share/icons/calendar.png</span></li>
-<li>MIME: <span style="font-family: Courier New,Courier,monospace">NULL</span></li>
+<li>Operation: <code>http://tizen.org/appcontrol/operation/view</code></li>
+<li>URI: <code>file:///usr/share/icons/calendar.png</code></li>
+<li>MIME: <code>NULL</code></li>
</ul>
</li>
<li>Result (the reason for the failure is marked in <strong>bold</strong>):</li>
</ul>
+<p align="center" class="Table"><strong>Table: Scenario when the operation and URI are provided</strong></p>
<table>
- <caption>
- Table: Scenario when the operation and URI are provided
- </caption>
<tbody>
<tr>
<th>Filter ID</th>
</tr>
<tr>
<td>1</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">NULL</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><strong><code>NULL</code></strong></td>
+ <td><code>NULL</code></td>
<td>Fail</td>
</tr>
<tr>
<td>2</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">file:///usr/share/icons/calendar.png</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>file:///usr/share/icons/calendar.png</code></td>
+ <td><code>*/*</code></td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">file:///*</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>file:///*</code></td>
+ <td><code>*/*</code></td>
<td>Pass</td>
</tr>
<tr>
<td>4</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>file</code></td>
+ <td><code>*/*</code></td>
<td>Pass</td>
</tr>
<tr>
<td>5</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">http</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><strong><code>http</code></strong></td>
+ <td><code>*/*</code></td>
<td>Fail</td>
</tr>
<tr>
<td>6</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><code>image/png</code></td>
<td>Pass</td>
</tr>
<tr>
<td>7</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">image/jpg</span></strong></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><strong><code>image/jpg</code></strong></td>
<td>Fail</td>
</tr>
</tbody>
<ul>
<li>Request:
<ul>
- <li>Operation: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
- <li>URI: <span style="font-family: Courier New,Courier,monospace">NULL</span></li>
- <li>MIME: <span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+ <li>Operation: <code>http://tizen.org/appcontrol/operation/view</code></li>
+ <li>URI: <code>NULL</code></li>
+ <li>MIME: <code>image/png</code></li>
</ul>
</li>
<li>Result (the reason for the failure is marked in <strong>bold</strong>):</li>
</ul>
+<p align="center" class="Table"><strong>Table: Scenario when the operation and MIME type are provided</strong></p>
<table>
- <caption>
- Table: Scenario when the operation and MIME type are provided
- </caption>
<tbody>
<tr>
<th>Filter ID</th>
</tr>
<tr>
<td>1</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><code>image/png</code></td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><code>image/*</code></td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><code>*/*</code></td>
<td>Pass</td>
</tr>
<tr>
<td>4</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">file:///usr/share/icons/calendar.png</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">NULL</span></strong></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>file:///usr/share/icons/calendar.png</code></td>
+ <td><strong><code>NULL</code></strong></td>
<td>Fail</td>
</tr>
<tr>
<td>5</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">image/jpg</span></strong></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><strong><code>image/jpg</code></strong></td>
<td>Fail</td>
</tr>
<tr>
<td>6</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">video/*</span></strong></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>NULL</code></td>
+ <td><strong><code>video/*</code></strong></td>
<td>Fail</td>
</tr>
<tr>
<td>7</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">http://tizen.org/favorites.png</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><strong><code>http://tizen.org/favorites.png</code></strong></td>
+ <td><code>image/png</code></td>
<td>Fail</td>
</tr>
</tbody>
<ul>
<li>Request:
<ul>
- <li>Operation: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
- <li>URI: <span style="font-family: Courier New,Courier,monospace">http://www.tizen.org/favorites.png</span></li>
- <li>MIME: <span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+ <li>Operation: <code>http://tizen.org/appcontrol/operation/view</code></li>
+ <li>URI: <code>http://www.tizen.org/favorites.png</code></li>
+ <li>MIME: <code>image/png</code></li>
</ul>
</li>
<li>Result (the reason for the failure is marked in <strong>bold</strong>):</li>
</ul>
+<p align="center" class="Table"><strong>Table: Scenario when the operation, URI, and MIME type are provided</strong></p>
<table>
- <caption>
- Table: Scenario when the operation, URI, and MIME type are provided
- </caption>
<tbody>
<tr>
<th>Filter ID</th>
</tr>
<tr>
<td>1</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">http://www.tizen.org/favorites.png</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>http://www.tizen.org/favorites.png</code></td>
+ <td><code>image/png</code></td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">http://www.tizen.org/favorites.png</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">NULL</span></strong></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>http://www.tizen.org/favorites.png</code></td>
+ <td><strong><code>NULL</code></strong></td>
<td>Fail</td>
</tr>
<tr>
<td>3</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">http://www.tizen.org/*</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>http://www.tizen.org/*</code></td>
+ <td><code>image/png</code></td>
<td>Pass</td>
</tr>
<tr>
<td>4</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">http</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>http</code></td>
+ <td><code>image/png</code></td>
<td>Pass</td>
</tr>
<tr>
<td>5</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><strong><span style="font-family: Courier New,Courier,monospace">NULL</span></strong></td>
- <td><span style="font-family: Courier New,Courier,monospace">image/png</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><strong><code>NULL</code></strong></td>
+ <td><code>image/png</code></td>
<td>Fail</td>
</tr>
<tr>
<td>6</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">*/*</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/view</code></td>
+ <td><code>*</code></td>
+ <td><code>*/*</code></td>
<td>Pass</td>
</tr>
</tbody>
<p>Regardless of the launch request type, when the application launcher framework has received and resolved a launch request, it starts the application by creating a new process and calling the entry point of the application:</p>
<ol>
-<li>Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:
+<li>Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <code>ui_app_main()</code> function:
<pre class="prettyprint">
bool
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop.
-<p>It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
+<li>The <code>ui_app_main()</code> function initializes the application and starts the main loop.
+<p>It takes 4 parameters and uses them to initialize the application. The <code>argc</code> and <code>argv</code> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state, and must initialize itself. During this transition, the application framework calls the application's <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.
-<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>
+<li>When the <code>ui_app_main()</code> is first invoked, the application moves from the ready state to the created state, and must initialize itself. During this transition, the application framework calls the application's <code>app_create_cb()</code> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.
+<p>If the <code>app_create_cb()</code> callback function returns <code>false</code>, the application moves to the terminated state. If it returns <code>true</code>, the application enters the main loop.</p>
</li>
-<li>Just after the application enters the main loop, the application framework calls the application's <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback.
+<li>Just after the application enters the main loop, the application framework calls the application's <code>app_control_cb()</code> callback.
-<p>The callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. The application is always responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle can be empty, if the application is launched by the user from the launcher.</p>
+<p>The callback is passed to the <code>app_control</code> handle containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. The application is always responsible for checking the content of the <code>app_control</code> handle and responding appropriately. The content of the <code>app_control</code> handle can be empty, if the application is launched by the user from the launcher.</p>
-<p>If the application wants to return the result of the application control operation to the application that originally sent the launch request, the result can be sent with the <span style="font-family: Courier New,Courier,monospace">app_control_reply_to_launch_request()</span> function.</p>
+<p>If the application wants to return the result of the application control operation to the application that originally sent the launch request, the result can be sent with the <code>app_control_reply_to_launch_request()</code> function.</p>
<pre class="prettyprint">
static void
app_control_create(&reply);
app_get_app_id(&app_id);
-
/* 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);
}
<p>After the requested application (callee) has been launched and the launched application has performed the requested operation, the results of the operation are delivered back to the application that sent the original launch request (caller).</p>
-<p>The following code example requests the launch of another application by setting the <span style="font-family: Courier New,Courier,monospace">app_control_result</span> callback to get the launch result:</p>
+<p>The following code example requests the launch of another application by setting the <code>app_control_result</code> callback to get the launch result:</p>
<pre class="prettyprint">
#include <app.h>
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.");
app_control_destroy(app_control);
</pre>
-<p>The results are delivered in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App Control API provides predefined extra data keys. If the key you need is not predefined, you can create your own key. However, the customized key must be shared between the caller and callee applications.</p>
+<p>The results are delivered in the <code>app_control</code> handle with extra data. For some cases, the App Control API provides predefined extra data keys. If the key you need is not predefined, you can create your own key. However, the customized key must be shared between the caller and callee applications.</p>
-<p>The following example shows how you can retrieve the results of the launch request and requested operation by implementing the <span style="font-family: Courier New,Courier,monospace">app_control_result</span> callback:</p>
+<p>The following example shows how you can retrieve the results of the launch request and requested operation by implementing the <code>app_control_result</code> callback:</p>
<pre class="prettyprint">
#include <app.h>
#include <dlog.h>
/* 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 {
<h2 id="export_appcontrol" name="export_appcontrol">Application Control Export</h2>
-<p>You can allow other applications to launch your application and use your application features through application controls by exporting your application control functionalities. To allow other applications to launch your application implicitly without the application ID, declare your application control information in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file:</p>
+<p>You can allow other applications to launch your application and use your application features through application controls by exporting your application control functionalities. To allow other applications to launch your application implicitly without the application ID, declare your application control information in the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<app-control>
<mime name="application/xhtml+xml"/>
</app-control>
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the application manifest file, the valid operation name format is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/<verb></span>. You cannot use the related macro name, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_<VERB></span>.</td>
- </tr>
- </tbody>
- </table>
-<p>The operation, URI, and MIME type information is used when <a href="resolution">resolving the application control</a>. The operation information is mandatory, while the URI or MIME type information is optional. Any application requesting a launch of your application must either specify your application ID (for an explicit launch) or have the same operation value and applicable URI and MIME type information (for an implicit launch).</p>
+<div class="note">
+ <strong>Note</strong>
+ In the application manifest file, the valid operation name format is <code>http://tizen.org/appcontrol/operation/<verb></code>. You cannot use the related macro name, <code>APP_CONTROL_OPERATION_<VERB></code>.
+</div>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The URI or MIME type can contain wildcards, such as '*', to match against given conditions in the app control:
- <ul><li>In the MIME type, you can use 2 types of wildcards: <span style="font-family: Courier New, Courier, monospace">image/*</span> and <span style="font-family: Courier New, Courier, monospace">*/*</span>.</li>
- <li>In the URI, a more complex pattern of wildcards with similar semantics as the standard <span style="font-family: Courier New, Courier, monospace">glob()</span> function is available: '*' matches an arbitrary, possibly empty, string, and '?' matches an arbitrary character. Unlike in the <span style="font-family: Courier New, Courier, monospace">glob()</span> function, the '/' character can be matched by the wildcards. There are no [...] character ranges, and the wildcards '*' and '?' cannot be escaped to include them literally in a pattern.</li></ul></td>
- </tr>
-</tbody>
-</table>
+<p>The operation, URI, and MIME type information is used when <a href="#resolution">resolving the application control</a>. The operation information is mandatory, while the URI or MIME type information is optional. Any application requesting a launch of your application must either specify your application ID (for an explicit launch) or have the same operation value and applicable URI and MIME type information (for an implicit launch).</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The URI or MIME type can contain wildcards, such as '*', to match against given conditions in the app control:
+ <ul><li>In the MIME type, you can use 2 types of wildcards: <code>image/*</code> and <code>*/*</code>.</li>
+ <li>In the URI, a more complex pattern of wildcards with similar semantics as the standard <code>glob()</code> function is available: '*' matches an arbitrary, possibly empty, string, and '?' matches an arbitrary character. Unlike in the <code>glob()</code> function, the '/' character can be matched by the wildcards. There are no [...] character ranges, and the wildcards '*' and '?' cannot be escaped to include them literally in a pattern.</li></ul>
+</div>
<p>You can specify the application control information of your application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
<p>When an application is launched through an app control, its launch mode defines its behavior:</p>
<ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>
<li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>
- <p>You can set the application launch mode <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute of the <span style="font-family: Courier New,Courier,monospace"><ui-application></span> element. If the launch mode is set to <span style="font-family: Courier New,Courier,monospace">caller</span>, the application that calls the app control can define the launch mode for the called application using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. However, if the called application has set its launch mode in its manifest file to <span style="font-family: Courier New,Courier,monospace">single</span>, that setting overrides the caller application's launch mode request.</p>
+ <p>You can set the application launch mode <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <code>launch_mode</code> attribute of the <code><ui-application></code> element. If the launch mode is set to <code>caller</code>, the application that calls the app control can define the launch mode for the called application using the <code>app_control_set_launch_mode()</code> function. However, if the called application has set its launch mode in its manifest file to <code>single</code>, that setting overrides the caller application's launch mode request.</p>
</li>
<li>Managing the application group
<p>Applications in a same group act as if they are in 1 stack. For example, if application A wants to send an email using email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
<p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
- <p class="figure">Figure: Group behavior</p>
+<p align="center"><strong>Figure: Group behavior</strong></p>
<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p>
</li>
<p>To enable your application to use the application control functionality:</p>
<ol>
<li>
-<p>To use the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/appmanager.launch</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the App Control API, include the <span style="font-family: Courier New,Courier,monospace"><app_control.h></span> header file in your application:</p>
+<p>To use the functions and data types of the App Control API, include the <code><app_control.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app_control.h>
</pre>
</pre>
</li>
<li>
-<p>When the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance is created, set the operation and MIME type. In this example, the <span style="font-family: Courier New,Courier,monospace">app_control</span> launches an application which has the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation and the <span style="font-family: Courier New,Courier,monospace">image/jpeg</span> MIME type.</p>
-<p>The operation is mandatory information for the launch request. If the operation is not specified, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span> is used for the launch request.</p>
+<p>When the <code>app_control</code> instance is created, set the operation and MIME type. In this example, the <code>app_control</code> launches an application which has the <code>APP_CONTROL_OPERATION_VIEW</code> operation and the <code>image/jpeg</code> MIME type.</p>
+<p>The operation is mandatory information for the launch request. If the operation is not specified, <code>APP_CONTROL_OPERATION_DEFAULT</code> is used for the launch request.</p>
<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)
<p>For more information on the common application services and the extra data related to them, see <a href="common_appcontrol_n.htm">Common Application Controls</a>.</p>
</li>
<li>
-<p>Add extra data to the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance using the <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data()</span> or <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data_array()</span> function. In this example, a message is added as extra data:</p>
+<p>Add extra data to the <code>app_control</code> instance using the <code>app_control_add_extra_data()</code> or <code>app_control_add_extra_data_array()</code> function. In this example, a message is added as extra data:</p>
<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>
-<p>Launch the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function:</p>
+<p>Launch the <code>app_control</code> instance using the <code>app_control_send_launch_request()</code> function:</p>
<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Since Tizen 2.4, service applications are only allowed to be launched explicitly and the caller must be an application in the same package. Otherwise, the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance returns an error.</td>
- </tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Since Tizen 2.4, service applications are only allowed to be launched explicitly and the caller must be an application in the same package. Otherwise, the <code>app_control</code> instance returns an error.
+</div>
</li>
<li>
- <p>In the launched application, read the extra data set to the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance using the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_extra_data()</span> function. The same function can be used in the original application to read the reply message, when the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> instance is returned by the <span style="font-family: Courier New,Courier,monospace">app_control</span> reply.</p>
+ <p>In the launched application, read the extra data set to the <code>app_control</code> instance using the <code>app_control_foreach_extra_data()</code> function. The same function can be used in the original application to read the reply message, when the <code>app_control_h</code> instance is returned by the <code>app_control</code> reply.</p>
<pre class="prettyprint">
bool
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>
<li>
<p>When your work with the application control is finished, clean up.
- To do this, pass the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle to the
- <span style="font-family: Courier New,Courier,monospace">app_control_destroy()</span> function.</p>
+ To do this, pass the <code>app_control</code> handle to the
+ <code>app_control_destroy()</code> function.</p>
<pre class="prettyprint">
ret = app_control_destroy(app);
if (ret != APP_CONTROL_ERROR_NONE)
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);
}</pre></li>
<li>When the button is clicked, use an application control to launch the sub application.
-<p>Define the launch mode for the application to be called using the <
span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. The second parameter defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_launch_mode_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html#gadf26b03f2f6b18acba4a946e7eb7b31c">mobile</a> applications).</p>
+<p>Define the launch mode for the application to be called using the <
code>app_control_set_launch_mode()</code> function. The second parameter defines the launch mode with the <code>app_control_launch_mode_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html#gadf26b03f2f6b18acba4a946e7eb7b31c">mobile</a> applications).</p>
<pre class="prettyprint">
static void
button_click_cb(void *data, Evas_Object *obj, void *event_info)
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>You can <a href="#create">create a badge for an application</a> and remove it.</p></li>
<li>Managing the badge
<p>You can <a href="#manage">get and set the count and display attributes for the badge</a>.</p></li>
- <li>Adding a shortcut
+ <li>Adding a shortcut <strong>in mobile applications only</strong>
<p>You can <a href="#add">add a shortcut</a> to the home screen to launch an application.</p></li>
- <li>Adding a widget
+ <li>Adding a widget <strong>in mobile applications only</strong>
<p>If you have created a widget application, you can <a href="#add_widget">add the widget</a> to the home screen.</p></li>
</ul>
- <p class="figure">Figure: Badges and shortcuts</p>
+ <p align="center"><strong>Figure: Badges and shortcuts</strong></p>
<p align="center"><img alt="Shortcuts" src="../../images/shortcut.png" /> <img alt="Badges" src="../../images/badge.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<ul>
<li>To handle badges:
<ol><li>
-<p>To use the Badge API (in <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Badge API (in <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/notification</privilege>
</privileges>
</pre>
</li>
-<li><p>To use the functions and data types of the Badge API, include the <span style="font-family: Courier New,Courier,monospace"><badge.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Badge API, include the <code><badge.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>
#include <badge.h>
</pre>
-<p>To ensure that a Badge function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace">BADGE_ERROR_NONE</span>.</p>
+<p>To ensure that a Badge function has been executed properly, make sure that the return is equal to <code>BADGE_ERROR_NONE</code>.</p>
</li>
<li>Declare the variables for the return value and application (package name):
</li>
<li>To handle shortcuts:
<ol>
-<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:
+<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/shortcut</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the Shortcut API, include the <span style="font-family: Courier New,Courier,monospace"><shortcut_manager.h></span> header file in your application:
+<li>To use the functions and data types of the Shortcut API, include the <code><shortcut_manager.h></code> header file in your application:
<pre class="prettyprint">
#include <shortcut_manager.h>
</pre>
<p>To create and remove badges:</p>
<ul><li>
-<p>To create a badge for an application, call the <span style="font-family: Courier New,Courier,monospace">badge_add()</span> function. The parameter defines the application for which the badge is added. If the application is adding a badge for itself, the parameter can be null.</p>
+<p>To create a badge for an application, call the <code>badge_add()</code> function. The parameter defines the application for which the badge is added. If the application is adding a badge for itself, the parameter can be null.</p>
<pre class="prettyprint">
ret = badge_add(TEST_PKG);
/* Error handling */
</pre>
<p>The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other's badges.</p>
-<p>If an application not signed with the same certificate must be allowed <a href="#manage">manage a badge</a>, use the <span style="font-family: Courier New,Courier,monospace">badge_add()</span> function with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
+<p>If an application not signed with the same certificate must be allowed <a href="#manage">manage a badge</a>, use the <code>badge_add()</code> function with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
</li>
<li>
-<p>To remove the badge from the application, call the <span style="font-family: Courier New,Courier,monospace">badge_remove()</span> function. The only parameter is the ID of the application whose badge to remove.</p>
+<p>To remove the badge from the application, call the <code>badge_remove()</code> function. The only parameter is the ID of the application whose badge to remove.</p>
<pre class="prettyprint">
ret = badge_remove(TEST_PKG);
<p>To manage the badge:</p>
<ul>
-<li>Get the count attribute with the <span style="font-family: Courier New,Courier,monospace">badge_get_count()</span> function. The count attribute is displayed in the right corner of the badge and its value must be an integer.
+<li>Get the count attribute with the <code>badge_get_count()</code> function. The count attribute is displayed in the right corner of the badge and its value must be an integer.
<p>The parameters are the name of the application whose badge count is retrieved, and the current badge count.</p>
<pre class="prettyprint">
unsigned int count = 0;
</pre>
</li>
-<li>Set the count attribute with the <span style="font-family: Courier New,Courier,monospace">badge_set_count()</span> function.
+<li>Set the count attribute with the <code>badge_set_count()</code> function.
<p>The parameters are the name of the application whose badge count is updated, and the new badge count.</p>
<pre class="prettyprint">
ret = badge_set_count(TEST_PKG, count+1);
/* Error handling */
</pre>
</li>
-<li>Get the display attribute and check whether the badge is visible with the <span style="font-family: Courier New,Courier,monospace">badge_get_display()</span> function.
+<li>Get the display attribute and check whether the badge is visible with the <code>badge_get_display()</code> function.
<p>The parameters are the application which owns the badge, and the value of the display attribute (1 = badge is visible, 0 = badge is hidden).</p>
<pre class="prettyprint">
unsigned int is_displayed = false;
/* Error handling */
</pre>
</li>
-<li>Set the display attribute with the <span style="font-family: Courier New,Courier,monospace">badge_set_display()</span> function to hide or show the badge.
+<li>Set the display attribute with the <code>badge_set_display()</code> function to hide or show the badge.
<p>The parameters are the application which owns the badge, and the display attribute (1 = badge is visible, 0 = badge is hidden).</p>
<pre class="prettyprint">
ret = badge_set_display(TEST_PKG, 1);
<p>To add a shortcut to the home screen:</p>
<ol>
-<li><p>Add a shortcut using the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
+<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 <span style="font-family: Courier New,Courier,monospace">NULL</span> to add a default icon for the application.</p>
+<p>The third parameter can be set to <code>NULL</code> to add a default icon for the application.</p>
<p>The shortcut type is defined in the second parameter:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">LAUNCH_BY_APP</span>: Creates a shortcut to launch an application by a given application ID. </li>
-<li><span style="font-family: Courier New,Courier,monospace">LAUNCH_BY_URI</span>: Creates a shortcut to launch an application by a given URI. The URI is passed to the <span style="font-family: Courier New,Courier,monospace">app_control_set_uri()</span> function. For example, if you want to create a shortcut to open an image file, set the URI as <span style="font-family: Courier New,Courier,monospace">file:///home/myhome/Photos/1_photo.jpg</span>.</li>
+<li><code>LAUNCH_BY_APP</code>: Creates a shortcut to launch an application by a given application ID. </li>
+<li><code>LAUNCH_BY_URI</code>: Creates a shortcut to launch an application by a given URI. The URI is passed to the <code>app_control_set_uri()</code> function. For example, if you want to create a shortcut to open an image file, set the URI as <code>file:///home/myhome/Photos/1_photo.jpg</code>.</li>
</ul>
</li>
<ol>
<li><p>Before adding a widget on the home screen, a widget application must be prepared. For more information on creating a widget application, see the <a href="widget_app_n.htm">Widget Application</a> guide.</p></li>
-<li><p>Add a widget with the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home_widget()</span> function:</p>
+<li><p>Add a widget with the <code>shortcut_add_to_home_widget()</code> function:</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>
<p>Tizen provides various application models to allow you to create applications targeted for specific tasks. You can create UI applications to run on the foreground, and service applications to run on the background. You can also create specific applications to function as the watch face for the device clock, or as a widget available on the home screen.</p></li>
-<li><a href="app_resources_n.htm">Application Resources</a> <strong>in mobile applications only</strong>
+<li><a href="app_resources_n.htm">Application Resources</a>
<p>You can define different resources for the application to be used based on the device in which the application is run. Efficient resource management allows you to create an application that can be run in various devices with different configurations, such as screen sizes.</p></li>
<p>You can retrieve information about the packages installed on the device. You can also monitor the changes in the device packages.</p></li>
-<li><a href="event_n.htm">Event Broadcast and Subscription</a> <strong>in mobile applications only</strong>
+<li><a href="event_n.htm">Event Broadcast and Subscription</a>
<p>You can use events to advertise your application activities, or listen to events from other applications or the system. You can broadcast events from your application to all who want to listen. You can also subscribe to events to keep track of what is happening in the system or other applications.</p></li>
</ul>
<p>The main features of the Application Manager API include:</p>
<ul>
<li>Managing the application context
-<p>You can retrieve the application context and operate on it. The <
span style="font-family: Courier New,Courier,monospace">app_context_h</span> handle is related to the running applications and can be used to <a href="#manage_context">manage the application context</a>.</p>
-<p>For more information on the functions that use the <
span style="font-family: Courier New,Courier,monospace">app_context_h</span> handle, see the Application Context API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTEXT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTEXT__MODULE.html">wearable</a> applications).</p></li>
+<p>You can retrieve the application context and operate on it. The <
code>app_context_h</code> handle is related to the running applications and can be used to <a href="#manage_context">manage the application context</a>.</p>
+<p>For more information on the functions that use the <
code>app_context_h</code> handle, see the Application Context API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTEXT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTEXT__MODULE.html">wearable</a> applications).</p></li>
<li>Getting information on filtered applications
-<p>The <span style="font-family: Courier New,Courier,monospace">app_info_h</span> handle is related to the available applications (installed, but not necessarily running). To <a href="#filter">retrieve information on applications through a filter</a>, you can also use the <span style="font-family: Courier New,Courier,monospace">app_info_filter_h</span> handle.</p>
-<p>For more information on the functions that use the <
span style="font-family: Courier New,Courier,monospace">app_info_h</span> and <span style="font-family: Courier New,Courier,monospace">app_info_filter_h</span> handles, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p>
+<p>The <code>app_info_h</code> handle is related to the available applications (installed, but not necessarily running). To <a href="#filter">retrieve information on applications through a filter</a>, you can also use the <code>app_info_filter_h</code> handle.</p>
+<p>For more information on the functions that use the <
code>app_info_h</code> and <code>app_info_filter_h</code> handles, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p>
</li>
</ul>
-<p>Iterator functions are used to travel through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and the <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb()</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb()</span>), passing the handle for each application.</p>
+<p>Iterator functions are used to travel through a list of applications. The <code>app_manager_foreach_app_context()</code> function is used in running applications and the <code>app_manager_foreach_app_info()</code> function is used in available applications. Each function calls a callback function (<code>app_manager_app_context_cb()</code> or <code>app_manager_app_info_cb()</code>), passing the handle for each application.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Application Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><app_manager.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Application Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">wearable</a> applications), include the <code><app_manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app_manager.h>
</pre>
<p>To get the running application context and its details, and to operate on the context:</p>
<ol>
-<li>Get the context of the currently running application with the <span style="font-family: Courier New,Courier,monospace">app_manager_get_app_context()</span> function. Its parameters are the ID of the application from which the context is being obtained, and the handle (<span style="font-family: Courier New,Courier,monospace">app_context_h*</span>) to the application context which is filled with the received context.
+<li>Get the context of the currently running application with the <code>app_manager_get_app_context()</code> function. Its parameters are the ID of the application from which the context is being obtained, and the handle (<code>app_context_h*</code>) to the application context which is filled with the received context.
<p>When an application is not running, it is impossible to get its context.</p>
int ret = app_manager_get_app_context(Your App ID, &app_context);
</pre>
-<p>If the function returns <span style="font-family: Courier New,Courier,monospace">APP_MANAGER_ERROR_NONE</span>, it has executed correctly and the <span style="font-family: Courier New,Courier,monospace">app_context</span> variable now contains the handle to the defined application context.</p></li>
+<p>If the function returns <code>APP_MANAGER_ERROR_NONE</code>, it has executed correctly and the <code>app_context</code> variable now contains the handle to the defined application context.</p></li>
<li>Operate on the context:
<ul>
ret = app_context_get_pid(app_context, &pid);
</pre>
-<p>When <span style="font-family: Courier New,Courier,monospace">app_id</span> is no longer needed, release it using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p></li>
+<p>When <code>app_id</code> is no longer needed, release it using the <code>free()</code> function.</p></li>
<li><p>Check whether the application with the given application context is terminated:</p>
<pre class="prettyprint">
/* Contexts are not equal */
</pre></li>
</ul></li>
-<li><p>When you no longer need the application context, call the <span style="font-family: Courier New,Courier,monospace">app_context_destroy()</span> function to remove the handle and release all resources to prevent memory leaks:</p>
+<li><p>When you no longer need the application context, call the <code>app_context_destroy()</code> function to remove the handle and release all resources to prevent memory leaks:</p>
<pre class="prettyprint">
if (app_context) {
<p>To get information on filtered applications:</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">app_info_filter_h</span> handle using the <span style="font-family: Courier New,Courier,monospace">app_info_filter_create()</span> function:
+<li>Create the <code>app_info_filter_h</code> handle using the <code>app_info_filter_create()</code> function:
<pre class="prettyprint">
app_info_filter_h app_info_filter = NULL;
ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, "capp");
</pre></li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">app_info_filter_foreach_appinfo()</span> function and use its callback to retrieve all filtered applications and print their information:
+<li>Call the <code>app_info_filter_foreach_appinfo()</code> function and use its callback to retrieve all filtered applications and print their information:
<pre class="prettyprint">
bool
if (ret != APP_MANAGER_ERROR_NONE)
dlog_print(DLOG_ERROR, TAG, "foreach_app_info_filter error: %d", ret);
</pre></li>
-<li>When you no longer need the filter, call the <span style="font-family: Courier New,Courier,monospace">app_info_filter_destroy()</span> function to remove the handle and release all resources:
+<li>When you no longer need the filter, call the <code>app_info_filter_destroy()</code> function to remove the handle and release all resources:
<pre class="prettyprint">
if (app_info_filter_h) {
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Preference API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app_preference.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Preference API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications), include the <code><app_preference.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app_preference.h>
</pre>
<li>To store and retrieve simple type variables:
<p>To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">preference_set_int()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_set_double()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_set_boolean()</span></li></ul>
+<ul><li><code>preference_set_int()</code></li>
+<li><code>preference_set_double()</code></li>
+<li><code>preference_set_boolean()</code></li></ul>
-<p>Before storing or retrieving a variable, check whether it exists using the <span style="font-family: Courier New,Courier,monospace">preference_is_existing()</span> function.</p>
+<p>Before storing or retrieving a variable, check whether it exists using the <code>preference_is_existing()</code> function.</p>
<p>Use the following functions to retrieve a stored variable of a given simple type:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">preference_get_int()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_get_double()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_get_boolean()</span></li></ul>
+<ul><li><code>preference_get_int()</code></li>
+<li><code>preference_get_double()</code></li>
+<li><code>preference_get_boolean()</code></li></ul>
<pre class="prettyprint">
<li>To store and retrieve string variables, use the following functions:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">preference_set_string()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">preference_get_string()</span></li>
+ <li><code>preference_set_string()</code></li>
+ <li><code>preference_get_string()</code></li>
</ul>
-<p>Release the value returned by the get function using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p>
+<p>Release the value returned by the get function using the <code>free()</code> function.</p>
<pre class="prettyprint">
const char *string_key = "string_key";
const char *string_value = "Sample content";
preference_set_changed_cb(integer_key, preference_changed_cb_impl, &previous_value);
</pre>
-<p>Pass custom parameters to the callback function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
+<p>Pass custom parameters to the callback function in the <code>user_data</code> field.</p>
<pre class="prettyprint">
void
</pre></li>
-<li>To list all records, use the foreach function. The function calls a specific callback function for each key-value pair in the database. You can pass additional data to the function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.
+<li>To list all records, use the foreach function. The function calls a specific callback function for each key-value pair in the database. You can pass additional data to the function in the <code>user_data</code> field.
-<p>If the callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, or if all the records have been opened, the foreach function ends.</p>
+<p>If the callback function returns <code>false</code>, or if all the records have been opened, the foreach function ends.</p>
<pre class="prettyprint">
bool
preference_foreach_item(preference_foreach_item_cb, NULL);
</pre></li>
-<li>To delete records one by one, use a unique key. You can also delete all records for an application using the <span style="font-family: Courier New,Courier,monospace">preference_remove_all()</span> function.
+<li>To delete records one by one, use a unique key. You can also delete all records for an application using the <code>preference_remove_all()</code> function.
<pre class="prettyprint">
preference_remove(key);
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">Resource Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">Resource Manager API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/AppFW/Resource_Management" target="_blank">Resource Management Sample Description</a></li>
</ul>
</div></div>
<p>You can get or set common resources for multiple devices with different specifications.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>The main features of the Resource Manager API include:</p>
<ul>
<li>Setting resources
<p>You can <a href="#set">set resources</a> for your application in the <strong>Resource Manager</strong> view in the Tizen Studio. By setting specific resources for specific languages and screen resolutions, you ensure that the application works flawlessly in multiple devices.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Resource Manager tool is supported since Tizen 2.4.
- <p>If you cannot access the <strong>Resource Manager</strong> view in the Tizen Studio, check the version and API version attributes in the <span style="font-family: Courier New,Courier,monospace"><manifest></span> element of the application manifest file.</p>
- <p>For more information about the Resource Manager tool, see <a href="../../../../org.tizen.studio/html/native_tools/resource_manager_n.htm">Providing Resources for Multiple Device Types</a>.</p>
-</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The Resource Manager tool is supported since Tizen 2.4.
+ <p>If you cannot access the <code>Resource Manager</code> view in the Tizen Studio, check the version and API version attributes in the <code><manifest></code> element of the application manifest file.</p>
+ <p>For more information about the Resource Manager tool, see <a href="../../../../org.tizen.studio/html/native_tools/resource_manager_n.htm">Providing Resources for Multiple Device Types</a>.</p>
+ </div>
</li>
<li>Using the resources
<p>You can use different resources (such as images, layouts, and sounds) between devices with different device specifications. For example:</p>
<ul>
-<li>To set a different button image for an application depending on the device's current language setting, use the <
span style="font-family: Courier New,Courier,monospace">app_resource_manager_get()</span> function to <a href="#get_path">get the appropriate resource file path</a>.</li>
-<li>To use different images depending on the device's screen resolution (DPI), use the same <span style="font-family: Courier New,Courier,monospace">app_resource_manager_get()</span> function to get the appropriate image file path.</li>
+<li>To set a different button image for an application depending on the device's current language setting, use the <
code>app_resource_manager_get()</code> function to <a href="#get_path">get the appropriate resource file path</a>.</li>
+<li>To use different images depending on the device's screen resolution (DPI), use the same <code>app_resource_manager_get()</code> function to get the appropriate image file path.</li>
</ul>
</li>
<li>Testing the resources
<p>You can <a href="#check_resource">test the different resources by running them in the emulator</a>.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The resource files must be set to be in different folders and have the same filename.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The resource files must be set to be in different folders and have the same filename.
+ </div>
</li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and resource types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">Resource Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><app_resource_manager.h></span> header file in your application:</p>
+<p>To use the functions and resource types of the Resource Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">wearable</a> applications), include the <code><app_resource_manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app_resource_manager.h>
</pre>
<li>To activate the <strong>Resource Manager</strong> view content in the Tizen Studio, select the project in the <strong>Project Explorer</strong> view.
<p align="center"><img src="../../images/resource_manager_show_view2.png" alt="Show view" /></p>
-<p>If the <strong>Resource Manager</strong> view is not visible, open it: in the Tizen Studio menu, go to <strong>Window > Show View > Other > Tizen > Resource Manager</strong>.</p>
+<p>If the <strong>Resource Manager</strong> view is not visible, open it: in the Tizen Studio menu, go to <strong>Window > Show View > Resource Manager</strong>.</p>
</li>
<li>To open the <strong>Resource Configuration Dialog</strong> window, click the <img src="../../images/resource_manager_config_icon.png" alt="Resource Manager configuration icon" /> icon in the <strong>Resource Manager</strong> view toolbar menu.</li>
<li>To add resource directories for the required languages and screen resolutions, select them in the <strong>Language</strong> and <strong>DPI</strong> drop-down menus, and click <strong>Add</strong>.
<p>The resource directory hierarchy is created.</p>
<p align="center"><img src="../../images/resource_manager_config.png" alt="Resource configuration dialog" /></p>
</li>
-<li>To add images in the created resource directory, drag and drop them in the <strong>Resource Manager</strong> view, or copy them directly to the resource directories.
+<li>To add images in the created resource directory, copy them directly to the resource directories.
<p align="center"><img src="../../images/resource_manager_add_images.png" alt="Add images" /> <img src="../../images/resource_manager_image_files.png" alt="Image files for variants" /></p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The file names of the resources that you want to use interchangeably based on the device conditions must be the same.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The file names of the resources that you want to use interchangeably based on the device conditions must be the same.
+ </div>
<p align="center"></p>
</li>
-<li>To view the resource directories, use the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file.
-<p>The Tizen Studio creates the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file automatically when you build the application package.</p>
+<li>To view the resource directories, use the <code>res.xml</code> file.
+<p>The Tizen Studio creates the <code>res.xml</code> file automatically when you build the application package.</p>
<p align="center"><img src="../../images/resource_manager_res_xml.png" alt="res.xml file" /></p>
</li>
</ol>
<p>To get the appropriate resource file path in your code:</p>
<ol>
-<li>Create the resource manager using the <span style="font-family: Courier New,Courier,monospace">app_resource_manager_init()</span> function.
+<li>Create the resource manager using the <code>app_resource_manager_init()</code> function.
<pre class="prettyprint">
app_resource_manager_init();
</pre>
-<p>If the function returns <span style="font-family: Courier New,Courier,monospace">APP_RESOURCE_ERROR_NONE</span>, the resource manager has been successfully created.</p>
+<p>If the function returns <code>APP_RESOURCE_ERROR_NONE</code>, the resource manager has been successfully created.</p>
</li>
-<li>Get the resource path using the <span style="font-family: Courier New,Courier,monospace">app_resource_manager_get()</span> function. You need 2 parameters:
+<li>Get the resource path using the <code>app_resource_manager_get()</code> function. You need 2 parameters:
<ul>
<li>Resource ID
<p>The resource ID is an identifier for a specific resource. It consists of subdirectories and filenames including its extension. The same resources are located in different locations with the same filename for supporting multiple devices.</p>
</li>
<li>Resource type
-<p>The resource type defines whether the resource is an image, layout, sound, or some other file type. There are 4 resource types, which are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html#ga83dadea23a885e1eb257ad1f115513e9">app_resource_e</a> enumerator.</p>
+<p>The resource type defines whether the resource is an image, layout, sound, or some other file type. There are 4 resource types, which are defined in the <code>app_resource_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html#ga83dadea23a885e1eb257ad1f115513e9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html#ga83dadea23a885e1eb257ad1f115513e9">wearable</a> applications).</p>
<p>Resources with the same resource type are grouped as a folder. The folder name is irrelevant to the actual resource type within it.</p>
</li>
free(img_path);
}
</pre>
-<p>If the function returns <span style="font-family: Courier New,Courier,monospace">APP_RESOURCE_ERROR_NONE</span>, the resource path has been successfully retrieved.</p>
+<p>If the function returns <code>APP_RESOURCE_ERROR_NONE</code>, the resource path has been successfully retrieved.</p>
</li>
-<li>When you no longer need to get the resource path, call the <span style="font-family: Courier New,Courier,monospace">app_resource_manager_release()</span> function to release the resource manager instance.
-<p>The resource manager instance must be released only when the application is closing, so this function must be called in the <span style="font-family: Courier New,Courier,monospace">app_terminate()</span> callback function.</p>
+<li>When you no longer need to get the resource path, call the <code>app_resource_manager_release()</code> function to release the resource manager instance.
+<p>The resource manager instance must be released only when the application is closing, so this function must be called in the <code>app_terminate()</code> callback function.</p>
<pre class="prettyprint">
static void
<p align="center"><img src="../../images/resource_manager_conn_explorer.png" alt="Connection Explorer buttons" /></p>
<p>If the <strong>Connection Explorer</strong> view is not visible, open it: in the Tizen Studio menu, go to <strong>Window > Show View > Connection Explorer</strong> or <strong>Window > Show View > Other > Tizen > Connection Explorer</strong>.</p>
</li>
-<li>In the <strong>Emulator Manager</strong> window, create 2 emulator instances with different resolutions:
-<ol type="a"><li>Click <strong>Create New Emulator > mobile</strong>, select the <strong>WVGA Mobile</strong> template, and click <strong>Confirm</strong>.
+<li>In the <strong>Emulator Manager</strong> window, the HD Mobile emulator has already been created.
+<p>Next, create an emulator instance with a WVGA resolution by clicking <strong>Create</strong>.</p>
+
<p align="center"><img src="../../images/resource_manager_emulator_new.png" alt="Create a new emulator"/></p>
-<p align="center"><img src="../../images/resource_manager_emulator_confirm.png" alt="Confirm the emulator settings"/></p>
-</li>
-<li>Click <strong>Create New Emulator > mobile</strong>, select the <strong>HD Mobile</strong> template, and click <strong>Confirm</strong>.
-<p align="center"><img src="../../images/resource_manager_emulator_new_hd.png" alt="Create a HD emulator" /></p></li>
-</ol>
+
+<p>Select mobile, and the <strong>WVGA Mobile</strong> template. Click <strong>Finish</strong>. If the HD Mobile emulator has not been created, create it as well. For more information on creating an emulator instance, see <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm#create">Creating Emulator Instances</a>.</p>
</li>
<li>Run the application on the WVGA Mobile device emulator:
-<ol type="a"><li>In the <strong>Emulator Manager</strong> window, select the <strong>WVGA Mobile</strong> emulator and click the play button.
+<ol type="a"><li>In the <strong>Emulator Manager</strong> window, select the <strong>WVGA Mobile</strong> emulator and click <strong>Launch</strong>.
<p>The WVGA Mobile device emulator starts.</p>
-<p align="center"><img src="../../images/resource_manager_emulator_run.png" alt="Start the emulator" /> <img src="../../images/resource_manager_emulator_running.png" alt="Emulator running" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_run.png" alt="Start the emulator" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_running.png" alt="Emulator running" /></p>
</li>
<li>In the <strong>Project Explorer</strong> view in the Tizen Studio, right-click the application and select <strong>Run As > Tizen Native Application</strong>.
<p>The application launches on the emulator.</p>
-<p align="center"><img src="../../images/resource_manager_emulator_run_us_en.png" alt="Application running on the Emulator" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_run_us_en.png" alt="Application running on the emulator" /></p>
</li>
<li>To close the emulator, right-click it and select <strong>Close</strong>.
</li>
</li>
<li>Run the application on the HD Mobile device emulator:
-<ol type="a"><li>In the <strong>Emulator Manager</strong> window, select the <strong>HD Mobile</strong> emulator and click the play button.
+<ol type="a"><li>In the <strong>Emulator Manager</strong> window, select the <strong>HD Mobile</strong> emulator and click <strong>Launch</strong>.
<p>The HD Mobile device emulator starts.</p>
-<p align="center"><img src="../../images/resource_manager_emulator_run_hd.png" alt="Start the emulator" /> <img src="../../images/resource_manager_emulator_running_hd.png" alt="Emulator running" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_run_hd.png" alt="Start the emulator" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_running_hd.png" alt="Emulator running" /></p>
</li>
<li>In the <strong>Project Explorer</strong> view in the Tizen Studio, right-click the application and select <strong>Run As > Tizen Native Application</strong>.
<p>The application launches on the emulator, and you can see that a different image is displayed based on the device display resolution.</p>
-<p align="center"><img src="../../images/resource_manager_emulator_run_hd_us_en.png" alt="Application running on the Emulator" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_run_hd_us_en.png" alt="Application running on the emulator" /></p>
</li>
</ol>
</li>
<li>If you change the emulator language settings, and run the application again, you can also see that a different image is displayed based on the device language (in this case, US English and Korean).
-<p align="center"><img src="../../images/resource_manager_emulator_run_us_en.png" alt="English virtual device running on Emulator" /> <img src="../../images/resource_manager_emulator_run_ko_kr.png" alt="Korean virtual device running on Emulator" /></p>
+<p align="center"><img src="../../images/resource_manager_emulator_run_us_en.png" alt="English virtual device running on the emulator" /> <img src="../../images/resource_manager_emulator_run_ko_kr.png" alt="Korean virtual device running on the emulator" /></p>
</li>
</ol>
<h2 id="state_change">Native Application State Change Callbacks</h2>
-<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <span style="font-family: Courier New,Courier,monospace;">app_create_cb()</span> function is executed and the main event loop starts. The application is normally at the top of the window, with focus.</p>
-<p>When the application loses the focus status, the <span style="font-family: Courier New,Courier,monospace;">app_pause_cb()</span> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
+<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <code>app_create_cb()</code> function is executed and the main event loop starts. The application is normally at the top of the window, with focus.</p>
+<p>When the application loses the focus status, the <code>app_pause_cb()</code> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
<ul>
<li>A new application is launched from the request of your application.</li>
<p>Since Tizen 2.4, the application on the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can <a href="efl_ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
-<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. The visibility returns, when:</p>
+<p>When your application becomes visible again, the <code>app_resume_cb()</code> callback is invoked. The visibility returns, when:</p>
<ul>
<li>Another application requests your application to run (for example, the Task Navigator, which shows all running applications and lets the user select any application to run).</li>
<li>All applications on top of your application in the window stack finish.</li>
<li>An alarm is triggered for your application, bringing it to the front and hiding other applications.</li>
</ul>
-<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked. Your application can start the termination process, when:</p>
+<p>When your application starts exiting, the <code>app_terminate_cb()</code> callback is invoked. Your application can start the termination process, when:</p>
<ul>
- <li>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_exit()</span> or <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function to terminate the event loop.</li>
+ <li>Your application itself requests to exit by calling the <code>ui_app_exit()</code> or <code>service_app_exit()</code> function to terminate the event loop.</li>
<li>The low memory killer is killing your application in a low memory situation.</li>
</ul>
<p>The following figure shows the UI and service application states.</p>
- <p class="figure">Figure: UI and service application states</p>
+ <p align="center"><strong>Figure: UI and service application states</strong></p>
<p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>All the common application controls are supported in mobile applications, except for the Input Delegator. In Tizen 2.3.2 and higher, only the Map and Input Delegator are supported in wearable applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">It is possible that no application suitable to receive the application control exists. In that case, before you send the launch request, verify that a suitable application exists.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ It is possible that no application suitable to receive the application control exists. In that case, before you send the launch request, verify that a suitable application exists.
+ </div>
<h2 id="browser" name="browser">Browser in Mobile Applications</h2>
<h3>Performing a Web Search</h3>
-<p>To find what you are looking for on the Web, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SEARCH</span> operation.</p>
-<p class="figure">Figure: Performing a Web search</p>
+<p>To find what you are looking for on the Web, use the <code>APP_CONTROL_OPERATION_SEARCH</code> operation.</p>
+<p align="center"><strong>Figure: Performing a Web search</strong></p>
<p align="center"><img src="../../images/common_appcontrol_browser.png" alt="Performing a Web search" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/search</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SEARCH</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/search</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SEARCH</code> (in <code>.c</code> files only)</li></ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The text to search. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<h3>Loading a Web Page</h3>
-<p>To open a Web page, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation and specify the Web URL in the URI.</p>
+<p>To open a Web page, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation and specify the Web URL in the URI.</p>
-<p class="figure">Figure: Loading a Web page</p>
+<p align="center"><strong>Figure: Loading a Web page</strong></p>
<p align="center"><img src="../../images/common_appcontrol_browser2.png" alt="Loading a Web page" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">javascript:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
+ <li><code>javascript:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">image/svg+xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/html</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/xhtml+xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>
+ <li><code>image/svg+xml</code></li>
+ <li><code>text/html</code></li>
+ <li><code>application/xml</code></li>
+ <li><code>application/xhtml+xml</code></li>
+ <li><code>text/plain</code></li>
</ul>
<h4>Example Code</h4>
<h3>Adding a Calendar Event</h3>
-<p>To add a new event to the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To add a new event to the user's calendar, use the <code>APP_CONTROL_OPERATION_ADD</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Adding a calendar event</p>
+<p align="center"><strong>Figure: Adding a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar.png" alt="Adding a calendar event" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/add</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_ADD</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_ALL_DAY</span></td>
- <td>The string to indicate if an event applies to all day. The available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_ALL_DAY</code></td>
+ <td>The string to indicate if an event applies to all day. The available values are <code>true</code> or <code>false</code>. This key must be passed as a string.</td>
<td rowspan="5">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_START_TIME</span></td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_START_TIME</code></td>
<td>The start time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_END_TIME</span></td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_END_TIME</code></td>
<td>The end time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td>
+ <td><code>APP_CONTROL_DATA_TITLE</code></td>
<td>The title of the event. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The description of the event. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string. </td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string. </td>
</tr>
</tbody>
</table>
<h3>Editing a Calendar Event</h3>
-<p>To edit an existing event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To edit an existing event in the user's calendar, use the <code>APP_CONTROL_OPERATION_EDIT</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Editing a calendar event</p>
+<p align="center"><strong>Figure: Editing a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar4.png" alt="Editing a calendar event" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/edit</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_EDIT</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_ALL_DAY</span></td>
- <td>The string to indicate if an event applies to all day. The available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_ALL_DAY</code></td>
+ <td>The string to indicate if an event applies to all day. The available values are <code>true</code> or <code>false</code>. This key must be passed as a string.</td>
<td rowspan="5">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_START_TIME</span></td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_START_TIME</code></td>
<td>The start time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_END_TIME</span></td>
+ <td><code>APP_CONTROL_DATA_CALENDAR_END_TIME</code></td>
<td>The end time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td>
+ <td><code>APP_CONTROL_DATA_TITLE</code></td>
<td>The title of event. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The description of event. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<h3>Viewing a Calendar Event</h3>
-<p>To display a specified event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation. To specify various event details, refer to the extras defined below.</p>
-<p>To display a specified event from a vcalendar file, use the <span style="font-family: Courier New,Courier,monospace">file:</span> URI. To display a specified event using the calendar ID, use the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type with <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span>.</p>
+<p>To display a specified event in the user's calendar, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation. To specify various event details, refer to the extras defined below.</p>
+<p>To display a specified event from a vcalendar file, use the <code>file:</code> URI. To display a specified event using the calendar ID, use the <code>application/vnd.tizen.calendar</code> MIME type with <code>APP_CONTROL_DATA_ID</code>.</p>
-<p class="figure">Figure: Viewing a calendar event</p>
+<p align="center"><strong>Figure: Viewing a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar2.png" alt="Viewing a calendar event" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI</h4>
-<p><span style="font-family: Courier New,Courier,monospace">file:<path></span></p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">file://<media storage path>/file.vcs</span></p>
+<p><code>file:<path></code></p>
+<p>For example: <code>file://<media storage path>/file.vcs</code></p>
<h4>MIME Type</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span>
- <p>In case of viewing an event by an event ID, the event ID (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type must be specified.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-vcalendar</span> (for vcalendar file)</li>
- <li><span style="font-family: Courier New,Courier,monospace">text/vcalendar</span> (for vcalendar file)</li>
+ <li><code>application/vnd.tizen.calendar</code>
+ <p>In case of viewing an event by an event ID, the event ID (ID in the <code>_calendar_event</code> view) extra data and <code>application/vnd.tizen.calendar</code> MIME type must be specified.</p></li>
+ <li><code>text/x-vcalendar</code> (for vcalendar file)</li>
+ <li><code>text/vcalendar</code> (for vcalendar file)</li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
- <td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span>.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
+ <td>This key is mandatory when the MIME type is set to <code>application/vnd.tizen.calendar</code>.</td>
</tr>
</tbody>
</table>
<h3>Selecting a Calendar Event</h3>
-<p>To select a specified event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Selecting a calendar event</p>
+<p>To select a specified event in the user's calendar, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Selecting a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar3.png" alt="Selecting a calendar event" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/pick</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_PICK</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> (default) and <span style="font-family: Courier New,Courier,monospace">vcs</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> (default) and <code>vcs</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
- <td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_SELECTION_MODE</code></td>
+ <td>The selection mode of the PICK operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_COUNT</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_COUNT</code></td>
<td>The total number of events to be returned. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> and <span style="font-family: Courier New,Courier,monospace">vcs</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> and <code>vcs</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) or the paths of the vcs files. This key must be passed as an array.</td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view) or the paths of the vcs files. This key must be passed as an array.</td>
</tr>
</tbody>
</table>
<h2 id="call" name="call">Call in Mobile Applications</h2>
<h3>Making a Phone Call</h3>
-<p>To directly initiate a phone call, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CALL</span> operation with a phone number URI scheme.</p>
-<p class="figure">Figure: Making a phone call</p>
+<p>To directly initiate a phone call, use the <code>APP_CONTROL_OPERATION_CALL</code> operation with a phone number URI scheme.</p>
+<p align="center"><strong>Figure: Making a phone call</strong></p>
<p align="center"><img src="../../images/common_appcontrol_call1.png" alt="Making a phone call" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CALL</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
- <p>To request this operation, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/call</span> privilege is needed.</p>
+<ul><li><code>http://tizen.org/appcontrol/operation/call</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_CALL</code> (in <code>.c</code> files only)</li></ul>
+ <p>To request this operation, the <code>http://tizen.org/privilege/call</code> privilege is needed.</p>
<h4>URI (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">tel:<number></span></p>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+ <p><code>tel:<number></code></p>
+ <p>For example: <code>tel:+821234567890</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
void
<h3>Launching a Call Application with a Phone Number</h3>
-<p>To open a call application and display a predefined a phone number, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DIAL</span> action with a phone number URI scheme. When the call application opens, it displays the phone number, but the user must press the <strong>Call</strong> button to initiate the phone call.</p>
-<p class="figure">Figure: Launching a Call application</p>
+<p>To open a call application and display a predefined a phone number, use the <code>APP_CONTROL_OPERATION_DIAL</code> action with a phone number URI scheme. When the call application opens, it displays the phone number, but the user must press the <strong>Call</strong> button to initiate the phone call.</p>
+<p align="center"><strong>Figure: Launching a Call application</strong></p>
<p align="center"><img src="../../images/common_appcontrol_call2.png" alt="Launching a Call application" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DIAL</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/dial</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_DIAL</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Optional)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">tel:<number></span></p>
+ <p><code>tel:<number></code></p>
<p>If empty, a dialer UI without a number is presented.</p>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+ <p>For example: <code>tel:+821234567890</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
void
<h2 id="camera" name="camera">Camera in Mobile Applications</h2>
<h3>Capturing a Picture or Video</h3>
-<p>To take a picture or record video, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CREATE_CONTENT</span> operation with the MIME type. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Taking pictures (left) and recording videos (right)</p>
+<p>To take a picture or record video, use the <code>APP_CONTROL_OPERATION_CREATE_CONTENT</code> operation with the MIME type. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Taking pictures (left) and recording videos (right)</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera.png" alt="Taking picture" /> <img src="../../images/common_appcontrol_camera2.png" alt="Recording video" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CREATE_CONTENT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/create_content</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_CREATE_CONTENT</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
<ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">image/*</span></p></li>
+ <p><code>image/*</code></p></li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">video/*</span></p></li>
+ <p><code>video/*</code></p></li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The path of the created image or video file. This key must be passed as a string.</td>
</tr>
</tbody>
</pre>
<h3>Capturing a Picture</h3>
-<p>To capture a still image, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_IMAGE_CAPTURE</span> operation. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Taking a picture</p>
+<p>To capture a still image, use the <code>APP_CONTROL_OPERATION_IMAGE_CAPTURE</code> operation. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Taking a picture</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera.png" alt="Taking picture" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/image_capture</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_IMAGE_CAPTURE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/image_capture</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_IMAGE_CAPTURE</code> (in <code>.c</code> files only)</li></ul>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The path of the created file. This key must be passed as a string.</td>
</tr>
</tbody>
</pre>
<h3>Capturing a Video</h3>
-<p>To record a video, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIDEO_CAPTURE</span> operation. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Record a video</p>
+<p>To record a video, use the <code>APP_CONTROL_OPERATION_VIDEO_CAPTURE</code> operation. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Record a video</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera2.png" alt="Recording video" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/video_capture</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIDEO_CAPTURE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/video_capture</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIDEO_CAPTURE</code> (in <code>.c</code> files only)</li></ul>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The path of the created file. This key must be passed as a string.</td>
</tr>
</tbody>
<h3>Adding a Contact</h3>
-<p>To add a new contact, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Adding a contact</p>
+<p>To add a new contact, use the <code>APP_CONTROL_OPERATION_ADD</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Adding a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_add.png" alt="Adding a contact" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/add</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_ADD</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PHONE</span></td>
+ <td><code>APP_CONTROL_DATA_PHONE</code></td>
<td>The phone number. This key must be passed as a string.</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_EMAIL</span></td>
+ <td><code>APP_CONTROL_DATA_EMAIL</code></td>
<td>The email address. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_URL</span></td>
+ <td><code>APP_CONTROL_DATA_URL</code></td>
<td>The homepage URL. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_NAME</span></td>
+ <td><code>APP_CONTROL_DATA_NAME</code></td>
<td>The contact's name. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the added person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the added person (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<h3>Editing a Contact</h3>
-<p>To edit a known contact, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To edit a known contact, use the <code>APP_CONTROL_OPERATION_EDIT</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Editing a contact</p>
+<p align="center"><strong>Figure: Editing a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_edit.png" alt="Editing a contact" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/edit</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_EDIT</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the person to be edited (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PHONE</span></td>
+ <td><code>APP_CONTROL_DATA_PHONE</code></td>
<td>The phone number that is added to the contact. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_EMAIL</span></td>
+ <td><code>APP_CONTROL_DATA_EMAIL</code></td>
<td>The email address that is added to the contact. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_URL</span></td>
+ <td><code>APP_CONTROL_DATA_URL</code></td>
<td>The homepage URL that is added to the contact. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the person to be edited (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<h3>Viewing a Contact</h3>
-<p>To display a specified contact in the contact database, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation. To specify various contact details, refer to the extras defined below.</p>
-<p>To display a specified contact from a vcard file, use the <span style="font-family: Courier New,Courier,monospace">file:</span> URI. To display a specified contact with the person ID, use the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type with <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span>.</p>
+<p>To display a specified contact in the contact database, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation. To specify various contact details, refer to the extras defined below.</p>
+<p>To display a specified contact from a vcard file, use the <code>file:</code> URI. To display a specified contact with the person ID, use the <code>application/vnd.tizen.contact</code> MIME type with <code>APP_CONTROL_DATA_ID</code>.</p>
-<p class="figure">Figure: Viewing a contact based on ID (left) and from a vcard file (right)</p>
+<p align="center"><strong>Figure: Viewing a contact based on ID (left) and from a vcard file (right)</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_view1.png" alt="Viewing a contact" /> <img src="../../images/common_appcontrol_contact_view2.png" alt="Viewing a contact" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI</h4>
- <p><span style="font-family: Courier New,Courier,monospace">file:<path></span></p>
+ <p><code>file:<path></code></p>
<h4>MIME Type</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span>
- <p>In case of viewing a contact by a person ID, the person ID (ID in the <span style="font-family: Courier New,Courier,monospace">_contact_person</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type must be specified.</p>
+ <li><code>application/vnd.tizen.contact</code>
+ <p>In case of viewing a contact by a person ID, the person ID (ID in the <code>_contact_person</code> view) extra data and <code>application/vnd.tizen.contact</code> MIME type must be specified.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">text/vcard</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-vcard</span></li>
+ <li><code>text/vcard</code></li>
+ <li><code>text/x-vcard</code></li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the edited person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
- <td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span>.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the edited person (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
+ <td>This key is mandatory when the MIME type is set to <code>application/vnd.tizen.contact</code>.</td>
</tr>
</tbody>
</table>
<h3>Selecting a Contact</h3>
-<p>To select a specified contact in the user's contacts, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To select a specified contact in the user's contacts, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Selecting a contact</p>
+<p align="center"><strong>Figure: Selecting a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_select.png" alt="Selecting a contact" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/pick</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_PICK</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
- <td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_SELECTION_MODE</code></td>
+ <td>The selection mode of the PICK operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> (default), <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> (default), <code>phone</code>, <code>email</code>, and <code>vcf</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_COUNT</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_COUNT</code></td>
<td>The total number of events to be returned. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span>, <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code>, <code>phone</code>, <code>email</code>, and <code>vcf</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The extra field to get the return information. The content of this key depends on its type:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">id</span> – The database record ID of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">phone</span> – The database record ID of the number of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_number</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">email</span> – The database record ID of the email of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_email</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">vcf</span> – The path to the vCard file.</li>
+ <li><code>id</code> – The database record ID of the selected person (ID in the <code>_contacts_person</code> view).</li>
+ <li><code>phone</code> – The database record ID of the number of the selected person (ID in the <code>_contacts_number</code> view).</li>
+ <li><code>email</code> – The database record ID of the email of the selected person (ID in the <code>_contacts_email</code> view).</li>
+ <li><code>vcf</code> – The path to the vCard file.</li>
</ul>
<p>This key must be passed as an array.</p>
</td>
<h3>Sharing a Contact</h3>
-<p>To share a single contact, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To share a single contact, use the <code>APP_CONTROL_OPERATION_SHARE</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record ID of the person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view) when <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span> is set to <span style="font-family: Courier New,Courier,monospace">person</span>.
- <p>The database record ID of my profile (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_my_profile</span> view) when <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span> is set to <span style="font-family: Courier New,Courier,monospace">my_profile</span>. This key must be passed as a string.</p></td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record ID of the person (ID in the <code>_contacts_person</code> view) when <code>APP_CONTROL_DATA_TYPE</code> is set to <code>person</code>.
+ <p>The database record ID of my profile (ID in the <code>_contacts_my_profile</code> view) when <code>APP_CONTROL_DATA_TYPE</code> is set to <code>my_profile</code>. This key must be passed as a string.</p></td>
<td rowspan="2">This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of contact. The available values are <span style="font-family: Courier New,Courier,monospace">my_profile</span> and <span style="font-family: Courier New,Courier,monospace">person</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of contact. The available values are <code>my_profile</code> and <code>person</code>. This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<h3>Sharing Multiple Contacts</h3>
-<p>To share a set of contacts, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To share a set of contacts, use the <code>APP_CONTROL_OPERATION_MULTI_SHARE</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/multi_share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_MULTI_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
- <td>The database record IDs of the person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as an array.</td>
+ <td><code>APP_CONTROL_DATA_ID</code></td>
+ <td>The database record IDs of the person (ID in the <code>_contacts_person</code> view). This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
</tbody>
<h4>Example Code</h4>
<pre class="prettyprint">
#include <app_control.h>
-char* contacts[3] = {contact1, contact2, contact3}; /* contact1, contact2, contact3 are person IDs */
+/* contact1, contact2, contact3 are person IDs */
+char* contacts[3] = {contact1, contact2, contact3};
app_control_h service;
app_control_create(&service);
<h3>Composing an Email</h3>
-<p>To compose an email with optional recipients, subject, and body text, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> operation.</p>
+<p>To compose an email with optional recipients, subject, and body text, use the <code>APP_CONTROL_OPERATION_COMPOSE</code> operation.</p>
-<p class="figure">Figure: Composing an email</p>
+<p align="center"><strong>Figure: Composing an email</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email.png" alt="Composing an email" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/compose</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_COMPOSE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:<email address></span></p>
-<p>If the <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is empty, it filters out all but email applications in the system, and you can use the extra data only to pass optional parameters.</p>
+<p><code>mailto:<email address></code></p>
+<p>If the <code>mailto:</code> field is empty, it filters out all but email applications in the system, and you can use the extra data only to pass optional parameters.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td>
+ <td><code>APP_CONTROL_DATA_TO</code></td>
<td>The email address of the main recipients. This key must be passed as an array.</td>
<td rowspan="6">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CC</span></td>
+ <td><code>APP_CONTROL_DATA_CC</code></td>
<td>The email address of the recipients that must be carbon copied. This key must be passed as an array.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_BCC</span></td>
+ <td><code>APP_CONTROL_DATA_BCC</code></td>
<td>The email address of the recipients that must be blind carbon copied. This key must be passed as an array.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+ <td><code>APP_CONTROL_DATA_SUBJECT</code></td>
<td>The subject of an email message. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The body of the email to be sent. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Sharing a Single File Using an Email Message</h3>
-<p>To share a single file of any MIME type in an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation.</p>
+<p>To share a single file of any MIME type in an email message, use the <code>APP_CONTROL_OPERATION_SHARE</code> operation.</p>
-<p class="figure">Figure: Sharing a single file</p>
+<p align="center"><strong>Figure: Sharing a single file</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email2.png" alt="Sharing a single file" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mailto:</span>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. This can be used to filter out all but email applications available in the system.</p></li>
+ <ul><li><code>file:<path></code></li>
+ <li><code>mailto:</code>
+ <p>Only an empty <code>mailto:</code> field is allowed. This can be used to filter out all but email applications available in the system.</p></li>
</ul>
<h4>MIME Type</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>In case of sharing a single item through <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span> and URI specified with <span style="font-family: Courier New,Courier,monospace">mailto:</span>, the MIME type must be explicitly set. </p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>In case of sharing a single item through <code>APP_CONTROL_DATA_PATH</code> and URI specified with <code>mailto:</code>, the MIME type must be explicitly set. </p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
- <td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
- <td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto:</span>.</td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
+ <td>When the URI is set to <code>mailto</code>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+ <td>This key is mandatory when the URI is set to <code>mailto:</code>.</td>
</tr>
</tbody>
</table>
<h3>Sharing Multiple Items Using an Email Message</h3>
-<p>To share multiple files of any MIME type using an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> operation.</p>
+<p>To share multiple files of any MIME type using an email message, use the <code>APP_CONTROL_OPERATION_MULTI_SHARE</code> operation.</p>
-<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><strong>Figure: Sharing multiple items</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email3.png" alt="Sharing multiple items" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/multi_share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_MULTI_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Optional)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. This can be used to filter out all but email applications available in the system.</p>
+<p><code>mailto:</code></p>
+<p>Only an empty <code>mailto:</code> field is allowed. This can be used to filter out all but email applications available in the system.</p>
<h4>MIME Type (Mandatory)</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>If you try to share a set of files with different MIME types, use <span style="font-family: Courier New,Courier,monospace"><type>/*</span> or <span style="font-family: Courier New,Courier,monospace">*/*</span>. For example, if you send <span style="font-family: Courier New,Courier,monospace">video/mp4</span> and <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, the MIME type must be <span style="font-family: Courier New,Courier,monospace">*/*</span>.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>If you try to share a set of files with different MIME types, use <code><type>/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
<h3>Sharing Text in an Email</h3>
-<p>To share any text with an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> operation. You can also define the message subject and a list of file attachments.</p>
+<p>To share any text with an email message, use the <code>APP_CONTROL_OPERATION_SHARE_TEXT</code> operation. You can also define the message subject and a list of file attachments.</p>
-<p class="figure">Figure: Sharing text</p>
+<p align="center"><strong>Figure: Sharing text</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email4.png" alt="Sharing text" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/share_text</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SHARE_TEXT</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. It filters out all but email applications in the system.</p>
+<p><code>mailto:</code></p>
+<p>Only an empty <code>mailto:</code> field is allowed. It filters out all but email applications in the system.</p>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+ <td><code>APP_CONTROL_DATA_SUBJECT</code></td>
<td>The subject of an email message. This key must be passed as a string.</td>
<td rowspan="2">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared using an email message. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Retrieving a Specific Type of File</h3>
-<p>To select any kind of file from the storage, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation with the corresponding MIME type. To give options for the pick operation, refer to the extras defined below.</p>
+<p>To select any kind of file from the storage, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the corresponding MIME type. To give options for the pick operation, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/pick</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_PICK</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Optional)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">*/*</span></p>
+ <p><code>*/*</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
- <td>The selection mode of the pick operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_SELECTION_MODE</code></td>
+ <td>The selection mode of the pick operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_COUNT</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_COUNT</code></td>
<td>The total number of items to be returned. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The list of selected file paths. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Downloading a File</h3>
-<p>To download a file, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DOWNLOAD</span> operation and specify the URL in the URI.</p>
+<p>To download a file, use the <code>APP_CONTROL_OPERATION_DOWNLOAD</code> operation and specify the URL in the URI.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/download</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DOWNLOAD</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
- <p>To request this operation, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/download</span> privilege is needed since Tizen 2.4.</p>
+<ul><li><code>http://tizen.org/appcontrol/operation/download</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_DOWNLOAD</code> (in <code>.c</code> files only)</li></ul>
+ <p>To request this operation, the <code>http://tizen.org/privilege/download</code> privilege is needed since Tizen 2.4.</p>
<h4>URI</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
</ul>
<h4>Example Code</h4>
<pre class="prettyprint">
<h2 id="map" name="map">Map</h2>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In wearable applications, this application control is available since Tizen 2.3.2.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ In wearable applications, this application control is available since Tizen 2.3.2.
+ </div>
<h3>Showing a Location on a Map</h3>
-<p>To open a map to show a location, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with a URI. To specify various map details, refer to the extras defined below.</p>
+<p>To open a map to show a location, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation with a URI. To specify various map details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">geo:latitude,longitude</span>
- <p>Show the map with 2 values that represent the latitude and longitude. For example: <span style="font-family: Courier New,Courier,monospace">geo:50.1,-50.1</span></p></li>
- <li><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span>
- <p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=Eiffel%20Tower</span></p>
- <p>All strings passed in the <span style="font-family: Courier New,Courier,monospace">geo:</span> URI must be encoded. If only <span style="font-family: Courier New,Courier,monospace">geo:</span> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p></li>
+ <ul><li><code>geo:latitude,longitude</code>
+ <p>Show the map with 2 values that represent the latitude and longitude. For example: <code>geo:50.1,-50.1</code></p></li>
+ <li><code>geo:0,0?q=keyword</code>
+ <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
+ <p>All strings passed in the <code>geo:</code> URI must be encoded. If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p></li>
</ul>
<h4>Example Code</h4>
<h3>Picking a Location from the Map</h3>
-<p>To pick a location from the map, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation. To specify various map details, refer to the extras defined below.</p>
+<p>To pick a location from the map, use the <code>APP_CONTROL_OPERATION_PICK</code> operation. To specify various map details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/pick</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_PICK</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span></p>
- <p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=Eiffel%20Tower</span></p>
- <p>All strings passed in the <span style="font-family: Courier New,Courier,monospace">geo:</span> URI must be encoded.</p>
- <p>If only <span style="font-family: Courier New,Courier,monospace">geo:</span> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
+ <p><code>geo:0,0?q=keyword</code></p>
+ <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
+ <p>All strings passed in the <code>geo:</code> URI must be encoded.</p>
+ <p>If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">address</span> (default), <span style="font-family: Courier New,Courier,monospace">image</span>, <span style="font-family: Courier New,Courier,monospace">poi</span>, <span style="font-family: Courier New,Courier,monospace">geocode</span>, or <span style="font-family: Courier New,Courier,monospace">all</span>. This key must be passed as a string.</td>
- <td>This key is optional. <strong>The <span style="font-family: Courier New,Courier,monospace">poi</span> value is not supported in Tizen 2.4.</strong> <strong>The geocode value is supported since Tizen 3.0.</strong></td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The type of items to be delivered. The available values are <code>address</code> (default), <code>image</code>, <code>poi</code>, <code>geocode</code>, or <code>all</code>. This key must be passed as a string.</td>
+ <td>This key is optional. <strong>The <code>poi</code> value is not supported in Tizen 2.4.</strong> <strong>The geocode value is supported since Tizen 3.0.</strong></td>
</tr>
</tbody>
</table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The address of the selected location. This key must be passed as a string.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_NAME</span></td>
+ <td><code>APP_CONTROL_DATA_NAME</code></td>
<td>The name of the selected location. This key must be passed as a string.</td>
<td><strong>This key is not supported in Tizen 2.4.</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_LOCATION</span></td>
+ <td><code>APP_CONTROL_DATA_LOCATION</code></td>
<td>The geo-coordinates of the selected location. This key must be passed as a string.</td>
<td><strong>This key is supported since Tizen 3.0.</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The file path of the image showing the selected location. This key must be passed as a string.</td>
<td></td>
</tr>
}
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;
<h3>Composing a Message</h3>
-<p>To compose a new message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> operation. To specify various message details, refer to the extras defined below.</p>
+<p>To compose a new message, use the <code>APP_CONTROL_OPERATION_COMPOSE</code> operation. To specify various message details, refer to the extras defined below.</p>
-<p class="figure">Figure: Composing a message</p>
+<p align="center"><strong>Figure: Composing a message</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message.png" alt="Composing a message" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/compose</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_COMPOSE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">sms:<phone-number></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">sms:+17913331234</span></p></li>
- <li><span style="font-family: Courier New,Courier,monospace">mmsto:<phone-number></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p></li>
+ <ul><li><code>sms:<phone-number></code>
+ <p>For example: <code>sms:+17913331234</code></p></li>
+ <li><code>mmsto:<phone-number></code>
+ <p>For example: <code>mmsto:+17913331234</code></p></li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td>
+ <td><code>APP_CONTROL_DATA_TO</code></td>
<td>The phone numbers of recipients. This key must be passed as an array.</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+ <td><code>APP_CONTROL_DATA_SUBJECT</code></td>
<td>The subject of an MMS message. If this value is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Sharing a Single Item Using a Message</h3>
-<p>To share a single item using an MMS message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation.</p>
+<p>To share a single item using an MMS message, use the <code>APP_CONTROL_OPERATION_SHARE</code> operation.</p>
-<p class="figure">Figure: Sharing a single item</p>
+<p align="center"><strong>Figure: Sharing a single item</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message2.png" alt="Sharing a single item" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <ul><li><p><span style="font-family: Courier New,Courier,monospace">mmsto:</span></p>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">file://<media storage path>/item.jpg</span></p></li></ul>
+ <ul><li><p><code>mmsto:</code></p>
+ <p>Only an empty <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p></li>
+ <li><code>file:<path></code>
+ <p>For example: <code>file://<media storage path>/item.jpg</code></p></li></ul>
<h4>MIME Type</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>In case of sharing a single item through <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span> and URI specified with <span style="font-family: Courier New,Courier,monospace">mmsto:</span>, the MIME type must be explicitly set.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>In case of sharing a single item through <code>APP_CONTROL_DATA_PATH</code> and URI specified with <code>mmsto:</code>, the MIME type must be explicitly set.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
- <td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
- <td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>.</td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
+ <td>When the URI is set to <code>mmsto</code>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+ <td>This key is mandatory when the URI is set to <code>mmsto</code>.</td>
</tr>
</tbody>
</table>
<h3>Sharing Multiple Items Using a Message</h3>
-<p>To share multiple items using an MMS message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> operation.</p>
+<p>To share multiple items using an MMS message, use the <code>APP_CONTROL_OPERATION_MULTI_SHARE</code> operation.</p>
-<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><strong>Figure: Sharing multiple items</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message3.png" alt="Sharing multiple items" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/multi_share</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_MULTI_SHARE</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Optional)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">mmsto:</span></p>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p>
+ <p><code>mmsto:</code></p>
+ <p>Only an empty <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p>
<h4>MIME Type (Mandatory)</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>If you try to share a set of files with different MIME types, use <span style="font-family: Courier New,Courier,monospace"><type>/*</span> or <span style="font-family: Courier New,Courier,monospace">*/*</span>. For example, if you send <span style="font-family: Courier New,Courier,monospace">video/mp4</span> and <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, the MIME type must be <span style="font-family: Courier New,Courier,monospace">*/*</span>.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>If you try to share a set of files with different MIME types, use <code><type>/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
<h3>Sharing Text in a Message</h3>
-<p>To share any text with an SMS or MMS message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> operation.</p>
+<p>To share any text with an SMS or MMS message, use the <code>APP_CONTROL_OPERATION_SHARE_TEXT</code> operation.</p>
-<p class="figure">Figure: Sharing text</p>
+<p align="center"><strong>Figure: Sharing text</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message4.png" alt="Sharing text" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/share_text</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SHARE_TEXT</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">sms:</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mmsto:</span></li>
+ <ul><li><code>sms:</code></li>
+ <li><code>mmsto:</code></li>
</ul>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">sms:</span> or <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p>
+ <p>Only an empty <code>sms:</code> or <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+ <td><code>APP_CONTROL_DATA_SUBJECT</code></td>
<td>The subject of an MMS message. If it is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
<td rowspan="2">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+ <td><code>APP_CONTROL_DATA_PATH</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Playing an Audio or Video File</h3>
-<p>To play an audio or video file, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with a URI. To specify various details, refer to the extras defined below.</p>
+<p>To play an audio or video file, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation with a URI. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">rtsp:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">rtp:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
+ <li><code>rtsp:<path></code></li>
+ <li><code>rtp:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-iMelody</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.apple.mpegurl</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/x-mpegurl</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/sdp</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/ogg</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/x-smaf</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.smaf</span></li>
+ <li><code>audio/*</code></li>
+ <li><code>video/*</code></li>
+ <li><code>text/x-iMelody</code></li>
+ <li><code>application/vnd.apple.mpegurl</code></li>
+ <li><code>application/x-mpegurl</code></li>
+ <li><code>application/sdp</code></li>
+ <li><code>application/ogg</code></li>
+ <li><code>application/x-smaf</code></li>
+ <li><code>application/vnd.smaf</code></li>
</ul>
<h4>Example Code</h4>
<h3>Viewing an Image File</h3>
-<p>To display an image file, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with a URI. To specify various details, refer to the extras defined below.</p>
+<p>To display an image file, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation with a URI. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+ <li><code>image/*</code></li>
</ul>
<h4>Example Code</h4>
<h3>Retrieving a Media File</h3>
-<p>To retrieve a specific type of media file, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation. To specify various details, refer to the extras defined below.</p>
+<p>To retrieve a specific type of media file, use the <code>APP_CONTROL_OPERATION_PICK</code> operation. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/pick</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_PICK</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+ <li><code>audio/*</code></li>
+ <li><code>image/*</code></li>
+ <li><code>video/*</code></li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
- <td>The selection mode of the pick operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_SELECTION_MODE</code></td>
+ <td>The selection mode of the pick operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_COUNT</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_COUNT</code></td>
<td>The total number of items to be returned. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The paths of the selected files. This key must be passed as an array.</td>
</tr>
</tbody>
<h3>Showing System Settings</h3>
-<p>To display various setting menus for, for example, Connections, Devices, and System Information, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING</span> operation.</p>
-<p class="figure">Figure: Showing system settings</p>
+<p>To display various setting menus for, for example, Connections, Devices, and System Information, use the <code>APP_CONTROL_OPERATION_SETTING</code> operation.</p>
+<p align="center"><strong>Figure: Showing system settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_setting.png" alt="Showing system settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING</code> (in <code>.c</code> files only)</li></ul>
<h4>Example Code</h4>
<pre class="prettyprint">
<h3>Showing Bluetooth Settings to Activate Bluetooth</h3>
-<p>To launch the Bluetooth setting application to allow the user to activate or deactivate Bluetooth, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_ENABLE</span> operation.</p>
+<p>To launch the Bluetooth setting application to allow the user to activate or deactivate Bluetooth, use the <code>APP_CONTROL_OPERATION_SETTING_BT_ENABLE</code> operation.</p>
-<p class="figure">Figure: Showing Bluetooth activation settings</p>
+<p align="center"><strong>Figure: Showing Bluetooth activation settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_bluetooth.png" alt="Showing Bluetooth activation settings" /> <img src="../../images/common_appcontrol_system_bluetooth2.png" alt="Showing Bluetooth activation settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_enable</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_ENABLE</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting/bt_enable</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_BT_ENABLE</code> (in <code>.c</code> files only)</li></ul>
<h4>Example Code</h4>
<h3>Showing Bluetooth Settings to Configure Visibility</h3>
-<p>To launch the Bluetooth setting application to allow the user to configure the visibility of the device, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</span> operation.</p>
+<p>To launch the Bluetooth setting application to allow the user to configure the visibility of the device, use the <code>APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</code> operation.</p>
-<p class="figure">Figure: Showing Bluetooth visibility settings</p>
+<p align="center"><strong>Figure: Showing Bluetooth visibility settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_bluetooth_visibility.png" alt="Showing Bluetooth visibility settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_visibility</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting/bt_visibility</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</code> (in <code>.c</code> files only)</li></ul>
<h4>Example Code</h4>
<h3>Showing Location Settings</h3>
-<p>To launch the location setting application to allow the user to configure the source of the location information, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_LOCATION</span> operation.</p>
+<p>To launch the location setting application to allow the user to configure the source of the location information, use the <code>APP_CONTROL_OPERATION_SETTING_LOCATION</code> operation.</p>
<p>If the location service is not active when an application tries to use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a> or Geolocation APIs, an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
-<p class="figure">Figure: Showing location settings</p>
+<p align="center"><strong>Figure: Showing location settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_location.png" alt="Showing location settings" /> <img src="../../images/common_appcontrol_system_location2.png" alt="Showing location settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/location</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_LOCATION</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting/location</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_LOCATION</code> (in <code>.c</code> files only)</li></ul>
<h4>Example Code</h4>
<h3>Showing NFC Settings</h3>
-<p>To launch the NFC setting application to allow the user to activate or deactivate NFC, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_NFC</span> operation.</p>
-<p class="figure">Figure: Showing NFC settings</p>
+<p>To launch the NFC setting application to allow the user to activate or deactivate NFC, use the <code>APP_CONTROL_OPERATION_SETTING_NFC</code> operation.</p>
+<p align="center"><strong>Figure: Showing NFC settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_nfc.png" alt="Showing NFC settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/nfc</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_NFC</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting/nfc</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_NFC</code> (in <code>.c</code> files only)</li></ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
<td>The NFC setting menu type to be shown. This key must be passed as a string. The available values are:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">nfc</span> (default): Default setting menu is launched</li>
- <li><span style="font-family: Courier New,Courier,monospace">tap_n_pay</span>: Tap & pay setting menu is launched
+ <li><code>nfc</code> (default): Default setting menu is launched</li>
+ <li><code>tap_n_pay</code>: Tap & pay setting menu is launched
<p>The support for this value depends on the device NFC settings.</p></li>
</ul></td>
<td>This key is optional, and <strong>it is supported since Tizen 3.0</strong>.</td>
<h3>Showing Wi-Fi Settings</h3>
-<p>To launch the Wi-Fi setting application to allow the user to activate and configure (or deactivate) Wi-Fi connections, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_WIFI</span> operation.</p>
-<p class="figure">Figure: Showing Wi-Fi settings</p>
+<p>To launch the Wi-Fi setting application to allow the user to activate and configure (or deactivate) Wi-Fi connections, use the <code>APP_CONTROL_OPERATION_SETTING_WIFI</code> operation.</p>
+<p align="center"><strong>Figure: Showing Wi-Fi settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_wifi.png" alt="Showing Wi-Fi settings" /></p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/wifi</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_WIFI</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/setting/wifi</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_WIFI</code> (in <code>.c</code> files only)</li></ul>
<h4>Example Code</h4>
<h3>Recording Audio</h3>
-<p>To record audio, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CREATE_CONTENT</span> operation with the audio MIME type. To give an option for recording audio, refer to the extras defined below.</p>
+<p>To record audio, use the <code>APP_CONTROL_OPERATION_CREATE_CONTENT</code> operation with the audio MIME type. To give an option for recording audio, refer to the extras defined below.</p>
<h4>Operation</h4>
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CREATE_CONTENT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li></ul>
+<ul><li><code>http://tizen.org/appcontrol/operation/create_content</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_CREATE_CONTENT</code> (in <code>.c</code> files only)</li></ul>
<h4>MIME Type (Mandatory)</h4>
- <p>Audio MIME type, such as <span style="font-family: Courier New,Courier,monospace">audio/m4a</span>, <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, and <span style="font-family: Courier New,Courier,monospace">audio/*</span></p>
+ <p>Audio MIME type, such as <code>audio/m4a</code>, <code>audio/ogg</code>, and <code>audio/*</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_SIZE</span></td>
+ <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+ <td><code>APP_CONTROL_DATA_SELECTED</code></td>
<td>The path of the created audio file. This key must be passed as a string.</td>
</tr>
</tbody>
<h2 id="vpnservice" name="vpnsvc">VPN Service in Mobile Applications</h2>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, this application control is available since Tizen 3.0.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ In mobile applications, this application control is available since Tizen 3.0.
+ </div>
<h3>Connecting and Disconnecting VPN</h3>
-<p>To connect VPN, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_VPN</span> operation. This operation helps you to connect or disconnect the VPN interface you created. You must set up the VPN service before launching this application control.</p>
-<p class="figure">Figure: Connecting and disconnecting VPN</p>
+<p>To connect VPN, use the <code>APP_CONTROL_OPERATION_SETTING_VPN</code> operation. This operation helps you to connect or disconnect the VPN interface you created. You must set up the VPN service before launching this application control.</p>
+<p align="center"><strong>Figure: Connecting and disconnecting VPN</strong></p>
<p align="center"><img src="../../images/common_appcontrol_vpn_service1.png" alt="Connecting VPN" /><img src="../../images/common_appcontrol_vpn_service2.png" alt="Disconnecting VPN" /></p>
<h4>Operation</h4>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/vpn</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_VPN</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li>
+<li><code>http://tizen.org/appcontrol/operation/setting/vpn</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_SETTING_VPN</code> (in <code>.c</code> files only)</li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
- <td>The method type. The available values are <span style="font-family: Courier New,Courier,monospace">up</span> (VPN interface up) and <span style="font-family: Courier New,Courier,monospace">down</span> (VPN interface down). This key must be passed as a string.</td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
+ <td>The method type. The available values are <code>up</code> (VPN interface up) and <code>down</code> (VPN interface down). This key must be passed as a string.</td>
<td rowspan="2">This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_NAME</span></td>
+ <td><code>APP_CONTROL_DATA_NAME</code></td>
<td>The VPN interface name. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The VPN service result string. This key must be passed as a string.</td>
</tr>
</tbody>
}
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;
<h2 id="inputdelegator" name="inputdelegator">Input Delegator in Wearable Applications</h2>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In wearable applications, this application control is available since Tizen 2.3.2.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ In wearable applications, this application control is available since Tizen 2.3.2.
+ </div>
<h3>Receiving User Input</h3>
-<p>To receive specific type of input from the user, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_GET_INPUT</span> operation. To give an option for the input delegator, refer to the extras defined below.</p>
+<p>To receive specific type of input from the user, use the <code>APP_CONTROL_OPERATION_GET_INPUT</code> operation. To give an option for the input delegator, refer to the extras defined below.</p>
-<p class="figure">Figure: Receiving user input</p>
+<p align="center"><strong>Figure: Receiving user input</strong></p>
<p align="center"><img src="../../images/common_appcontrol_inputdelegator.png" alt="Receiving user input" /> <img src="../../images/common_appcontrol_inputdelegator_voice.png" alt="Receiving user input" /></p>
<h4>Operation</h4>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/get_input</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files and manifest file)</li>
-<li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_GET_INPUT</span> (in <span style="font-family: Courier New,Courier,monospace">.c</span> files only)</li>
+<li><code>http://tizen.org/appcontrol/operation/get_input</code> (in <code>.c</code> files and manifest file)</li>
+<li><code>APP_CONTROL_OPERATION_GET_INPUT</code> (in <code>.c</code> files only)</li>
</ul>
<h4>MIME Type (Mandatory)</h4>
<ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">text/plain</span></p>
+ <p><code>text/plain</code></p>
</li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_INPUT_TYPE</span></td>
+ <td><code>APP_CONTROL_DATA_INPUT_TYPE</code></td>
<td>The input method type. This key must be passed as a string. The available values are:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">input_voice</span>: Ask for voice input</li>
- <li><span style="font-family: Courier New,Courier,monospace">input_emoticon</span>: Ask for emoticon input</li>
- <li><span style="font-family: Courier New,Courier,monospace">input_keyboard</span>: Ask for keyboard input</li>
+ <li><code>input_voice</code>: Ask for voice input</li>
+ <li><code>input_emoticon</code>: Ask for emoticon input</li>
+ <li><code>input_keyboard</code>: Ask for keyboard input</li>
</ul>
</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_INPUT_DEFAULT_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_INPUT_DEFAULT_TEXT</code></td>
<td>The preformatted text to be used as default input, such as "http://" for Web addresses. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_INPUT_GUIDE_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_INPUT_GUIDE_TEXT</code></td>
<td>The guide text, such as "Input user name". This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_INPUT_PREDICTION_HINT</span></td>
+ <td><code>APP_CONTROL_DATA_INPUT_PREDICTION_HINT</code></td>
<td>The text to receive an answer result from a smart reply. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+ <td><code>APP_CONTROL_DATA_TEXT</code></td>
<td>The result string from the input delegator. This key must be passed as a string.</td>
</tr>
</tbody>
}
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) {
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h2 id="api">Main Application Class</h2>
-<p>If you want to use DALi for your application UI, you must create the application with the <
span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications). This class provides the means for initializing the resources required by DALi.</p>
+<p>If you want to use DALi for your application UI, you must create the application with the <
code>Dali::Application</code> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications). This class provides the means for initializing the resources required by DALi.</p>
-<p>The following table lists the main functions you need in your application. They are all provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</p>
+<p>The following table lists the main functions you need in your application. They are all provided by the <code>Dali::Application</code> class.</p>
+<p align="center" class="Table"><strong>Table: Main functions</strong></p>
<table>
<tbody>
<tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">New()</span></td>
- <td>Constructs the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</td>
+ <td><code>New()</code></td>
+ <td>Constructs the <code>Dali::Application</code> class.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GetWindow()</span></td>
- <td>Retrieves the window used by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</td>
+ <td><code>GetWindow()</code></td>
+ <td>Retrieves the window used by the <code>Dali::Application</code> class.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span></td>
+ <td><code>SetViewMode()</code></td>
<td>Sets the viewing mode for the application.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Quit()</span></td>
+ <td><code>Quit()</code></td>
<td>Quits the application.</td>
</tr>
</tbody>
<p>Like all ordinary Tizen applications, the DALi application must start the main event loop. Afterwards, it can receive events from the platform.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">mainloop()</span> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
+<p>The <code>mainloop()</code> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
<h2 id="callback">Event Callbacks</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class emits several signals, which you can connect to.</p>
+<p>The <code>Dali::Application</code> class emits several signals, which you can connect to.</p>
-<p>The following table lists the callbacks for the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+<p>The following table lists the callbacks for the basic signals provided by the <code>Dali::Application</code> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+<p align="center" class="Table"><strong>Table: Callbacks for basic application event signals</strong></p>
<table>
- <caption>Table: Callbacks for basic application event signals</caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">InitSignal()</span></td>
+ <td><code>InitSignal()</code></td>
<td>Called when the DALi application is ready to start. The signal is emitted when the DALi core components (windows, resource, thread) are ready for use.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResumeSignal()</span></td>
+ <td><code>ResumeSignal()</code></td>
<td>Called when the application becomes visible. The signal is most useful when the application is ready to restart from the paused state.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PauseSignal()</span></td>
+ <td><code>PauseSignal()</code></td>
<td>Called when the application becomes invisible. The signal is emitted when the application is paused due to another application becoming active (for example, because of a call, alarm, or message alert).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TerminateSignal()</span></td>
+ <td><code>TerminateSignal()</code></td>
<td>Called when the application is terminated. The signal is useful when the application has resources to release at the end. By releasing those resources, you allow other applications to use them.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizeSignal()</span></td>
+ <td><code>ResizeSignal()</code></td>
<td>Called when the window size is changes. The signal is called when a window is created or resized. You can use the signal to change the UI layout according to the new window size.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AppControlSignal()</span></td>
+ <td><code>AppControlSignal()</code></td>
<td>Called when an <a href="app_controls_n.htm">application control</a> signal is emitted from another application. This provides the means to communicate between applications.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LanguageChangedSignal()</span></td>
+ <td><code>LanguageChangedSignal()</code></td>
<td>Called when the language is changed on the device. You can use the signal to refresh the display with the new language.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">RegionChangedSignal()</span></td>
+ <td><code>RegionChangedSignal()</code></td>
<td>Called when the region is changed. You can use the signal to refresh any region-specific information on the screen.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">BatteryLowSignal()</span></td>
+ <td><code>BatteryLowSignal()</code></td>
<td>Called when the battery state is low. You can use the signal to save any crucial information in case the battery state becomes so low that the application is forcefully terminated.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MemoryLowSignal()</span></td>
+ <td><code>MemoryLowSignal()</code></td>
<td>Called when the memory state is low. You can use the signal to release any unused memory.</td>
</tr>
</tbody>
<ol>
<li>Initialize the application:
<ol type="a">
-<li>To use the functions and data types of the DALi API, (in <a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><dali-toolkit/dali-toolkit.h></span> header file in your application:
+<li>To use the functions and data types of the DALi API, (in <a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">wearable</a> applications), include the <code><dali-toolkit/dali-toolkit.h></code> header file in your application:
<pre class="prettyprint">
#include <dali-toolkit/dali-toolkit.h>
</pre>
</li>
-<li>Use the following 2 <span style="font-family: Courier New,Courier,monospace;">using</span> directives for convenience, because all DALi APIs are contained in either <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:
+<li>Use the following 2 <code>using</code> directives for convenience, because all DALi APIs are contained in either <code>Dali</code> or <code>Dali::Toolkit</code> namespace:
<pre class="prettyprint">
using namespace Dali;
</ol>
</li>
-<li>Create the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class instance to initialize and set up DALi:
+<li>Create the <code>Dali::Application</code> class instance to initialize and set up DALi:
<pre class="prettyprint">
Application application = Application::New( &argc, &argv );
<li>Connect signals to keep yourself informed when certain system events occur.
-<p>To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way to start a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals.</p>
+<p>To manage signal connection safely, DALi provides the <code>Dali::ConnectionTracker</code> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way to start a DALi application is to create a class derived from the <code>Dali::ConnectionTracker</code> class and use its member functions as callback functions for DALi signals.</p>
-<p>When the application receives the <span style="font-family: Courier New,Courier,monospace;">InitSignal()</span>, it can build the 3D scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorld::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">Dali::Application::InitSignal()</span> function:</p>
+<p>When the application receives the <code>InitSignal()</code>, it can build the 3D scene graph. Connect the <code>HelloWorld::Create()</code> callback to the <code>Dali::Application::InitSignal()</code> function:</p>
<pre class="prettyprint">
mApplication.InitSignal().Connect( this, &HelloWorld::Create );
<li>Create an actor and add it to the stage.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> UI component (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string.</p>
+<p>The <
code>Dali::Toolkit::TextLabel</code> UI component (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string.</p>
<p>To display the text label, add it to a stage. The stage instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function:</p>
<pre class="prettyprint">
stage.Add( textLabel );
</pre>
-<p>The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
+<p>The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <code>TextLabel</code> component is removed from the stage, it remains alive through the reference.</p>
</li>
<li>Handle touch and key event signals:
<ul>
<li>Use the <a href="#api">Dali::WatchApplication class</a>.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">A DALi watch application is implemented similarly to a <a href="dali_basic_app_n.htm">DALi basic UI application</a>, since the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1WatchApplication.html">Dali::WatchApplication</a> class inherits from the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">Dali::Application</a> class. Consequently, make sure you are familiar with the basic UI application details before tackling a watch application.</td>
- </tr>
- </tbody>
- </table></li>
+ <div class="note">
+ <strong>Note</strong>
+ A DALi watch application is implemented similarly to a <a href="dali_basic_app_n.htm">DALi basic UI application</a>, since the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1WatchApplication.html">Dali::WatchApplication</a> class inherits from the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">Dali::Application</a> class. Consequently, make sure you are familiar with the basic UI application details before tackling a watch application.
+ </div></li>
<li>Make sure you <a href="#mainloop">start the event loop</a>.</li>
<li><a href="#callback">React to application events</a> with callbacks.</li>
<li>Manage the time handle and display the time with the DALi 3D UI.
- <p>The <span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span> and <span style="font-family: Courier New,Courier,monospace;">AmbientTickSignal()</span> functions trigger callback functions to update the display with the new accurate time. The <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle is provided with the callback function to help you to update the current time properly.</p></li>
+ <p>The <code>TimeTickSignal()</code> and <code>AmbientTickSignal()</code> functions trigger callback functions to update the display with the new accurate time. The <code>WatchTime</code> handle is provided with the callback function to help you to update the current time properly.</p></li>
</ul>
-<p class="figure">Figure: DALi watch application</p>
+<p align="center"><strong>Figure: DALi watch application</strong></p>
<p align="center"><img alt="DALi watch application" src="../../images/dali_watch_application.png"/></p>
<p>For the steps of creating the basic parts of a simple DALi watch application, see <a href="#create">Basics of Creating a DALi Watch Application</a>.</p>
<h2 id="api">Main Application Classes</h2>
-<p>If you want to use DALi for your watch application, you must create the application with the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class. This class provides the means for initializing the resources required by DALi.</p>
+<p>If you want to use DALi for your watch application, you must create the application with the <code>Dali::WatchApplication</code> class. This class provides the means for initializing the resources required by DALi.</p>
<p>The following table lists the main functions you need in your application to retrieve the current time. They are all provided by the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1WatchTime.html">Dali::WatchTime</a> class.</p>
+<p align="center" class="Table"><strong>Table: Main functions</strong></p>
<table>
<tbody>
<tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GetHour()</span></td>
- <td>Get the hour from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ <td><code>GetHour()</code></td>
+ <td>Get the hour from the <code>WatchTime</code> handle.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GetHour24()</span></td>
- <td>Get the hour from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle in the 24-hour format.</td>
+ <td><code>GetHour24()</code></td>
+ <td>Get the hour from the <code>WatchTime</code> handle in the 24-hour format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GetMinute()</span></td>
- <td>Get the minute from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ <td><code>GetMinute()</code></td>
+ <td>Get the minute from the <code>WatchTime</code> handle.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GetSecond()</span></td>
- <td>Get the second from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ <td><code>GetSecond()</code></td>
+ <td>Get the second from the <code>WatchTime</code> handle.</td>
</tr>
</tbody>
</table>
<p>Like all ordinary Tizen applications, the DALi watch application must start the main event loop. Afterwards, it can receive usual platform events and dedicated watch events from the platform.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">mainloop()</span> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
+<p>The <code>mainloop()</code> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
<h2 id="callback">Event Callbacks</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class emits several signals, which you can connect to.</p>
+<p>The <code>Dali::WatchApplication</code> class emits several signals, which you can connect to.</p>
-<p>The following table lists the callbacks for the watch application signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+<p>The following table lists the callbacks for the watch application signals provided by the <code>Dali::WatchApplication</code> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+<p align="center" class="Table"><strong>Table: Callbacks for watch application event signals</strong></p>
<table>
-<caption>Table: Callbacks for watch application event signals</caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span></td>
+ <td><code>TimeTickSignal()</code></td>
<td>Called every second. You can use the signal to update the time on the screen.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AmbientTickSignal()</span></td>
+ <td><code>AmbientTickSignal()</code></td>
<td>Called every minute when the device is in the ambient mode. You can use the signal to update the time on the screen.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AmbientChangedSignal()</span></td>
+ <td><code>AmbientChangedSignal()</code></td>
<td>Called when the device enters or exits the ambient mode.</td>
</tr>
</tbody>
<ol>
<li>Initialize the application:
<ol type="a">
-<li>To use the functions and data types of the DALi watch application, include the <span style="font-family: Courier New,Courier,monospace;"><dali/public-api/dali-wearable.h></span> header file in your application:
+<li>To use the functions and data types of the DALi watch application, include the <code><dali/public-api/dali-wearable.h></code> header file in your application:
<pre class="prettyprint">
#include <dali/public-api/dali-wearable.h>
</pre>
</li>
-<li>Like in a basic UI application, use the following 2 <span style="font-family: Courier New,Courier,monospace;">using</span> directives for convenience, because all DALi APIs are contained in either <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:
+<li>Like in a basic UI application, use the following 2 <code>using</code> directives for convenience, because all DALi APIs are contained in either <code>Dali</code> or <code>Dali::Toolkit</code> namespace:
<pre class="prettyprint">
using namespace Dali;
</ol>
</li>
-<li>Create the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class instance to initialize and set up DALi for a watch application:
+<li>Create the <code>Dali::WatchApplication</code> class instance to initialize and set up DALi for a watch application:
<pre class="prettyprint">
WatchApplication application = WatchApplication::New( &argc, &argv );
<li>Connect signals to keep yourself informed when certain system events occur.
<ol type="a">
-<li>To manage signal connection safely, DALi provides the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">Dali::ConnectionTracker</a> class. A typical way to start a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals.
+<li>To manage signal connection safely, DALi provides the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">Dali::ConnectionTracker</a> class. A typical way to start a DALi application is to create a class derived from the <code>Dali::ConnectionTracker</code> class and use its member functions as callback functions for DALi signals.
-<p>When the application receives the <span style="font-family: Courier New,Courier,monospace;">InitSignal()</span>, it can create UI components. Connect the <span style="font-family: Courier New,Courier,monospace;">WatchExample::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication::InitSignal()</span> function:</p>
+<p>When the application receives the <code>InitSignal()</code>, it can create UI components. Connect the <code>WatchExample::Create()</code> callback to the <code>Dali::WatchApplication::InitSignal()</code> function:</p>
<pre class="prettyprint">
class WatchExample : public ConnectionTracker
</li>
<li>Handle the tick signals.
-<p>The <span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span> callback is triggered once per second. Retrieve the current time from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> time handle to draw the updated time.</p>
+<p>The <code>TimeTickSignal()</code> callback is triggered once per second. Retrieve the current time from the <code>WatchTime</code> time handle to draw the updated time.</p>
-<p>You can get the current hour, minute, and second from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> time handle by using the <span style="font-family: Courier New,Courier,monospace;">time.GetHour()</span>, <span style="font-family: Courier New,Courier,monospace;">time.GetMinute()</span>, and <span style="font-family: Courier New,Courier,monospace;">time.GetSecond()</span> functions.</p>
+<p>You can get the current hour, minute, and second from the <code>WatchTime</code> time handle by using the <code>time.GetHour()</code>, <code>time.GetMinute()</code>, and <code>time.GetSecond()</code> functions.</p>
<pre class="prettyprint">
mApplication.TimeTickSignal().Connect( this, &WatchExample::OnTimeTick );
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Wearable Native</a></li>
- <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Bundle" target="_blank">Bundle Sample Description</a></li>
+ <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Bundles" target="_blank">Bundles Sample Description</a></li>
</ul>
</div></div>
</div>
<p>To enable your application to use the bundle functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the Bundle API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><bundle.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Bundle API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">wearable</a> applications), include the <code><bundle.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <bundle.h>
</pre>
</pre>
</li>
<li>
-<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> function:</p>
+<p>When no longer needed, release the bundle by calling the <code>bundle_free()</code> function:</p>
<pre class="prettyprint">
bundle_free(bund);
</pre>
<p>The bundle content is in the form of key-value pairs. The key is always a string. The value can be of the following types:</p>
-<table>
- <caption>
- Table: Bundle value types
- </caption>
+ <p align="center" class="Table"><strong>Table: Bundle value types</strong></p>
+<table>
<tbody>
<tr>
<th>Value constant</th>
<th>Value type</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_STR</span></td>
+ <td><code>BUNDLE_TYPE_STR</code></td>
<td>String (default)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_STR_ARRAY</span></td>
+ <td><code>BUNDLE_TYPE_STR_ARRAY</code></td>
<td>String array</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_BYTE</span></td>
+ <td><code>BUNDLE_TYPE_BYTE</code></td>
<td>Byte</td>
</tr>
</tbody>
<p>To add content to a bundle, use a function associated with the type of the value you want to add:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">bundle_add_byte()</span></li>
+ <li><code>bundle_add_str_array()</code></li>
+ <li><code>bundle_add_str()</code></li>
+ <li><code>bundle_add_byte()</code></li>
</ul>
<pre class="prettyprint">
<li>Get values from the bundle using the function associated with the type of the value you want to get:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span></li>
+<li><code>bundle_get_str()</code></li>
+<li><code>bundle_get_str_array()</code></li>
+<li><code>bundle_get_byte()</code></li>
</ul>
-<p>You can also get the number of bundle items with the <span style="font-family: Courier New,Courier,monospace">bundle_get_count()</span> function, and the type of a value with a specific key with the <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span> function.</p>
+<p>You can also get the number of bundle items with the <code>bundle_get_count()</code> function, and the type of a value with a specific key with the <code>bundle_get_type()</code> function.</p>
<pre class="prettyprint">
void
dlog_print(DLOG_DEBUG, LOG_TAG, "the number of bundle items: %d", count);
</pre>
</li>
-<li>Delete a key-value pair from the bundle content using the <span style="font-family: Courier New,Courier,monospace">bundle_del()</span> function:
+<li>Delete a key-value pair from the bundle content using the <code>bundle_del()</code> function:
<pre class="prettyprint">
bundle_del(b, "key2");
<h2 id="iterate" name="iterate">Iterating a Bundle</h2>
-<p>To iterate through the bundle records, use the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function, which requires a callback function to operate. The callback function must first determine the key-value pairs and then perform the specified operations.</p>
+<p>To iterate through the bundle records, use the <code>bundle_foreach()</code> function, which requires a callback function to operate. The callback function must first determine the key-value pairs and then perform the specified operations.</p>
-<p>After the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function call, the callback function is invoked for each record in the bundle:</p>
+<p>After the <code>bundle_foreach()</code> function call, the callback function is invoked for each record in the bundle:</p>
<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;
<h2 id="encode" name="encode">Encoding and Decoding a Bundle</h2>
-<p>To store or send a bundle over a serial connection, encode it to <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> (a typedef of <span style="font-family: Courier New,Courier,monospace">unsigned char</span>) with the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> function, and write the <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> instance to a file, for example.</p>
-<p>To open the encoded bundle, use the <span style="font-family: Courier New,Courier,monospace">bundle_decode()</span> function. When you no longer need them, release the encoded data and the created bundle.</p>
+<p>To store or send a bundle over a serial connection, encode it to <code>bundle_raw</code> (a typedef of <code>unsigned char</code>) with the <code>bundle_encode()</code> function, and write the <code>bundle_raw</code> instance to a file, for example.</p>
+<p>To open the encoded bundle, use the <code>bundle_decode()</code> function. When you no longer need them, release the encoded data and the created bundle.</p>
<pre class="prettyprint">
void
<p>The main features of the Data Control API include:</p>
<ul>
<li>Working with map-type data controls
-<p>With <span style="font-family: Courier New,Courier,monospace">DATA_CONTROL_MAP</span> you can <a href="#map1">use a key-value-type data control</a> to access data exported by other service applications. You can also define a key-value-type data control provider to export specific data from your service application.</p></li>
+<p>You can <a href="#map1">use a key-value-type data control</a> to access data exported by service applications. You can also define a key-value-type data control provider to export specific data from your service application.</p>
+<p>The consumer sends a request to the provider to get, set, add, or remove map-type data. The provider processes the request and sends a response back to the consumer.</p>
+</li>
<li>Working with SQL-type data controls
-<p>With <span style="font-family: Courier New,Courier,monospace">DATA_CONTROL_SQL</span> you can <a href="#map2">use a SQL-type data control</a> to access specific data exported by other service applications. You can also define a SQL-type data control provider to export specific data from your service application.</p></li>
+<p>You can <a href="#map2">use a SQL-type data control</a> to access specific data exported by service applications. You can also define a SQL-type data control provider to export specific data from your service application.</p>
+<p>The consumer sends a request to the provider to insert, update, select, or delete SQL-type data. The provider processes the request and sends a response back to the consumer.</p>
+</li>
<li>Monitoring data changes
-<p>
With data controls you can supply operations to access shared data, get back results, and <a href="#map3">monitor data changes and provide notifications about them</a>. The available notification types are listed in the <span style="font-family: Courier New,Courier,monospace">data_control_data_change_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">wearable</a> applications).</p></li>
+<p>
You can <a href="#map3">monitor data changes and provide notifications about them</a>. The available notification types are listed in the <code>data_control_data_change_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">wearable</a> applications).</p></li>
</ul>
-<p>You can also <a href="#export">export functionalities of your Tizen native application</a> in the application project settings in the IDE.</p>
-
-<p>The data control requires the following provider information:</p>
-<ul><li>Provider ID
-<p>Unique provider ID to identify the data control for a specific provider.</p>
-<p>Format:</p>
-<ul><li>Provider ID must consist of alpha-numeric letters separated with the period (".") character, and it must start with letters.</li>
-<li>Custom provider ID must start with a vendor name to avoid conflicts with other developers.</li>
-<li>IRI format: <span style="font-family: Courier New,Courier,monospace">http://{provider URI}/datacontrol/provider/{provider name}</span></li></ul></li>
-<li>Data ID
-<p>String ID for identifying specific data, usually a database table name or a registry section name.</p>
-<p>Format:</p>
-<ul><li>Data ID consists of one or more components, separated by a slash ("/") character.</li></ul></li></ul>
-
+<p>To create a provider, you must <a href="#export">export its provider functionalities</a> in the application project settings in the IDE. For the consumer to access shared data, it must know the provider ID and data ID.</p>
- <p class="figure">Figure: Data control mechanism</p>
+ <p align="center"><strong>Figure: Data control mechanism</strong></p>
<p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the data control functionality:</p>
<ol>
<li>
-<p>To use the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications), the consumer application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications), the consumer has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/datasharing</privilege>
</pre>
</li>
<li>
-<p>For the provider application, in the Tizen Studio, double-click <strong>tizen-manifest.xml</strong>, and in the Tizen Manifest Editor, go to <strong>Advanced > Data Control</strong>, and click <strong>+</strong> to add the provider details. Add the <strong>Read</strong> and <strong>Write</strong> access rights to both <strong>SQL</strong> and <strong>Map</strong> types.</p>
+<p>For the provider, in the Tizen Studio, double-click <strong>tizen-manifest.xml</strong>, and in the manifest editor, go to <strong>Advanced > Data Control</strong>, and click <strong>+</strong> to add the provider details. Add the <strong>Read</strong> and <strong>Write</strong> access rights to both <strong>SQL</strong> and <strong>Map</strong> types.</p>
-<p>The following code example shows how the <span style="font-family: Courier New,Courier,monospace"><datacontrol></span> element is consequently added to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p>
+<p>The following code example shows how the <code><datacontrol></code> element is consequently added to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="@PACKAGE_NAME@" version="@VERSION@"
- install-location="internal-only">
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4"
+ package="@PACKAGE_NAME@" version="@VERSION@" install-location="internal-only">
<label>datacontrolprovider</label>
<author email="PUT YOUR EMAIL" href="www.tizen.org">PUT YOUR NAME</author>
<description>datacontrolprovider</description>
exec="datacontrolprovider"
nodisplay="true" multiple="false" type="capp" taskmanage="true"
auto-restart="false" on-boot="false">
- <datacontrol providerid = "Your Provider ID"
- access="ReadWrite" type="Sql"/>
- <datacontrol providerid = "Your Provider ID"
- access="ReadWrite" type="Map"/>
+ <span class="highlight"><datacontrol providerid = "Your Provider ID"</span>
+ <span class="highlight">access="ReadWrite" type="Sql"/></span>
+ <span class="highlight"><datacontrol providerid = "Your Provider ID"</span>
+ <span class="highlight">access="ReadWrite" type="Map"/></span>
</service-application>
<privileges>
<privilege>http://tizen.org/privilege/datasharing</privilege>
</li>
<li>
-<p>To use the functions and data types of the Data Control API, include the <span style="font-family: Courier New,Courier,monospace"><data_control.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Data Control API, include the <code><data_control.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <data_control.h>
#include <glib.h>
#include <string.h>
</pre>
-<p>To execute this application, the <span style="font-family: Courier New,Courier,monospace"><sqlite3.h></span>, <span style="font-family: Courier New,Courier,monospace"><stdlib.h></span>, <span style="font-family: Courier New,Courier,monospace"><glib.h></span>, and <span style="font-family: Courier New,Courier,monospace"><string.h></span> header files have to be included too.</p>
+<p>To execute the applications in the following use cases, the <code><sqlite3.h></code>, <code><stdlib.h></code>, <code><glib.h></code>, and <code><string.h></code> header files have to be included too.</p>
</li>
</ol>
<h2 id="map1" name="map1">Working with Map-type Data Controls</h2>
-<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_map_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_set_data_id()</span> function, you can get the specific map-type data control uniquely. After resolving the data control, call the data control map APIs, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_set()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_get()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_map_remove()</span>.</p>
-<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_get_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_remove_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_map_response_cb</span> struct. The response callback is invoked when a service application finishes its operation.</p>
-<p>To get, add, remove, and set map-type data using the Data Control API:</p>
+<p>In the consumer, you must first get the unique map-type <code>datacontrol_h</code> instance using the <code>data_control_map_create()</code>, <code>data_control_map_set_provider_id()</code>, or <code>data_control_map_set_data_id()</code> function. Afterwards, you can send requests to the provider using the <code>data_control_map_get()</code>, <code>data_control_map_set()</code>, <code>data_control_map_add()</code>, and <code>data_control_map_remove()</code> functions.</p>
+
+<p>The provider returns a response to the consumer. The consumer can handle the response in a callback of the <code>data_control_map_response_cb</code> struct (in <a href="../../../../org.tizen.native.mobile.apireference/structdata__control__map__response__cb.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structdata__control__map__response__cb.html">wearable</a> applications), which is triggered when the provider finishes the requested operation.</p>
+<p>To get, set, add, and remove map-type data:</p>
<ol>
-<li id="provider">Implement the provider application.
-<p>The provider application stores and provides data to the consumer application. The provider application has 4 operations: get, add, remove, and set. To use the map-type Data Control API, these 4 operation callbacks must be implemented.</p>
+<li id="provider">Implement the provider application:
+<ol type="a"><li>The provider stores and provides data to the consumer. The provider has 4 operations that the consumer can request: get, set, add, and remove.
+
+<p>Implement the callbacks to react to the requests from the consumer:</p>
<pre class="prettyprint">
struct map_data {
typedef struct map_data map_data_s;
static GHashTable *map_repository_test;
+
+/* Callback for handling the get operation request */
void
-get_value_request_cb(int request_id, data_control_h provider, const char *key, void *user_data)
+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;
ret_value_count = map_data->arr_size;
}
- int ret = data_control_provider_send_map_get_value_result(request_id, val_arr, ret_value_count);
+ int ret = data_control_provider_send_map_get_value_result(request_id, val_arr,
+ ret_value_count);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "send_map_get_result failed with error: %d", ret);
+ 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 */
void
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]);
}
}
+/* Callback for handling the remove operation request */
void
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");
}
</pre>
</li>
<li>
-<p>Register the callbacks within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function (generated by the Tizen Studio) using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function:</p>
+<p>Register the operation callbacks within the <code>app_create()</code> function (generated by the Tizen Studio) using the <code>data_control_provider_map_register_cb()</code> function:</p>
<pre class="prettyprint">
void
__free_key(gpointer data)
void
initialize_datacontrol_provider()
{
- map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal, __free_key, __free_data);
+ map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal,
+ __free_key, __free_data);
map_callback.get_cb = get_value_request_cb;
map_callback.add_cb = add_value_request_cb;
int result = data_control_provider_map_register_cb(&map_callback);
if (result != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "data_control_provider_map_register_cb failed with error: %d", result);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "data_control_provider_map_register_cb failed with error: %d",
+ result);
else
dlog_print(DLOG_INFO, LOG_TAG, "Provider map register success");
}
}
</pre>
</li>
+</ol>
+</li>
+<li id="consumer">Implement the consumer application:
+<ol type="a"><li>The consumer sends requests for the get, set, add, and remove operations to the provider, and receives the results as a response from the provider.
-<li id="consumer">Implement the consumer application.
-<p>The consumer application requests get, set, add, and remove functions to the provider application and receives the results from the provider application.</p>
-
-<p>Implement the response callbacks. The response callbacks receive the request result and data from the provider.</p>
+<p>Implement the response callbacks, which receive the request result and data from the provider:</p>
<pre class="prettyprint">
-/* Callback functions */
+/* Callback for the get operation response */
void
map_get_response_cb(int request_id, data_control_h provider,
char **ret_value_list, int ret_value_count, bool provider_ret,
const char *error, void *user_data)
{
if (provider_ret) {
- dlog_print(DLOG_INFO, LOG_TAG, "The get operation is successful. Value count: %d ", ret_value_count);
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "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]);
+ 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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "The get operation for the request %d failed.
+ error message: %s", request_id, error);
}
}
+/* Callback for the set operation response */
void
map_set_response_cb(int request_id, data_control_h provider, bool provider_ret,
const char *error, void *user_data)
if (provider_ret) {
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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "The set operation for the request %d failed.
+ error message: %s", request_id, error);
}
}
+/* Callback for the add operation response */
void
map_add_response_cb(int request_id, data_control_h provider, bool provider_ret,
const char *error, void *user_data)
if (provider_ret) {
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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "The add operation for the request %d failed.
+ error message: %s", request_id, error);
}
}
+/* Callback for the remove operation response */
void
map_remove_response_cb(int request_id, data_control_h provider, bool provider_ret,
const char *error, void *user_data)
if (provider_ret) {
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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "The remove operation for the request %d failed.
+ error message: %s", request_id, error);
}
}
</pre>
</li>
<li>
-<p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function generated by the Tizen Studio.</p>
+<p>To identify the provider and data, initialize a data control handler within the <code>app_create()</code> function generated by the Tizen Studio:</p>
<pre class="prettyprint">
data_control_map_response_cb map_callback;
void
/* Create data control handler */
ret = data_control_map_create(&(ad->provider_h));
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "creating data control provider failed with error: %d", ret);
ret = data_control_map_set_provider_id(ad->provider_h, provider_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "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 callback */
+ /* Set response callbacks */
map_callback.get_cb = map_get_response_cb;
map_callback.set_cb = map_set_response_cb;
map_callback.add_cb = map_add_response_cb;
map_callback.remove_cb = map_remove_response_cb;
- /* Register response callback */
- ret = data_control_map_register_response_cb(ad->provider_h, &map_callback, NULL);
+ /* Register response callbacks */
+ 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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "Registering the callback function failed with error: %d", ret);
if (ret == DATA_CONTROL_ERROR_IO_ERROR)
dlog_print(DLOG_ERROR, LOG_TAG, "I/O error");
int req_id = 0;
- /* Add value */
+ /* Send a request to add a value */
const char *key = "key";
const char *value = "value";
data_control_map_add(ad->provider_h, key, value, &req_id);
- /* Get value */
+ /* Send a request to get a value */
data_control_map_get(ad->provider_h, key, &req_id);
- /* Set value */
+ /* Send a request to set a value */
const char *old_value = "old value";
const char *new_value = "new value";
data_control_map_set(ad->provider_h, key, old_value, new_value, &req_id);
- /* Remove value */
+ /* Send a request to remove a value */
data_control_map_remove(ad->provider_h, key, value, &req_id);
}
}
</pre>
</li>
+</ol></li>
</ol>
- <h2 id="map2" name="map2">Working with SQL-type Data Controls</h2>
-<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_data_id()</span> function, you can get the specific SQL-type data control uniquely. After resolving the data control, call the data control SQL APIs, such as <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_select()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete()</span>.</p>
-<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_sql_response_cb</span> struct. The response callback is invoked when a service application finishes its operation.</p>
-<p>Once you get the <span style="font-family: Courier New,Courier,monospace">result_set_cursor</span> object using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span> callback, you can use the following functions to get information:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_first()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_last()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_next()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_set_previous()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_count()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_name()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_size()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_type()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_blob_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int64_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_double_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_text_data()</span></li></ul>
-
-<p>To insert, select, update, and delete SQL-type data using the Data Control API:</p>
+<h2 id="map2" name="map2">Working with SQL-type Data Controls</h2>
+<p>In the consumer, you must first get the unique SQL-type <code>datacontrol_h</code> instance using the <code>data_control_sql_create()</code>, <code>data_control_sql_set_provider_id()</code>, or <code>data_control_sql_set_data_id()</code> function. Afterwards, you can send requests to the provider using the <code>datacontrol_sql_select()</code>, <code>data_control_sql_insert()</code>, <code>data_control_sql_update()</code>, and <code>data_control_sql_delete()</code> functions.</p>
+<p>The provider returns a response to the consumer. The consumer can handle the response in a callback of the <code>data_control_sql_response_cb</code> struct (in <a href="../../../../org.tizen.native.mobile.apireference/structdata__control__sql__response__cb.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structdata__control__sql__response__cb.html">wearable</a> applications), which is triggered when the provider finishes the requested operation.</p>
+
+<p>To insert, select, update, and delete SQL-type data:</p>
<ol>
-<li id="provider2">Implement the provider application.
-<p>The provider application stores and provides data to the consumer application. The provider application has 4 operations: insert, select, update, and delete. To use the SQL-type Data Control API, these operation callbacks have to be implemented.</p>
+<li id="provider2">Implement the provider application:
+<ol type="a"><li>The provider stores and provides data to the consumer. The provider has 4 operations that the consumer can request: insert, select, update, and delete.
+
+<p>Implement the callbacks to react to the requests from the consumer:</p>
<pre class="prettyprint">
data_control_provider_sql_cb *sql_callback;
static sqlite3* db;
+
+/* Callback for handling the insert operation request */
void
-insert_request_cb(int request_id, data_control_h provider, bundle *insert_data, void *user_data)
+insert_request_cb(int request_id, data_control_h provider, bundle *insert_data,
+ void *user_data)
{
- char* command = data_control_provider_create_insert_statement(provider, insert_data);
+ char* command = data_control_provider_create_insert_statement(provider,
+ insert_data);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK) {
long long inserted_row_id = sqlite3_last_insert_rowid(db);
ret = data_control_provider_send_insert_result(request_id, inserted_row_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "insert_send_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "insert_send_result failed with error: %d", ret);
dlog_print(DLOG_INFO, LOG_TAG, "[insert_request_cb] send result success");
free(command);
}
+/* Callback for handling the select operation request */
void
-delete_request_cb(int request_id, data_control_h provider, const char *where, 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)
{
- 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);
+ sqlite3_stmt* sql_stmt = NULL;
+
+ char* command = data_control_provider_create_select_statement(provider,
+ column_list,
+ column_count,
+ where,
+ order);
+ int ret = sqlite3_prepare_v2(db, command, strlen(command), &sql_stmt, NULL);
if (ret != SQLITE_OK) {
data_control_provider_send_error(request_id, sqlite3_errmsg(db));
free(command);
return;
}
- ret = data_control_provider_send_delete_result(request_id);
+ ret = data_control_provider_send_select_result(request_id, (void *)sql_stmt);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "delete_send_result failed with error: %d", ret);
- dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] delete success");
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "select_send_result failed with error: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "[select_request_cb] send result success");
+ sqlite3_finalize(sql_stmt);
free(command);
}
+/* Callback for handling the update 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)
+update_request_cb(int request_id, data_control_h provider, bundle *update_data,
+ const char *where, void *user_data)
{
- sqlite3_stmt* sql_stmt = NULL;
-
- char* command = data_control_provider_create_select_statement(provider, column_list,
- column_count, where, order);
- int ret = sqlite3_prepare_v2(db, command, strlen(command), &sql_stmt, NULL);
+ char* command = data_control_provider_create_update_statement(provider,
+ 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));
free(command);
return;
}
- ret = data_control_provider_send_select_result(request_id, (void *)sql_stmt);
+ ret = data_control_provider_send_update_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "select_send_result failed with error: %d", ret);
- dlog_print(DLOG_INFO, LOG_TAG, "[select_request_cb] send result success");
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "update_send_result failed with error: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
- sqlite3_finalize(sql_stmt);
free(command);
}
+/* Callback for handling the delete operation request */
void
-update_request_cb(int request_id, data_control_h provider, bundle *update_data,
- const char *where, void *user_data)
+delete_request_cb(int request_id, data_control_h provider, const char *where,
+ void *user_data)
{
- char* command = data_control_provider_create_update_statement(provider, update_data, where);
+ 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) {
data_control_provider_send_error(request_id, sqlite3_errmsg(db));
return;
}
- ret = data_control_provider_send_update_result(request_id);
+ ret = data_control_provider_send_delete_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "update_send_result failed with error: %d", ret);
- dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "delete_send_result failed with error: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] delete success");
free(command);
}
</pre>
</li>
<li>
-<p>Register the callbacks using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_register_cb()</span> function and create the database:</p>
+<p>Register the operation callbacks using the <code>data_control_provider_sql_register_cb()</code> function and create the database:</p>
<pre class="prettyprint">
int
create_database()
int ret = sqlite3_open_v2(Your DB Path, &db, open_flags, NULL);
if (ret != SQLITE_OK) {
- dlog_print(DLOG_ERROR, LOG_TAG, "database creation failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "database creation failed with error: %d", ret);
return ret;
}
- char* sql_command = "CREATE TABLE IF NOT EXISTS Dictionary (WORD VARCHAR(30), WORD_DESC TEXT, WORD_NUM INT, Point INT)";
+ char* sql_command = "CREATE TABLE IF NOT EXISTS Dictionary (WORD VARCHAR(30),
+ WORD_DESC TEXT, WORD_NUM INT, Point INT)";
ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
if (ret != SQLITE_OK)
- dlog_print(DLOG_ERROR, LOG_TAG, "database table creation failed with error: %d", ret);
+ 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, "database table creation failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "database table creation failed with error: %d", ret);
dlog_print(DLOG_INFO, LOG_TAG, "DB init Success.");
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;
sql_callback->update_cb = update_request_cb;
result = data_control_provider_sql_register_cb(sql_callback, NULL);
if (result != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, "data_control_sql_response_c failed with error: %d", result);
+ dlog_print(DLOG_ERROR,
+ "data_control_sql_response_c failed with error: %d", result);
else
dlog_print(DLOG_INFO, LOG_TAG, "Provider SQL register success");
}
</pre>
</li>
+</ol></li>
+<li id="consumer2">Implement the consumer application:
+<ol type="a"><li>The consumer sends requests for the insert, select, update, and delete operations to the provider, and receives the results as a response from the provider.
-<li id="consumer2">Implement the consumer application.
-<p>The consumer application requests the insert, select, update, and delete functions to the provider application and receives the result from the provider application.</p>
-
-<p>Implement the response callbacks. The response callbacks receive the request result and data from the provider.</p>
+<p>Implement the response callbacks, which receive the request result and data from the provider:</p>
<pre class="prettyprint">
+/* Callback for the insert operation response */
void
-sql_delete_response_cb(int request_id, data_control_h provider, bool provider_result,
+sql_insert_response_cb(int request_id, data_control_h provider,
+ long long inserted_row_id, 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);
- }
-}
-
-void
-sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id,
- bool provider_result, const char *error, void *user_data)
-{
- if (provider_result) {
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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "The insert operation for the request %d failed.
+ error message: %s", request_id, error);
}
}
+/* Callback for the select operation response */
void
-sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor,
- bool provider_result, const char *error, void *user_data)
+sql_select_response_cb(int request_id, data_control_h provider,
+ result_set_cursor cursor, bool provider_result,
+ const char *error, void *user_data)
{
if (provider_result) {
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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "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)
+{
+ 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);
}
}
</pre>
+<p>Once you get the <code>result_set_cursor</code> object in the select operation response callback, you can use the following functions to get information:</p>
+<ul><li><code>data_control_sql_step_first()</code></li>
+<li><code>data_control_sql_step_last()</code></li>
+<li><code>data_control_sql_step_next()</code></li>
+<li><code>data_control_sql_set_previous()</code></li>
+<li><code>data_control_sql_get_column_count()</code></li>
+<li><code>data_control_sql_get_column_name()</code></li>
+<li><code>data_control_sql_get_column_item_size()</code></li>
+<li><code>data_control_sql_get_column_item_type()</code></li>
+<li><code>data_control_sql_get_blob_data()</code></li>
+<li><code>data_control_sql_get_int_data()</code></li>
+<li><code>data_control_sql_get_int64_data()</code></li>
+<li><code>data_control_sql_get_double_data()</code></li>
+<li><code>data_control_sql_get_text_data()</code></li></ul>
</li>
-<li>
-<p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function generated by the Tizen Studio.</p>
+<li>To identify the provider and data, initialize a data control handler within the <code>app_create()</code> function generated by the Tizen Studio:
<pre class="prettyprint">
data_control_sql_response_cb sql_callback;
void
const char *provider_id = Your Provider ID;
const char *data_id = "Dictionary";
+ /* Create data control handler */
ret = data_control_sql_create(&(ad->provider_h));
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "creating data control provider failed with error: %d", ret);
ret = data_control_sql_set_provider_id(ad->provider_h, provider_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "setting provider id failed with error: %d", ret);
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.insert_cb = sql_insert_response_cb;
sql_callback.select_cb = sql_select_response_cb;
sql_callback.update_cb = sql_update_response_cb;
- ret = data_control_sql_register_response_cb(ad->provider_h, &sql_callback, NULL);
+ /* Register response callbacks */
+ 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);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "Registering the callback function failed with error: %d", ret);
dlog_print(DLOG_INFO, LOG_TAG, "Init data control success");
int req_id = 0;
- /* Insert row */
+ /* Send a request to insert a row */
bundle *b = bundle_create();
bundle_add_str(b, "WORD", "'test'");
bundle_add_str(b, "WORD_DESC", "'test desc'");
data_control_sql_insert(ad->provider_h, b, &req_id);
- /* Select row */
+ /* Send a request to select a row */
char *column_list[2];
column_list[0] = "WORD";
column_list[1] = "WORD_DESC";
data_control_sql_select(ad->provider_h, column_list, 2, where, order, &req_id);
- /* Add row */
+ /* Send a request to add a row */
bundle_add_str(b, "WORD", "'test_new'");
data_control_sql_update(ad->provider_h, b, where, &req_id);
- /* Delete row */
+ /* Send a request to delete a row */
const char *where_delete = "WORD = 'test'";
result = data_control_sql_delete(ad->provider_h, where_delete, &req_id);
</pre>
</li>
<li>
-<p>To send requests to a specific table, use the <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_data_id()</span> function:</p>
+<p>To send requests to a specific table, use the <code>data_control_sql_set_data_id()</code> function:</p>
<pre class="prettyprint">
{
bundle *b;
/* 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>
</li>
</ol>
+</li></ol>
<h2 id="map3" name="map3">Monitoring Data Changes</h2>
-<p>If the consumer application wants to receive data change notifications from the provider application, it can add a data change callback to request the notifications:</p>
+<p>If the consumer wants to receive data change notifications from the provider, it can request notifications with a data change callback:</p>
<ul>
-<li>The consumer application can add a data change callback using the <span style="font-family: Courier New,Courier,monospace">data_control_add_data_change_cb()</span> function. When no longer needed, the callback can be removed using the <span style="font-family: Courier New,Courier,monospace">data_control_remove_data_change_cb()</span> function.</li>
-<li>To accept the callback addition and notification request from the consumer application, the provider application uses the <span style="font-family: Courier New,Courier,monospace">data_control_provider_add_data_change_consumer_filter_cb()</span> function to add a notification filter. When no longer needed, the filter can be removed using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_remove_data_change_consumer_filter_cb()</span> function.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">data_control_provider_foreach_data_change_consumer()</span> function to list all the consumers whose request for the data change notifications has been successful, and who can receive data change notifications from the provider application.</li>
+<li>The consumer can add a data change callback using the <code>data_control_add_data_change_cb()</code> function. When no longer needed, the callback can be removed using the <code>data_control_remove_data_change_cb()</code> function.</li>
+<li>To accept the callback addition and notification request from the consumer, the provider uses the <code>data_control_provider_add_data_change_consumer_filter_cb()</code> function to add a notification filter. When no longer needed, the filter can be removed using the <code>data_control_provider_remove_data_change_consumer_filter_cb()</code> function.</li>
+<li>In the provider, you can use the <code>data_control_provider_foreach_data_change_consumer()</code> function to list all the consumers whose request for the data change notifications has been successful, and who can receive data change notifications from the provider.</li>
</ul>
-<p>To monitor data changes and send notifications using the Data Control API:</p>
+<p>To monitor data changes, and send and receive notifications:</p>
<ol>
-<li id="provider3">Implement the provider application.
-<p>When the provider's data changes, the provider application can send information about the changed data to the consumers who have registered a data change notification callback.</p>
-<p>When a consumer application attempts to register a data change notification callback, the provider application can decide whether to allow it.</p>
+<li id="provider3">Implement monitoring in the provider application.
+<p>When the provider's data changes, the provider can send information about the changed data to the consumers who have registered a data change notification callback.</p>
+<p>When a consumer attempts to register a data change notification callback, the provider can decide whether to allow it.</p>
<pre class="prettyprint">
bool
-change_noti_consumer_list_cb(data_control_h provider, char *consumer_appid, void *user_data)
+change_noti_consumer_list_cb(data_control_h provider, char *consumer_appid,
+ void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Added change noti consumer appid: %s", consumer_appid);
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "Added change noti consumer appid: %s", consumer_appid);
return true;
}
dlog_print(DLOG_INFO, LOG_TAG,
"consumer appid %s try to add data change callback", consumer_appid);
if (strcmp(consumer_appid, "org.tizen.helloworld_consumer2") == 0) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Invalid appid: %s", consumer_appid);
+ dlog_print(DLOG_INFO, LOG_TAG, "Invalid appid: %s", consumer_appid);
+
return false;
}
- data_control_provider_foreach_data_change_consumer(provider, &change_noti_consumer_list_cb, NULL);
+ data_control_provider_foreach_data_change_consumer(provider,
+ &change_noti_consumer_list_cb,
+ NULL);
return true;
}
dlog_print(DLOG_INFO, LOG_TAG,
"consumer appid %s try to add data change callback", consumer_appid);
if (strcmp(consumer_appid, "org.tizen.helloworld_consumer3") == 0) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Invalid appid: %s", consumer_appid);
+ dlog_print(DLOG_INFO, LOG_TAG, "Invalid appid: %s", consumer_appid);
return false;
}
int filter_callback_id_1;
int filter_callback_id_2;
void
-add_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+add_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED,
+ void *event_info EINA_UNUSED)
{
- data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_1, NULL, &filter_callback_id_1);
- dlog_print(DLOG_INFO, LOG_TAG, "filter_callback_id_1 id: %d", filter_callback_id_1);
+ data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_1,
+ NULL,
+ &filter_callback_id_1);
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "filter_callback_id_1 id: %d", filter_callback_id_1);
- data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_2, NULL, &filter_callback_id_2);
- dlog_print(DLOG_INFO, LOG_TAG, "filter_callback_id_2 id: %d", filter_callback_id_2);
+ data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_2,
+ NULL,
+ &filter_callback_id_2);
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "filter_callback_id_2 id: %d", filter_callback_id_2);
}
/* Remove the filter */
void
-remove_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+remove_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED,
+ void *event_info EINA_UNUSED)
{
data_control_provider_remove_data_change_consumer_filter_cb(filter_callback_id_1);
dlog_print(DLOG_INFO, LOG_TAG, "remove callback %d", filter_callback_id_1);
/* Send a data change notification */
void
-update_request_cb(int request_id, data_control_h provider, bundle *update_data, const char *where, void *user_data)
+update_request_cb(int request_id, data_control_h provider, bundle *update_data,
+ const char *where, void *user_data)
{
- char* command = data_control_provider_create_update_statement(provider, update_data, where);
+ char* command = data_control_provider_create_update_statement(provider,
+ 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));
}
ret = data_control_provider_send_update_result(request_id);
- if (ret != DATA_CONTROL_ERROR_NONE) {
+ if (ret != DATA_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG,
"update_send_result failed with error: %d", ret);
- }
dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
- data_control_provider_send_data_change_noti(provider, DATA_CONTROL_DATA_CHANGE_SQL_UPDATE, update_data);
- dlog_print(DLOG_INFO, LOG_TAG, "[send data change notification] Notify data change");
+ data_control_provider_send_data_change_noti(provider,
+ DATA_CONTROL_DATA_CHANGE_SQL_UPDATE,
+ update_data);
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "[send data change notification] Notify data change");
free(command);
}
</li>
<li id="consumer3">Implement the consumer application.
-<p>The consumer application requests the provider application to add or remove the data change callback, and receives the result from the provider application.</p>
+<p>The consumer requests the provider to add or remove the data change callback, and receives the request result from the provider. If the provider allows the data change notifications, the consumer receives them when the data changes.</p>
<pre class="prettyprint">
/* Triggered when the data change notification arrives */
bundle_get_str(data, "WORD", &word);
bundle_get_str(data, "WORD_DESC", &word_desc);
bundle_get_str(data, "WORD_NUM", &word_num);
- dlog_print(DLOG_INFO, LOG_TAG, "%d type noti, changed data: %s, %s, %s", type, word, word_desc, word_num);
+ dlog_print(DLOG_INFO, LOG_TAG, "%d type noti, changed data: %s, %s, %s",
+ type, word, word_desc, word_num);
}
/* Triggered when the provider has accepted the callback registration */
void
-result_cb(data_control_h provider, data_control_error_e result, int callback_id, void *user_data)
+result_cb(data_control_h provider, data_control_error_e result, int callback_id,
+ void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "Add data change callback RESULT: %d", result);
}
add_data_change_cb_func(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = (appdata_s *)data;
- int ret = data_control_add_data_change_cb(ad->provider_h, data_change_cb, NULL, result_cb, NULL, &cb_id);
- if (ret != DATA_CONTROL_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG, "add data change callback failed with error: %d", ret);
- }
+ int ret = data_control_add_data_change_cb(ad->provider_h, data_change_cb, NULL,
+ result_cb, NULL, &cb_id);
+ if (ret != DATA_CONTROL_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "add data change callback failed with error: %d", ret);
dlog_print(DLOG_INFO, LOG_TAG, "add data change callback done: %d", cb_id);
}
<h2 id="export" name="export">Data Control Export</h2>
-<p>You can export functionalities of your Tizen native service application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio. The provider ID, type, and accessibility must be specified for the data control.</p>
- <p class="figure">Figure: Exporting data control</p>
+<p>You can export the provider functionalities of your Tizen native service application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio. The provider ID, type, and accessibility must be specified for the available data control.</p>
+ <p align="center"><strong>Figure: Exporting data control</strong></p>
<p align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p>
- <h3 id="data" name="data">Data Model</h3>
- <p>The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p>
+ <p id="data">The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p>
<ul>
<li>Provider ID
<ul>
-<li>It is used for identifying a data control provider.</li>
- <li>It must be unique and use a fully qualified domain name.</li>
- <li>Platform-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/datacontrol/provider/<application name></span>
-</li>
- <li>User-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://<vendor.com>/datacontrol/provider/<application name></span>
-</li>
+ <li>It is used for identifying the data control provider.</li>
+ <li>It must be unique and use a fully-qualified domain name.</li>
+ <li>It must consist of alpha-numeric letters separated with the period (".") character, and it must start with a letter.</li>
+ <li>Platform-defined data control provider is defined in the <code>http://tizen.org/datacontrol/provider/<application name></code> format.</li>
+ <li>User-defined data control provider is defined in the <code>http://<vendor.com>/datacontrol/provider/<application name></code> format.</li>
</ul>
</li>
<li>Data ID
<ul>
-<li>It is used for identifying data exported by the data control provider.</li>
- <li>It must be unique in the data control provider and it is given as a string with a slash as a delimiter.</li>
+ <li>It is used for identifying data (usually a database table name or a registry section name) exported by the data control provider.</li>
+ <li>It must be unique in the data control provider and it is given as a string of one or more components, separated by a slash ("/") character.</li>
</ul>
</li>
<li>Type
<ul>
-<li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li>
+ <li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li>
<li>You can use Tizen native applications that provide their own key-value pairs data structure map and implement the map-type data control provider using registry file or collection map classes.</li>
</ul>
</li>
<li>Data schema
<ul>
-<li>SQL-type data control exports column names and types of the data structure table.</li>
+ <li>SQL-type data control exports column names and types of the data structure table.</li>
<li>Map-type data control exports key names and types of the data structure map.</li>
</ul>
</li>
- <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by allowing data control accessibility.</p> </li>
+ <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by defining data control accessibility.</p> </li>
</ul>
+
+ <p align="center" class="Table"><strong>Table: Data model example of a data control provider</strong></p>
<table border="1" style="width: 100%">
-<caption>
- Table: Data model example of a data control provider
- </caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Data control type</th>
</tr>
<tr>
<td>SQL</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://<vendor.com>/datacontrol/provider/sample</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">data1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">column1</span>
+ <td><code>http://<vendor.com>/datacontrol/provider/sample</code></td>
+ <td><code>data1</code></td>
+ <td><code>column1</code>
<p>(Type: Integer)</p> </td>
- <td><span style="font-family: Courier New,Courier,monospace">column2</span>
+ <td><code>column2</code>
<p>(Type: String)</p> </td>
<td>Read-Only</td>
</tr>
<tr>
<td>Map</td>
- <td><span style="font-family: Courier New,Courier,monospace">http://<vendor.com>/datacontrol/provider/sample2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">data2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">key1</span>
+ <td><code>http://<vendor.com>/datacontrol/provider/sample2</code></td>
+ <td><code>data2</code></td>
+ <td><code>key1</code>
<p>(Type: String)</p> </td>
- <td><span style="font-family: Courier New,Courier,monospace">key2</span>
+ <td><code>key2</code>
<p>(Type: String)</p> </td>
<td>Read-Write</td>
</tr>
<h2 id="callback" name="callback">Event Callbacks</h2>
<p>The following table lists the application state change events.</p>
+<p align="center" class="Table"><strong>Table: Application state change events</strong></p>
<table>
- <caption>
- Table: Application state change events
- </caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></td>
+ <td><code>app_create_cb()</code></td>
<td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></td>
+ <td><code>app_pause_cb()</code></td>
<td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td>
- <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td>
+ <td><code>app_resume_cb()</code></td>
+ <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the <code>app_pause_cb()</code> callback, re-allocate those resources here before the application resumes.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></td>
+ <td><code>app_terminate_cb()</code></td>
<td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td>
</tr>
</tbody>
<p>For more information, see <a href="#state_trans">Application State and Transition Management</a>.</p>
-<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>
+<p>To listen to system events, use the <code>ui_app_add_event_handler()</code> function. The system events are triggered with the <code>app_event_cb()</code> callback function. The following table lists the event types.</p>
- <table>
- <caption>
- Table: Event types
- </caption>
+<p align="center" class="Table"><strong>Table: Event types</strong></p>
+ <table>
<tbody>
<tr>
<th>Event type</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td>
+ <td><code>APP_EVENT_LOW_MEMORY</code></td>
<td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td>
+ <td><code>APP_EVENT_LOW_BATTERY</code></td>
<td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td>
+ <td><code>APP_EVENT_DEVICE_ORIENTATION_CHANGED</code></td>
<td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td>
+ <td><code>APP_EVENT_LANGUAGE_CHANGED</code></td>
<td>Event type for the callback function that is responsible for refreshing the display into the new language.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td>
+ <td><code>APP_EVENT_REGION_FORMAT_CHANGED</code></td>
<td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span></td>
+ <td><code>APP_EVENT_SUSPENDED_STATE_CHANGED</code></td>
<td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td>
</tr>
</tbody>
<p>The Tizen native application can be in one of several different <a href="applications_n.htm#state_change">application states</a>.</p>
<p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must <a href="#fundamentals">react to each state change appropriately</a>.</p>
-
+
+<p align="center" class="Table"><strong>Table: Application states</strong></p>
<table>
- <caption>
- Table: Application states
- </caption>
<tbody>
<tr>
<th>State</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+ <td><code>READY</code></td>
<td>Application is launched.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
+ <td><code>CREATED</code></td>
<td>Application starts the main loop.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+ <td><code>RUNNING</code></td>
<td>Application is running and visible to the user.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td>
+ <td><code>PAUSED</code></td>
<td>Application is running but invisible to the user.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+ <td><code>TERMINATED</code></td>
<td>Application is terminated.</td>
</tr>
</tbody>
<p>The following figure illustrates the application state transitions.</p>
- <p class="figure">Figure: Application state transitions</p>
+ <p align="center"><strong>Figure: Application state transitions</strong></p>
<p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">wearable</a> applications), include the <code><app.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app.h>
</pre>
<p>To manage the application life-cycle:</p>
<ol>
<li>
-<p>Start the application with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the Application API and starts the main event loop with the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. Before calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> structure variable, which is passed to the function.</p>
+<p>Start the application with the <code>main()</code> function. It initializes the Application API and starts the main event loop with the <code>ui_app_main()</code> function. Before calling the <code>ui_app_main()</code> function, set up the <code>app_event_callback_s</code> structure variable, which is passed to the function.</p>
<p>The following code is a minimal application using the Application API. It only builds and runs.</p>
<pre class="prettyprint">
int
<li>
<p>Application life-cycle callbacks:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">create</span>: Called after the <span style="font-family: Courier New,Courier,monospace;">ui_app_main()</span> function and used to initialize the UI.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">control</span>: Triggered when the application is started to do something. It can be called several times during the lifespan of an application, and it shows the screen for the action requested. It requires specific information given to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: Saves work, releases resources, and exits.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: Sets the application window not visible and switches to a mode which uses less resources.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: Sets the application window to be visible again.</li>
+<li><code>create</code>: Called after the <code>ui_app_main()</code> function and used to initialize the UI.</li>
+<li><code>control</code>: Triggered when the application is started to do something. It can be called several times during the lifespan of an application, and it shows the screen for the action requested. It requires specific information given to the callback.</li>
+<li><code>terminate</code>: Saves work, releases resources, and exits.</li>
+<li><code>pause</code>: Sets the application window not visible and switches to a mode which uses less resources.</li>
+<li><code>resume</code>: Sets the application window to be visible again.</li>
</ul>
</li>
<li>
-<p>System-related events (handled with the <span style="font-family: Courier New,Courier,monospace;">app_event_cb()</span> callback):</p>
+<p>System-related events (handled with the <code>app_event_cb()</code> callback):</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_MEMORY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The event is also used to release any cached data in the main memory to secure more free memory.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_BATTERY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The event is also used to stop heavy CPU consumption or power consumption activities to save the remaining power.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span>: Used to change the display orientation to match the device orientation.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LANGUAGE_CHANGED</span>: Used to refresh the display into a new language.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_REGION_FORMAT_CHANGED</span>: Used to refresh the display into a new time zone.</li>
+ <li><code>APP_EVENT_LOW_MEMORY</code>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The event is also used to release any cached data in the main memory to secure more free memory.</li>
+ <li><code>APP_EVENT_LOW_BATTERY</code>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The event is also used to stop heavy CPU consumption or power consumption activities to save the remaining power.</li>
+ <li><code>APP_EVENT_DEVICE_ORIENTATION_CHANGED</code>: Used to change the display orientation to match the device orientation.</li>
+ <li><code>APP_EVENT_LANGUAGE_CHANGED</code>: Used to refresh the display into a new language.</li>
+ <li><code>APP_EVENT_REGION_FORMAT_CHANGED</code>: Used to refresh the display into a new time zone.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Define any required application controls. An app control is a mechanism through which the application receives additional information about why it was started and with which parameters.</p>
-<p>The application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control</span> callback. The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through API functions, such as:</p>
+<p>The application receives a handle to an app control object in the <code>app_control</code> callback. The <code>app_control_h</code> type is opaque and information can only be extracted from it through API functions, such as:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: Retrieve a string describing which operation the application was started for.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: Retrieve the MIME type of the data (such as image/jpg).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: Get the string value associated with a given key.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: Get the string array associated with a given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with the key is an array).</li>
+<li><code>app_control_get_operation()</code>: Retrieve a string describing which operation the application was started for.</li>
+<li><code>app_control_get_mime()</code>: Retrieve the MIME type of the data (such as image/jpg).</li>
+<li><code>app_control_get_app_extra_data()</code>: Get the string value associated with a given key.</li>
+<li><code>app_control_get_app_extra_data_array()</code>: Get the string array associated with a given key (first check with <code>app_control_is_extra_data_array()</code> whether the data associated with the key is an array).</li>
</ul>
-<p>For other available functions, see the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header file.</p>
+<p>For other available functions, see the <code>app.h</code> header file.</p>
<p>For more information about launching other applications from your application using application controls, see <a href="app_controls_n.htm">Application Controls</a>.</p>
</li>
</ol>
<p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>
+<p align="center" class="Table"><strong>Table: Allowed background application policy</strong></p>
<table id="allow_bg_table">
- <caption>Table: Allowed background application policy</caption>
<tbody>
<tr>
<th>Background category</th>
<td>Media</td>
<td>Playing audio, recording, and outputting streaming video on the background</td>
<td>Multimedia API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">media</span></td>
+<td><code>media</code></td>
</tr>
<tr>
<td>Download</td>
<td>Downloading data with the Tizen Download-manager API</td>
<td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">download</span></td>
+<td><code>download</code></td>
</tr>
<tr>
<td>Background network</td>
<td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>
<td>Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">background-network</span></td>
+<td><code>background-network</code></td>
</tr>
<tr>
<td>Location</td>
<td>Processing location data on the background</td>
<td>Location API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">location</span></td>
+<td><code>location</code></td>
</tr>
<tr>
<td>Sensor (context)</td>
<td>Processing context data from the sensors, such as gesture</td>
<td>Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">sensor</span></td>
+<td><code>sensor</code></td>
</tr>
<tr>
<td>IoT Communication/Connectivity</td>
<td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>
<td>Wi-Fi (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">iot-communication</span></td>
+<td><code>iot-communication</code></td>
</tr>
</tbody>
</table>
<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>
</manifest>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace"><background-category></span> element is supported since the API version 2.4. An application with a <span style="font-family: Courier New,Courier,monospace"><background-category></span> 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 <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/background-category/<value>"/></span>.</td>
- </tr>
- <tr>
-<td class="note">
+
+<div class="note">
+ <strong>Note</strong>
+ 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>
</manifest>
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/bacgkround-category/<value>"/></span> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <span style="font-family: Courier New,Courier,monospace"><background-category></span> element.</p>
- </td>
- </tr>
- </tbody>
- </table>
+<p>The <code><metadata key="http://tizen.org/metadata/bacgkround-category/<value>"/></code> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <code><background-category></code> element.</p>
+</div>
<p>The background category of your application can be specified in the
<a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">Event API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/AppFW/Event" target="_blank">Event Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/AppFW/LaunchOnEventServiceApp" target="_blank">LaunchOnEventServiceApp Sample Description</a></li>
</ul>
<h1>Event Broadcast and Subscription</h1>
<p>The application can broadcast its own events to all listeners, and subscribe to events. The events can be either predefined system <a href="#platform">events from the platform</a> (only platform modules can broadcast system events) or user-defined events (broadcast by UI and service applications).</p>
-<p>This feature is supported in mobile applications only.</p>
<p>The main features of the Event API are:</p>
<ul>
<li>Event publication
-<p>You can <a href="#broadcast">publish an event</a> using the <span style="font-family: Courier New,Courier,monospace">event_publish_app_event()</span> and <span style="font-family: Courier New,Courier,monospace">event_publish_trusted_app_event()</span> functions. The <span style="font-family: Courier New,Courier,monospace">event_publish_trusted_app_event()</span> function publishes a trusted event which can only be received by the application that has the same signature as the publishing application.</p>
+<p>You can <a href="#broadcast">publish an event</a> using the <code>event_publish_app_event()</code> and <code>event_publish_trusted_app_event()</code> functions. The <code>event_publish_trusted_app_event()</code> function publishes a trusted event which can only be received by the application that has the same signature as the publishing application.</p>
</li>
<li>Event subscription
-<p>You can <a href="#manage">subscribe to an event</a> using the <span style="font-family: Courier New,Courier,monospace">event_add_event_handler()</span> function. When no longer needed, unsubscribe the event with the <span style="font-family: Courier New,Courier,monospace">event_remove_event_handler()</span> function.</p>
+<p>You can <a href="#manage">subscribe to an event</a> using the <code>event_add_event_handler()</code> function. When no longer needed, unsubscribe the event with the <code>event_remove_event_handler()</code> function.</p>
</li>
<li>Launch-On-Events
<p>The application can be suspended while in the background, causing a pause in event handling. Since the application cannot receive events in the suspended state, they are all delivered in series after the application exits the suspended state. Consider how to manage this situation and prevent the application from being flooded with events:</p>
<ul><li>To handle events in the background without going to a suspended state, <a href="efl_ui_app_n.htm#allow_bg">declare a background category</a>. </li>
-<li>To avoid receiving any events that are triggered while the application is suspended, remove the event handler before entering the suspended state and add it back after exiting the suspended state. You can <a href="efl_ui_app_n.htm#callback">manage the event handler</a> addition and removal in the <span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span> event callback, which is triggered each time the application enters and exist the suspended state.</li></ul>
+<li>To avoid receiving any events that are triggered while the application is suspended, remove the event handler before entering the suspended state and add it back after exiting the suspended state. You can <a href="efl_ui_app_n.htm#callback">manage the event handler</a> addition and removal in the <code>APP_EVENT_SUSPENDED_STATE_CHANGED</code> event callback, which is triggered each time the application enters and exist the suspended state.</li></ul>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the event functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event</a> API, include the <span style="font-family: Courier New,Courier,monospace"><app_event.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">wearable</a> applications), include the <code><app_event.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <app_event.h>
</pre>
</li>
-<li>To use Launch-On-Events in your application, define the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/launch_on_event</span> operation in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.
-<p>The URI name for the operation represents the event name in the Launch-On-Event format (<span style="font-family: Courier New,Courier,monospace">event://{Event_Name}</span>).</p>
+<li>To use Launch-On-Events in your application, define the <code>http://tizen.org/appcontrol/operation/launch_on_event</code> operation in the <code>tizen-manifest.xml</code> file.
+<p>The URI name for the operation represents the event name in the Launch-On-Event format (<code>event://{Event_Name}</code>).</p>
<pre class="prettyprint">
<app-control>
ret = bundle_add_str(event_data, user_data_key, user_data);
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">event_publish_app_event()</span> function to publish the event:
+<li>Use the <code>event_publish_app_event()</code> function to publish the event:
<pre class="prettyprint">
ret = event_publish_app_event("event.org.tizen.senderapp.user_event", event_data);
<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>
<li>Add an event handler for a user-defined event:
-<p>When defining an event name for a user event (such as <span style="font-family: Courier New,Courier,monospace">event.org.tizen.senderapp.user_event</span>), the name format is <span style="font-family: Courier New,Courier,monospace">event.{sender appid}.{user-defined name}</span>. The <span style="font-family: Courier New,Courier,monospace">{user-defined name}</span> must:</p>
+<p>When defining an event name for a user event (such as <code>event.org.tizen.senderapp.user_event</code>), the name format is <code>event.{sender appid}.{user-defined name}</code>. The <code>{user-defined name}</code> must:</p>
<ul>
<li>Contain only the ASCII characters "[A-Z][a-z][0-9]_" and not begin with a digit.</li>
<li>Not contain the '.' (period) character.</li>
<h2 id="launch" name="launch">Managing Launch-On-Events</h2>
- <p>To register an interest in a Launch-On-Event, define the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/launch_on_event</span> operation in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Only service applications can register and receive Launch-On-Events.
- <p>The Launch-On-Event operation cannot be requested using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function, unlike other application control operations.</p></td>
- </tr>
- </tbody>
- </table>
+ <p>To register an interest in a Launch-On-Event, define the <code>http://tizen.org/appcontrol/operation/launch_on_event</code> operation in the <code>tizen-manifest.xml</code> file.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Only service applications can register and receive Launch-On-Events.
+ <p>The Launch-On-Event operation cannot be requested using the <code>app_control_send_launch_request()</code> function, unlike other application control operations.</p>
+ </div>
<p>The following table shows the system events that support Launch-On-Event.</p>
+<p align="center" class="Table"><strong>Table: System events supporting Launch-On-Event</strong></p>
<table>
- <caption>
- Table: System events supporting Launch-On-Event
- </caption>
<tbody>
<tr>
<th>Name</th>
<th>Condition</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_charger_status</span></td>
- <td>When the charger state is <span style="font-family: Courier New,Courier,monospace">"connected"</span>.</td>
+ <td><code>tizen.system.event.battery_charger_status</code></td>
+ <td>When the charger state is <code>"connected"</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.usb_status</span></td>
- <td>When the USB state is <span style="font-family: Courier New,Courier,monospace">"connected"</span>.</td>
+ <td><code>tizen.system.event.usb_status</code></td>
+ <td>When the USB state is <code>"connected"</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.earjack_status</span></td>
- <td>When the earjack status is <span style="font-family: Courier New,Courier,monospace">"connected"</span>.</td>
+ <td><code>tizen.system.event.earjack_status</code></td>
+ <td>When the earjack status is <code>"connected"</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.incoming_msg</span></td>
- <td>When the <span style="font-family: Courier New,Courier,monospace">msg_type</span> and <span style="font-family: Courier New,Courier,monospace">msg_id</span> exist.</td>
+ <td><code>tizen.system.event.incoming_msg</code></td>
+ <td>When the <code>msg_type</code> and <code>msg_id</code> exist.</td>
</tr>
</tbody>
</table>
ret = app_control_get_operation(app_control, &operation);
if (ret == APP_CONTROL_ERROR_NONE && operation &&
- strcmp(operation, APP_CONTROL_OPERATION_LAUNCH_ON_EVENT) == 0) {
+ strcmp(operation, APP_CONTROL_OPERATION_LAUNCH_ON_EVENT) == 0) {
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 */
}
}
</pre>
-<p>The application can get the event name and data in the first <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback, which is called after the application state changes to <span style="font-family: Courier New,Courier,monospace">created</span>.</p>
+<p>The application can get the event name and data in the first <code>app_control_cb()</code> callback, which is called after the application state changes to <code>created</code>.</p>
<h2 id="platform">Platform Event Types</h2>
<p>The following table lists the platform event types.</p>
+
+<p align="center" class="Table"><strong>Table: Platform event types</strong></p>
<table>
- <caption>
- Table: Platform event types
- </caption>
<tbody>
<tr>
<th rowspan="2">Module</th>
<tr>
<td rowspan="2">capi-system-device</td>
<td rowspan="2">battery</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_charger_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery_charger_status</span></td>
+ <td><code>tizen.system.event.battery_charger_status</code></td>
+ <td><code>battery_charger_status</code></td>
<td> <ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"disconnected"</span>: Charger is not connected</p>
+ <p><code>"disconnected"</code>: Charger is not connected</p>
</li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"connected"</span>: Charger is connected</p>
+ <p><code>"connected"</code>: Charger is connected</p>
</li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"charging"</span>: Charging is enabled</p>
+ <p><code>"charging"</code>: Charging is enabled</p>
</li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"discharging"</span>: Charging is disabled (for example, 100% full state) </p>
+ <p><code>"discharging"</code>: Charging is disabled (for example, 100% full state) </p>
</li>
</ul>
</td>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_level_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery_level_status</span></td>
- <td> <ul>
+ <td><code>tizen.system.event.battery_level_status</code></td>
+ <td><code>battery_level_status</code></td>
+ <td>
+ <ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"empty"</span>: Level <= 1% </p>
+ <p><code>"empty"</code></p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"critical"</span>: Level <= 5% </p>
+ <li><p><code>"critical"</code></p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"low"</span>: 5% < level <= 15% </p>
+ <li><p><code>"low"</code></p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"high"</span>: 15% < level <= 95% </p>
+ <li><p><code>"high"</code></p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"full"</span>: Level > 95% </p>
+ <li><p><code>"full"</code></p>
</li>
</ul>
</td>
- <td>
- When the battery level has changed.
- </td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">device_battery_get_level_status()</span> function.</td>
+ <td>When the battery level has changed.</td>
+ <td>You can get the current value with the <code>device_battery_get_level_status()</code> function.</td>
</tr>
<tr>
<td rowspan="3">deviced</td>
<td>usb</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.usb_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">usb_status</span></td>
+ <td><code>tizen.system.event.usb_status</code></td>
+ <td><code>usb_status</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"disconnected"</span>: USB cable is not connected</p>
+ <li><p><code>"disconnected"</code>: USB cable is not connected</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"connected"</span>: USB cable is connected, but the service is not available</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"available"</span>: USB service is available (for example, mtp or SDB)</p>
+ <li><p><code>"connected"</code>: USB cable is connected, but the service is not available</p></li>
+ <li><p><code>"available"</code>: USB service is available (for example, mtp or SDB)</p>
</li>
</ul>
</td>
<td>
When the USB cable has been connected or disconnected, or when the USB service state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span> key.</td>
+ <td>You can get the current value with the <code>RUNTIME_INFO_KEY_USB_CONNECTED</code> key.</td>
</tr>
<tr>
<td>earjack</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.earjack_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">earjack_status</span></td>
+ <td><code>tizen.system.event.earjack_status</code></td>
+ <td><code>earjack_status</code></td>
<td> <ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"disconnected"</span>: Earjack is not connected</p>
+ <p><code>"disconnected"</code>: Earjack is not connected</p>
</li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">"connected"</span>: Earjack is connected</p>
+ <p><code>"connected"</code>: Earjack is connected</p>
</li>
</ul>
</td>
<td>
When the earjack connection state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span> key.</td>
+ <td>You can get the current value with the <code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code> key.</td>
</tr>
<tr>
<td>display</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.display_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">display_state</span></td>
+ <td><code>tizen.system.event.display_state</code></td>
+ <td><code>display_state</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"normal"</span>: Display on, normal brightness</p>
+ <li><p><code>"normal"</code>: Display on, normal brightness</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"dim"</span>: Display on, dimmed brightness</p>
+ <li><p><code>"dim"</code>: Display on, dimmed brightness</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"off"</span>: Display off</p>
+ <li><p><code>"off"</code>: Display off</p>
</li>
</ul>
</td>
<td>When the display state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">device_display_get_state()</span> function.</td>
+ <td>You can get the current value with the <code>device_display_get_state()</code> function.</td>
</tr>
<tr>
<td rowspan="2">systemd</td>
<td rowspan="2">system</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.boot_completed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span>
+ <td><code>tizen.system.event.boot_completed</code></td>
+ <td><code>N/A</code></td>
+ <td><code>N/A</code>
</td>
<td>When platform booting has been completed.
</td>
- <td>You can treat the initial value as <span style="font-family: Courier New,Courier,monospace">false</span> before you receive this event. If the application is already in a boot-completed state before you register an event handler, you receive the event as soon as you register the event handler.</td>
+ <td>You can treat the initial value as <code>false</code> before you receive this event. If the application is already in a boot-completed state before you register an event handler, you receive the event as soon as you register the event handler.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.system_shutdown</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span>
+ <td><code>tizen.system.event.system_shutdown</code></td>
+ <td><code>N/A</code></td>
+ <td><code>N/A</code>
</td>
<td>
When the system power-off has been started.
</td>
- <td>You can treat the initial value as <span style="font-family: Courier New,Courier,monospace">false</span> before you receive this event. If the application is already in a shutting-down state before you register an event handler, you receive the event as soon as you register the event handler.</td>
+ <td>You can treat the initial value as <code>false</code> before you receive this event. If the application is already in a shutting-down state before you register an event handler, you receive the event as soon as you register the event handler.</td>
</tr>
<tr>
<td>resourced</td>
<td>ram memory</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.low_memory</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">low_memory</span></td>
+ <td><code>tizen.system.event.low_memory</code></td>
+ <td><code>low_memory</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"normal"</span>: Available > 200MB</p>
+ <li><p><code>"normal"</code>: Available > 200MB</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"soft_warning"</span>: 100MB < available <= 200MB</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"hard_warning"</span>: Available <= 100MB</p></li>
+ <li><p><code>"soft_warning"</code>: 100MB < available <= 200MB</p></li>
+ <li><p><code>"hard_warning"</code>: Available <= 100MB</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Above numbers can differ according to the total RAM size of the target device.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ Above numbers can differ according to the total RAM size of the target device.
+ </div>
</td>
<td>
When the size of available memory has changed.
<tr>
<td rowspan="4">network</td>
<td rowspan="4">connectivity</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.wifi_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">wifi_state</span></td>
+ <td><code>tizen.system.event.wifi_state</code></td>
+ <td><code>wifi_state</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"on"</span>: Wi-Fi on</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"off"</span>: Wi-Fi off</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"connected"</span>: Wi-Fi connection established</p></li>
+ <li><p><code>"on"</code>: Wi-Fi on</p></li>
+ <li><p><code>"off"</code>: Wi-Fi off</p></li>
+ <li><p><code>"connected"</code>: Wi-Fi connection established</p></li>
</ul>
</td>
<td>
When the Wi-Fi state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">connection_get_wifi_state()</span> function.</td>
+ <td>You can get the current value with the <code>connection_get_wifi_state()</code> function.</td>
</tr>
<tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">tizen.system.event.bt_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bt_state</span></td>
+ <td rowspan="3"><code>tizen.system.event.bt_state</code></td>
+ <td><code>bt_state</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"off"</span>: Legacy Bluetooth off</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"on"</span>: Legacy Bluetooth on</p></li>
+ <li><p><code>"off"</code>: Legacy Bluetooth off</p></li>
+ <li><p><code>"on"</code>: Legacy Bluetooth on</p></li>
</ul>
</td>
<td>
When the Bluetooth state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">bt_adapter_get_state()</span> function.</td>
+ <td>You can get the current value with the <code>bt_adapter_get_state()</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bt_le_state</span></td>
+ <td><code>bt_le_state</code></td>
<td><ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"off"</span>: LE function off</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"on"</span>: LE function on</p></li>
+ <li><p><code>"off"</code>: LE function off</p></li>
+ <li><p><code>"on"</code>: LE function on</p></li>
</ul>
</td>
<td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bt_transfering_state</span></td>
+ <td><code>bt_transfering_state</code></td>
<td><ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"non_transfering"</span>: Idle state</p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"transfering"</span>: File is transferring</p></li>
+ <li><p><code>"non_transfering"</code>: Idle state</p></li>
+ <li><p><code>"transfering"</code>: File is transferring</p></li>
</ul>
</td>
<td>
<tr>
<td rowspan="3">libslp-location</td>
<td rowspan="3">location</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.location_enable_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location_enable_state</span></td>
+ <td><code>tizen.system.event.location_enable_state</code></td>
+ <td><code>location_enable_state</code></td>
<td><ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"disabled"</span>: Location disabled</p>
+ <li><p><code>"disabled"</code>: Location disabled</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"enabled"</span>: Location enabled</p>
+ <li><p><code>"enabled"</code>: Location enabled</p>
</li>
</ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">location-enable_state</span> has been changed, for example, by the user toggling the location setting in the settings menu or quick panel.
+ When the <code>location-enable_state</code> has been changed, for example, by the user toggling the location setting in the settings menu or quick panel.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">location_manager_is_enabled_method()</span> function.</td>
+ <td>You can get the current value with the <code>location_manager_is_enabled_method()</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.gps_enable_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">gps_enable_state</span></td>
+ <td><code>tizen.system.event.gps_enable_state</code></td>
+ <td><code>gps_enable_state</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"disabled"</span>: GPS disabled</p>
+ <li><p><code>"disabled"</code>: GPS disabled</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"enabled"</span>: GPS enabled</p>
+ <li><p><code>"enabled"</code>: GPS enabled</p>
</li>
</ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">gps-enable_state</span> has changed.
+ When the <code>gps-enable_state</code> has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">location_manager_is_enabled_method()</span> function.</td>
+ <td>You can get the current value with the <code>location_manager_is_enabled_method()</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.nps_enable_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">nps_enable_state</span></td>
+ <td><code>tizen.system.event.nps_enable_state</code></td>
+ <td><code>nps_enable_state</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"disabled"</span>: NPS disabled</p>
+ <li><p><code>"disabled"</code>: NPS disabled</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"enabled"</span>: NPS enabled</p>
+ <li><p><code>"enabled"</code>: NPS enabled</p>
</li>
</ul>
</td>
<td>
When the NPS setting has been changed, for example, by the user toggling the location settings.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">location_manager_is_enabled_method()</span> function.</td>
+ <td>You can get the current value with the <code>location_manager_is_enabled_method()</code> function.</td>
</tr>
<tr>
<td rowspan="2">msg-service</td>
<td rowspan="2">message</td>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">tizen.system.event.incoming_msg</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">msg_type</span></td>
+ <td rowspan="2"><code>tizen.system.event.incoming_msg</code></td>
+ <td><code>msg_type</code></td>
<td> <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace">"sms"</span>: SMS-type message</p>
+ <li><p><code>"sms"</code>: SMS-type message</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"push"</span>: Push-type message</p>
+ <li><p><code>"push"</code>: Push-type message</p>
</li>
- <li><p><span style="font-family: Courier New,Courier,monospace">"cb"</span>: Cb-type message</p>
+ <li><p><code>"cb"</code>: Cb-type message</p>
</li>
</ul>
</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">msg_id</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">msg_id</span>: Message ID of the received message (string of the unsigned <span style="font-family: Courier New,Courier,monospace">int</span> type value)
+ <td><code>msg_id</code></td>
+ <td><code>msg_id</code>: Message ID of the received message (string of the unsigned <code>int</code> type value)
</td>
<td>
</td>
<tr>
<td>alarm-manager</td>
<td>time</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.time_changed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">N/A</span></td>
+ <td><code>tizen.system.event.time_changed</code></td>
+ <td><code>N/A</code></td>
+ <td><code>N/A</code></td>
<td>
When the system time setting has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">alarm_get_current_time()</span> function.</td>
+ <td>You can get the current value with the <code>alarm_get_current_time()</code> function.</td>
</tr>
<tr>
<td rowspan="10">setting</td>
<td>time</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.time_zone</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">time_zone</span></td>
+ <td><code>tizen.system.event.time_zone</code></td>
+ <td><code>time_zone</code></td>
<td>The value of this key is the time zone value of the time zone database, for example, "Asia/Seoul", "America/New_York". For more information, see the IANA Time Zone Database.
</td>
<td>
When the time zone has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</code> key.</td>
</tr>
<tr>
<td rowspan="3">locale</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.hour_format</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">hour_format</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"12"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"24"</span></li></ul>
+ <td><code>tizen.system.event.hour_format</code></td>
+ <td><code>hour_format</code></td>
+ <td><ul><li><code>"12"</code></li>
+ <li><code>"24"</code></li></ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">hour_format</span> has changed, for example, by the user toggling the date and time settings for the 24-hour clock (where <strong>OFF</strong> stands for the 12-hour clock).
+ When the <code>hour_format</code> has changed, for example, by the user toggling the date and time settings for the 24-hour clock (where <strong>OFF</strong> stands for the 12-hour clock).
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</code> key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.language_set</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">language_set</span></td>
- <td>The value of this key is full name of locale, for example, <span style="font-family: Courier New,Courier,monospace">ko_KR.UTF8</span> in case of Korean and <span style="font-family: Courier New,Courier,monospace">en_US.UTF8</span> in case of American English. For more information, see the Linux locale information.
+ <td><code>tizen.system.event.language_set</code></td>
+ <td><code>language_set</code></td>
+ <td>The value of this key is full name of locale, for example, <code>ko_KR.UTF8</code> in case of Korean and <code>en_US.UTF8</code> in case of American English. For more information, see the Linux locale information.
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">language_set</span> has changed.
+ When the <code>language_set</code> has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</code> key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.region_format</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">region_format</span></td>
- <td>The value of this key is the full name of the locale, for example, <span style="font-family: Courier New,Courier,monospace">ko_KR.UTF8</span> in case of the Korean region format and <span style="font-family: Courier New,Courier,monospace">en_US.UTF8</span> in case of the USA region format. For more information, see the Linux locale information.
+ <td><code>tizen.system.event.region_format</code></td>
+ <td><code>region_format</code></td>
+ <td>The value of this key is the full name of the locale, for example, <code>ko_KR.UTF8</code> in case of the Korean region format and <code>en_US.UTF8</code> in case of the USA region format. For more information, see the Linux locale information.
</td>
<td>
When the region format has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</code> key.</td>
</tr>
<tr>
<td>sound</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.silent_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">silent_mode</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"on"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"off"</span></li></ul>
+ <td><code>tizen.system.event.silent_mode</code></td>
+ <td><code>silent_mode</code></td>
+ <td><ul><li><code>"on"</code></li>
+ <li><code>"off"</code></li></ul>
</td>
<td>
- When the ringtone has been changed to 0 or another mode. For example, if the call slider has been changed to 0, <span style="font-family: Courier New,Courier,monospace">silent_mode</span> is <span style="font-family: Courier New,Courier,monospace">"on"</span>. Otherwise, <span style="font-family: Courier New,Courier,monospace">silent_mode</span> is <span style="font-family: Courier New,Courier,monospace">"off"</span>.
+ When the ringtone has been changed to 0 or another mode. For example, if the call slider has been changed to 0, <code>silent_mode</code> is <code>"on"</code>. Otherwise, <code>silent_mode</code> is <code>"off"</code>.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</code> key.</td>
</tr>
<tr>
<td>vibration</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.vibration_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">vibration_state</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"on"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"off"</span></li></ul>
+ <td><code>tizen.system.event.vibration_state</code></td>
+ <td><code>vibration_state</code></td>
+ <td><ul><li><code>"on"</code></li>
+ <li><code>"off"</code></li></ul>
</td>
<td>
When the vibration state has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_VIBRATION_ENABLED</span> key.</td>
+ <td>You can get the current value with the <code>RUNTIME_INFO_KEY_VIBRATION_ENABLED</code> key.</td>
</tr>
<tr>
<td>screen</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.screen_autorotate_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">screen_autorotate_state</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"on"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"off"</span></li></ul>
+ <td><code>tizen.system.event.screen_autorotate_state</code></td>
+ <td><code>screen_autorotate_state</code></td>
+ <td><ul><li><code>"on"</code></li>
+ <li><code>"off"</code></li></ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">screen_autorotate_state</span> has been changed, for example, by the user toggling the display settings.
+ When the <code>screen_autorotate_state</code> has been changed, for example, by the user toggling the display settings.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</code> key.</td>
</tr>
<tr>
<td rowspan="2">mobile</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.mobile_data_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">mobile_data_state</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"on"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"off"</span></li></ul>
+ <td><code>tizen.system.event.mobile_data_state</code></td>
+ <td><code>mobile_data_state</code></td>
+ <td><ul><li><code>"on"</code></li>
+ <li><code>"off"</code></li></ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">mobile_data_state</span> has been changed, for example, by the user toggling the network settings.
+ When the <code>mobile_data_state</code> has been changed, for example, by the user toggling the network settings.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_3G_DATA_NETWORK_ENABLED</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_3G_DATA_NETWORK_ENABLED</code> key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.data_roaming_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">data_roaming_state</span></td>
- <td><ul><li><span style="font-family: Courier New,Courier,monospace">"on"</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">"off"</span></li></ul>
+ <td><code>tizen.system.event.data_roaming_state</code></td>
+ <td><code>data_roaming_state</code></td>
+ <td><ul><li><code>"on"</code></li>
+ <li><code>"off"</code></li></ul>
</td>
<td>
- When the <span style="font-family: Courier New,Courier,monospace">data_roaming_state</span> has been changed, for example, by the user toggling the network settings.
+ When the <code>data_roaming_state</code> has been changed, for example, by the user toggling the network settings.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_DATA_ROAMING_ENABLED</span> key.</td>
+ <td>You can get the current value with the <code>RUNTIME_INFO_KEY_DATA_ROAMING_ENABLED</code> key.</td>
</tr>
<tr>
<td>font</td>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.font_set</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">font_set</span></td>
+ <td><code>tizen.system.event.font_set</code></td>
+ <td><code>font_set</code></td>
<td>The value of this key is the font name of the string type by font-config.
</td>
<td>
When the font has changed.
</td>
- <td>You can get the current value with the <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_TYPE</span> key.</td>
+ <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_FONT_TYPE</code> key.</td>
</tr>
</tbody>
</table>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<li><p>To use trusted message port communication, both applications must have the same certificate. To create and register an author certificate, go to the Tizen Studio menu and select <strong>Tools > Certificate Manager</strong>. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a>.</p>
</li>
<li>
-<p>To use the functions and data types of the Message Port API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><message_port.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Message Port API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">wearable</a> applications), include the <code><message_port.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <message_port.h>
</pre></li>
</ol>
<h2 id="uni" name="uni">Using Uni-directional Communication</h2>
-<p>To use uni-directional communication, you must check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function. You can then send messages to the remote application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function. The remote application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p>
- <p class="figure">Figure: Uni-directional message port communication</p>
+<p>To use uni-directional communication, you must check whether the message port of a remote application is registered with the <code>message_port_check_remote_port()</code> function. You can then send messages to the remote application using the <code>message_port_send_message()</code> function. The remote application can receive the messages using the <code>message_port_register_local_port()</code> function.</p>
+ <p align="center"><strong>Figure: Uni-directional message port communication</strong></p>
<p align="center"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p>
<p>To send a message from Application 1 to Application 2 using the Message Port API:</p>
<li>
<p>Register a local port in Application 2.</p>
-<p>To register the local port, call the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function and implement a callback for it in Application 2:</p>
+<p>To register the local port, call the <code>message_port_register_local_port()</code> function and implement a callback for it in Application 2:</p>
<pre class="prettyprint">
void
<li>
<p>Check the remote port in Application 1.</p>
-<p>To check the remote port, call the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function in Application 1:</p>
+<p>To check the remote port, call the <code>message_port_check_remote_port()</code> function in Application 1:</p>
<pre class="prettyprint">
bool
test_check_remote_port()
<li>
<p>Send a message in Application 1.</p>
-<p>To send a message, call the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function in Application 1:</p>
+<p>To send a message, call the <code>message_port_send_message()</code> function in Application 1:</p>
<pre class="prettyprint">
void
<h2 id="bi" name="bi">Using Bi-directional Communication</h2>
-<p>To use bi-directional communication, you must check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function. You can then send messages and local message port information to the remote application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function. The remote application can use the local message port information to send response messages after it receives your messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p>
+<p>To use bi-directional communication, you must check whether the message port of a remote application is registered with the <code>message_port_check_remote_port()</code> function. You can then send messages and local message port information to the remote application using the <code>message_port_send_message_with_local_port()</code> function. The remote application can use the local message port information to send response messages after it receives your messages using the <code>message_port_register_local_port()</code> function.</p>
- <p class="figure">Figure: Bi-directional message port communication</p>
+ <p align="center"><strong>Figure: Bi-directional message port communication</strong></p>
<p align="center"><img alt="Bi-directional message port communication" src="../../images/message_port_bi-directional_communication.png" /></p>
<p>To send a message from Application 1 to Application 2, and from Application 2 to Application 1:</p>
<ol>
<li>
<p>Register the local port in Application 1.</p>
- <p>Call the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function in Application 1:</p>
+ <p>Call the <code>message_port_register_local_port()</code> function in Application 1:</p>
<pre class="prettyprint">
void
<li>
<p>Send a message with local port information.</p>
- <p>To get a response from the receiver, local port information must be sent to the receiver when the message is delivered. To do this, call the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function in Application 1.</p>
+ <p>To get a response from the receiver, local port information must be sent to the receiver when the message is delivered. To do this, call the <code>message_port_send_message_with_local_port()</code> function in Application 1.</p>
<pre class="prettyprint">
void
send_message_with_local_port(int local_port_id)
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);
</ol>
<h2 id="trusted_use" name="trusted_use">Using Trusted Communication</h2>
-<p>The trusted message port instance can be retrieved using the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer.</p>
- <p class="figure">Figure: Trusted uni-directional message port communication</p>
+<p>The trusted message port instance can be retrieved using the <code>message_port_register_trusted_local_port()</code> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer.</p>
+ <p align="center"><strong>Figure: Trusted uni-directional message port communication</strong></p>
<p align="center"><img alt="Trusted uni-directional message port communication" src="../../images/message_port_trusted_uni-directional_comm.png" /></p>
<p>The trusted communication work similarly as normal message port communication. The only difference is that you must use trusted functions instead of normal functions, as defined in the following table.</p>
-<table>
- <caption>Table: Corresponding normal and trusted communication functions</caption>
+<p align="center" class="Table"><strong>Table: Corresponding normal and trusted communication functions</strong></p>
+<table>
<tbody>
<tr>
<th>Normal communication</th>
<th>Trusted communication</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span></td>
- <td> <span style="font-family: Courier New,Courier,monospace">message_port_check_trusted_remote_port()</span></td>
+ <td><code>message_port_check_remote_port()</code></td>
+ <td> <code>message_port_check_trusted_remote_port()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">message_port_send_trusted_message()</span></td>
+ <td><code>message_port_send_message()</code></td>
+ <td><code>message_port_send_trusted_message()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span></td>
+ <td><code>message_port_register_local_port()</code></td>
+ <td><code>message_port_register_trusted_local_port()</code></td>
</tr>
</tbody>
</table>
<ul>
<li>Retrieving information from all installed packages
-<p>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to <a href="#retrieve">retrieve the package information of all installed packages</a>. As a result, the <span style="font-family: Courier New,Courier,monospace">package_manager_package_info_cb()</span> callback is invoked and you can get package information.</p></li>
+<p>Use the <code>package_manager_foreach_package_info()</code> function to <a href="#retrieve">retrieve the package information of all installed packages</a>. As a result, the <code>package_manager_package_info_cb()</code> callback is invoked and you can get package information.</p></li>
<li>Retrieving individual package information
-<p>To <a href="#info">retrieve package information</a>, get the <span style="font-family: Courier New,Courier,monospace">package_info_h</span> object using the <span style="font-family: Courier New,Courier,monospace">package_info_create()</span> or <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.</p></li>
+<p>To <a href="#info">retrieve package information</a>, get the <code>package_info_h</code> object using the <code>package_info_create()</code> or <code>package_manager_get_package_info()</code> function.</p></li>
<li>Monitoring changes
<p>You can <a href="#listen">monitor package events</a>, such as installation, uninstallation, and updates.</p></li>
</ul>
<p>To enable your application to use the package manager functionality:</p>
<ol>
<li>
-<p>To use the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/packagemanager.info</privilege>
</privileges>
</pre>
</li>
-<li><p>To use the functions and data types of the Package Manager API, include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Package Manager API, include the <code><package_manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <package_manager.h>
</pre></li>
<p>To retrieve all package information of installed packages:</p>
<ol>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">package_info_cb()</span> callback function, which is invoked for each retrieved package and used to access the package information:
+<li>Define the <code>package_info_cb()</code> callback function, which is invoked for each retrieved package and used to access the package information:
<pre class="prettyprint">
void
free(type);
}
</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to retrieve all package information by invoking a callback for each retrieved package:
+<li>Use the <code>package_manager_foreach_package_info()</code> function to retrieve all package information by invoking a callback for each retrieved package:
<pre class="prettyprint">
ret = package_manager_foreach_package_info(package_info_cb, NULL);
if (ret != PACKAGE_MANAGER_ERROR_NONE)
<p>To get specific package information:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.
-<p>The function fills the second parameter with the package information handle, which can then be used with the following <span style="font-family: Courier New,Courier,monospace">package_info_get_*()</span> functions to retrieve the specific information:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">package_info_get_label()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_get_icon()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_get_version()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_get_type()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_get_installed_storage()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_get_root_path()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_is_system_package()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_is_removable_package()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_is_preload_package()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">package_info_is_accessible()</span></li>
+<li>Use the <code>package_manager_get_package_info()</code> function.
+<p>The function fills the second parameter with the package information handle, which can then be used with the following <code>package_info_get_*()</code> functions to retrieve the specific information:</p>
+<ul><li><code>package_info_get_label()</code></li>
+<li><code>package_info_get_icon()</code></li>
+<li><code>package_info_get_version()</code></li>
+<li><code>package_info_get_type()</code></li>
+<li><code>package_info_get_installed_storage()</code></li>
+<li><code>package_info_get_root_path()</code></li>
+<li><code>package_info_is_system_package()</code></li>
+<li><code>package_info_is_removable_package()</code></li>
+<li><code>package_info_is_preload_package()</code></li>
+<li><code>package_info_is_accessible()</code></li>
</ul>
<pre class="prettyprint">
/* Use package information */
</pre>
</li>
-<li>When no longer needed, release the package information handle with the <span style="font-family: Courier New,Courier,monospace">package_info_destroy()</span> function:
+<li>When no longer needed, release the package information handle with the <code>package_info_destroy()</code> function:
<pre class="prettyprint">
package_info_destroy(package_info);
</pre></li>
<p>To detect package events, such as installation, uninstallation, and updates:</p>
<ol>
<li>
-<p>Create the package manager handle (<span style="font-family: Courier New,Courier,monospace">package_manager_h</span>) using the <span style="font-family: Courier New,Courier,monospace">package_manager_create()</span> function:</p>
+<p>Create the package manager handle (<code>package_manager_h</code>) using the <code>package_manager_create()</code> function:</p>
<pre class="prettyprint">
package_manager_create(package_manager_h *manager);
</pre>
</li>
-<li>Set the package event to monitor by calling the <span style="font-family: Courier New,Courier,monospace">package_manager_set_event_status()</span> function.
-<p>The second parameter defines the package status that you want to monitor. The possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">package_manager_status_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html#ga405444ebd6254b9cfbaedec829558882">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html#ga405444ebd6254b9cfbaedec829558882">wearable</a> applications).</p>
+<li>Set the package event to monitor by calling the <code>package_manager_set_event_status()</code> function.
+<p>The second parameter defines the package status that you want to monitor. The possible values are listed in the <
code>package_manager_status_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html#ga405444ebd6254b9cfbaedec829558882">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html#ga405444ebd6254b9cfbaedec829558882">wearable</a> applications).</p>
<pre class="prettyprint">
package_manager_set_event_status(manager, PACKAGE_MANAGER_STATUS_TYPE_ALL);
</pre>
<p>The following figure and table describe the service application states.</p>
- <p class="figure">Figure: Running service applications</p>
+ <p align="center"><strong>Figure: Running service applications</strong></p>
<p align="center"><img alt="Running service applications" src="../../images/app_run.png" /></p>
+<p align="center" class="Table"><strong>Table: Service application states</strong></p>
<table>
- <caption>
- Table: Service application states
- </caption>
<tbody>
<tr>
<th>State</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+ <td><code>READY</code></td>
<td>Application is launched.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
+ <td><code>CREATED</code></td>
<td>Application starts the main loop.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+ <td><code>RUNNING</code></td>
<td>Application runs in the background.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+ <td><code>TERMINATED</code></td>
<td>Application is terminated.</td>
</tr>
</tbody>
</table>
-<p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
+<p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category. For more information on using and defining a background category, see <a href="efl_ui_app_n.htm#allow_bg">Background Categories</a>.</p>
<h2 id="register" name="register">Event Callbacks</h2>
<p>The following table lists the application state change events.</p>
+ <p align="center" class="Table"><strong>Table: Application states</strong></p>
<table>
- <caption>
- Table: Application states
- </caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">service_app_create_cb()</span></td>
+ <td><code>service_app_create_cb()</code></td>
<td>Used to take necessary actions before the main event loop starts. Place the initialization code (such as setting up the dbus connection) here.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">service_app_control_cb()</span></td>
+ <td><code>service_app_control_cb()</code></td>
<td>Used to take necessary actions when a service call arrives from another application.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">service_app_terminate_cb()</span></td>
+ <td><code>service_app_terminate_cb()</code></td>
<td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully any shared resources. </td>
</tr>
</tbody>
<p>The following table lists the system events.</p>
+ <p align="center" class="Table"><strong>Table: System events</strong></p>
<table>
- <caption>
- Table: System events
- </caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">service_app_low_memory_cb()</span></td>
+ <td><code>service_app_low_memory_cb()</code></td>
<td>Used to take necessary actions in low memory situations.
<p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. Release any cached data in the main memory to secure more free memory.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">service_app_low_battery_cb()</span></td>
+ <td><code>service_app_low_battery_cb()</code></td>
<td>Used to take necessary actions in low battery situations.
<p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td>
</tr>
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>
<p>Pay specific attention to the following attributes:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices. Because of this, the <span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 and higher.</td>
- </tr>
- </tbody>
- </table> </li>
-<li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices. Because of this, the <span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 and higher.</td>
- </tr>
- </tbody>
- </table> </li></ul>
+<ul><li><code>auto-restart</code>
+<p>If set to <code>true</code>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices. Because of this, the <code>auto-restart</code> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 and higher.
+ </div>
+ </li>
+<li><code>on-boot</code>
+<p>If set to <code>true</code>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices. Because of this, the <code>on-boot</code> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 and higher.
+ </div>
+ </li></ul>
<p>The following table defines the behaviors resulting from the attribute combinations:</p>
+<p align="center" class="Table"><strong>Table: Attribute combinations</strong></p>
<table>
- <caption>
- Table: Attribute combinations
- </caption>
<tbody>
<tr>
- <th><span style="font-family: Courier New,Courier,monospace">auto-restart</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">on-boot</span></th>
+ <th><code>auto-restart</code></th>
+ <th><code>on-boot</code></th>
<th>After normal termination</th>
<th>On forced close</th>
<th>On Reboot</th>
<th>After package update</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+ <td><code>FALSE</code></td>
+ <td><code>FALSE</code></td>
<td>Not launched automatically</td>
<td>Not launched automatically</td>
<td>Not launched after reboot</td>
<td>Not launched automatically</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+ <td><code>FALSE</code></td>
+ <td><code>TRUE</code></td>
<td>Not launched automatically</td>
<td>Not launched automatically</td>
<td>Launched automatically after reboot</td>
<td>Launched automatically</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+ <td><code>TRUE</code></td>
+ <td><code>FALSE</code></td>
<td>Launched automatically</td>
<td>Launched automatically</td>
<td>Not launched after reboot</td>
<td>Launched automatically</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+ <td><code>TRUE</code></td>
+ <td><code>TRUE</code></td>
<td>Launched automatically</td>
<td>Launched automatically</td>
<td>Launched automatically after reboot</td>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Service Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><service_app.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Service Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">wearable</a> applications), include the <code><service_app.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <service_app.h>
</pre>
<li>Service application initialization callback
<p>This callback is called when the application is launched. Use the callback to write the necessary initialization code, such as setting up the dbus connection.</p>
-<p>The callback returns a Boolean value. If there is a critical error during the launch, the return is <span style="font-family: Courier New,Courier,monospace">false</span>, thereby cancelling the launch. Otherwise, the return is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<p>The callback returns a Boolean value. If there is a critical error during the launch, the return is <code>false</code>, thereby cancelling the launch. Otherwise, the return is <code>true</code>.</p>
<pre class="prettyprint">
bool
service_app_create(void *data)
<li>Service application termination callback
<p>This callback is called when the application terminates. Use the callback to release all resources, especially any allocations and shared resources used by other applications.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function quits the application main loop internally.</p>
+<p>The <code>service_app_exit()</code> function quits the application main loop internally.</p>
<pre class="prettyprint">
void
service_app_terminate(void *data)
</li>
<li>Service request callback
-<p>This callback is called when the service application receives an <span style="font-family: Courier New,Courier,monospace">app_control</span> service request from another application.</p>
+<p>This callback is called when the service application receives an <code>app_control</code> service request from another application.</p>
<pre class="prettyprint">
void
service_app_control(app_control_h app_control, void *data)
</li>
<li>
-<p>Set the application state change event callbacks in the <span style="font-family: Courier New,Courier,monospace">service_app_event_callback_s</span> structure. The structure is passed to the function that starts the service application.</p>
-<p>You can register the system event callbacks with the <span style="font-family: Courier New,Courier,monospace">service_app_add_event_handler()</span> function.</p>
+<p>Set the application state change event callbacks in the <code>service_app_event_callback_s</code> structure. The structure is passed to the function that starts the service application.</p>
+<p>You can register the system event callbacks with the <code>service_app_add_event_handler()</code> function.</p>
<pre class="prettyprint">
int
main(int argc, char* argv[])
<p>You can manage the time handle and retrieve the window object for the watch UI. With the time handle, you can <a href="#timehandle">draw the UI</a> for your watch application.</p></li>
<li>Managing the ambient mode
<p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>
-<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span> in the watch application <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>
<p>To use the ambient mode, the user must enable it in the device settings. You can <a href="#ambient">define callbacks to monitor when the application enters and exits the ambient mode</a>.</p>
</li>
</ul>
<p>When a watch application is successfully installed on a device, its UI is visible in the <strong>Clock</strong> menu of the device <strong>Settings</strong> menu. The user can use the settings to change between the available watch application UIs.</p>
- <p class="figure">Figure: Clock menu</p>
+ <p align="center"><strong>Figure: Clock menu</strong></p>
<p align="center">
<img alt="Clock menu" src="../../images/setting_to_clock.png" /></p>
<p>To enable your application to use the watch functionality:</p>
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API's <span style="font-family: Courier New,Courier,monospace">watch_app_ambient_tick_cb()</span> callback in the ambient mode, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API's <code>watch_app_ambient_tick_cb()</code> callback in the ambient mode, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/alarm.set</privilege>
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>
-<li>To use the functions and data types of the Watch Application API, include the <span style="font-family: Courier New,Courier,monospace"><watch_app.h></span> and <span style="font-family: Courier New,Courier,monospace"><watch_app_efl.h></span> header files in your application:
+<li>To use the functions and data types of the Watch Application API, include the <code><watch_app.h></code> and <code><watch_app_efl.h></code> header files in your application:
<pre class="prettyprint">
#include <watch_app.h>
#include <watch_app_efl.h>
</ol>
<h2 id="lifecycle" name="lifecycle">Managing the Application Life-cycle</h2>
-<p>You can create and initialize a watch application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function. To start an event loop, use the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure variable, which contains the required event callbacks.</p>
+<p>You can create and initialize a watch application with the <code>main()</code> function. To start an event loop, use the <code>watch_app_main()</code> function. Before calling this function, set up the <code>watch_app_lifecycle_callback_s</code> structure variable, which contains the required event callbacks.</p>
<p>The following figure illustrates the watch application states during the application life-cycle:</p>
<li>When the application is in the ambient mode, it is in the Ambient state.</li>
<li>When the application exits, it is in the Terminated state.</li>
</ul>
- <p class="figure">Figure: Watch application life-cycle</p>
+ <p align="center"><strong>Figure: Watch application life-cycle</strong></p>
<p align="center"><img alt="Watch application life-cycle" src="../../images/watch_app_lifecycle.png" /></p>
<p>The following table lists the callbacks you can use as the application state changes.</p>
+<p align="center" class="Table"><strong>Table: Application state change callbacks</strong></p>
<table>
- <caption>
- Table: Application state change callbacks
- </caption>
- <tbody>
+ <tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_create()</span></td>
+ <td><code>app_create()</code></td>
<td>Called before the main loop of the application starts. In this callback, you can initialize application resources, such as window creation and data structure.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_control()</span></td>
+ <td><code>app_control()</code></td>
<td>Used to take necessary actions when a service call arrives from another application.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_pause()</span></td>
+ <td><code>app_pause()</code></td>
<td>Called when the application is completely obscured by another application and becomes invisible.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_resume()</span></td>
+ <td><code>app_resume()</code></td>
<td>Called when the application becomes visible.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_terminate()</span></td>
+ <td><code>app_terminate()</code></td>
<td>Called when the application main loop exits. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_time_tick()</span></td>
- <td>Called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the normal watch.</td>
+ <td><code>app_time_tick()</code></td>
+ <td>Called at least once per second. Watch applications can get the current time from the <code>watch_time_h</code> handle and draw the normal watch.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_ambient_tick()</span></td>
- <td>Called at least once per minute or when the device enters the ambient mode. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the ambient mode watch.</td>
+ <td><code>app_ambient_tick()</code></td>
+ <td>Called at least once per minute or when the device enters the ambient mode. Watch applications can get the current time from the <code>watch_time_h</code> handle and draw the ambient mode watch.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span></td>
+ <td><code>app_ambient_changed()</code></td>
<td>Called when the device enters or exits the ambient mode.</td>
</tr>
<ol>
<li><p>Register the necessary callbacks:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">create</span> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
+<li>The <code>create</code> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
<pre class="prettyprint">
bool
app_create(int width, int height, void* user_data)
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">app_control</span> event is triggered when another application sends a launch request to the application.
+<li>The <code>app_control</code> event is triggered when another application sends a launch request to the application.
<pre class="prettyprint">
void
app_control(app_control_h app_control, void* user_data)
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">pause</span> event is triggered when the application is completely obscured by another application and becomes invisible.
+<li>The <code>pause</code> event is triggered when the application is completely obscured by another application and becomes invisible.
<pre class="prettyprint">
void
app_pause(void* user_data)
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">resume</span> event is triggered when the application becomes visible.
+<li>The <code>resume</code> event is triggered when the application becomes visible.
<pre class="prettyprint">
void
app_resume(void* user_data)
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">terminate</span> event is triggered when the application main loop exits.
+<li>The <code>terminate</code> event is triggered when the application main loop exits.
<pre class="prettyprint">
void
app_terminate(void* user_data)
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">time_tick</span> event is triggered at least once per second. The watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time</span> time handle to draw a normal watch.
+<li>The <code>time_tick</code> event is triggered at least once per second. The watch applications can get the current time from the <code>watch_time</code> time handle to draw a normal watch.
<pre class="prettyprint">
void
app_time_tick(watch_time_h watch_time, void* user_data)
</li>
</ul>
</li>
-<li>Set the life-cycle callbacks in the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure, and pass the structure to the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function that starts the watch application event loop:
+<li>Set the life-cycle callbacks in the <code>watch_app_lifecycle_callback_s</code> structure, and pass the structure to the <code>watch_app_main()</code> function that starts the watch application event loop:
<pre class="prettyprint">
int
main(int argc, char* argv[])
<ol>
<li><p>Define the following callback functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">lang_changed()</span>: Triggered when the system language changes and the messages are translated.</li>
-<li><span style="font-family: Courier New,Courier,monospace">region_changed()</span>: Triggered when the time zone changes.</li>
-<li><span style="font-family: Courier New,Courier,monospace">low_memory()</span>: Triggered when the system is running low on memory. Use the callback to save the current work and release resources; if this is not enough, the platform frees resources automatically and can even kill some applications.</li>
-<li><span style="font-family: Courier New,Courier,monospace">low_battery()</span>: Triggered when the system is running low on battery (less than 5%). Use the callback to save the current work and avoid battery-draining workloads.</li>
+<li><code>lang_changed()</code>: Triggered when the system language changes and the messages are translated.</li>
+<li><code>region_changed()</code>: Triggered when the time zone changes.</li>
+<li><code>low_memory()</code>: Triggered when the system is running low on memory. Use the callback to save the current work and release resources; if this is not enough, the platform frees resources automatically and can even kill some applications.</li>
+<li><code>low_battery()</code>: Triggered when the system is running low on battery (less than 5%). Use the callback to save the current work and avoid battery-draining workloads.</li>
</ul>
<pre class="prettyprint">
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;
</ol>
<h2 id="timehandle" name="timehandle">Drawing the Watch UI</h2>
-<p>To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle. You can get the handle with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function.</p>
+<p>To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the <code>watch_time_h</code> time handle. You can get the handle with the <code>watch_time_get_current_time()</code> function.</p>
<p>With the time handle, you can draw the UI for your watch application:</p>
<ol>
-<li>Get the window object with the <span style="font-family: Courier New,Courier,monospace">watch_app_get_elm_win()</span> function:
+<li>Get the window object with the <code>watch_app_get_elm_win()</code> function:
<pre class="prettyprint">
struct _appdata {
Evas *evas;
evas_object_show(ad->label);
</pre>
</li>
-<li>Get the time handle for the current time with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function:
+<li>Get the time handle for the current time with the <code>watch_time_get_current_time()</code> function:
<pre class="prettyprint">
ret = watch_time_get_current_time(&watch_time);
}
</pre>
</li>
-<li>When you no longer need the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle, release it with the <span style="font-family: Courier New,Courier,monospace">watch_time_delete()</span> function.
+<li>When you no longer need the <code>watch_time_h</code> time handle, release it with the <code>watch_time_delete()</code> function.
</li>
</ol>
+<div class="note">
+ <strong>Note</strong>
+ To draw the UI, use a single window that is returned by the <code>watch_app_get_elm_win()</code> function. Do not create additional windows. A stack of watch application windows gets corrupted, because the platform handles the watch application window in a special way.
+</div>
+
<h2 id="current" name="current">Getting the Current Time</h2>
-<p>You can get the current local time in various formats using the Watch Application methods and the time handle. When retrieving the current local time, the time handle parameter cannot be <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>You can get the current local time in various formats using the Watch Application methods and the time handle. When retrieving the current local time, the time handle parameter cannot be <code>NULL</code>.</p>
-<p>For example, you can use the <span style="font-family: Courier New,Courier,monospace">watch_time_get_minute()</span> function to retrieve the current minute value.</p>
+<p>For example, you can use the <code>watch_time_get_minute()</code> function to retrieve the current minute value.</p>
<pre class="prettyprint">
static void
__update_watch(appdata *ad, watch_time_h watch_time)
}
</pre>
-<p>You can also get the UTC time and time zone, if needed, using the <span style="font-family: Courier New,Courier,monospace">watch_time_get_utc_time()</span>, <span style="font-family: Courier New,Courier,monospace">watch_time_get_utc_timestamp()</span>, and <span style="font-family: Courier New,Courier,monospace">watch_time_get_time_zone()</span> functions.</p>
+<p>You can also get the UTC time and time zone, if needed, using the <code>watch_time_get_utc_time()</code>, <code>watch_time_get_utc_timestamp()</code>, and <code>watch_time_get_time_zone()</code> functions.</p>
<h2 id="ambient" name="ambient">Using the Ambient Mode</h2>
-<p>The details of the limited UI drawn in the ambient mode depend on the device. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">disable</span> in the watch application <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>
+
+<p>The details of the limited UI drawn in the ambient mode depend on the device. In addition, due to the ambient mode being a low power mode, there are limits to the colors that can be shown on the screen. Usually, when designing the ambient mode UI, draw it with limited colors (cyan, magenta, yellow, red, green, blue, black and white), and use less than 15% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <code>ambient-support</code> attribute to <code>false</code> in the watch application <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>
+
<p>Since Tizen 2.3.2, some devices introduce a high color mode for the ambient mode. In the high color mode, you can use more colors (usually, 24-bit color) for drawing the ambient mode UI.</p>
+
<p>To use the ambient mode:</p>
<ol>
<li>Define the ambient mode callbacks.
-<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">ambient_changed</span> event is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">ambient_tick</span> event is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</p></li></ul>
+<ul><li><p>The <code>ambient_changed</code> event is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</p></li>
+<li><p>The <code>ambient_tick</code> event is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</p></li></ul>
<pre class="prettyprint">
void
app_ambient_tick(watch_time_h watch_time, void* user_data)
<p>You can manage the <a href="#app">widget application</a> and <a href="#instance">widget instance</a> life-cycles through callbacks that are triggered as the application or instance state changes.</p></li>
<li>Creating the widget UI
<p>The widget application can <a href="#get_window">draw a UI on the home screen</a>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The widget application UI has a limitation with the scroll action to provide better user experience. Design the widget UI to display all the information within the given area of the screen points.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The widget application UI has a limitation with the scroll action to provide better user experience. Design the widget UI to display all the information within the given area of the screen points.
+ <p>To draw the UI, use a single window that is returned by the <code>widget_app_get_elm_win()</code> function. Do not create additional windows. A stack of widget application windows gets corrupted, because the platform handles the widget application window in a special way.</p>
+ </div>
+
</li>
- </ul>
+ </ul>
<h2 id="app_instance" name="app_instance">Widget Application and Widget Instance</h2>
-<p>The widget application provides a life-cycle and methods for making and managing a widget class. It consists of 1 process and makes the widget class in the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> callback function. With this class, the framework can make instances whenever applications for widget viewers, such as home screen and lock screen, request for a widget instance.</p>
+<p>The widget application provides a life-cycle and methods for making and managing a widget class. It consists of 1 process and makes the widget class in the <code>widget_app_create()</code> callback function. With this class, the framework can make instances whenever applications for widget viewers, such as home screen and lock screen, request for a widget instance.</p>
<p>The widget instance has its own life-cycle similar to the widget application. However, the widget instance is only an object shown by the applications for widget viewers. Many widget instances can be running on the same widget application process.</p>
-<p class="figure">Figure: Each widget application has 1 or more widget instances</p>
+<p align="center"><strong>Figure: Each widget application has 1 or more widget instances</strong></p>
<p align="center"><img alt="Each widget application has 1 or more widget instances" src="../../images/widget_homescreen.png"/></p>
<li>When the application is running on the background, it is in the Running state.</li>
<li>When the application exits, it is in the Terminated state.</li>
</ul>
- <p class="figure">Figure: Widget application life-cycle</p>
+ <p align="center"><strong>Figure: Widget application life-cycle</strong></p>
<p align="center"><img alt="Widget application life-cycle" src="../../images/widget_app_lifecycle.png" /></p>
<p>The following table lists the callbacks you can use as the application state changes.</p>
-
+ <p align="center" class="Table"><strong>Table: Application state change callbacks</strong></p>
<table>
- <caption>
- Table: Application state change callbacks
- </caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span></td>
+ <td><code>widget_app_create_cb()</code></td>
<td>Called before the main loop of the application starts.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_app_terminate_cb()</span></td>
+ <td><code>widget_app_terminate_cb()</code></td>
<td>Called after the main loop of the application exits.</td>
</tr>
</tbody>
<li>When the instance is invisible, it is in the Paused state.</li>
<li>When the instance is destroyed, it is in the Destroyed state.</li>
</ul>
- <p class="figure">Figure: Widget instance life-cycle</p>
+ <p align="center"><strong>Figure: Widget instance life-cycle</strong></p>
<p align="center"><img alt="Widget instance life-cycle" src="../../images/widget_instance_lifecycle.png" /></p>
<p>The following table lists the <a href="#life-cycle">callbacks you can use as the instance state changes</a>.</p>
-
+
+ <p align="center" class="Table"><strong>Table: Instance state change callbacks</strong></p>
<table>
- <caption>
- Table: Instance state change callbacks
- </caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_create_cb()</span></td>
+ <td><code>widget_instance_create_cb()</code></td>
<td>Called after the widget instance is created.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_destroy_cb()</span></td>
+ <td><code>widget_instance_destroy_cb()</code></td>
<td>Called before the widget instance is destroyed.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_pause_cb()</span></td>
+ <td><code>widget_instance_pause_cb()</code></td>
<td>Called when the widget is invisible.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resume_cb()</span></td>
+ <td><code>widget_instance_resume_cb()</code></td>
<td>Called when the widget is visible.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resize_cb()</span></td>
+ <td><code>widget_instance_resize_cb()</code></td>
<td>Called before the widget size is changed.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">widget_instance_update_cb()</span></td>
+ <td><code>widget_instance_update_cb()</code></td>
<td>Called when an event for updating the widget is received.</td>
</tr>
</tbody>
</table>
-<p>To register widget instance callbacks, use the <span style="font-family: Courier New,Courier,monospace">widget_app_class_create()</span> function within the <span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span> callback function:</p>
+<p>To register widget instance callbacks, use the <code>widget_app_class_create()</code> function within the <code>widget_app_create_cb()</code> callback function:</p>
<pre class="prettyprint">
static widget_class_h
widget_app_create(void *user_data)
{
- widget_instance_lifecycle_callback_s ops =
- {
+ widget_instance_lifecycle_callback_s ops = {
.create = widget_instance_create,
.destroy = widget_instance_destroy,
.pause = widget_instance_pause,
<p>When the widget launch is requested for the first time, the widget application is initialized and the widget instance is created only after the initialization. If there are additional launch requests for the same widget, a new widget instance for those is created directly, since the widget application has already been initialized.</p>
-<p class="figure">Figure: Launching widget instances</p>
+<p align="center"><strong>Figure: Launching widget instances</strong></p>
<p align="center"><img alt="Launching widget instances" src="../../images/widget_app_instance_flow.png"/></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the widget functionality:</p>
<ol>
-<li>To use the functions and data types of the Widget Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><widget_app.h></span> and <span style="font-family: Courier New,Courier,monospace"><widget_app_efl.h></span> header files in your application:
+<li>To use the functions and data types of the Widget Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">wearable</a> applications), include the <code><widget_app.h></code> and <code><widget_app_efl.h></code> header files in your application:
<pre class="prettyprint">
#include <widget_app.h>
#include <widget_app_efl.h>
</ol>
<h2 id="create">Creating the Widget Application</h2>
-<p>The widget application starts with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, which creates and initializes the application. The <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function is used to start the application event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable, which is passed to the function.</p>
+<p>The widget application starts with the <code>main()</code> function, which creates and initializes the application. The <code>widget_app_main()</code> function is used to start the application event loop. Before calling this function, set up the <code>widget_app_lifecycle_callback_s</code> structure variable, which is passed to the function.</p>
<p>To create the widget application:</p>
<ol>
<li>
-<p>Start and initialize the application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</p>
-<p>Set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable for the widget application life-cycle callbacks, define the functions themselves (<span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> for initialization and <span style="font-family: Courier New,Courier,monospace">widget_app_terminate()</span> for termination), and call the <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function to start the application event loop.</p>
+<p>Start and initialize the application with the <code>main()</code> function.</p>
+<p>Set up the <code>widget_app_lifecycle_callback_s</code> structure variable for the widget application life-cycle callbacks, define the functions themselves (<code>widget_app_create()</code> for initialization and <code>widget_app_terminate()</code> for termination), and call the <code>widget_app_main()</code> function to start the application event loop.</p>
<pre class="prettyprint">
int
main(int argc, char *argv[])
}
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> life-cycle function to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
+<li>Use the <code>widget_app_create()</code> life-cycle function to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
<pre class="prettyprint">
widget_class_h
widget_app_create(void *user_data)
</li>
<li>Register the callback functions for the system events.
-<p>At the end of the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> 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>
+<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);
}
</pre>
-<p>When the system-related callback are no longer needed, remove them with the <span style="font-family: Courier New,Courier,monospace">widget_app_remove_event_handler()</span> function.</p>
+<p>When the system-related callback are no longer needed, remove them with the <code>widget_app_remove_event_handler()</code> function.</p>
</li>
<li>Define the callback functions for the system events:
<li>Define the widget instance life-cycle callbacks:
<ul>
<li>This callback is triggered when the widget instance is created.
-<p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not <span style="font-family: Courier New,Courier,monospace">NULL</span>, restore the previous status.</p>
+<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)
</li>
<li>This callback is triggered when the widget instance is destroyed.
-<p>Release all widget resources. If the <span style="font-family: Courier New,Courier,monospace">reason</span> for the termination is not <span style="font-family: Courier New,Courier,monospace">WIDGET_APP_DESTROY_TYPE_PERMANENT</span>, store the current status with the incoming bundle.</p>
+<p>Release all widget resources. If the <code>reason</code> for the termination is not <code>WIDGET_APP_DESTROY_TYPE_PERMANENT</code>, store the current status with the incoming bundle.</p>
<pre class="prettyprint">
int
widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason,
</pre>
</li>
<li>This callback is triggered when a widget update event is received.
-<p>Take the necessary actions for the widget update. If the <span style="font-family: Courier New,Courier,monospace">force</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, the widget can be updated even in the pause state.</p>
+<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;
}
</ul>
</li>
-<li>Register the callbacks in the <span style="font-family: Courier New,Courier,monospace">widget_instance_lifecycle_callback_s</span> structure during the widget application initialization:
+<li>Register the callbacks in the <code>widget_instance_lifecycle_callback_s</code> structure during the widget application initialization:
<pre class="prettyprint">
widget_class_h
widget_app_create(void *user_data)
<h2 id="get_window">Drawing the Widget UI</h2>
-<p>To draw the widget UI, you must get a window object with the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function and create the UI on the home screen:</p>
+<p>To draw the widget UI, you must get a window object with the <code>widget_app_get_elm_win()</code> function and create the UI on the home screen:</p>
<pre class="prettyprint">
struct widget_instance_data {
Evas_Object *win;
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)
<p>To manage the widget instance:</p>
<ol>
-<li>You can set a customized widget instance with the <span style="font-family: Courier New,Courier,monospace">widget_app_context_set_tag()</span> function when the instance is created. To update or destroy the customized widget, get the instance with the <span style="font-family: Courier New,Courier,monospace">widget_app_context_get_tag()</span> function.
+<li>You can set a customized widget instance with the <code>widget_app_context_set_tag()</code> function when the instance is created. To update or destroy the customized widget, get the instance with the <code>widget_app_context_get_tag()</code> function.
<pre class="prettyprint">
struct _user_defined_s {
int val1;
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);
<p>Although the widget wants to share some data from the Weather application (such as the user's favorite city), it is ineffective for the widget to launch the Weather application every time to retrieve such data. This inefficiency makes it difficult to use typical IPC mechanisms, such as socket and <a href="message_port_n.htm">Message Port</a>, in which both the receiver and sender processes must be alive for communication. To overcome this issue, the widget application must use a communication type where the data is permanently stored somewhere in the system.</p>
-<p>In the Tizen platform, applications in the same package (including widget applications) can access files in the <span style="font-family: Courier New,Courier,monospace">data</span> directory of the package installation path. This means that the UI (or service) application can first write files to the <span style="font-family: Courier New,Courier,monospace">data</span> directory, and the widget can later read them, or vice versa.</p>
+<p>In the Tizen platform, applications in the same package (including widget applications) can access files in the <code>data</code> directory of the package installation path. This means that the UI (or service) application can first write files to the <code>data</code> directory, and the widget can later read them, or vice versa.</p>
-<p class="figure">Figure: Sharing through the data directory</p>
+<p align="center"><strong>Figure: Sharing through the data directory</strong></p>
<p align="center"><img alt="Sharing through the data directory" src="../../images/widget_data_share.png" /></p>
-<p>To manage data through the <span style="font-family: Courier New,Courier,monospace">data</span> directory:</p>
+<p>To manage data through the <code>data</code> directory:</p>
<ul>
-<li><p>You can set and get data in the <span style="font-family: Courier New,Courier,monospace">data</span> directory using the Preference API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications). You can use the functions to <a href="app_preferences_n.htm">store and retrieve key-value data</a> in the <span style="font-family: Courier New,Courier,monospace">data</span> directory.</p></li>
+<li><p>You can set and get data in the <code>data</code> directory using the Preference API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications). You can use the functions to <a href="app_preferences_n.htm">store and retrieve key-value data</a> in the <code>data</code> directory.</p></li>
-<li><p>You can share the <span style="font-family: Courier New,Courier,monospace">data</span> directory content with Sqlite, by creating an Sqlite database file in the <span style="font-family: Courier New,Courier,monospace">data</span> directory.</p>
+<li><p>You can share the <code>data</code> directory content with Sqlite, by creating an Sqlite database file in the <code>data</code> directory.</p>
<p>The Sqlite database has an advantage to a direct use of a file in error handling, such as journaling. Consequently, if the application must handle complex data rather than primitive values, <a href="../data/sql_n.htm">use Sqlite to store and retrieve the data</a>.</p></li></ul>
<p>If an application requires complex control over a widget, such as Music Player, it must implement a service application in the middle and use the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications).</p>
<p>The following figure illustrates typical data control flows between the set of UI, service, and widget applications.</p>
-<p class="figure">Figure: Sharing through data control</p>
+<p align="center"><strong>Figure: Sharing through data control</strong></p>
<p align="center"><img alt="Sharing through data control" src="../../images/widget_data_control_share.png" /></p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For user convenience, a STANDALONE widget application package is not allowed in the Tizen Store.
- <p>You can make a STANDALONE widget application in the Tizen Studio for test purposes. However, to publish it, you must combine it with at least 1 UI application in the package. For more details, see <a href="../../../../org.tizen.training/html/native/process/app_dev_process_n.htm#develop">Developing Multiple Projects as a Combined Package</a>.</p></td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ For user convenience, a STANDALONE widget application package is not allowed in the Tizen Store.
+ <p>You can make a STANDALONE widget application in the Tizen Studio for test purposes. However, to publish it, you must combine it with at least 1 UI application in the package. For more details, see <a href="../../../../org.tizen.training/html/native/process/app_dev_process_n.htm#develop">Developing Multiple Projects as a Combined Package</a>.</p>
+ </div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>Tizen enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
-<p class="figure">Figure: Bluetooth connections</p>
+<p align="center"><strong>Figure: Bluetooth connections</strong></p>
<p align="center"><img src="../../images/bluetooth_device_discovering.png" alt="Bluetooth connections" /></p>
<p>The main features of the Bluetooth API include:</p>
</li>
<li>Connecting to and exchanging data with a Bluetooth device using a Bluetooth socket
<p>The Bluetooth Socket API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">wearable</a> applications) provides functions for managing connections to other devices and exchanging data. The API is used for exchanging data between 2 Bluetooth devices, where your device can have the role both of a server (service provider) and client (service user). The connection creation process differs based on the role. After the connection is established, the processes for exchanging data and disconnecting are the same for both roles.</p>
- <p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
+ <p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <code>BluetoothSocket</code> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
<p>You can use Serial Port Profile (SPP) operations to <a href="#connect">connect to other devices</a>, <a href="#exchange">exchange data</a>, and <a href="#disconnect">disconnect from connected devices</a>.</p>
</li>
<li>Connecting to audio devices with Bluetooth
<li>Connecting to health devices with Bluetooth HDP
<p>Manage connections to health devices and exchange data using the Bluetooth HDP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__HDP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__HDP__MODULE.html">wearable</a> applications).</p>
<p>The following figure illustrates the Tizen HDP architecture.</p>
- <p class="figure">Figure: Tizen HDP architecture</p>
+ <p align="center"><strong>Figure: Tizen HDP architecture</strong></p>
<p align="center"><img src="../../images/bluetooth_hdp.png" alt="Bluetooth HDP architecture" /></p>
</li>
<li>Connecting to devices with Bluetooth HID
<p>To enable your application to use the Bluetooth functionality:</p>
<ol>
<li>
-<p>To use the Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/bluetooth</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Bluetooth API, include the <span style="font-family: Courier New,Courier,monospace"><bluetooth.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Bluetooth API, include the <code><bluetooth.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <bluetooth.h>
</pre>
<p>To allow the user to enable or disable Bluetooth, use the application control to display the Bluetooth activation settings.</p>
<p>The Bluetooth API does not contain functions for enabling or disabling Bluetooth. You must display the Bluetooth activation settings application to allow the user to toggle the Bluetooth state.</p>
- <p class="figure">Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)</p>
+ <p align="center"><strong>Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)</strong></p>
<p align="center"><img alt="Bluetooth activation settings application (off screen on the left and on screen on the right)" src="../../images/bluetooth_onoff.png" /></p>
<pre class="prettyprint">
}
/* 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 */
bt_adapter_visibility_mode_e mode;
- /* Duration until the visibility mode is changed so that other devices cannot find your device */
+ /*
+ Duration until the visibility mode is changed
+ so that other devices cannot find your device
+ */
int duration = 1;
bt_adapter_get_visibility(&mode, &duration);
switch (mode) {
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(), or bt_adapter_get_visibility(),
- BT_ERROR_NOT_ENABLED occurs
+ by invoking bt_adapter_get_name(), bt_adapter_get_address(),
+ or bt_adapter_get_visibility(), BT_ERROR_NOT_ENABLED occurs
*/
}
}
<li>Discover and bond with new devices:
<ol>
<li>Define and register the discovery state change callback.
-<p>Register the callback with the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_set_device_discovery_state_changed_cb()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_set_device_discovery_state_changed_cb()</span> (Bluetooth LE) function.</p>
+<p>Register the callback with the <code>bt_adapter_set_device_discovery_state_changed_cb()</code> (classic Bluetooth) or <code>bt_adapter_le_set_device_discovery_state_changed_cb()</code> (Bluetooth LE) function.</p>
<p>Use the callback to manage the discovery process:</p>
-<ul><li><p>The first callback parameter defines the result of the Bluetooth discovery process. In case of success, the parameter value is <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_NONE</span>. If the discovery failed to start due to an error, the parameter value is <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_TIMEOUT</span>.</p></li>
-<li><p>The second callback parameter defined the current state of the discovery process using the enumerators <
span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_e</span> (classic Bluetooth) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">wearable</a> applications) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_e</span> (Bluetooth LE) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html#ga4b90a954c6cfb51b60d520c114d8f62d">mobile</a> applications):</p>
-<ul><li>When you start the discovery process, the callback is triggered with the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span> state.
-<p>Similarly, when you stop the discovery process, the callback is triggered with the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</span> state.</p></li>
-<li>Each time a remote Bluetooth device is found, the callback is triggered with the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state.
+<ul><li><p>The first callback parameter defines the result of the Bluetooth discovery process. In case of success, the parameter value is <code>BT_ERROR_NONE</code>. If the discovery failed to start due to an error, the parameter value is <code>BT_ERROR_TIMEOUT</code>.</p></li>
+<li><p>The second callback parameter defined the current state of the discovery process using the enumerators <
code>bt_adapter_device_discovery_state_e</code> (classic Bluetooth) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">wearable</a> applications) or <code>bt_adapter_le_device_discovery_state_e</code> (Bluetooth LE) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html#ga4b90a954c6cfb51b60d520c114d8f62d">mobile</a> applications):</p>
+<ul><li>When you start the discovery process, the callback is triggered with the <code>BT_ADAPTER_DEVICE_DISCOVERY_STARTED</code> or <code>BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</code> state.
+<p>Similarly, when you stop the discovery process, the callback is triggered with the <code>BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</code> or <code>BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</code> state.</p></li>
+<li>Each time a remote Bluetooth device is found, the callback is triggered with the <code>BT_ADAPTER_DEVICE_DISCOVERY_FOUND</code> or <code>BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</code> state.
<p>In this state, you can get some information about the discovered device, such as the device MAC address, name, class, RSSI (received signal strength indicator), and bonding state. Using this information, you can bond with the discovered device.</p></li></ul></li></ul>
<p>The following example shows the callback implementation for classic Bluetooth. Bluetooth LE is implemented in the same way.</p>
<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:
</pre>
<p>You can discover a nearby remote Bluetooth device, if the remote device Bluetooth is enabled and in a discovery mode.</p>
-<p>To stop the device discovery, call the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> (Bluetooth LE) function.</p>
+<p>To stop the device discovery, call the <code>bt_adapter_stop_device_discovery()</code> (classic Bluetooth) or <code>bt_adapter_le_stop_device_discovery()</code> (Bluetooth LE) function.</p>
</li>
<li>
-<p>To bond with a discovered remote device, use the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. To cancel the bonding, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span> function.</p>
+<p>To bond with a discovered remote device, use the <code>bt_device_create_bond()</code> function. To cancel the bonding, call the <code>bt_device_cancel_bonding()</code> function.</p>
<pre class="prettyprint">
ret = bt_device_create_bond(bt_server_address);
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>
-<p>To get notified when the bonding process has finished, register a bond created callback using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From the callback, you can get the service UUID and the list of services provided by the remote Bluetooth device.</p>
+<p>To get notified when the bonding process has finished, register a bond created callback using the <code>bt_device_set_bond_created_cb()</code> function. From the callback, you can get the service UUID and the list of services provided by the remote Bluetooth device.</p>
<pre class="prettyprint">
void
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.");
}
}
/*
- You can get bt_server_address from bt_adapter_bonded_device_cb() or bt_device_service_searched_cb()
+ You can get bt_server_address from bt_adapter_bonded_device_cb()
+ or bt_device_service_searched_cb()
device_info->remote_address in bt_adapter_bonded_device_cb()
sdp_info->remote_address in bt_device_service_searched_cb()
*/
</ol>
</li>
<li>Query the bonded device list.
-<p>To query the list of previously bonded devices, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function. The function triggers a callback for each bonded device, and the callback provides you information about the bonded device (such as name, MAC address, and service list) that you need to connect to the device.</p>
-<p>Make sure that the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span> until you have found the device you want. When the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>, the iterations stop and no more callbacks are called even if there are more devices in the bonded list.</p>
+<p>To query the list of previously bonded devices, use the <code>bt_adapter_foreach_bonded_device()</code> function. The function triggers a callback for each bonded device, and the callback provides you information about the bonded device (such as name, MAC address, and service list) that you need to connect to the device.</p>
+<p>Make sure that the callback returns <code>true</code> until you have found the device you want. When the callback returns <code>false</code>, the iterations stop and no more callbacks are called even if there are more devices in the bonded list.</p>
<pre class="prettyprint">
/* Server address for connecting */
char *bt_server_address = NULL;
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 */
if (bt_server_address != NULL)
free(bt_server_address);
</pre>
-<p>To remove a device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
+<p>To remove a device from the bonded list, call the <code>bt_device_destroy_bond()</code> function.</p>
</li></ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">A Bluetooth device must be in a discovery mode (visible) for other devices to find it and connect to it. If you want other devices to find your device, you must set the device to be visible.</td>
- </tr>
- </tbody>
- </table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ A Bluetooth device must be in a discovery mode (visible) for other devices to find it and connect to it. If you want other devices to find your device, you must set the device to be visible.
+ </div>
<p>To manage the device visibility and enable discovery:</p>
<pre class="prettyprint">
/* Visibility mode of the Bluetooth device */
bt_adapter_visibility_mode_e mode;
-/* Duration until the visibility mode is changed so that other devices cannot find your device */
+/*
+ Duration until the visibility mode is changed
+ so that other devices cannot find your device
+*/
int duration = 1;
bt_adapter_get_visibility(&mode, &duration);
if (mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
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>
<li>Connect as a server:
<ol>
<li>
-<p>To establish a connection with your device acting as a server, create an RFCOMM Bluetooth socket using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function.</p>
+<p>To establish a connection with your device acting as a server, create an RFCOMM Bluetooth socket using the <code>bt_socket_create_rfcomm()</code> function.</p>
<p>The first parameter is the UUID of the service, which uniquely identifies which service to provide. The UUID must match with the UUID in the client's incoming connection for the connection to be accepted. The second parameter is the RFCOMM socket file descriptor as an output parameter.</p>
<pre class="prettyprint">
const char* my_uuid="00001101-0000-1000-8000-00805F9B34FB";
</pre>
</li>
<li>
-<p>To listen for an incoming connection from a client, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_listen_and_accept_rfcomm()</span> function. The first parameter is the socket file descriptor passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, defining the socket that starts listening. The second parameter is the maximum number of pending connections that a Bluetooth server can store.</p>
+<p>To listen for an incoming connection from a client, call the <code>bt_socket_listen_and_accept_rfcomm()</code> function. The first parameter is the socket file descriptor passed from <code>bt_socket_create_rfcomm()</code>, defining the socket that starts listening. The second parameter is the maximum number of pending connections that a Bluetooth server can store.</p>
<pre class="prettyprint">
ret = bt_socket_listen_and_accept_rfcomm(server_socket_fd, 5);
if (ret != BT_ERROR_NONE) {
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>
</li>
<li>
-<p>Register the socket connection state change callback using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_connection_state_changed_cb()</span> function.</p>
-<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 <
span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span> 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>
+<p>Register the socket connection state change callback using the <code>bt_socket_set_connection_state_changed_cb()</code> function.</p>
+<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;
}
</pre>
-<p>When you no longer want to accept any other connections or provide a service, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> function.</p>
+<p>When you no longer want to accept any other connections or provide a service, call the <code>bt_socket_destroy_rfcomm()</code> function.</p>
</li>
</ol>
</li>
<li>Connect as a client:
<ol>
-<li>Define and register the socket connection state change callback using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_connection_state_changed_cb()</span> function.
+<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;
}
</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When you connect to a Bluetooth server device, retrieve the server socket file descriptor (<span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s->socket_fd</span>) in the callback and store it for later use. You need the file descriptor when sending data or disconnecting from the service.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ When you connect to a Bluetooth server device, retrieve the server socket file descriptor (<code>bt_socket_connection_s->socket_fd</code>) in the callback and store it for later use. You need the file descriptor when sending data or disconnecting from the service.
+ </div>
</li>
<li>
-<p>Request a connection to the Bluetooth server using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connect_rfcomm()</span> function.</p>
-<p>The first parameter is the address of the remote device. You can get it from the <span style="font-family: Courier New,Courier,monospace;">bt_device_info_s</span> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__device__info__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__device__info__s.html">wearable</a> applications), which is returned in a callback after you bond with the server device or query a previously bonded device. The second parameter is the UUID for the specific RFCOMM-based service on a remote device. The UUID must match the UUID used by the server device in the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function.</p>
+<p>Request a connection to the Bluetooth server using the <code>bt_socket_connect_rfcomm()</code> function.</p>
+<p>The first parameter is the address of the remote device. You can get it from the <code>bt_device_info_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__device__info__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__device__info__s.html">wearable</a> applications), which is returned in a callback after you bond with the server device or query a previously bonded device. The second parameter is the UUID for the specific RFCOMM-based service on a remote device. The UUID must match the UUID used by the server device in the <code>bt_socket_create_rfcomm()</code> function.</p>
<pre class="prettyprint">
const char *service_uuid="00001101-0000-1000-8000-00805F9B34FB";
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>
<h2 id="exchange" name="exchange">Exchanging Data Using SPP</h2>
<p>To share data between devices after establishing a connection:</p>
-<ol><li><p>To write data, use the <span style="font-family: Courier New,Courier,monospace;">bt_socket_send_data()</span> function. The first parameter is the socket file descriptor from the socket connection state change callback, the second parameter is the data to be sent, and the third parameter is the data length.</p>
+<ol><li><p>To write data, use the <code>bt_socket_send_data()</code> function. The first parameter is the socket file descriptor from the socket connection state change callback, the second parameter is the data to be sent, and the third parameter is the data length.</p>
<pre class="prettyprint">
bt_error_e ret;
char data[] = "Sending test";
</pre>
</li>
<li><p>To read data from other devices, you must set up the data received callback, which is invoked when your device receives data from other Bluetooth devices.</p>
-<p>Use the <
span style="font-family: Courier New,Courier,monospace;">bt_socket_set_data_received_cb()</span> function to register the data received callback. In the callback, the first parameter is a pointer to the <span style="font-family: Courier New,Courier,monospace;">bt_socket_received_data_s</span> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__socket__received__data__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__socket__received__data__s.html">wearable</a> applications) that can specify the received data, data size, and socket file descriptor.</p>
+<p>Use the <
code>bt_socket_set_data_received_cb()</code> function to register the data received callback. In the callback, the first parameter is a pointer to the <code>bt_socket_received_data_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__socket__received__data__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__socket__received__data__s.html">wearable</a> applications) that can specify the received data, data size, and socket file descriptor.</p>
<pre class="prettyprint">
bt_error_e ret;
<p>To disconnect from a device:</p>
-<ul><li>If your device is a Bluetooth server, disconnect from the client with the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> function:
+<ul><li>If your device is a Bluetooth server, disconnect from the client with the <code>bt_socket_destroy_rfcomm()</code> function:
<pre class="prettyprint">
bt_error_e ret;
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 <span style="font-family: Courier New,Courier,monospace;">bt_socket_disconnect_rfcomm()</span> function:
+<li>If your device is a Bluetooth client, disconnect from the server with the <code>bt_socket_disconnect_rfcomm()</code> function:
<pre class="prettyprint">
bt_error_e ret;
/* 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");
return;
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_svc_cb()</span> callback to initiate the service characteristics discovery:
+<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;
}
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_chr_cb()</span> callback to discover the characteristic descriptors:
+<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;
}
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_desc_cb()</span> callback to get the descriptor data:
+<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;
<pre class="prettyprint">
char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
-char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb"; /* Client characteristic configuration */
+/* Client characteristic configuration */
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
bt_gatt_h svc = NULL;
bt_gatt_h chr = NULL;
bt_gatt_h desc = 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;
}
return;
}
</pre>
-<p>After the reading operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_read_complete_cb()</span> callback to handle values:</p>
+<p>After the reading operation is complete, use the <code>bt_gatt_client_read_complete_cb()</code> callback to handle values:</p>
<pre class="prettyprint">
void
__bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
<pre class="prettyprint">
char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
-char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb"; /* Client characteristic configuration */
+/* Client characteristic configuration */
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
bt_gatt_h svc = NULL;
bt_gatt_h chr = NULL;
bt_gatt_h desc = 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;
}
return;
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">__bt_gatt_client_set_value()</span> function is defined below:</p>
+<p>The <code>__bt_gatt_client_set_value()</code> function is defined below:</p>
<pre class="prettyprint">
int
__bt_gatt_client_set_value(char *type, char *value, bt_gatt_h h)
return ret;
}
</pre>
-<p>After the writing operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_write_complete_cb()</span> callback to finish the task:</p>
+<p>After the writing operation is complete, use the <code>bt_gatt_client_write_complete_cb()</code> callback to finish the task:</p>
<pre class="prettyprint">
void
__bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
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;
}
</pre>
-<p>After registering the callback operation, use the <span style="font-family: Courier New,Courier,monospace;">__bt_gatt_client_value_changed_cb()</span> callback to display the changed value:</p>
+<p>After registering the callback operation, use the <code>__bt_gatt_client_value_changed_cb()</code> callback to display the changed value:</p>
<pre class="prettyprint">
void
__bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len, void *user_data)
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;
}
dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_value failed: %d", ret);
</pre></li>
-<li>Get the value of a characteristic or descriptor handle as an <span style="font-family: Courier New,Courier,monospace;">integer</span> type:
+<li>Get the value of a characteristic or descriptor handle as an <code>integer</code> type:
<pre class="prettyprint">
int ret = 0;
int offset = 0;
dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_int_value failed: %d", ret);
</pre></li>
-<li>Get the value of a characteristic or descriptor handle as a <span style="font-family: Courier New,Courier,monospace;">float</span> type:
+<li>Get the value of a characteristic or descriptor handle as a <code>float</code> type:
<pre class="prettyprint">
int ret = 0;
int offset = 0;
<pre class="prettyprint">
char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
-char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb"; /* Client characteristic configuration */
+/* Client characteristic configuration */
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
bt_gatt_h svc = NULL;
bt_gatt_h chr = NULL;
bt_gatt_h desc = NULL;
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>
<p>To set the client properties and attribute values:</p>
<ul>
-<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">unit8</span> or <span style="font-family: Courier New,Courier,monospace">char</span> type value):
+<li>Set or update the characteristic value (<code>unit8</code> or <code>char</code> type value):
<pre class="prettyprint">
int ret = 0;
char char_value[1] = {1 + (rand()%100)};
bt_gatt_h characteristic_handle = NULL;
/*
- For client, the characteristic handle is retrieved from the client created using gatt_client_create()
- by using bt_gatt_service_get_characteristic()
+ For client, the characteristic handle is retrieved from the client created
+ using gatt_client_create() by using bt_gatt_service_get_characteristic()
*/
ret = bt_gatt_set_value(characteristic_handle, char_value, 1);
dlog_print(DLOG_INFO, LOG_TAG, "Success");
</pre></li>
-<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">integer</span> type value):
+<li>Set or update the characteristic value (<code>integer</code> type value):
<pre class="prettyprint">
int ret = 0;
int char_value = 60 + (rand()%60);
bt_gatt_h characteristic_handle = NULL;
/*
- For client, the characteristic handle is retrieved from the client created using gatt_client_create()
- by using bt_gatt_service_get_characteristic()
+ For client, the characteristic handle is retrieved from the client created
+ using gatt_client_create() by using bt_gatt_service_get_characteristic()
*/
ret = bt_gatt_set_int_value(characteristic_handle, BT_DATA_TYPE_UINT16, char_value, 1);
dlog_print(DLOG_INFO, LOG_TAG, "Success");
</pre></li>
-<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">float</span> type value):
+<li>Set or update the characteristic value (<code>float</code> type value):
<pre class="prettyprint">
int ret = 0;
bt_gatt_h characteristic_handle = NULL;
/*
- For client, the characteristic handle is retrieved from the client created using gatt_client_create()
- by using bt_gatt_service_get_characteristic()
+ For client, the characteristic handle is retrieved from the client created
+ using gatt_client_create() by using bt_gatt_service_get_characteristic()
Here the char value is, value: 123 exponent -2
*/
ret = bt_gatt_set_float_value(characteristic_handle, BT_DATA_TYPE_FLOAT, 123, -2, 1);
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");
<li>Exchange data in a server role:
<ol>
<li>
-<p>Initialize the OPP server to be ready for client connections using the <span style="font-family: Courier New,Courier,monospace">bt_opp_server_initialize_by_connection_request()</span> function.</p>
+<p>Initialize the OPP server to be ready for client connections using the <code>bt_opp_server_initialize_by_connection_request()</code> function.</p>
<p>The second parameter defines a callback that is invoked whenever a client requests an OPP connection to the server.
</p>
<pre class="prettyprint">
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);
<li>Exchange data in a client role:
<ol>
<li>
-<p>Initialize the client using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_initialize()</span> function:</p>
+<p>Initialize the client using the <code>bt_opp_client_initialize()</code> function:</p>
<pre class="prettyprint">
bt_error_e ret;
</pre>
</li>
<li>
-<p>Define the information of the file that can be sent to the server device using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_add_file()</span> function:</p>
+<p>Define the information of the file that can be sent to the server device using the <code>bt_opp_client_add_file()</code> function:</p>
<pre class="prettyprint">
bt_error_e ret;
char *resource_path = NULL;
</pre>
</li>
<li>
-<p>Send the file to the server using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_push_files()</span> function:</p>
+<p>Send the file to the server using the <code>bt_opp_client_push_files()</code> function:</p>
<pre class="prettyprint">
bt_error_e ret;
char remote_addr[18] = REMOTE_DEVICE_MAC_ADDRESS;
</pre>
</li>
<li>
-<p>After the push is finished by the client, call the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_clear_files()</span> and <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_deinitialize()</span> to release the Bluetooth resources related to the OPP client:</p>
+<p>After the push is finished by the client, call the <code>bt_opp_client_clear_files()</code> and <code>bt_opp_client_deinitialize()</code> to release the Bluetooth resources related to the OPP client:</p>
<pre class="prettyprint">
bt_error_e ret;
Wait while the system searches for the LE target you want to connect to
When you find the LE target you want, stop the LE scan
- bt_adapter_le_start_scan() operates continually until you call bt_adapter_le_stop_scan()
- If you do not call bt_adapter_le_stop_scan() after calling bt_adapter_le_start_scan(),
- calling bt_adapter_le_start_scan() again can cause an in-progress error
+ bt_adapter_le_start_scan() operates continually
+ until you call bt_adapter_le_stop_scan()
+ If you do not call bt_adapter_le_stop_scan() after calling
+ bt_adapter_le_start_scan(), calling bt_adapter_le_start_scan() again
+ can cause an in-progress error
*/
ret = bt_adapter_le_stop_scan();
</pre>
</li>
- <li><p>Use the callback defined in the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_scan()</span> function to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices' transmission level, service data list, appearance of the devices, and manufacture data of the devices.</p>
+ <li><p>Use the callback defined in the <code>bt_adapter_le_start_scan()</code> function to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices' transmission level, service data list, appearance of the devices, and manufacture data of the devices.</p>
<p>To handle the scan result:</p>
<pre class="prettyprint">
}
if (info->adv_data_len > 31 || info->scan_data_len > 31) {
- dlog_print(DLOG_INFO, LOG_TAG, "###################");
+ dlog_print(DLOG_INFO, LOG_TAG, "Data length exceeds 31");
bt_adapter_le_stop_scan();
- dlog_print(DLOG_INFO, LOG_TAG, "###################");
+ dlog_print(DLOG_INFO, LOG_TAG, "Scanning stopped");
return;
}
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);
}
}
<h2 id="le_discovery" name="le_discovery">Discovering Bluetooth LE Devices</h2>
-<p>Perform the LE discovery operation to discover nearby Bluetooth LE devices. You can register and deregister a callback for the LE discovery operation through the set and unset callback functions. The registered device discovery callback provides details of the discovered devices and the state of the discovery (started, finished, found).</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The APIs used in this use case are deprecated since Tizen 2.3.1. For scanning nearby BLE devices in Tizen 2.3.1 and later, see <a href="#le_scan">Managing Bluetooth LE Scans</a>.</td>
- </tr>
- </tbody>
- </table>
+<p>Perform the LE discovery operation to discover nearby Bluetooth LE devices. You can register and deregister a callback for the LE discovery operation through the set and unset callback functions. The registered device discovery callback provides details of the discovered devices and the state of the discovery (started, finished, found).</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ The APIs used in this use case are deprecated since Tizen 2.3.1. For scanning nearby BLE devices in Tizen 2.3.1 and later, see <a href="#le_scan">Managing Bluetooth LE Scans</a>.
+ </div>
<p>To start the BLE discovery operation:</p>
<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();
const char *heart_rate_svc_uuid_16 = "180d";
const char *immediate_alert_svc_uuid_16 = "1802";
const char *ancs_uuid_128 = "7905F431-B5CE-4E99-A40F-4B1E122D00D0";
-int appearance = 192; /* 192 is a generic watch */
+int appearance = 192; /* 192 is a generic watch */
advertiser = advertiser_list[advertiser_index];
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>
<h2 id="set_adv_conn" name="set_adv_conn">Setting the LE Advertising Connectable Mode</h2>
- <p>When advertising to a remote device, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_set_advertising_connectable()</span> function to define whether the advertising type is connectable or non-connectable:</p>
+ <p>When advertising to a remote device, use the <code>bt_adapter_le_set_advertising_connectable()</code> function to define whether the advertising type is connectable or non-connectable:</p>
<pre class="prettyprint">
static bt_advertiser_h advertiser = NULL;
<p>To manage advertising:</p>
<ol>
<li>
-<p>To start advertising with the given advertiser and advertising parameters information, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_advertising_new()</span> function:</p>
+<p>To start advertising with the given advertiser and advertising parameters information, use the <code>bt_adapter_le_start_advertising_new()</code> function:</p>
<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;
</pre>
</li>
<li>
-<p>To stop advertising with the given advertiser, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_advertising()</span> function:</p>
+<p>To stop advertising with the given advertiser, use the <code>bt_adapter_le_stop_advertising()</code> function:</p>
<pre class="prettyprint">
if (advertiser != NULL) {
<h2 id="release" name="release">Releasing All Resources</h2>
-<p>To release all Bluetooth resources, call the <span style="font-family: Courier New,Courier,monospace;">bt_deinitialize()</span> function:</p>
+<p>To release all Bluetooth resources, call the <code>bt_deinitialize()</code> function:</p>
<pre class="prettyprint">
/* Deregister callbacks */
bt_adapter_unset_state_changed_cb();
</ul>
<h2 id="manager" name="manager">Connection Manager</h2>
-<p>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) provides functions for managing data connections. It allows you to <a href="#detail">get a state of the connection interface</a> such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy, and gateway information, and <a href="#register">registering property change callbacks</a>.</p>
+<p>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) allows you to manage data connections using a connection handle. First you create the handle with the <code>connection_create()</code> function, and then you can use it to:</p>
+<ul><li><a href="#detail">Get a state of the connection interface</a>.
+<p>You can access the state of the Bluetooth, cellular, and Wi-Fi connections only. Use the <code>connection_get_[interface]_state()</code> function to retrieve the state as the <code>connection_bt_state_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gaf4abc0a653145fb9dec7e885c9081395">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gaf4abc0a653145fb9dec7e885c9081395">wearable</a> applications), <code>connection_cellular_state_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">wearable</a> applications), or <code>connection_wifi_state_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">wearable</a> applications) enumerator.</p></li>
+<li>Access various network details, such as the IP address, proxy, and gateway information.
+<p>You can use the <code>connection_address_family_e</code> enumerator in (<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">wearable</a> applications) to get the IPv4 or IPv6 address family. You can use it as a parameter when you retrieve the IP address of the current connection or proxy.</p></li>
+<li><a href="#register">Register property change callbacks</a>.</li>
+<li>Create a <code>connection_profile_h</code> profile handle, which provides information according to the connection type.</li></ul>
<p>The Connection Manager API is related to <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> (see the <a href="curl_n.htm">Curl</a> guide) and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library. If you want to create a socket directly without libcurl, you must check whether you are using the IPv4 or IPv6 environment, and create an applicable IP socket.</p>
<li><a href="#socket_close">Close the socket</a> and release the resources.</li>
</ul>
-<p>The Connection Manager provides the following typedefs and enumerators for managing data connections:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">connection_h</span>
-<p>Connection handle for all connection functions. To use the Connection Manager API, first create a connection handle using the <span style="font-family: Courier New,Courier,monospace">connection_create()</span> function. Afterwards, you can obtain network information.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_profile_h</span>
-<p>Profile handle, which provides information according to the connection type.</p></li>
-<li>Connection state enumerators
-<p>One of the following states is returned by the <span style="font-family: Courier New,Courier,monospace">connection_get_[interface]_state()</span> function:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">connection_bt_state_e</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_cellular_state_e</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_wifi_state_e</span></li></ul>
-<p>The Connection Manager supports getting the connection state for Bluetooth, cellular and Wi-Fi.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_address_family_e</span>
-<p>Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.</p></li></ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To handle HTTP and HTTPS request in a proxy environment, <a href="#detail">get the proxy address</a> using the Connection Manager and then set the proxy address using the Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications).
- <p>In case of libcurl, you can <a href="curl_n.htm#manage">use the <span style="font-family: Courier New,Courier,monospace">CURLOPT_PROXY</span> option</a>.</p></td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ To handle HTTP and HTTPS requests in a proxy environment, <a href="#detail">get the proxy address</a> using the Connection Manager and then set the proxy address using the Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications).
+ <p>In case of libcurl, you can <a href="curl_n.htm#manage">use the <code>CURLOPT_PROXY</code> option</a>.</p>
+ </div>
<h2 id="con_profile" name="con_profile">Connection Profile</h2>
-<p>The Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications) provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>
+<p>The Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications) provides functions for mapping a connection profile. It allows you to use a <code>connection_profile_h</code> handle for getting details about the connection.</p>
-<p>Each profile is defined by a set of configuration information defined in the <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>
+<p>Each profile is defined by a set of configuration information defined in the <code>connection_profile_h</code> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>
-<p>The following tables define the available profile information, which you can get using the <span style="font-family: Courier New,Courier,monospace">connection_profile_get_XXX()</span> function.</p>
+<p>The following table defines the available profile information, which you can get using the <code>connection_profile_get_XXX()</code> function.</p>
+ <p align="center" class="Table"><strong>Table: Common information</strong></p>
<table>
- <caption>
- Table: Common information
- </caption>
<tbody>
<tr>
- <th>Information</th>
+ <th colspan="2">Information</th>
<th>Description</th>
+ </tr>
+ <tr>
+ <th rowspan="12">Common</th>
+ <td>DNS address</td>
+ <td>DNS address; you can get the first and second DNS address</td>
</tr>
<tr>
- <td>Profile type</td>
- <td>Profile type indicating the network connection type</td>
+ <td>Gateway address</td>
+ <td>Gateway address</td>
+ </tr>
+ <tr>
+ <td>IP address</td>
+ <td>IP address</td>
+ </tr>
+ <tr>
+ <td>IP configuration type</td>
+ <td>IP address configuration type, such as static, dynamic, auto, or fixed</td>
</tr>
<tr>
+ <td>Network interface name</td>
+ <td>Name of the network interface, such as eth0 or pdp0</td>
+ </tr>
+ <tr>
<td>Profile ID</td>
<td>Unique profile ID; when you create a new profile, this value is determined</td>
</tr>
<td>Profile state, such as disconnected, association, configuration, or connected</td>
</tr>
<tr>
- <td>DNS address</td>
- <td>DNS address; you can get the first and second DNS address</td>
- </tr>
- <tr>
- <td>Gateway address</td>
- <td>Gateway address</td>
- </tr>
- <tr>
- <td>Subnet mask</td>
- <td>Subnet mask</td>
+ <td>Profile type</td>
+ <td>Profile type indicating the network connection type</td>
</tr>
<tr>
<td>Proxy address</td>
<tr>
<td>Proxy type</td>
<td>Proxy method, such as direct or auto</td>
- </tr>
- <tr>
- <td>Network interface name</td>
- <td>Name of the network interface, such as eth0 or pdp0</td>
- </tr>
- <tr>
- <td>IP address</td>
- <td>IP address</td>
- </tr>
- <tr>
- <td>IP configuration type</td>
- <td>IP address configuration type, such as static, dynamic, auto, or fixed</td>
- </tr>
- </tbody>
- </table>
-
-<table>
- <caption>
- Table: Profile-specific information for Wi-Fi
- </caption>
- <tbody>
- <tr>
- <th>Information</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>Essid</td>
- <td>Extended service set identifier</td>
</tr>
<tr>
- <td>Bssid</td>
+ <td>Subnet mask</td>
+ <td>Subnet mask</td>
+ </tr>
+ <tr>
+ <th rowspan="9">Wi-Fi-specific</th>
+ <td>BSSID</td>
<td>Basic service set identifier</td>
+ </tr>
+ <tr>
+ <td>ESSID</td>
+ <td>Extended service set identifier</td>
</tr>
<tr>
<td>Encryption type</td>
<td>Passphrase required</td>
<td>Passphrase compulsion</td>
</tr>
- <tr>
- <td>WPS supported</td>
- <td>WPS (Wi-Fi Protected Setup) support</td>
- </tr>
<tr>
- <td>Security type</td>
- <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td>
- </tr>
- <tr>
- <td>Rssi</td>
+ <td>RSSI</td>
<td>Received signal strength indication</td>
- </tr>
- </tbody>
- </table>
-
-<table>
- <caption>
- Table: Profile-specific information for cellular
- </caption>
- <tbody>
- <tr>
- <th>Information</th>
- <th>Description</th>
</tr>
<tr>
+ <td>Security type</td>
+ <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td>
+ </tr>
+ <tr>
+ <td>WPS supported</td>
+ <td>Whether WPS (Wi-Fi Protected Setup) is supported</td>
+ </tr>
+ <tr>
+ <th rowspan="10">Cellular-specific</th>
<td>APN</td>
<td>Access Point Name</td>
</tr>
<td>Home URL</td>
</tr>
<tr>
+ <td>Default</td>
+ <td>Whether the profile is default</td>
+ </tr>
+ <tr>
+ <td>Editable</td>
+ <td>Whether the profile is editable</td>
+ </tr>
+ <tr>
+ <td>Hidden</td>
+ <td>Whether the profile is hidden</td>
+ </tr>
+ <tr>
+ <td>PDN type</td>
+ <td>Cellular PDN type</td>
+ </tr>
+ <tr>
+ <td>Roaming PDN type</td>
+ <td>Cellular roaming PDN type</td>
+ </tr>
+ <tr>
+ <td>Roaming</td>
+ <td>Roaming state</td>
+ </tr>
+ <tr>
<td>Service type</td>
<td>Cellular service type</td>
</tr>
<h2 id="statistics" name="statistics">Connection Statistics</h2>
-<p>Use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to <a href="#info">gather statistics on the network usage</a>, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Only Wi-Fi and cellular connections are supported in the statistics.</td>
- </tr>
- </tbody>
- </table>
+<p>You can use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to <a href="#info">gather statistics on the network usage</a>, such as the amount of sent or received data. You can also retrieve the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS). To define the specific type of statistics information you want, use the <code>connection_statistics_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications).</p>
- <p>The following table lists the connection type constants.</p>
- <table>
- <caption>
- Table: Connection type constants
- </caption>
- <tbody>
- <tr>
- <th>Constant</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span></td>
- <td>Wi-Fi type</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span></td>
- <td>Cellular type</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ Statistics are supported for Wi-Fi and cellular connections only.
+ </div>
-<p>The following table lists the statistics constants.</p>
- <table>
- <caption>
- Table: Statistics constants
- </caption>
- <tbody>
- <tr>
- <th>Constant</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></td>
- <td>Last received data</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></td>
- <td>Last sent data</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></td>
- <td>Total received data</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA</span></td>
- <td>Total sent data</td>
- </tr>
- </tbody>
- </table>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">connection_reset_statistics()</span> function to re-initialize the statistics.</p>
+<p>You can re-initialize the statistics with the <code>connection_reset_statistics()</code> function.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the connection functionality:</p>
<ol>
<li>
-<p>To use the Connection API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Connection API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/network.get</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Connection API, include the <span style="font-family: Courier New,Courier,monospace"><net_connection.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Connection API, include the <code><net_connection.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <net_connection.h>
</pre>
</li>
<li>
-<p>To be able to use all connection functions, you must create a handle that contains information about the connection. Use the <span style="font-family: Courier New,Courier,monospace;">connection</span> static variable that stores the connection handle.</p>
+<p>To be able to use all connection functions, you must create a handle that contains information about the connection. Use the <code>connection</code> static variable that stores the connection handle.</p>
<pre class="prettyprint">
static connection_h connection;
</pre>
-<p>Create the connection handle using the <span style="font-family: Courier New,Courier,monospace;">connection_create()</span> function that allows you to obtain the connection state and data transfer information:</p>
+<p>Create the connection handle using the <code>connection_create()</code> function that allows you to obtain the connection state and data transfer information:</p>
<pre class="prettyprint">
int error_code;
<p>To get the type of the current connection, IP address, and proxy information:</p>
<ol>
-<li>To get the type of the current profile for data connection, use the <
span style="font-family: Courier New,Courier,monospace;">connection_get_type()</span> function. The second parameter is the network type defined in the <span style="font-family: Courier New,Courier,monospace;">connection_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications).
+<li>To get the type of the current profile for data connection, use the <
code>connection_get_type()</code> function. The second parameter is the network type defined in the <code>connection_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications).
<pre class="prettyprint">
int error_code;
}
</pre></li>
-<li>To get the connection IPv4 address, use the <
span style="font-family: Courier New,Courier,monospace;">connection_get_ip_address()</span> function. The Connection API supports both IPv4 and IPv6, as defined in the <span style="font-family: Courier New,Courier,monospace;">connection_address_family_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">wearable</a> applications).
-<p>The IP address can be printed using the dlog util tool (as in the following example), or shown to the user in another way. Free the memory allocated for the <span style="font-family: Courier New,Courier,monospace;">ip_addr</span> temporary variable.</p>
+<li>To get the connection IPv4 address, use the <
code>connection_get_ip_address()</code> function. The Connection API supports both IPv4 and IPv6, as defined in the <code>connection_address_family_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html#ga5910989495b39e8c4dbbd05ec9482d19">wearable</a> applications).
+<p>The IP address can be printed using the dlog util tool (as in the following example), or shown to the user in another way. Free the memory allocated for the <code>ip_addr</code> temporary variable.</p>
<pre class="prettyprint">
char *ip_addr = NULL;
-error_code = connection_get_ip_address(connection, CONNECTION_ADDRESS_FAMILY_IPV4, &ip_addr);
+error_code = connection_get_ip_address(connection, CONNECTION_ADDRESS_FAMILY_IPV4,
+ &ip_addr);
if (error_code == CONNECTION_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "IP address: %s", ip_addr);
free(ip_addr);
}
</pre></li>
-<li>To get the connection proxy information, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_proxy()</span> function. The following example prints the proxy address using the dlog util tool.
-<p>Free the memory allocated for the <span style="font-family: Courier New,Courier,monospace;">proxy_addr</span> variable.</p>
+<li>To get the connection proxy information, use the <code>connection_get_proxy()</code> function. The following example prints the proxy address using the dlog util tool.
+<p>Free the memory allocated for the <code>proxy_addr</code> variable.</p>
<pre class="prettyprint">
error_code = connection_get_proxy(connection, address_family, &proxy_addr);
<p>To obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent or received data and last sent or received data (only cellular and Wi-Fi statistics information is supported):</p>
-<ol><li>To get the cellular connection state, use the <
span style="font-family: Courier New,Courier,monospace;">connection_get_cellular_state()</span> function. The function fills the second parameter with the current state, whose possible values are defined in the <span style="font-family: Courier New,Courier,monospace;">connection_cellular_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">wearable</a> applications).
+<ol><li>To get the cellular connection state, use the <
code>connection_get_cellular_state()</code> function. The function fills the second parameter with the current state, whose possible values are defined in the <code>connection_cellular_state_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga9ca508e61d795be15ee1795581a66396">wearable</a> applications).
-<p>In the following example, a <span style="font-family: Courier New,Courier,monospace;">switch</span> statement is used to show the cellular state:</p>
+<p>In the following example, a <code>switch</code> statement is used to show the cellular state:</p>
<pre class="prettyprint">
connection_cellular_state_e cellular_state;
}
</pre></li>
-<li>To get the Wi-Fi connection state, use the <
span style="font-family: Courier New,Courier,monospace;">connection_get_wifi_state()</span> function. The function fills the second parameter with the current state, whose possible values are defined in the <span style="font-family: Courier New,Courier,monospace;">connection_wifi_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">wearable</a> applications).
+<li>To get the Wi-Fi connection state, use the <
code>connection_get_wifi_state()</code> function. The function fills the second parameter with the current state, whose possible values are defined in the <code>connection_wifi_state_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#gab3ad7fdb200354b3c34878d88fc97dcd">wearable</a> applications).
-<p>In the following example, a <span style="font-family: Courier New,Courier,monospace;">switch</span> statement is used to show the Wi-Fi state:</p>
+<p>In the following example, a <code>switch</code> statement is used to show the Wi-Fi state:</p>
<pre class="prettyprint">
connection_wifi_state_e wifi_state;
}
</pre></li>
-<li>To get connection statistics, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_statistics()</span> function.
+<li>To get connection statistics, use the <code>connection_get_statistics()</code> function.
<p>Connection statistics include the amount of total sent and received data and the last sent and received data. The function parameters determine which statistics are received, and for which connection type:</p>
<ul>
-<li>The second parameter defines the connection type using the <
span style="font-family: Courier New,Courier,monospace;">connection_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications).</li>
-<li>The third parameter defines the statistic type using the <
span style="font-family: Courier New,Courier,monospace;">connection_statistics_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications).</li>
+<li>The second parameter defines the connection type using the <
code>connection_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html#ga85c33901b8ac24f2e5f66440ec4519ee">wearable</a> applications).</li>
+<li>The third parameter defines the statistic type using the <
code>connection_statistics_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications).</li>
</ul>
<p>The following example reads all statistics for cellular and Wi-Fi connections:</p>
<ol><li>Define callback functions.
-<p>In this use case, the registered callbacks are the <span style="font-family: Courier New,Courier,monospace;">__ip_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">__proxy_changed_cb()</span> functions, used for address changes. When an address changes, an information message is printed in the file (or shown to the user in another way). The message contains information on which address has been changed and what the new value is.</p>
+<p>In this use case, the registered callbacks are the <code>__ip_changed_cb()</code> and <code>__proxy_changed_cb()</code> functions, used for address changes. When an address changes, an information message is printed in the file (or shown to the user in another way). The message contains information on which address has been changed and what the new value is.</p>
<pre class="prettyprint">
static void
<li>Register the defined callback functions.
-<p>You have to register the previously defined callback functions using the <span style="font-family: Courier New,Courier,monospace;">connection_set_ip_address_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">connection_set_proxy_address_changed_cb()</span> functions. The last parameter (<span style="font-family: Courier New,Courier,monospace;">user_data</span>) is set to a message which is printed in the callback.</p>
+<p>You have to register the previously defined callback functions using the <code>connection_set_ip_address_changed_cb()</code> and <code>connection_set_proxy_address_changed_cb()</code> functions. The last parameter (<code>user_data</code>) is set to a message which is printed in the callback.</p>
<pre class="prettyprint">
-error_code = connection_set_ip_address_changed_cb(connection, __ip_changed_cb, "IP addr changed:");
+error_code = connection_set_ip_address_changed_cb(connection, __ip_changed_cb,
+ "IP addr changed:");
if (error_code != CONNECTION_ERROR_NONE)
/* Error handling */
-error_code = connection_set_proxy_address_changed_cb(connection, __proxy_changed_cb, "Proxy IP addr changed:");
+error_code = connection_set_proxy_address_changed_cb(connection, __proxy_changed_cb,
+ "Proxy IP addr changed:");
if (error_code != CONNECTION_ERROR_NONE)
/* Error handling */
</pre></li>
return -1;
}
- rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6, &local_ipv6);
+ rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6,
+ &local_ipv6);
if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv6, "::") != 0) {
ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
dlog_print(DLOG_INFO, LOG_TAG, "IPv6 address: %s\n", local_ipv6);
}
/* If both IPv4 and IPv6 types are set, the IPv4 type is used as default here */
- rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4, &local_ipv4);
+ rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4,
+ &local_ipv4);
if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv4, &0.0.0.0&) != 0) {
ip_type = CONNECTION_ADDRESS_FAMILY_IPV4;
dlog_print(DLOG_INFO, LOG_TAG, "IPv4 address: %s\n", local_ipv4);
}
- if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6 && ip_type != CONNECTION_ADDRESS_FAMILY_IPV4) {
+ if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6
+ && ip_type != CONNECTION_ADDRESS_FAMILY_IPV4) {
dlog_print(DLOG_INFO, LOG_TAG, "No IP address!\n");
/* Error handling */
}
<p>You can open the connection profile manually in 2 ways:</p>
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">connection_get_profile_iterator()</span> function to retrieve all available profiles, and select the profile you want.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">connection_get_default_cellular_service_profile()</span> function to retrieve the connection profile of a specific cellular service.
+<li>Use the <code>connection_get_profile_iterator()</code> function to retrieve all available profiles, and select the profile you want.</li>
+<li>Use the <code>connection_get_default_cellular_service_profile()</code> function to retrieve the connection profile of a specific cellular service.
<p>This use case covers this way of opening the profile.</p></li>
</ul>
<p>To change the connection profile:</p>
<ol>
-<li>To get the default cellular profile, call the <
span style="font-family: Courier New,Courier,monospace;">connection_get_default_cellular_service_profile()</span> function. As the second parameter, define the cellular service type, whose available values are defined in the <span style="font-family: Courier New,Courier,monospace;">connection_cellular_service_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__CELLULAR__PROFILE__MODULE.html#ga0c60b4110e648d6cb64f35348037a9ff">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__CELLULAR__PROFILE__MODULE.html#ga0c60b4110e648d6cb64f35348037a9ff">wearable</a> applications):
+<li>To get the default cellular profile, call the <
code>connection_get_default_cellular_service_profile()</code> function. As the second parameter, define the cellular service type, whose available values are defined in the <code>connection_cellular_service_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__CELLULAR__PROFILE__MODULE.html#ga0c60b4110e648d6cb64f35348037a9ff">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__CELLULAR__PROFILE__MODULE.html#ga0c60b4110e648d6cb64f35348037a9ff">wearable</a> applications):
<pre class="prettyprint">
int rv;
-rv = connection_get_default_cellular_service_profile(connection, CONNECTION_CELLULAR_SERVICE_TYPE_INTERNET, &profile);
+rv = connection_get_default_cellular_service_profile(connection,
+ CONNECTION_CELLULAR_SERVICE_TYPE_INTERNET,
+ &profile);
if (ret != CONNECTION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "Failed to get default cellular service profile\n");
</pre>
</li>
-<li>Open the profile with the <span style="font-family: Courier New,Courier,monospace;">connection_open_profile()</span> function and define a callback, which is called after the profile is opened:
+<li>Open the profile with the <code>connection_open_profile()</code> function and define a callback, which is called after the profile is opened:
<pre class="prettyprint">
rv = connection_open_profile(connection, profile, test_connection_opened_callback, NULL);
if (rv != CONNECTION_ERROR_NONE)
</li>
<li>If the callback function is invoked with a success result, refresh the profile and get the interface name of the opened profile.
-<p>The interface name is used to bind with a socket manually. For binding, use a general socket or HTTP APIs. In this example, libcurl is used. After the <span style="font-family: Courier New,Courier,monospace;">curl_easy_perform()</span> function is called, data is transported through the specified network interface.</p>
+<p>The interface name is used to bind with a socket manually. For binding, use a general socket or HTTP APIs. In this example, libcurl is used. After the <code>curl_easy_perform()</code> function is called, data is transported through the specified network interface.</p>
<pre class="prettyprint">
static void
CURL *curl;
CURLcode res;
- if (result == CONNECTION_ERROR_NONE) {
+ if (result == CONNECTION_ERROR_NONE) {
/* Refresh the profile */
rv = connection_profile_refresh(profile);
if (rv != CONNECTION_ERROR_NONE) {
curl_easy_setopt(curl, CURLOPT_INTERFACE, interface_name);
res = curl_easy_perform(curl);
- if(res != CURLE_OK)
+ if (res != CURLE_OK)
dlog_print(DLOG_ERROR, LOG_TAG, "curl_easy_perform() failed");
curl_easy_cleanup(curl);
</pre>
</li>
<li>Listen for client-side connections.
-<p>Mark the <span style="font-family: Courier New,Courier,monospace;">sockfd</span> socket as a passive socket.</p>
+<p>Mark the <code>sockfd</code> socket as a passive socket.</p>
<pre class="prettyprint">
if (listen(sockfd, 5) != 0) {
printf("listen() error: %s\n", strerror(errno));
<p>You can connect to the Internet and access its various services. You can download files, transfer content through socket and libcurl connections, and create a Web view in your application to allow Internet browsing.</p></li>
-<li><a href="mtp_n.htm">File Transfer with MTP</a>
+<li><a href="mtp_n.htm">File Transfer with MTP</a> <strong>in mobile applications only</strong>
<p>You can transfer files between 2 devices. You can manage the Media Transfer Protocol (MTP) and get files from the MTP responder.</p></li>
<p>You can perform network service discoveries to announce local services and search for remote services.</p></li>
+<li><a href="d2d_connectivity_n.htm">Convergence</a>
+
+<p>You can open logical channels for exchanging messages across devices, and start and control applications on a remote device. Convergence services allow applications and devices in the network to discover, connect, and communicate to each other.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<ul>
<li>Initializing the HTTP and HTTPS request connection
<p>To allow the application to handle HTTP and HTTPS requests with various options, you must initialize the libcurl library and the connection.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In some cases, such as with Internet access, your application requires some privileges. For more information on which privileges to set in the application manifest file, see <a href="../../../../org.tizen.training/html/native/details/sec_privileges_n.htm#nonAPI">Non-API Bound Privileges</a>.</td>
- </tr>
- </tbody>
- </table> </li>
+
+ <div class="note">
+ <strong>Note</strong>
+ In some cases, such as with Internet access, your application requires some privileges. For more information on which privileges to set in the application manifest file, see <a href="../../../../org.tizen.training/html/native/details/sec_privileges_n.htm#nonAPI">Non-API Bound Privileges</a>.
+ </div>
+ </li>
<li>Managing the proxy address
<p>You can <a href="#manage">get and set the proxy address</a> in multiple ways.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In a proxy environment, the libcurl library does not know the proxy address. To handle HTTP and HTTPS requests in a proxy environment, first get the proxy address using the <a href="connection_n.htm#manager">connection manager</a>, and then set the proxy address using the Curl API.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ In a proxy environment, the libcurl library does not know the proxy address. To handle HTTP and HTTPS requests in a proxy environment, first get the proxy address using the <a href="connection_n.htm#manager">connection manager</a>, and then set the proxy address using the Curl API.
+ </div>
+
</li>
<li>Transferring HTTP requests
- <p>You can <a href="#request">transfer HTTP requests</a> using the <span style="font-family: Courier New,Courier,monospace">curl_easy_setopt()</span> function.</p></li>
+ <p>You can <a href="#request">transfer HTTP requests</a> using the <code>curl_easy_setopt()</code> function.</p></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the Curl functionality:</p>
<ol>
<li>
-<p>To use the Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications) and the libcurl library, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications) and the libcurl library, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/internet</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Curl API, include the <span style="font-family: Courier New,Courier,monospace"><curl.h></span> header file in your application. You must also add the <span style="font-family: Courier New,Courier,monospace"><net_connection.h></span> header file to get the proxy address.</p>
+<p>To use the functions and data types of the Curl API, include the <code><curl.h></code> header file in your application. You must also add the <code><net_connection.h></code> header file to get the proxy address.</p>
<pre class="prettyprint">
#include <curl.h>
#include <net_connection.h>
</pre>
</li>
<li>
-<p>Initialize the Curl library and the Curl handle using the <span style="font-family: Courier New,Courier,monospace;">curl_easy_init()</span> function:</p>
+<p>Initialize the Curl library and the Curl handle using the <code>curl_easy_init()</code> function:</p>
<pre class="prettyprint">
CURL *curl;
CURLcode curl_err;
</pre>
</li>
<li>
-<p>Create and initialize a connection handle by calling the <span style="font-family: Courier New,Courier,monospace;">connection_create()</span> function:</p>
+<p>Create and initialize a connection handle by calling the <code>connection_create()</code> function:</p>
<pre class="prettyprint">
connection_h connection;
int conn_err;
<p>There are 2 ways for getting and setting the proxy address:</p>
-<ul><li>To get the proxy address directly, use the <
span style="font-family: Courier New,Courier,monospace">connection_get_proxy()</span> 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):
+<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 <span style="font-family: Courier New,Courier,monospace">curl_easy_setopt()</span> function with the <span style="font-family: Courier New,Courier,monospace">CURLOPT_PROXY</span> parameter:</p>
+<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">
if (conn_err == CONNECTION_ERROR_NONE && proxy_address)
curl_easy_setopt(curl, CURLOPT_PROXY, proxy_address);
</pre>
</li>
-<li>To be notified whenever the proxy address changes, register a callback with the <span style="font-family: Courier New,Courier,monospace">connection_set_proxy_address_changed_cb()</span> function of the Connection Manager API:
+<li>To be notified whenever the proxy address changes, register a callback with the <code>connection_set_proxy_address_changed_cb()</code> function of the Connection Manager API:
<pre class="prettyprint">
conn_err = connection_set_proxy_address_changed_cb(connection,
__proxy_address_changed_cb, NULL);
return;
}
</pre>
-<p>The new proxy address is passed in the callback parameters. To set the proxy address, use the <span style="font-family: Courier New,Courier,monospace">curl_easy_setopt()</span> function with the <span style="font-family: Courier New,Courier,monospace">CURLOPT_PROXY</span> parameter:</p>
+<p>The new proxy address is passed in the callback parameters. To set the proxy address, use the <code>curl_easy_setopt()</code> function with the <code>CURLOPT_PROXY</code> parameter:</p>
<pre class="prettyprint">
static void
__proxy_address_changed_cb(const char *ipv4_address,
<h2 id="request" name="request">Transferring HTTP Requests</h2>
-<p>To transfer HTTP requests, set the URL with the <span style="font-family: Courier New,Courier,monospace">curl_easy_setopt()</span> function and start the transfer with the <span style="font-family: Courier New,Courier,monospace">curl_easy_perform()</span> function:</p>
+<p>To transfer HTTP requests, set the URL with the <code>curl_easy_setopt()</code> function and start the transfer with the <code>curl_easy_perform()</code> function:</p>
<pre class="prettyprint">
curl_easy_setopt(curl, CURLOPT_URL, "https://www.tizen.org/");
curl_err = curl_easy_perform(curl);
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Convergence</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 4.0 and Higher for Mobile</li>
+ <li>Tizen 4.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#app_communication">App Communication Service</a></li>
+ <li><a href="#remote_app_control">Remote App Control Service</a></li>
+ <li><a href="#prerequisites">Prerequisites</a></li>
+ <li><a href="#discovery">Discovering Devices</a></li>
+ <li>App Communication Service
+ <ul class="toc">
+ <li><a href="#connect_service">Connecting to the App Communication Service</a></li>
+ <li><a href="#init_app_communication">Initializing the App Communication Service</a></li>
+ <li><a href="#send_message">Sending Messages to the Server Application</a></li>
+ </ul></li>
+ <li>Remote App Control Service
+ <ul class="toc">
+ <li><a href="#init_remote">Using the Remote App Control Service</a></li>
+ </ul></li>
+ <li><a href="#payload">Predefined Payload Fields</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">Convergence API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">Convergence API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Convergence</h1>
+
+<p>As the number of Tizen devices is increasing, platform features that allow connections between different devices as well as sharing data and commands among them is required. Tizen device-to-device (D2D) connectivity framework provides this feature through a collection of D2D convergence services and the Convergence API. Being a part of the platform, the D2D connectivity framework is available on all Tizen TV, mobile, and wearable devices. The D2D connectivity features are aimed at streamlining the application development process and guaranteeing the compatibility and extensibility in the future.</p>
+
+<p>The D2D connectivity framework allows applications and devices in the network to discover, connect, and communicate to each other through convergence services. The app communication service opens logical channels for exchanging messages across devices, while the remote app control service starts and controls an application on a remote device.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The D2D connectivity framework supports only Wi-Fi networks. More connectivity types, such as Bluetooth, Bluetooth Low Energy, and Wi-Fi Direct™, are going to be added in future versions.
+ <p>Only 2 services, app communication and remote app control, are currently supported. More services are going to be introduced in the future versions of Tizen. All convergence services are predefined in the platform, which means that you cannot add new ones on your own.</p>
+</div>
+
+<p>The main features of the Convergence API include:</p>
+<ul>
+<li>Discovering and connecting to devices
+<p>You can <a href="#discovery">discover nearby devices</a> and get information about them. After discovering a device that provides a service you need, you can <a href="#connect_service">connect to the device service</a>.</p></li>
+<li>Communicating with remote devices
+<p>You can use the <a href="#app_communication">app communication service</a> to connect to remote services and communicate with remote applications by sending a payload.</p></li>
+<li>Launching applications in remote devices
+<p>You can use the <a href="#remote_app_control">remote app control service</a> to launch applications in a remote device. The access to the remote device is <a href="#access_control">controlled using passcodes</a>.</p></li>
+</ul>
+
+
+<p>The Convergence API includes features to implement a typical convergence application workflow: discovering nearby devices and browsing available services, connecting to a specific service, and using the service. The payload functions defined for packaging data and transferring messages between end-points accept plain strings, byte arrays, and application control data. The payload also contains several <a href="#payload">predefined fields</a> for your use.</p>
+<p>The following figure illustrates the workflow of the D2D connectivity features.</p>
+
+<p align="center"><strong>Figure: D2D connectivity workflow</strong></p>
+<p align="center"><img src="../../images/d2d_workflow.png" alt="D2D connectivity workflow" /></p>
+
+
+
+<h2 id="app_communication">App Communication Service</h2>
+
+<p>The convergence architecture allows the app communication service to launch an application on a device equipped with the remote server, and communicate with the server application by <a href="#send_message">sending a payload</a>. The remote server application can also use the app communication service to send responses to the local (client-side) application. In this way, a sophisticated data exchange protocol can be established. Before using the app communication service, <a href="#init_app_communication">set up the listener callbacks and initialize the application</a>.</p>
+
+<p>The following figure illustrates the architecture.</p>
+
+<p align="center"><strong>Figure: App communication service</strong></p>
+<p align="center"><img src="../../images/d2d_app_communication.png" alt="App communication service" /></p>
+
+<div class="note">
+ <strong>Note</strong>
+ Currently, the remote server can only be implemented in a TV device based on Tizen 3.0, which means that you can remotely launch applications on TV devices only. You can develop a mobile or wearable client for the app communication service, if a server exists.
+</div>
+
+<p>A typical app communication service work flow starts with the discovery step, in which the mobile or wearable device discovers the service provided by the TV. When the service is found, the mobile or wearable device launches an application in the TV remotely and communicates with it. The app-to-app communication is bidirectional, so both local and remote applications usually play the roles of sender and listener.</p>
+
+<p>The app communication service has a client-server architecture:</p>
+
+<ul>
+<li>The app communication service relies on the remote server. This means that the server application (the application on the remote server, such as TV) initialization and execution differs slightly from the client application (the application on the mobile or wearable device).</li>
+<li>The client application can remotely launch the application on the server side or connect to the already running server application, but not the other way round. Both client and server side applications can send payloads and listen to each other.</li>
+<li>More than 1 client can be connected to a server application. For example, multiple players on mobile devices can connect to a game application on the TV, which takes a role of a server.</li>
+</ul>
+
+<p>The app communication service channel specifies the server application the client wants to connect with. The channel data is composed of a URI and channel ID, which are assigned to the channel handle:</p>
+<pre class="prettyprint">
+conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+conv_channel_set_string(channel_handle, "channel_id", "test");
+</pre>
+<p>The channel URI is the URI of the server side application, while the channel ID is a developer-defined value. Note that both URI and ID fields are mandatory for using the app communication service. If not provided, the <code>CONV_ERROR_INVALID_PARAMETER</code> error occurs. You must know the server side application URI: you either develop both the client and server application yourself, or acquire the server application URI from other sources.</p>
+
+<h2 id="remote_app_control">Remote App Control Service</h2>
+
+<p>In contrast to the app communication service, the remote app control service does not need a server. The service is based on a peer-to-peer scheme, which means that the communication between 2 remote devices is symmetric. In addition, the remote app control service does not provide channels.</p>
+
+<p>The connection between applications is based on <a href="https://www.iotivity.org/" target="_blank">IoTivity</a>, as illustrated in the following figure.</p>
+
+<p align="center"><strong>Figure: Remote app control service</strong></p>
+<p align="center"><img src="../../images/d2d_remote_app_control.png" alt="Remote app control service" /></p>
+
+<p>In Tizen 3.0, the remote app control service is supported in mobile and wearable profiles. With this service, you can <a href="#init_remote">use the Tizen App Control feature across remote devices</a>.</p>
+<p>The typical remote app control service workflow starts with the discovery of the remote app control service on the nearby devices. When the service is found, the <a href="../app_management/app_controls_n.htm">application control</a> feature can be used to launch an application on the remote device and receive results of operations performed by the launched application.</p>
+
+<h3 id="access_control">Access Control</h3>
+
+<p>The remote app control service can attempt to launch an application in a remote device without user permission. To prevent this, an access control module is implemented inside the D2D connectivity framework.</p>
+<p>The access control setup is similar to the pairing of Bluetooth devices. When a device tries to access a remote device with the <code>conv_service_start()</code> function, a passcode pops up in the remote device screen and the user must enter that passcode in the original device. Once the passcode is entered correctly, the remote device is managed as an allowed device and the passcode is not asked again.</p>
+
+<p>The following figure shows the device on the left trying to access the device on the right.</p>
+
+<p align="center"><strong>Figure: Access control</strong></p>
+<p align="center"><img src="../../images/d2d_access_control.png" alt="Access control" /></p>
+
+<p>You can manage allowed devices in the <strong>Tizen Connect</strong> tab of the Tizen settings application. When the Tizen Connect feature is enabled, all discovered nearby devices are presented to the user in 3 lists: allowed, denied, and available. The user can allow or deny each device by selecting the device name in the list.</p>
+<p>All remote devices in the <strong>Allowed devices</strong> list can access the original device without the passcode, while all devices in <strong>Denied devices</strong> list cannot access the original device at all. The user can refresh the list of available nearby devices by clicking <strong>Scan</strong>.</p>
+
+<p align="center"><strong>Figure: Tizen Connect</strong></p>
+<p align="center"><img src="../../images/d2d_tizen_connect.png" alt="Tizen Connect" /></p>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the D2D connectivity functionality:</p>
+<ol>
+<li>To use the Convergence API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
+<pre class="prettyprint">
+<privileges>
+ <privilege>http://tizen.org/privilege/internet</privilege>
+ <privilege>http://tizen.org/privilege/bluetooth</privilege>
+ <privilege>http://tizen.org/privilege/d2d.datasharing</privilege>
+</privileges>
+</pre>
+</li>
+<li>To use the functions and data types of the Convergence API, include the <code><d2d_conv_manager.h></code> header file in your application:
+<pre class="prettyprint">
+#include <d2d_conv_manager.h>
+</pre>
+</li>
+</ol>
+
+<h2 id="discovery">Discovering Devices</h2>
+
+<p>Discovery is a procedure for searching for convergence services provided by nearby devices in the same device-to-device network.</p>
+<p>To discover devices:</p>
+<ol>
+<li>Create the device handle.
+<p>During the discovery process, the framework returns handles of found devices (JSON objects with basic device information and lists of available services). The following example shows the conceptual structure of device handle:</p>
+<pre class="prettyprint">
+{
+ "device_id": "DEVICE_ID", /* Unique device ID */
+ "device_name": "DEVICE_NAME", /* Unique device name */
+ "device_type": "DEVICE_TYPE", /* Device profile, such as mobile or wearable */
+ [
+ /* Handle for service A */
+ {
+ service_type: TYPE_A,
+ jservice: JSON auxiliary data of service A
+ },
+ /* Handle for service B */
+ {
+ service_type: TYPE_B,
+ jservice: JSON auxiliary of service B
+ },
+ ]
+}
+</pre>
+
+<ul>
+<li>The device ID is a unique identifier string, generated with the following rule: if a remote server is installed on the device (such as TV), the device ID is assigned by the app communication service. Usually, it has a format of service name and version. Otherwise (such as on mobile or wearable devices), the device ID is the device MAC address.</li>
+<li>Device name is the one that is set in the device settings (<strong>Settings > About Devices > Device Name</strong>).</li>
+<li>The service list includes all services supported by the device.
+<p>Each service has either the <code>CONV_SERVICE_APP_TO_APP_COMMUNICATION</code> or <code>CONV_SERVICE_REMOTE_APP_CONTROL</code> type and auxiliary data. The service type constants are defined in the <code>conv_service_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#gaea7544e24c248a658abc06d7015719a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#gaea7544e24c248a658abc06d7015719a6">wearable</a> applications).</p>
+</li></ul>
+
+<div class="note">
+ <strong>Note</strong>
+ The device ID and device type are defined in the platform, and cannot be changed.
+ <p>The <code>jservice</code> data is used by the framework internally for the connection and execution of the service. You as a developer do not need to know these details.</p>
+</div>
+</li>
+<li>Start the discovery by calling the <code>conv_discovery_start()</code> function. The discovered device handles are retrieved in the <code>conv_discovery_cb()</code> callback.
+<p>In the following example, the <code>conv_discovery_start()</code> function runs a 30 seconds long discovery procedure. Each time a nearby device is discovered, the framework invokes the <code>discovery_cb()</code> callback with the device handle and the <code>CONV_DISCOVERY_RESULT_SUCCESS</code> result code. At the end of discovery procedure, the callback is invoked with the <code>CONV_DISCOVERY_RESULT_FINISHED</code> result code and an empty device handle.</p>
+<p>The result codes are defined in the <code>conv_discovery_result_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#gaac8da8a6d95bf9c77039c4d9360b31e3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#gaac8da8a6d95bf9c77039c4d9360b31e3">wearable</a> applications).</p>
+<p>The device ID, name, and type can be read from the device handle by passing the <code>CONV_DEVICE_ID</code>, <code>CONV_DEVICE_NAME</code>, and <code>CONV_DEVICE_TYPE</code> keys to the <code>conv_device_get_property_string()</code> function. To use the discovered device handle outside the callback, it must be cloned with the <code>conv_device_clone()</code> function.</p>
+<pre class="prettyprint">
+static void
+discovery_cb(conv_device_h device, int result, void *user_data)
+{
+ if (result == CONV_DISCOVERY_RESULT_SUCCESS) {
+ /* Discovered device */
+ char* device_id = NULL;
+ char* device_name = NULL;
+ char* device_type = NULL;
+
+ conv_device_get_property_string(device, CONV_DEVICE_ID, &device_id);
+ printf("device id = %s\n", device_id);
+ free(device_id);
+
+ conv_device_get_property_string(device, CONV_DEVICE_NAME, &device_name);
+ printf("device name = %s\n", device_name);
+ free(device_name);
+
+ conv_device_get_property_string(device, CONV_DEVICE_TYPE, &device_type);
+ printf("device TYPE = %s\n", device_type);
+ free(device_type);
+
+ /* Clone the device handle for use outside this callback */
+ conv_device_h clone_device;
+ conv_device_clone(device, &clone_device);
+ } else if (result == CONV_DISCOVERY_RESULT_FINISHED) {
+ /* Discovery has finished */
+ /* Do something */
+ } else if (result == CONV_DISCOVERY_RESULT_ERROR) {
+ /* Discovery has triggered an error */
+ /* Error handling */
+ }
+}
+
+static void
+start_discovery_example()
+{
+ /* Create a convergence manager */
+ int error = conv_create(&conv_h);
+ if (error != CONV_ERROR_NONE)
+ /* Error handling */
+
+ /* Start discovery */
+ error = conv_discovery_start(conv_h, 30, discovery_cb, NULL);
+ if (error != CONV_ERROR_NONE)
+ /* Error handling */
+}
+</pre>
+<p>To stop the ongoing discovery process, call the <code>conv_discovery_stop()</code> function.</p>
+</li>
+<li>Get the list of services.
+<p>The remaining part of the device handle is a list of services. Pull this information by using the <code>conv_device_foreach_service()</code> function:</p>
+<pre class="prettyprint">
+static void
+service_foreach_cb(conv_service_h service_handle, void *user_data)
+{
+ conv_service_e e = CONV_SERVICE_NONE;
+
+ conv_service_get_type(service_handle, &e);
+ printf("service_get_type = %d\n", (int)e);
+
+ conv_service_h clone_service_handle;
+ conv_service_clone(service_handle, &clone_service_handle);
+}
+
+static void
+foreach_service_example()
+{
+ conv_device_h device = data;
+ conv_device_foreach_service(device, service_foreach_cb, NULL);
+}
+</pre>
+<p>While iterating through the available services, the framework generates a new handle for each service and passes it to the <code>conv_service_foreach_cb()</code> type callback. To use the service handle outside the callback, clone it with the <code>conv_service_clone()</code> function.</p>
+</li>
+</ol>
+
+<h2 id="connect_service">Connecting to the App Communication Service</h2>
+
+<p>To connect to the app communication service provided by a remote device, call the <code>conv_service_connect()</code> function.</p>
+<p>The first parameter is the service handle extracted from the list in the device handle received during the discovery process. The second parameter is the <code>conv_service_connected_cb</code> type callback function, by which the <code>Connecting</code>, <code>Connected</code>, and <code>Disconnected</code> states of the remote service are delivered.</p>
+
+<pre class="prettyprint">
+conv_service_connection_state_e state = CONV_SERVICE_CONNECTION_STATE_NONE;
+conv_service_get_connection_state(service_handle, &state);
+if (state == CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED)
+ conv_service_connect(service_handle, callback, NULL);
+</pre>
+<p>You can check the connection state with the <code>conv_service_get_connection()</code> function, which returns one of values defined in the <code>conv_service_connection_state_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#ga5da79e1a7ca434991e5ff6d28c0b0e13">mobile</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#ga5da79e1a7ca434991e5ff6d28c0b0e13">wearable</a> applications). If the service is not connected yet, the connection state is <code>CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED</code> and the service must be connected using the <code>conv_service_connect()</code> function.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Repeated attempts to connect to an already connected service result in the invalid state error. Attempts to start, publish, read, or stop a disconnected service also result in the invalid state error.
+</div>
+
+<p>Technically, in case of the Wi-Fi network, when the framework runs the discovery procedure, all devices are already connected to the Access Point (AP), which means that the <code>conv_service_get_connection_state()</code> function always returns the <code>Connected</code> state and the <code>conv_service_connect()</code> function can be omitted. It is especially applied for the Tizen 3.0 convergence framework, which supports only Wi-Fi networks. In future versions with support for Bluetooth, Bluetooth Low Energy, or Wi-Fi Direct™, the connection procedure is mandatory. For the sake of future extensibility and compatibility, use the <code>conv_service_connect()</code> function even in Tizen 3.0.</p>
+
+
+<h2 id="init_app_communication">Initializing the App Communication Service</h2>
+<p>To initialize the app communication service:</p>
+<ol>
+<li id="listener_callback">Register the listener callback with the <code>conv_service_set_listener_cb()</code> function. This function must be called only once, regardless of the number of used service channels. In the runtime, all payloads from all channels are delivered there.
+
+<div class="note">
+ <strong>Note</strong>
+ The listener callback must be registered before the service starts, because the <code>conv_service_start()</code> function result can only be received in the listener callback.
+</div>
+<ul>
+<li>In the callback, the first parameter is the service handle, and it corresponds to the service, used in the <code>conv_set_listener_cb()</code> callback. The second parameter is the channel handle that indicates the particular channel through which the payload is delivered. The third parameter is the error parameter that indicates if the request is processed successfully on the remote device.
+<p>The main role of the listener callback is to parse the payload:</p>
+<pre class="prettyprint">
+/* Client side callback */
+void
+listener_example(conv_service_h handle, conv_channel_h channel, int error,
+ conv_payload_h result, void *user_data)
+{
+ char *result_type = NULL;
+ char *payload_type = NULL; /* User-defined payload key */
+
+ conv_payload_get_string(result, "result_type", &result_type);
+
+ if (!strcmp(result_type, "onConnect"))
+ /* Do something for onConnect */
+ else if (!strcmp(result_type, "onStart"))
+ /* Do something for onStart */
+ else if (!strcmp(result_type, "onPublish"))
+ /* Do something for onPublish */
+ else if (!strcmp(result_type, "onStop"))
+ /* Do something for onStop */
+ else if (!strcmp(result_type, "onDisconnect"))
+ /* Do something for onDisconnect */
+ else if (!strcmp(result_type, "onClientDisconnect"))
+ /* Do something for onClientDisconnect */
+ else if (!strcmp(result_type, "onRead"))
+ /* Do something for onRead */
+ else
+ /* Parsing user-defined portion of the payload */
+}
+</pre>
+<p>The structure of the listener is the same for both server and client sides.</p>
+</li>
+<li>If the application sends a payload using the <code>conv_service_publish()</code> function, the listener callback in the receiver side gets the following packet:
+<pre class="prettyprint">
+"result_type": "onMessage"
+"from": unique ID of a client which sends the message
+"user_defined_key": custom user-defined key in the payload
+</pre>
+<p>The following example demonstrates how to process a custom payload:</p>
+<pre class="prettyprint">
+void
+custom_listener_example(conv_service_h handle, conv_channel_h channel,
+ int error, conv_payload_h result, void *user_data)
+{
+ char *result_type = NULL;
+ char *payload_type = NULL; /* User-defined payload key */
+
+ conv_payload_get_string(result, "result_type", &result_type);
+
+ if (!strcmp(result_type, "onMessage")) {
+ /* Parsing user-defined portion of the payload */
+ conv_payload_get_string(result, "payload_type", &payload_type);
+ if (!strcmp(payload_type, "Good_News"))
+ /* Do something for the payload of the "Good News" type */
+ else if (!strcmp(payload_type, "Bad_News"))
+ /* Do something for the payload of the "Bad News" type */
+ }
+}
+</pre>
+<p>The example assumes that the message has a custom <code>payload_type</code> key and a string value that takes 1 of 2 variants: <code>"Good_News"</code> and <code>"Bad_News"</code>.</p>
+<p>In addition to strings, you can use a raw byte array payload. The <code>conv_payload_set_string()</code>, <code>conv_payload_get_string()</code>, <code>conv_payload_set_byte()</code>, and <code>conv_payload_get_byte()</code> functions are useful for working with payload types.</p>
+</li>
+</ul>
+</li>
+<li>
+<p>On the server side, an instance of the app communication service must be created and started by the application.</p>
+<p>At first, a service handle is created and assigned with the <code>CONV_SERVICE_APP_TO_APP_COMMUNICATION</code> type. Then, a channel is constructed with a pair of parameters: URI of the application, or the value specified in the application manifest, and a developer-defined channel ID. Finally, the listener is registered and the service is started.</p>
+<p>The following example demonstrates the server application creation and start:</p>
+<pre class="prettyprint">
+static void
+server_application_initialization_example()
+{
+ /* Creating an instance of the app communication service */
+ conv_service_create(&service_handle);
+ conv_service_set_type(service_handle, CONV_SERVICE_APP_TO_APP_COMMUNICATION);
+
+ /* Specifying service channel */
+ /* Note, the URI value corresponds to URI of your server-side app */
+ conv_channel_create(&channel_handle);
+ conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+ conv_channel_set_string(channel_handle, "channel_id", "test");
+
+ /* Starting the service */
+ /* Note that the listener must be set before starting the service */
+ conv_service_set_listener_cb(service_handle, server_message_listener, NULL);
+ conv_service_start(service_handle, channel_handle, NULL);
+}
+</pre>
+</li>
+<li>On the client side, the app communication service handle must not be created, but obtained during the discovery. This means that no separate initialization is required on the client side.
+<p>The client application can start the service and remotely launch the application on the server side using the obtained service handle.</p>
+
+<p>A client application registers a listener callback and starts the service:</p>
+<pre class="prettyprint">
+int
+app_communication_start_client_example()
+{
+ conv_service_connect(service_handle, connect_cb, NULL);
+
+ conv_channel_h channel_handle = NULL;
+ conv_channel_create(&channel_handle);
+ conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+ conv_channel_set_string(channel_handle, "channel_id", "test");
+
+ conv_service_set_listener_cb(service_handle, message_listener, NULL);
+ conv_service_start(service_handle, channel_handle, NULL);
+
+ conv_channel_destroy(channel_handle);
+}
+</pre>
+<p>The service must be connected to the remote device using the <code>conv_service_connect()</code> function. The <code>service_handle</code> in this example is the one that the client application discovered earlier. The connection callback is omitted in this example for simplicity. However, it is meaningful to carefully implement it and observe that the connection result is <code>CONV_ERROR_NONE</code>. The payload retrieved to the callback is typically empty.</p>
+<p>A channel is set using the <code>conv_channel_set_string()</code> function. The start command goes to the server side, where the app communication service launches the application by the URI specified in the channel. The command result is asynchronously retrieved in the listener callback.</p>
+</li>
+<li>
+<p>When you finish using the service channel, stop it using the <code>conv_service_stop()</code> function. When all clients have stopped using the service channel, the server side automatically terminates the application.</p>
+<p>The server listener is automatically deregistered by the framework in the <code>conv_service_stop()</code> function, so you do not need to do it explicitly. The use of the <code>conv_service_stop()</code> function is almost the same as the service start:</p>
+<pre class="prettyprint">
+int
+app_communication_stop_client_example()
+{
+ conv_channel_h channel_handle = NULL;
+ conv_channel_create(&channel_handle);
+ conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+ conv_channel_set_string(channel_handle, "channel_id", "test");
+
+ conv_service_stop(service_handle, channel_handle, NULL);
+
+ conv_channel_destroy(channel_handle);
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="send_message">Sending Messages to the Server Application</h2>
+
+<p>After starting a service channel, you can send a message or data to the remote server application. A payload to send to the other side must be packaged as shown in the following example. The app communication service accepts both string and byte types of payload, using the <code>conv_payload_set_string()</code> and <code>conv_payload_set_byte()</code> functions.</p>
+
+<p>You can design a set of application-specific key-value pairs for maintaining the communication protocol between remote applications. It requires implementing a publishing routine for sending messages and a <a href="#listener_callback">listener routine</a> for receiving and recognizing the messages on both client and server sides.</p>
+
+<pre class="prettyprint">
+int
+publish_example()
+{
+ conv_service_h service_handle = (conv_service_h)data;
+ conv_channel_h channel_handle;
+ conv_payload_h payload_handle;
+
+ conv_channel_create(&channel_handle);
+ conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+ conv_channel_set_string(channel_handle, "channel_id", "test");
+
+ conv_payload_create(&payload_handle);
+ conv_payload_set_string(payload_handle, "user_defined_key", "user_defined_value");
+
+ conv_service_publish(service_handle, channel_handle, payload_handle);
+ /* or conv_service_read(service_handle, channel_handle, NULL); */
+}
+</pre>
+<p>The channel used in this example is the same as described before. The <code>conv_service_publish()</code> function delivers the payload, composed of the <code>"user_defined_key"</code> and <code>"user_defined_value"</code> pairs, through the network to the remote server application where it is passed in the listener callback.</p>
+
+<p>In the app communication service, the <code>conv_service_read()</code> function is only a command to get the information about the clients connected to the same channel. The <code>conv_service_read()</code> is called with <code>NULL</code> payload and it does not require additional parameters. You can <a href="#result_type">receive various information</a> in the <code>conv_service_read()</code> function.</p>
+
+
+<h2 id="init_remote">Using the Remote App Control Service</h2>
+
+<p>The basic flow for the remote app control service is to build a payload with an application control handle, send it to a remote device and, optionally, receive a remote application control result.</p>
+<p>To start the remote app control service, publish a message, and stop the service:</p>
+<ol>
+<li>Register a listener callback.
+<p>In the remote app control service, the application control, delivered to a remote device, is directly processed just like a local application control. It means that there is no need for a receiver to implement a special receiving routine in the remote device, and no need to register a listener callback on the receiver side. Instead, the listener callback is useful in the sender side to check whether the function is delivered to the remote device and processed correctly.</p>
+
+<p>The following example shows a listener callback, which handled the result of the access control process related to the remote app control service. After the user of the remote device has decided to allow or deny access with the passcode, the user choice is delivered to the remote device with the <code>"onStart"</code> result type and predefined error types:</p>
+<ul><li>If the passcode is entered correctly, the <code>"onStart"</code> returns with the <code>CONV_ERROR_NONE</code> value.</li>
+<li>Otherwise, the <code>"onStart"</code> comes with the <code>CONV_ERROR_INVALID_OPERATION</code> value.</li></ul>
+<pre class="prettyprint">
+static void
+service_result_callback(conv_service_h service_handle, conv_channel_h channel_handle,
+ conv_error_e error, conv_payload_h result, void* user_data)
+{
+ char *reply_result = NULL;
+ conv_payload_get_string(result, "result_type", &reply_result);
+ if (!strcmp(reply_result, "onStart")) {
+ if (error == CONV_ERROR_NONE) {
+ /* Allowed */
+ conv_service_publish(service_handle, NULL, payload_handle);
+ conv_service_stop(service_handle, NULL, payload_handle);
+ conv_payload_destroy(payload_handle);
+ payload_handle = NULL;
+ } else if (error == CONV_ERROR_INVALID_OPERATION) {
+ /* Denied */
+ conv_service_stop(service_handle, NULL, payload_handle);
+ conv_payload_destroy(payload_handle);
+ payload_handle = NULL;
+ }
+ }
+ free(reply_result);
+}
+</pre>
+</li>
+<li>Start the remote app control service.
+<p>After registering the listener callback, start the service with the service handle, obtained from the near-by device discovery previously. Build an application control handle in a payload to launch an application in a remote device.</p>
+<p>The following example launches the <code>"org.example.d2d_test"</code> application:</p>
+<pre class="prettyprint">
+int
+app_control_service()
+{
+ conv_service_set_listener_cb(service_handle, message_listener, NULL);
+ conv_service_start(service_handle, NULL, NULL);
+
+ conv_payload_h payload_handle;
+ conv_payload_create(&payload_handle);
+
+ app_control_h app_control = NULL;
+ app_control_create(&app_control);
+ app_control_set_app_id(app_control, "org.example.d2d_test");
+ app_control_set_operation(app_control, APP_CONTROL_OPERATION_MAIN);
+
+ conv_payload_set_app_control(payload_handle, "app_control", app_control);
+ conv_payload_set_string(payload_handle, "reply", "1");
+
+ conv_service_publish(service_handle, NULL, payload_handle);
+}
+</pre>
+<p>The application control handle can be built <a href="../app_management/app_controls_n.htm">using the App Control functions</a>. In the payload, there is a special <code>"reply"</code> string field, which indicates if an application control reply is returned after the sent application control is processed remotely. In other words, if <code>"reply"</code> is <code>"1"</code>, the remote device processes the application control and sends the resulting application control to the original device. In this case, the listener callback in the original device waits for an application control reply. This can be useful in designing interactive applications, such as chatting applications, in which bi-directional interplay service is required. If <code>"reply"</code> is <code>"0"</code> or this field is omitted, no response is received in the listener.</p>
+</li>
+</ol>
+
+<h2 id="payload">Predefined Payload Fields</h2>
+
+<p>To send payloads, you can use various functions: use the <code>conv_service_start()</code> function to start a service, the <code>conv_service_read()</code> function to read information of the remote device, the <code>conv_service publish()</code> function to send data or messages, and the <code>conv_service_stop()</code> function to stop the service. The app communication service recognizes several predefined payload fields, including the <code>result_type</code>, which are used to specify the payload type or the quick response of some functions. The service implicitly adds these fields to the payload.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>conv_service_read()</code> function is not used in the remote app control service.
+</div>
+
+<p>When the <code>conv_service_start()</code>, <code>conv_service_publish()</code>, or <code>conv_service_stop()</code> function is called, a quick notice for success or failure with a specific <code>result_type</code> and extra information returns back to the function caller. For example, in case of the <code>conv_service_read()</code> function, the response includes the <code>result_type</code> of <code>onRead</code> and a list of connected clients. For the general payload sent from the other device with the <code>conv_service_publish()</code> and received in the client device listener, the <code>result_type</code> is <code>onMessage</code> and the message or data is stored in the payload argument. The detailed information for the predefined fields and payload formats is summarized in the following tables.</p>
+
+<p>The success or failure result (including the correctness of the passcode input in the access control popup in the remote app control service) is delivered by the <code>conv_error_e</code> error parameter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#ga37d3a4410cd70ca1253f20ce4005ac60">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#ga37d3a4410cd70ca1253f20ce4005ac60">wearable</a> applications) of the listener callback.</p>
+
+<p align="center" class="Table"><strong>Table: Predefined fields for the app communication service payloads</strong></p>
+<table id="result_type">
+ <tbody>
+ <tr>
+ <th>Function</th>
+ <th>Predefined payload field</th>
+ </tr>
+ <tr>
+ <td rowspan="3"><code>conv_service_start()</code></td>
+ <td>Sent to the device that calls the function when connected to the remote server:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onConnect"</code></li>
+ <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+ <li><code>"client_connect_time"</code>: Connection time</li>
+ <li><code>"client_id"</code>: Unique client ID</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td>Sent to the device that calls the function when the application launch succeeds or fails:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onStart"</code></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td>Sent to other clients connected to the remote server:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onClientConnect"</code></li>
+ <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+ <li><code>"client_connect_time"</code>: Connection time</li>
+ <li><code>"client_id"</code>: Unique client ID</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>conv_service_publish()</code></td>
+ <td><code>"result_type"</code>: <code>"onPublish"</code></td>
+ </tr>
+ <tr>
+ <td rowspan="3"><code>conv_service_stop()</code></td>
+ <td>Sent to the device which calls the function when the server application stops:
+ <ul>
+ <li><code>"result_type": "onStop"</code></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td>Sent to the device which calls the function when disconnected from the remote server:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onDisconnect"</code></li>
+ <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+ <li><code>"client_connect_time"</code>: Connection time</li>
+ <li><code>"client_id"</code>: Unique client ID</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td>Sent to other clients connected to the remote server:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onClientDisconnect"</code></li>
+ <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+ <li><code>"client_connect_time"</code>: Connection time</li>
+ <li><code>"client_id"</code>: Unique client ID</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>conv_service_read()</code></td>
+ <td>
+ <ul>
+ <li><code>"result_type"</code>: <code>"onRead"</code></li>
+ <li><code>"read_type"</code>: <code>"getClients"</code></li>
+ <li><code>"client_list"</code>: <code>json-array</code> type client lists
+ <p><code>[ {"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</p>
+ <p><code>"client_connect_time"</code>: Connection time</p>
+ <p><code>"client_id"</code>: Unique client ID</p>
+ <p><code>}, ... ]</code></p>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>conv_service_listener_cb()</code>
+ <p>(When a message is received)</p>
+ </td>
+ <td>Sent to other clients and server applications, registered listener callback:
+ <ul>
+ <li><code>"result_type"</code>: <code>"onMessage"</code></li>
+ <li><code>"from"</code>: Unique client ID which sends the message</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p align="center" class="Table"><strong>Table: Predefined fields for receiving the remote app control service payloads</strong></p>
+<table>
+ <tbody>
+ <tr>
+ <th>Function</th>
+ <th>Predefined fields</th>
+ </tr>
+ <tr>
+ <td><code>conv_service_start()</code></td>
+ <td><code>"result_type"</code>: <code>"onStart"</code></td>
+ </tr>
+ <tr>
+ <td><code>conv_service_publish()</code></td>
+ <td>
+ <ul>
+ <li><code>"result_type"</code>: <code>"onPublish"</code></li>
+ <li><code>"app_control_reply"</code>: Application control data, only valid if the receiver replied with an <code>app_control</code>, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
+ <li><code>"app_control_request"</code>: Requested application control data, only valid if the receiver replied with an <code>app_control</code> value, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
+ <li><code>"app_control_result"</code>: The <code>app_control_result_e</code> value for the request, only valid if the receiver replied with a value, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>conv_service_stop()</code></td>
+ <td><code>"result_type"</code>: <code>"onStop"</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<li>During the download, you can pause, resume, or stop the process programmatically, or as a response to user requests. In addition, you can monitor the progress of the download process.</li>
</ol>
- <p class="figure">Figure: User scenario</p>
+ <p align="center"><strong>Figure: User scenario</strong></p>
<p align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p>
<h2 id="state" name="state">Download States</h2>
- <p>The following figure illustrates the various download states (such as READY and DOWNLOADING), and the functions (such as <
span style="font-family: Courier New,Courier,monospace">download_start()</span>) that cause transitions between the states. The download states are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gae9d05ac4ab7a2ba2fe6b3c329d273810">download_state_e</a> enumerator.</p>
+ <p>The following figure illustrates the various download states (such as READY and DOWNLOADING), and the functions (such as <
code>download_start()</code>) that cause transitions between the states. The download states are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gae9d05ac4ab7a2ba2fe6b3c329d273810">download_state_e</a> enumerator.</p>
<p>Each function can only be called when the download process is in a specific state. To avoid undefined behavior in the application, make sure that you handle every possible scenario in the code.</p>
- <p class="figure">Figure: Download states</p>
+ <p align="center"><strong>Figure: Download states</strong></p>
<p align="center"><img alt="Download states" src="../../images/download_state.png" /></p>
<p>When you stop the download:</p>
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">download_cancel()</span> function. It changes the download state to <span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_CANCELED</span>. From this state, you can restart the download with the <span style="font-family: Courier New,Courier,monospace">download_start()</span> function.</li>
+<li>Use the <code>download_cancel()</code> function. It changes the download state to <code>DOWNLOAD_STATE_CANCELED</code>. From this state, you can restart the download with the <code>download_start()</code> function.</li>
-<li>After you stop a download, the download handle ID is stored for 48 hours (even if the device is powered off), allowing you to resume the download later on. If you have no need to resume the process later on, unload all data concerning the download handle from the memory with the <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> function.</li>
+<li>After you stop a download, the download handle ID is stored for 48 hours (even if the device is powered off), allowing you to resume the download later on. If you have no need to resume the process later on, unload all data concerning the download handle from the memory with the <code>download_destroy()</code> function.</li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a> API, include the <span style="font-family: Courier New,Courier,monospace"><download.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a> API, include the <code><download.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <download.h>
</pre>
<p>To download content:</p>
<ol>
<li>Create the download handle.
-<p>Before starting any downloading, assign a download ID with the <span style="font-family: Courier New,Courier,monospace">download_create()</span> function:</p>
+<p>Before starting any downloading, assign a download ID with the <code>download_create()</code> function:</p>
<pre class="prettyprint">
download_error_e error;
<li>Define and set download callbacks.
<p>Data specified by the URL is downloaded asynchronously, and each download-related event (start, pause, stop, finish, or progress update) is propagated to the application through a callback.</p>
-<p>Register the progress callback with the <span style="font-family: Courier New,Courier,monospace;">download_set_progress_cb()</span> function, and the state change callback with the <span style="font-family: Courier New,Courier,monospace;">download_set_state_changed_cb()</span> function:</p>
+<p>Register the progress callback with the <code>download_set_progress_cb()</code> function, and the state change callback with the <code>download_set_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
error = download_set_state_changed_cb(download_id, state_changed_cb, NULL);
<li>Set the download options:
<ul><li>Auto download
-<p>To set an automatic download, call the <span style="font-family: Courier New,Courier,monospace;">download_set_auto_download()</span> function passing the download handle and setting the second parameter to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
+<p>To set an automatic download, call the <code>download_set_auto_download()</code> function passing the download handle and setting the second parameter to <code>true</code>.</p>
<p>This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature to allow the user to receive the download result even after the client process has terminated.</p>
<pre class="prettyprint">
</li>
<li>Network type
-<p>To set the desired network type, use the <span style="font-family: Courier New,Courier,monospace;">download_set_network_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gadf73239ac2efa6d4214a03751c76c9b8">download_network_type_e</a> enumeration defines the network types available for downloading. If no type is set, the <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NETWORK_ALL</span> default value is used.</p>
+<p>To set the desired network type, use the <code>download_set_network_type()</code> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gadf73239ac2efa6d4214a03751c76c9b8">download_network_type_e</a> enumeration defines the network types available for downloading. If no type is set, the <code>DOWNLOAD_NETWORK_ALL</code> default value is used.</p>
<pre class="prettyprint">
download_network_type_e value = 0;
</li>
<li>Notifications
-<p>To set notifications with a service action, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gab2ec29afc07197987eb2b88614fac67f">download_notification_type_e</a> enumeration defines the available download notification types. If no type is set, the <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NOTIFICATION_TYPE_NONE</span> default value is used.</p>
-<p>To change the title or description of the notification item, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_title()</span> or <span style="font-family: Courier New,Courier,monospace;">download_set_notification_description()</span> function. To change the action when the notification item is clicked, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_service_handle()</span> function. If the service action is not set, the default operation is the following:</p>
+<p>To set notifications with a service action, use the <code>download_set_notification_type()</code> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gab2ec29afc07197987eb2b88614fac67f">download_notification_type_e</a> enumeration defines the available download notification types. If no type is set, the <code>DOWNLOAD_NOTIFICATION_TYPE_NONE</code> default value is used.</p>
+<p>To change the title or description of the notification item, use the <code>download_set_notification_title()</code> or <code>download_set_notification_description()</code> function. To change the action when the notification item is clicked, use the <code>download_set_notification_service_handle()</code> function. If the service action is not set, the default operation is the following:</p>
<ul>
<li>When clicking a completed notification message, the proper application for playing the downloaded content is launched. If there is no proper application, an error message is shown at the status tray.</li>
<li>When clicking a failed notification message, the client application requesting the download is launched.</li>
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>
</ul></li>
<li>Control the download process.
-<p>Downloading can be started, paused, or canceled using the <span style="font-family: Courier New,Courier,monospace;">download_start()</span>, <span style="font-family: Courier New,Courier,monospace;">download_pause()</span>, and <span style="font-family: Courier New,Courier,monospace;">download_cancel()</span> functions. The download ID handle is used as a parameter for all these functions.</p>
+<p>Downloading can be started, paused, or canceled using the <code>download_start()</code>, <code>download_pause()</code>, and <code>download_cancel()</code> functions. The download ID handle is used as a parameter for all these functions.</p>
<pre class="prettyprint">
error = download_start(download_id);
error = download_cancel(download_id);
</pre>
-<p>To pause a download, it must be in the <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_DOWNLOADING</span> state. After pausing, the download state changes to <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_PAUSED</span>. After the download is stopped, the download state changes to <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_CANCELED</span>.</p></li>
+<p>To pause a download, it must be in the <code>DOWNLOAD_STATE_DOWNLOADING</code> state. After pausing, the download state changes to <code>DOWNLOAD_STATE_PAUSED</code>. After the download is stopped, the download state changes to <code>DOWNLOAD_STATE_CANCELED</code>.</p></li>
<li>Monitor the download progress.
<p>Use the progress callback to monitor the download progress. The following example prints the number of bytes received and the total size of the file being downloaded. Since you do not know the file size at the beginning, use 0.</p>
if (state == DOWNLOAD_STATE_DOWNLOADING)
error = download_get_content_size(download_id, &content_size);
</pre></li>
-<li>The received parameter of the <span style="font-family: Courier New,Courier,monospace;">progress_cb()</span> callback function contains the size of the data received in bytes. In this example, print out the value and the total download size.
+<li>The received parameter of the <code>progress_cb()</code> callback function contains the size of the data received in bytes. In this example, print out the value and the total download size.
<pre class="prettyprint">
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>
<li>Get error information.
-<p>To get error information, use the <span style="font-family: Courier New,Courier,monospace;">download_get_error()</span> function:</p>
+<p>To get error information, use the <code>download_get_error()</code> function:</p>
<pre class="prettyprint">
download_error_e error_val = 0;
error = download_get_error(download_id, &error_val);
<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#ga2d9ccc088c02cf1ab70879f1beda1cd1">download_error_e</a> enumeration defines the available error types.</p></li>
<li>Clean up.
-<p>When the registered download is no longer needed (the downloading is finished or has been canceled), delete it using the <span style="font-family: Courier New,Courier,monospace;">download_destroy()</span> function. In addition, unset all callback functions.</p>
+<p>When the registered download is no longer needed (the downloading is finished or has been canceled), delete it using the <code>download_destroy()</code> function. In addition, unset all callback functions.</p>
<pre class="prettyprint">
download_unset_progress_cb(download_id);
download_unset_state_changed_cb(download_id);
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</li>
<li>HTTP request
<p>A request is message sent from a client to a server (for example, a request to fetch a resource from the Web server).</p>
-<p>To send a request, set the remote Web server resource path with the <span style="font-family: Courier New,Courier,monospace">http_transaction_request_set_uri()</span> function, and submit the request with the <span style="font-family: Courier New,Courier,monospace">http_transaction_submit()</span> function.</p>
+<p>To send a request, set the remote Web server resource path with the <code>http_transaction_request_set_uri()</code> function, and submit the request with the <code>http_transaction_submit()</code> function.</p>
</li>
<li>HTTP response
<p>A response is a message sent from a server to a client.</p>
<p>To enable your application to use the HTTP functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the HTTP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><http.h></span> header file in your application:</p>
+<p>To use the functions and data types of the HTTP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">wearable</a> applications), include the <code><http.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <http.h>
</pre>
</li>
<li>
-<p>Initialize the HTTP functionality using the <span style="font-family: Courier New,Courier,monospace;">http_init()</span> function:</p>
+<p>Initialize the HTTP functionality using the <code>http_init()</code> function:</p>
<pre class="prettyprint">
int ret = HTTP_ERROR_NONE;
<p>The application can manage multiple sessions at the same time. When creating the session, you can set the session mode:</p>
<ul>
-<li>The normal mode (<span style="font-family: Courier New,Courier,monospace">HTTP_SESSION_MODE_NORMAL</span>) means that the session has only 1 connection. All transactions in the session share that connection, and the transactions are processed one at a time.</li>
-<li>The pipelining mode (<span style="font-family: Courier New,Courier,monospace">HTTP_SESSION_MODE_PIPELINING</span>) means that multiple transactions can be processed concurrently. This mode can reduce the network latency.</li>
+<li>The normal mode (<code>HTTP_SESSION_MODE_NORMAL</code>) means that the session has only 1 connection. All transactions in the session share that connection, and the transactions are processed one at a time.</li>
+<li>The pipelining mode (<code>HTTP_SESSION_MODE_PIPELINING</code>) means that multiple transactions can be processed concurrently. This mode can reduce the network latency.</li>
</ul>
<p></p>
<p>To manage HTTP sessions:</p>
-<ol><li>Create an HTTP session handle with the <span style="font-family: Courier New,Courier,monospace">http_session_create()</span> function:
+<ol><li>Create an HTTP session handle with the <code>http_session_create()</code> function:
<pre class="prettyprint">
int ret = HTTP_ERROR_NONE;
http_session_h session = NULL;
printf("http_session_create failed: %d", ret);
</pre>
</li>
-<li>Set the auto redirection for the session with the <span style="font-family: Courier New,Courier,monospace">http_session_set_auto_redirection()</span> function:
+<li>Set the auto redirection for the session with the <code>http_session_set_auto_redirection()</code> function:
<pre class="prettyprint">
int ret = HTTP_ERROR_NONE;
bool auto_redirect = true;
<p>To manage HTTP transactions:</p>
<ol>
-<li>Create an HTTP transaction handle with the <span style="font-family: Courier New,Courier,monospace">http_session_open_transaction()</span> function and the session handle.
+<li>Create an HTTP transaction handle with the <code>http_session_open_transaction()</code> function and the session handle.
-<p>The function requires the HTTP method defined by the <
span style="font-family: Courier New,Courier,monospace">http_method_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html#ga43d17339ae0c54fb1b72ec6bb73285ec">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__HTTP__MODULE.html#ga43d17339ae0c54fb1b72ec6bb73285ec">wearable</a> applications) as its first parameter. The main methods are:</p>
+<p>The function requires the HTTP method defined by the <
code>http_method_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html#ga43d17339ae0c54fb1b72ec6bb73285ec">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__HTTP__MODULE.html#ga43d17339ae0c54fb1b72ec6bb73285ec">wearable</a> applications) as its first parameter. The main methods are:</p>
<ul>
<li>GET: The application can retrieve a resource from a remote Web server.</li>
<li>POST: The application can send data to a Web server.</li>
</li>
<li>Register transaction callbacks to receive the response and monitor the transaction state:
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">http_transaction_set_received_header_cb()</span> and <span style="font-family: Courier New,Courier,monospace">http_transaction_set_received_body_cb()</span> functions to register callbacks for fetching the Web server resource header information and the response body.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">http_transaction_set_uploaded_cb()</span> function to register a callback for the upload status of the remote Web server resource.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">http_transaction_set_completed_cb()</span> function to register a callback for the completion status of the current transaction.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">http_transaction_set_aborted_cb()</span> function to register a callback for the failure status of the current transaction.</li>
+<li>Use the <code>http_transaction_set_received_header_cb()</code> and <code>http_transaction_set_received_body_cb()</code> functions to register callbacks for fetching the Web server resource header information and the response body.</li>
+<li>Use the <code>http_transaction_set_uploaded_cb()</code> function to register a callback for the upload status of the remote Web server resource.</li>
+<li>Use the <code>http_transaction_set_completed_cb()</code> function to register a callback for the completion status of the current transaction.</li>
+<li>Use the <code>http_transaction_set_aborted_cb()</code> function to register a callback for the failure status of the current transaction.</li>
</ul>
<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);
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">Iotcon API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">Iotcon API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">IoTCon API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">IoTCon API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p><a href="https://www.iotivity.org/" target="_blank">IoTivity</a> offers seamless device-to-device connectivity to address the emerging needs of the Internet of Things (IoT) through the open source reference implementation of the OCF (Open Connectivity Foundation) standard specifications. IoT connectivity (Iotcon) provides the means of using IoTivity in Tizen.</p>
-<p class="figure">Figure: IoTivity in Tizen</p>
+<p align="center"><strong>Figure: IoTivity in Tizen</strong></p>
<p align="center"><img alt="IoTivity in Tizen" src="../../images/iotivity.png" /></p>
<p>IoT connectivity handles the resources between a server and client. The server is responsible for creating and providing resources, and the client can access and control those resources through requests.</p>
-<p>The main features of the Iotcon API include:</p>
+<p>The main features of the IoTCon API include:</p>
<ul>
<li>Resource management
<p>Entities in the physical world, such as a light, a fan, or modules of a home appliance, are represented as resources with the following properties:</p>
<li>Resource properties: Whether the resource is observable and discoverable</li>
</ul>
-<p>You can manage the IoT resources with the server, which can <a href="#register">create resources</a> and later destroy them using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_create()</span> and <span style="font-family: Courier New,Courier,monospace">iotcon_resource_destroy()</span> functions of the Resource API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__SERVER__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__SERVER__RESOURCE__MODULE.html">wearable</a> applications). After creating a resource, the server can bind the resource types and resource interfaces using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_bind_type()</span> and <span style="font-family: Courier New,Courier,monospace">iotcon_resource_bind_interface()</span> functions. After a resource is destroyed, the client cannot access the resource anymore.</p>
+<p>You can manage the IoT resources with the server, which can <a href="#register">create resources</a> and later destroy them using the <code>iotcon_resource_create()</code> and <code>iotcon_resource_destroy()</code> functions of the Resource API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__SERVER__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__SERVER__RESOURCE__MODULE.html">wearable</a> applications). After creating a resource, the server can bind the resource types and resource interfaces using the <code>iotcon_resource_bind_type()</code> and <code>iotcon_resource_bind_interface()</code> functions. After a resource is destroyed, the client cannot access the resource anymore.</p>
<p>If the resource is discoverable, the client can find the resource. Otherwise, only the clients that already know the resource information can access it. If the resource is observable, the client can observe it.</p>
</li>
<li>Remote resource management
-<p>If the resource created by the server is discoverable, the client that knows the resource type can <a href="#find">find the resource</a> using the <span style="font-family: Courier New,Courier,monospace">iotcon_find_resource()</span> function of the Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications). If the <span style="font-family: Courier New,Courier,monospace">host_address</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>, the find request is sent as multicast. The client can filter the desired resources with a query.
+<p>If the resource created by the server is discoverable, the client that knows the resource type can <a href="#find">find the resource</a> using the <code>iotcon_find_resource()</code> function of the Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications). If the <code>host_address</code> is <code>NULL</code>, the find request is sent as multicast. The client can filter the desired resources with a query.</p>
-<p>If the client wants to access a resource whose information it already knows, it can make a proxy using the <
span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_create()</span> function of the Remote Resource API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) and access the resource through that proxy.</p>
+<p>If the client wants to access a resource whose information it already knows, it can make a proxy using the <
code>iotcon_remote_resource_create()</code> function of the Remote Resource API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) and access the resource through that proxy.</p>
-<p>You can use the client to get various information about the resource through the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_h</span> handle and the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_get_XXX()</span> functions. You can retrieve, for example, the resource URI path, host address, type, and interfaces. You can also retrieve the device ID, which defines the device to which the resource belongs. Different resources in the same device have the same device ID.</p>
+<p>You can use the client to get various information about the resource through the <code>iotcon_remote_resource_h</code> handle and the <code>iotcon_remote_resource_get_XXX()</code> functions. You can retrieve, for example, the resource URI path, host address, type, and interfaces. You can also retrieve the device ID, which defines the device to which the resource belongs. Different resources in the same device have the same device ID.</p>
</li>
<li>CRUDN request and response
<p>The client can send various requests to the server resources using the Remote Resource API:</p>
<ul>
-<li>GET request: Use the <
span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_get()</span> function to read the resource information and <a href="#send_get">get a representation of the resource</a> from the server.</li>
-<li>PUT request: Use the <
span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_put()</span> function to ask the server to <a href="#send_put">update the resource representation</a>.</li>
-<li>POST request: Use the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_post()</span> function to ask the server to create a new resource.</li>
-<li>DELETE request: Use the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_delete()</span> function to ask the server to delete a resource.</li>
+<li>GET request: Use the <
code>iotcon_remote_resource_get()</code> function to read the resource information and <a href="#send_get">get a representation of the resource</a> from the server.</li>
+<li>PUT request: Use the <
code>iotcon_remote_resource_put()</code> function to ask the server to <a href="#send_put">update the resource representation</a>.</li>
+<li>POST request: Use the <code>iotcon_remote_resource_post()</code> function to ask the server to create a new resource.</li>
+<li>DELETE request: Use the <code>iotcon_remote_resource_delete()</code> function to ask the server to delete a resource.</li>
</ul>
-<p>The server receives the request, processes it using the <
span style="font-family: Courier New,Courier,monospace">iotcon_request_handler_cb()</span> callback, and sends a response to the client using the <span style="font-family: Courier New,Courier,monospace">iotcon_response_send()</span> function of the Response API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">wearable</a> applications).</p>
-<p>The client can check the result and the response in the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_response_cb()</span> callback. If the result of the request differs from <span style="font-family: Courier New,Courier,monospace">IOTCON_ERROR_NONE</span>, the response information is not reliable.</p>
+<p>The server receives the request, processes it using the <
code>iotcon_request_handler_cb()</code> callback, and sends a response to the client using the <code>iotcon_response_send()</code> function of the Response API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">wearable</a> applications).</p>
+<p>The client can check the result and the response in the <code>iotcon_remote_resource_response_cb()</code> callback. If the result of the request differs from <code>IOTCON_ERROR_NONE</code>, the response information is not reliable.</p>
-<p class="figure">Figure: Requests and responses</p>
+<p align="center"><strong>Figure: Requests and responses</strong></p>
<p align="center"><img alt="Requests and responses" src="../../images/iotivity_request.png" /></p>
-<p>If the server resource is observable, the client can register a callback with the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_observe_register()</span> function of the Remote Resource API to <a href="#observe">observe the resource</a>. When the resource state changes, the server notifies the client through the registered callback. Note that, depending on the network environment, the order in which the notifications are sent can be mixed. If the <span style="font-family: Courier New,Courier,monospace">observe_policy</span> (the second parameter of the registration function) is <span style="font-family: Courier New,Courier,monospace">IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER</span>, the client only receives up-to-date notifications. Otherwise, it receives all notifications, including stale notifications.</p>
+<p>If the server resource is observable, the client can register a callback with the <code>iotcon_remote_resource_observe_register()</code> function of the Remote Resource API to <a href="#observe">observe the resource</a>. When the resource state changes, the server notifies the client through the registered callback. Note that, depending on the network environment, the order in which the notifications are sent can be mixed. If the <code>observe_policy</code> (the second parameter of the registration function) is <code>IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER</code>, the client only receives up-to-date notifications. Otherwise, it receives all notifications, including stale notifications.</p>
<p>If the resource is not observable, the client cannot receive any notifications.</p>
-<p class="figure">Figure: Observe and notify</p>
+<p align="center"><strong>Figure: Observe and notify</strong></p>
<p align="center"><img alt="Observe and notify" src="../../images/iotivity_observe.png" /></p>
</li>
<p>To manage the representation, use the Representation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__REPRESENTATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__REPRESENTATION__MODULE.html">wearable</a> applications):</p>
<ul>
-<li>Create a resource representation and attributes with the <span style="font-family: Courier New,Courier,monospace">iotcon_representation_create()</span> and <span style="font-family: Courier New,Courier,monospace">iotcon_attributes_create()</span> functions.</li>
-<li>Set the properties on the created attributes with the <span style="font-family: Courier New,Courier,monospace">iotcon_attributes_add_XXX()</span> functions.</li>
-<li>Set the attributes on the created representation with the <span style="font-family: Courier New,Courier,monospace">iotcon_representation_set_attributes()</span> function.</li>
+<li>Create a resource representation and attributes with the <code>iotcon_representation_create()</code> and <code>iotcon_attributes_create()</code> functions.</li>
+<li>Set the properties on the created attributes with the <code>iotcon_attributes_add_XXX()</code> functions.</li>
+<li>Set the attributes on the created representation with the <code>iotcon_representation_set_attributes()</code> function.</li>
</ul>
</li>
</ul>
<p>To enable your application to use the IoT functionality:</p>
<ol>
<li>
-<p>To use the Iotcon API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the IoTCon API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/network.get</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the Iotcon API, include the <span style="font-family: Courier New,Courier,monospace"><iotcon.h></span> header file in your application:
+<li>To use the functions and data types of the IoTCon API, include the <code><iotcon.h></code> header file in your application:
<pre class="prettyprint">
#include <iotcon.h>
</pre>
-<p>To ensure that an Iotcon function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace">IOTCON_ERROR_NONE</span>.</p>
+<p>To ensure that an IoTCon function has been executed properly, make sure that the return is equal to <code>IOTCON_ERROR_NONE</code>.</p>
</li>
-<li>To initialize the Iotcon, use the <span style="font-family: Courier New,Courier,monospace">iotcon_initialize()</span> function:
+<li>To initialize the Iotcon, use the <code>iotcon_initialize()</code> function:
<pre class="prettyprint">
int ret;
-char *path; /* Must be set to the file path which can be read/written in the application */
+char *path; /* Must be a file path which can be read/written in the application */
ret = iotcon_initialize(path);
</pre>
</li>
-<li>When the resources are no longer needed, de-initialize the Iotcon using the <span style="font-family: Courier New,Courier,monospace">iotcon_deinitialize()</span> function:
+<li>When the resources are no longer needed, de-initialize the Iotcon using the <code>iotcon_deinitialize()</code> function:
<pre class="prettyprint">
iotcon_deinitialize();
</pre>
<p>To create and register resources:</p>
<ol>
-<li>Create the resource types using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_types_create()</span> function. The resource type string can be added using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_types_add()</span> function.
+<li>Create the resource types using the <code>iotcon_resource_types_create()</code> function. The resource type string can be added using the <code>iotcon_resource_types_add()</code> function.
<pre class="prettyprint">
int ret;
const char *res_type = "org.tizen.light";
/* Error handling */
</pre>
</li>
-<li>Register the resource by calling the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_create()</span> function.
-<p>In the function, set the URI path, resource types, interfaces (<
span style="font-family: Courier New,Courier,monospace">iotcon_resource_interfaces_h</span> resource interface handle in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga10fbc5191f6d83eaedbcbdeb3e1211a8">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga10fbc5191f6d83eaedbcbdeb3e1211a8">wearable</a> applications), policies (one or more <span style="font-family: Courier New,Courier,monospace">iotcon_resource_policy_e</span> enumeration values in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga66063156ce698fa862cb9704be86494f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga66063156ce698fa862cb9704be86494f">wearable</a> applications), and the request handler callback function called when a request arrives from a client.</p>
-<p>The URI path must be unique. The <span style="font-family: Courier New,Courier,monospace">iotcon_resource_create()</span> function fails, if you use an existing URI to register another resource.</p>
+<li>Register the resource by calling the <code>iotcon_resource_create()</code> function.
+<p>In the function, set the URI path, resource types, interfaces (<
code>iotcon_resource_interfaces_h</code> resource interface handle in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga10fbc5191f6d83eaedbcbdeb3e1211a8">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga10fbc5191f6d83eaedbcbdeb3e1211a8">wearable</a> applications), policies (one or more <code>iotcon_resource_policy_e</code> enumeration values in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga66063156ce698fa862cb9704be86494f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#ga66063156ce698fa862cb9704be86494f">wearable</a> applications), and the request handler callback function called when a request arrives from a client.</p>
+<p>The URI path must be unique. The <code>iotcon_resource_create()</code> function fails, if you use an existing URI to register another resource.</p>
<pre class="prettyprint">
int res_interfaces = IOTCON_INTERFACE_DEFAULT;
/* Error handling */
</pre>
</li>
-<li>When no longer needed, destroy the resource types handle using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_types_destroy()</span> function:
+<li>When no longer needed, destroy the resource types handle using the <code>iotcon_resource_types_destroy()</code> function:
<pre class="prettyprint">
iotcon_resource_types_destroy(resource_types);
</pre>
<p>To find resources:</p>
<ol>
-<li>To find a resource, call the <span style="font-family: Courier New,Courier,monospace">iotcon_find_resource()</span> function.
-<p>In the function, set the host address, connectivity type (an <
span style="font-family: Courier New,Courier,monospace">iotcon_connectivity_type_e</span> enumeration value in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">wearable</a> applications), query, secure flag, and the found callback function called whenever the resource is found during the timeout.</p>
-<p>The host address can be <span style="font-family: Courier New,Courier,monospace">IOTCON_MULTICAST_ADDRESS</span> for multicast.</p>
+<li>To find a resource, call the <code>iotcon_find_resource()</code> function.
+<p>In the function, set the host address, connectivity type (an <
code>iotcon_connectivity_type_e</code> enumeration value in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">wearable</a> applications), query, secure flag, and the found callback function called whenever the resource is found during the timeout.</p>
+<p>The host address can be <code>IOTCON_MULTICAST_ADDRESS</code> for multicast.</p>
<pre class="prettyprint">
int ret;
iotcon_query_h query;
const char *res_type = "org.tizen.light";
-ret = iotcon_query_create(&query);
+ret = iotcon_query_create(&query);
if (IOTCON_ERROR_NONE != ret)
/* Error handling */
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 */
</pre>
</li>
-<li>To get the remote resource handle information, use the found callback registered in the <span style="font-family: Courier New,Courier,monospace">iotcon_find_resource()</span> function:
+<li>To get the remote resource handle information, use the found callback registered in the <code>iotcon_find_resource()</code> function:
<pre class="prettyprint">
static bool
_found_cb(iotcon_remote_resource_h resource, iotcon_error_e err, void *user_data)
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The callback parameters are valid only within the callback function. Use the clone handle, if you want to use a parameter after the callback function.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The callback parameters are valid only within the callback function. Use the clone handle, if you want to use a parameter after the callback function.
+</div>
</li>
-<li>To set the timeout interval (in seconds) for the asynchronous functions of the Client (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications) and Remote Resource (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) APIs, use the <span style="font-family: Courier New,Courier,monospace">iotcon_set_timeout()</span> function:
+<li>To set the timeout interval (in seconds) for the asynchronous functions of the Client (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications) and Remote Resource (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) APIs, use the <code>iotcon_set_timeout()</code> function:
<pre class="prettyprint">
int ret;
if (IOTCON_ERROR_NONE != ret)
/* Error handling */
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- The <span style="font-family: Courier New,Courier,monospace">iotcon_set_timeout()</span> function has an effect on the following asynchronous functions:
- <ul>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_find_resource()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_find_device_info()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_find_platform_info()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_put()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_post()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_delete()</span></li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>iotcon_set_timeout()</code> function has an effect on the following asynchronous functions:
+ <ul>
+ <li><code>iotcon_find_resource()</code></li>
+ <li><code>iotcon_find_device_info()</code></li>
+ <li><code>iotcon_find_platform_info()</code></li>
+ <li><code>iotcon_remote_resource_get()</code></li>
+ <li><code>iotcon_remote_resource_put()</code></li>
+ <li><code>iotcon_remote_resource_post()</code></li>
+ <li><code>iotcon_remote_resource_delete()</code></li>
+ </ul>
+</div>
</li>
</ol>
<p>To send GET requests to a server:</p>
<ol>
-<li>On the client side, clone the remote resource handle using the found callback registered in the <span style="font-family: Courier New,Courier,monospace">iotcon_find_resource()</span> function:
+<li>On the client side, clone the remote resource handle using the found callback registered in the <code>iotcon_find_resource()</code> function:
<pre class="prettyprint">
static iotcon_remote_resource_h _light_resource = NULL;
}
</pre>
</li>
-<li>Send the GET request to the server using the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_get()</span> function.
+<li>Send the GET request to the server using the <code>iotcon_remote_resource_get()</code> function.
<p>In the function, set the remote resource, query, and the response callback function called when receiving a response from the resource.</p>
<pre class="prettyprint">
int ret;
/* Error handling */
</pre>
</li>
-<li>On the server side, the <span style="font-family: Courier New,Courier,monospace">_request_handler()</span> callback function is called when a request arrives from the client. The resource and request handles are passed to the callback.
-<p>Use the callback to get the request information from the request handle, create a representation handle (with the <span style="font-family: Courier New,Courier,monospace">_get_repr()</span> function), and sent a response back to the client (with the <span style="font-family: Courier New,Courier,monospace">_send_response()</span> function):</p>
+<li>On the server side, the <code>_request_handler()</code> callback function is called when a request arrives from the client. The resource and request handles are passed to the callback.
+<p>Use the callback to get the request information from the request handle, create a representation handle (with the <code>_get_repr()</code> function), and sent a response back to the client (with the <code>_send_response()</code> function):</p>
<pre class="prettyprint">
static void
_request_handler(iotcon_resource_h resource, iotcon_request_h request, void *data)
{
int ret;
char *uri_path;
+ int interfaces;
+ iotcon_resource_types_h res_types;
iotcon_attributes_h attr;
iotcon_representation_h repr;
}
</pre>
</li>
-<li>To send a response to the client, use the <span style="font-family: Courier New,Courier,monospace">iotcon_response_send()</span> function.
+<li>To send a response to the client, use the <code>iotcon_response_send()</code> function.
<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;
<p>To send PUT requests to a server:</p>
<ol>
-<li>To send a PUT request to the server, use the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_put()</span> function.
-<p>First create the representation and attributes, and set the desired attribute values, and then send the representation using <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_put()</span> function.</p>
+<li>To send a PUT request to the server, use the <code>iotcon_remote_resource_put()</code> function.
+<p>First create the representation and attributes, and set the desired attribute values, and then send the representation using <code>iotcon_remote_resource_put()</code> function.</p>
<pre class="prettyprint">
int ret;
iotcon_representation_h repr;
<p>To monitor the changes in a resource:</p>
<ol>
-<li>If the resource is observable, the client can register a callback to observe the resource using the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_observe_register()</span> function:
+<li>If the resource is observable, the client can register a callback to observe the resource using the <code>iotcon_remote_resource_observe_register()</code> function:
<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 */
</pre>
</li>
-<li>On the server side, the request handler callback is called when the observe request arrives from the client. To manage the observers, use the <span style="font-family: Courier New,Courier,monospace">iotcon_observers_h</span> handle.
+<li>On the server side, the request handler callback is called when the observe request arrives from the client. To manage the observers, use the <code>iotcon_observers_h</code> handle.
<pre class="prettyprint">
static iotcon_observers_h _observers;
}
</pre>
</li>
-<li>When a resource changes, notify the observing client using the <span style="font-family: Courier New,Courier,monospace">iotcon_resource_notify()</span> function. The second parameter can be <span style="font-family: Courier New,Courier,monospace">NULL</span> to notify all observers.
+<li>When a resource changes, notify the observing client using the <code>iotcon_resource_notify()</code> function. The second parameter can be <code>NULL</code> to notify all observers.
<pre class="prettyprint">
int ret;
iotcon_representation_h repr = NULL;
iotcon_representation_destroy(repr);
</pre>
</li>
-<li>On the client side, the <span style="font-family: Courier New,Courier,monospace">_observe_cb()</span> callback is called when the notify function is called from the server side. The remote resource handle, sequence number, and response handle are passed to the callback.
+<li>On the client side, the <code>_observe_cb()</code> callback is called when the notify function is called from the server side. The remote resource handle, sequence number, and response handle are passed to the callback.
<pre class="prettyprint">
static void
_observe_cb(iotcon_remote_resource_h resource, iotcon_error_e err,
}
</pre>
</li>
-<li>When the client no longer needs to monitor the resource, deregister the observation callback with the <span style="font-family: Courier New,Courier,monospace">iotcon_remote_resource_observe_deregister()</span> function:
+<li>When the client no longer needs to monitor the resource, deregister the observation callback with the <code>iotcon_remote_resource_observe_deregister()</code> function:
<pre class="prettyprint">
int ret;
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 3.0 and Higher for Mobile</li>
- <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The Media Transfer Protocol (MTP) is an extension of the Picture Transfer Protocol (PTP), a protocol for file transfers between 2 devices.</p>
+<p>This feature is supported in mobile applications only.</p>
+
<p>The extension consists of the MTP initiator and MTP responder. The host, which connects to the MTP device, is called the MTP initiator, and the MTP device is called the MTP responder. One MTP initiator can manage multiple MTP responders. The MTP initiator only sends requests to the MTP responder, and the MTP responder only responds to the MTP initiator.</p>
<p>The MTP consists of 3 components:</p>
<p>The main features of the MTP API include:</p>
<ul>
<li>Managing MTP
-<p>With the
MTP Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__MANAGER__MODULE.html">wearable</a> applications) you can initialize and deinitialize the MTP, <a href="#events">set callbacks for MTP events</a>, and get various information, such as the <a href="#device_list">device list</a>, <a href="#storages">storage list</a>, <a href="#object_handle">object handle</a>, <a href="#object_and_thumbnail">object, and thumbnail</a>.</p></li>
+<p>With the
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MANAGER__MODULE.html">MTP Manager</a> API you can initialize and deinitialize the MTP, <a href="#events">set callbacks for MTP events</a>, and get various information, such as the <a href="#device_list">device list</a>, <a href="#storages">storage list</a>, <a href="#object_handle">object handle</a>, <a href="#object_and_thumbnail">object, and thumbnail</a>.</p></li>
<li>Retrieving device information
-<p>The
MTP Device Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__DEVICEINFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__DEVICEINFO__MODULE.html">wearable</a> applications) allows you to <a href="#device_info">obtain various device details</a>, such as the device manufacturer name, model name, serial number, and version.</p></li>
+<p>The
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__DEVICEINFO__MODULE.html">MTP Device Information</a> API allows you to <a href="#device_info">obtain various device details</a>, such as the device manufacturer name, model name, serial number, and version.</p></li>
<li>Retrieving storage information
-<p>The
MTP Storage Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__STORAGEINFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__STORAGEINFO__MODULE.html">wearable</a> applications) allows you to <a href="#storage_info">obtain various storage details</a>, such as the storage free space, description, and type.</p></li>
+<p>The
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__STORAGEINFO__MODULE.html">MTP Storage Information</a> API allows you to <a href="#storage_info">obtain various storage details</a>, such as the storage free space, description, and type.</p></li>
<li>Retrieving object information
-<p>The
MTP Object Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__OBJECTINFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__OBJECTINFO__MODULE.html">wearable</a> applications) allows you to <a href="#object_info">obtain various object details</a>, such as the object format, name, and size.</p></li>
+<p>The
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__OBJECTINFO__MODULE.html">MTP Object Information</a> API allows you to <a href="#object_info">obtain various object details</a>, such as the object format, name, and size.</p></li>
</ul>
-<p>The MTP API can be used in all profiles, but it is most popular in the TV profile.</p>
+<p>The MTP API can be used in other profiles, but it is most popular in the TV profile.</p>
<p>The internal implementation of the MTP references the <a href="http://www.usb.org/developers/docs/devclass_docs/MTPv1_1.zip" target="_blank">MTP specification</a> and uses <a href="http://libmtp.sourceforge.net/" target="_blank">LIBMTP</a>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Currently, the MTP API has the following limitations in Tizen 3.0:
+
+ <div class="note">
+ <strong>Note</strong>
+ Currently, the MTP API has the following limitations in Tizen 3.0:
<ul><li>Only the PTP subset of the MTP is supported.</li>
-<li>The transportation layer is possible only through USB.</li></ul></td>
- </tr>
- </tbody>
- </table>
+<li>The transportation layer is possible only through USB.</li></ul>
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the MTP functionality:</p>
<ol>
<li>
-<p>To use the MTP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP</a> API, the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/mtp</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the MTP API, include the <span style="font-family: Courier New,Courier,monospace"><mtp.h></span> header file in your application:</p>
+<p>To use the functions and data types of the MTP API, include the <code><mtp.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <mtp.h>
</pre>
</li>
<li><p>Make sure that MTP is supported in your target device.</p></li>
<li>
-<p>To initialize the MTP connection, call the <span style="font-family: Courier New,Courier,monospace">mtp_initialize()</span> function. If the function does not return an error, the MTP is ready for use.</p>
+<p>To initialize the MTP connection, call the <code>mtp_initialize()</code> function. If the function does not return an error, the MTP is ready for use.</p>
<pre class="prettyprint">
int
manager_test_initialize(void)
int ret = 0;
ret = mtp_deinitialize();
- dlog_print("ret[%d] : deinitialize", ret);
+ dlog_print("ret[%d]: deinitialize", ret);
return ret;
}
<h2 id="device_list" name="device_list">Getting the MTP Device List</h2>
-<p>To get the MTP devices connected to the MTP initiator, retrieve the MTP device list with the <span style="font-family: Courier New,Courier,monospace">mtp_get_devices()</span> function.</p>
+<p>To get the MTP devices connected to the MTP initiator, retrieve the MTP device list with the <code>mtp_get_devices()</code> function.</p>
-<p>To select the device you want, retrieve information about the devices in the device list with the <span style="font-family: Courier New,Courier,monospace">mtp_deviceinfo_get_XXX()</span> functions. The following example retrieves the manufacturer (for example, "Samsung Electronics Co., Ltd.") and model name (for example, "SM-A700L") for each device in the list.</p>
+<p>To select the device you want, retrieve information about the devices in the device list with the <code>mtp_deviceinfo_get_XXX()</code> functions. The following example retrieves the manufacturer (for example, "Samsung Electronics Co., Ltd.") and model name (for example, "SM-A700L") for each device in the list.</p>
<pre class="prettyprint">
int
<h2 id="device_info" name="device_info">Getting MTP Device Information</h2>
-<p>To obtain information on the MTP device, use the <span style="font-family: Courier New,Courier,monospace">mtp_deviceinfo_get_XXX()</span> functions. To avoid memory leaks, free the character array variable with the <span style="font-family: Courier New,Courier,monospace">free()</span> function when no longer needed.</p>
+<p>To obtain information on the MTP device, use the <code>mtp_deviceinfo_get_XXX()</code> functions. To avoid memory leaks, free the character array variable with the <code>free()</code> function when no longer needed.</p>
<p>The following example retrieves the device serial number:</p>
<h2 id="storages" name="storages">Getting the MTP Storages</h2>
-<p>To obtain a list of MTP storages in an MTP device, use the <span style="font-family: Courier New,Courier,monospace">mtp_get_storages()</span> function. To avoid memory leaks, free the storage array variable with the <span style="font-family: Courier New,Courier,monospace">free()</span> function when no longer needed.</p>
+<p>To obtain a list of MTP storages in an MTP device, use the <code>mtp_get_storages()</code> function. To avoid memory leaks, free the storage array variable with the <code>free()</code> function when no longer needed.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The storage variable is used in all storage-related functions. Manage it with care.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ The storage variable is used in all storage-related functions. Manage it with care.
+ </div>
<pre class="prettyprint">
mtp_device_h mtp_device; /* Get this variable using mtp_get_devices() */
<h2 id="storage_info" name="storage_info">Getting MTP Storage Information</h2>
-<p>To obtain information on the MTP storage, use the <span style="font-family: Courier New,Courier,monospace">mtp_storageinfo_get_XXX()</span> functions. To avoid memory leaks, free the character array variable with the <span style="font-family: Courier New,Courier,monospace">free()</span> function when no longer needed.</p>
+<p>To obtain information on the MTP storage, use the <code>mtp_storageinfo_get_XXX()</code> functions. To avoid memory leaks, free the character array variable with the <code>free()</code> function when no longer needed.</p>
<p>The following example retrieves the storage description:</p>
<p>To obtain the object handle, get the unique ID value of the object handles from the MTP responder.</p>
-<p>When first using the <span style="font-family: Courier New,Courier,monospace">mtp_get_object_handles()</span> function, set the parent object handle to 0 to search the root folder of the storage.</p>
+<p>When first using the <code>mtp_get_object_handles()</code> function, set the parent object handle to 0 to search the root folder of the storage.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Because the object handle uses a value from another function as a parameter, manage the variable with care.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Because the object handle uses a value from another function as a parameter, manage the variable with care.
+ </div>
<pre class="prettyprint">
mtp_device_h mtp_device;
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;
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Depending on how you use this API, the performance of the application varies greatly. Typically, MTP transfer through the USB layer is not fast. In addition, larger files on the MTP device take a longer time for the function to handle.
- <p>Rather than getting the object handles inside the device all at once, consider gradually obtaining them through user input. (It is easier to understand the MTP device when it is plugged into the computer.)</p>
- </td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Depending on how you use this API, the performance of the application varies greatly. Typically, MTP transfer through the USB layer is not fast. In addition, larger files on the MTP device take a longer time for the function to handle.
+ <p>Rather than getting the object handles inside the device all at once, consider gradually obtaining them through user input. (It is easier to understand the MTP device when it is plugged into the computer.)</p>
+ </div>
<h2 id="object_info" name="object_info">Getting MTP Object Information</h2>
-<p>To obtain information on the MTP object, use the <span style="font-family: Courier New,Courier,monospace">mtp_objectinfo_get_XXX()</span> functions. To avoid memory leaks, free the character array variable with the <span style="font-family: Courier New,Courier,monospace">free()</span> function when no longer needed.</p>
+<p>To obtain information on the MTP object, use the <code>mtp_objectinfo_get_XXX()</code> functions. To avoid memory leaks, free the character array variable with the <code>free()</code> function when no longer needed.</p>
<p>The following example retrieves the object file name:</p>
<ol>
<li>
-<p>Get the object data from the MTP responder using the <span style="font-family: Courier New,Courier,monospace">mtp_get_object()</span> function:</p>
+<p>Get the object data from the MTP responder using the <code>mtp_get_object()</code> function:</p>
<pre class="prettyprint">
mtp_device_h mtp_device;
mtp_object_h 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_object(mtp_device, mtp_object_handle, filepath);
dlog_print("ret[%d]: input id[%d]", ret, mtp_object_handle);
</pre>
</li>
<li>
-<p>If the file is an image file and has a thumbnail, import the thumbnail using the <span style="font-family: Courier New,Courier,monospace">mtp_get_thumbnail()</span> function:</p>
+<p>If the file is an image file and has a thumbnail, import the thumbnail using the <code>mtp_get_thumbnail()</code> function:</p>
<pre class="prettyprint">
mtp_device_h mtp_device;
mtp_object_h 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);
<h2 id="events" name="events">Managing MTP Events</h2>
-<p>To receive an event that occurred in the MTP initiator, add the event callback with the <span style="font-family: Courier New,Courier,monospace">mtp_add_mtp_event_cb()</span> function and define the callback.</p>
+<p>To receive an event that occurred in the MTP initiator, add the event callback with the <code>mtp_add_mtp_event_cb()</code> function and define the callback.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_parameter</span> parameter defines the type of the event:</p>
+<p>The <code>event_parameter</code> parameter defines the type of the event:</p>
<ul>
-<li><p>Device event type is <span style="font-family: Courier New,Courier,monospace">mtp_device_h</span>.</p></li>
-<li><p>Storage event type is <span style="font-family: Courier New,Courier,monospace">mtp_storage_h</span>.</p></li>
-<li><p>Object event type is <span style="font-family: Courier New,Courier,monospace">mtp_object_h</span>.</p></li>
+<li><p>Device event type is <code>mtp_device_h</code>.</p></li>
+<li><p>Storage event type is <code>mtp_storage_h</code>.</p></li>
+<li><p>Object event type is <code>mtp_object_h</code>.</p></li>
</ul>
-<p>If the received event is <span style="font-family: Courier New,Courier,monospace">MTP_EVENT_TURNED_OFF</span>, the <span style="font-family: Courier New,Courier,monospace">event_parameter</span> parameter has no meaning. When this event occurs, free all MTP-related resources.</p>
+<p>If the received event is <code>MTP_EVENT_TURNED_OFF</code>, the <code>event_parameter</code> parameter has no meaning. When this event occurs, free all MTP-related resources.</p>
<pre class="prettyprint">
void
/* Do something */
} else if (state == MTP_EVENT_TURNED_OFF) {
ret = mtp_deinitialize();
- dlog_print("ret[%d] : Terminated daemon", ret);
+ dlog_print("ret[%d]: Terminated daemon", ret);
} else {
/* Error handling */
}
<p>The card emulation mode allows an NFC device to <a href="#cardemulation">function as a smart card</a>. The mode provides access to secure elements (SEs).</p>
<p>The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.</p>
-<p class="figure">Figure: Traditional card emulation</p>
+<p align="center"><strong>Figure: Traditional card emulation</strong></p>
<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p>
<p>With the Card Emulation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">wearable</a> applications), you can:</p>
<li>Retrieve an Answer To Reset (ATR) from a secure element.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Pay attention to the following:
+ <div class="note">
+ <strong>Note</strong>
+ Pay attention to the following:
<ul><li>Secure element access is not supported in Tizen 2.3. The Card Emulation API of Tizen 2.3 only supports enabling and disabling the NFC card emulation mode, and retrieving the card emulation status.</li>
<li>Security problems can occur in some Card Emulation APIs. The security level can be determined by the manufacturer usage. If a security issue occurs, contact the product manufacturer. For more information on the security levels, see the <a href="http://www.gsma.com/digitalcommerce/wp-content/uploads/2013/12/GSMA-NFC05-NFC-Handset-APIs-Requirement-Specification-version-4-1.pdf" target ="blank">GSMA specification</a>.</li></ul>
- </td>
- </tr>
- </tbody>
-</table>
+ </div>
</li>
<li>Host-based card emulation (HCE)
<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p>
-<p class="figure">Figure: Card emulation with HCE</p>
+<p align="center"><strong>Figure: Card emulation with HCE</strong></p>
<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>
<p>HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:</p>
<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li>
<li>When the application is uninstalled, the AID value is deleted from the routing table.</li></ol>
-<p class="figure">Figure: HCE routing</p>
+<p align="center"><strong>Figure: HCE routing</strong></p>
<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p>
</li>
</ul>
<p>To enable your application to use the NFC functionality:</p>
<ol>
<li>
-<p>To use the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/nfc</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the NFC API, include the <span style="font-family: Courier New,Courier,monospace"><nfc.h></span> header file in your application:</p>
+<p>To use the functions and data types of the NFC API, include the <code><nfc.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <nfc.h>
</pre>
-<p>To enable and disable NFC in the device, the <span style="font-family: Courier New,Courier,monospace"><app_control.h></span> and <span style="font-family: Courier New,Courier,monospace"><dlog.h></span> header files have to be included.</p>
+<p>To enable and disable NFC in the device, the <code><app_control.h></code> and <code><dlog.h></code> header files have to be included.</p>
</li>
-<li><p>Check whether the device you want to work with supports NFC. This can be done by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_is_supported()</span> function. It takes no parameters and returns <span style="font-family: Courier New,Courier,monospace;">true</span> if NFC is supported on the device.</p>
+<li><p>Check whether the device you want to work with supports NFC. This can be done by calling the <code>nfc_manager_is_supported()</code> function. It takes no parameters and returns <code>true</code> if NFC is supported on the device.</p>
<pre class="prettyprint">
void
Network_NFC_startup(void)
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">gmainloop</span>, which is being created here, is used to wait for the results of calling asynchronous functions.</p></li>
+<p>The <code>gmainloop</code>, which is being created here, is used to wait for the results of calling asynchronous functions.</p></li>
<li>
-<p>To initialize NFC, call the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function to start the initialization:</p>
+<p>To initialize NFC, call the <code>nfc_manager_initialize()</code> function to start the initialization:</p>
<pre class="prettyprint">
int error_code = NFC_ERROR_NONE;
g_main_loop_run(gmainloop);
</pre>
-<p>Run <span style="font-family: Courier New,Courier,monospace;">gmainloop</span> to wait for the result of the initialization. It is closed when the time set in the <span style="font-family: Courier New,Courier,monospace;">g_timeout_add()</span> function elapses. This time is in milliseconds so the <span style="font-family: Courier New,Courier,monospace;">timeout_func</span> is called after 1 second passes.</p></li>
+<p>Run <code>gmainloop</code> to wait for the result of the initialization. It is closed when the time set in the <code>g_timeout_add()</code> function elapses. This time is in milliseconds so the <code>timeout_func</code> is called after 1 second passes.</p></li>
-<li><p>When the work with NFC is finished, the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_deinitialize()</span> function must be called to clear the environment:</p>
+<li><p>When the work with NFC is finished, the <code>nfc_manager_deinitialize()</code> function must be called to clear the environment:</p>
<pre class="prettyprint">
void
<p>To allow the user to enable or disable NFC, use the <a href="../app_management/common_appcontrol_n.htm#settings_nfc">application control</a> to display the NFC settings.</p>
<p>The NFC API does not contain functions for enabling or disabling NFC. You must display the NFC settings application to allow the user to toggle the NFC state.</p>
- <p class="figure">Figure: NFC settings application (off screen on the left and on screen on the right)</p>
+ <p align="center"><strong>Figure: NFC settings application (off screen on the left and on screen on the right)</strong></p>
<p align="center"><img alt="NFC settings application" src="../../images/nfc_onoff.png" /></p>
<pre class="prettyprint">
<p>To register for notifications:</p>
<ol type="a">
<li>
-<p>Call the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_activation_changed_cb()</span> function to register a callback that is invoked every time the activation state of NFC changes:</p>
+<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>
</pre>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function to declare the tag filtering option. Use a bit operation of the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_filter_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#gaaedb205391ef13ef62d0c9a318a802ad">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#gaaedb205391ef13ef62d0c9a318a802ad">wearable</a> applications) to specify the type of filtering. The default value is <span style="font-family: Courier New,Courier,monospace;">NFC_TAG_FILTER_ALL_ENABLE</span>, which means that all tag types are enabled.</p>
+<li><p>Use the <code>nfc_manager_set_tag_filter()</code> function to declare the tag filtering option. Use a bit operation of the <code>nfc_tag_filter_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#gaaedb205391ef13ef62d0c9a318a802ad">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#gaaedb205391ef13ef62d0c9a318a802ad">wearable</a> applications) to specify the type of filtering. The default value is <code>NFC_TAG_FILTER_ALL_ENABLE</code>, which means that all tag types are enabled.</p>
<pre class="prettyprint">
nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);
</pre></li>
<li><p>Register callback functions to receive discovery notifications for tag, NDEF, peer-to-peer, secure element, and secure element transaction events:</p>
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_discovered_cb()</span> function to register a tag discovery callback:
+<li>Use the <code>nfc_manager_set_tag_discovered_cb()</code> function to register a tag discovery callback:
<pre class="prettyprint">
error_code = nfc_manager_set_tag_discovered_cb(on_nfc_tag_discovered, NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_ndef_discovered_cb()</span> function to register an NDEF event callback:
+<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 <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_p2p_target_discovered_cb()</span> function to register a peer-to-peer event callback:
+<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>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_event_cb()</span> function to register a secure element event callback:
+<li>Use the <code>nfc_manager_set_se_event_cb()</code> function to register a secure element event callback:
<pre class="prettyprint">
error_code = nfc_manager_set_se_event_cb(on_nfc_se_event, NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_transaction_event_cb()</span> function to register a secure element transaction event callback:
+<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>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_is_system_handler_enabled()</span> function to check whether system handling for tag and target discovery is enabled.</p>
-<p>By default, the system handling is enabled. If the function returns <span style="font-family: Courier New,Courier,monospace;">FALSE</span>, enable system handling using the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_system_handler_enable()</span> function and pass <span style="font-family: Courier New,Courier,monospace;">TRUE</span> as an input parameter.</p>
+<li><p>Use the <code>nfc_manager_is_system_handler_enabled()</code> function to check whether system handling for tag and target discovery is enabled.</p>
+<p>By default, the system handling is enabled. If the function returns <code>FALSE</code>, enable system handling using the <code>nfc_manager_set_system_handler_enable()</code> function and pass <code>TRUE</code> as an input parameter.</p>
<pre class="prettyprint">
if (nfc_manager_is_system_handler_enabled() != true)
nfc_manager_set_system_handler_enable(true);
<li id="tag_work" name="tag_work">Handling NFC tags and related events:
<ol type="a">
<li>Get basic tag information.
-<p>When a tag is discovered, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback registered earlier is called. In the callback, you can check the NFC discovered type from the first callback parameter. The <span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications) defines the possible values. If the value is <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span>, the tag has connected to the device, and you can read and print out information from the tag:</p>
+<p>When a tag is discovered, the <code>on_nfc_tag_discovered()</code> callback registered earlier is called. In the callback, you can check the NFC discovered type from the first callback parameter. The <code>nfc_discovered_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications) defines the possible values. If the value is <code>NFC_DISCOVERED_TYPE_ATTACHED</code>, the tag has connected to the device, and you can read and print out information from the tag:</p>
<ol type="a">
<li>
-<p>Get the type of the tag with the <
span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_type()</span> function. The first parameter is the tag handle (received in the second callback parameter) and the second is a pointer to an <span style="font-family: Courier New,Courier,monospace;">nfc_tag_type_e</span> variable (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html#gac77f833a3dde9e3e12d2171f923d8fcb">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html#gac77f833a3dde9e3e12d2171f923d8fcb">wearable</a> applications), where the tag type is stored.</p>
+<p>Get the type of the tag with the <
code>nfc_tag_get_type()</code> function. The first parameter is the tag handle (received in the second callback parameter) and the second is a pointer to an <code>nfc_tag_type_e</code> variable (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html#gac77f833a3dde9e3e12d2171f923d8fcb">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html#gac77f833a3dde9e3e12d2171f923d8fcb">wearable</a> applications), where the tag type is stored.</p>
<pre class="prettyprint">
nfc_tag_get_type(tag, &tag_type);
</pre>
</li>
<li>
-<p>Get the size of the NDEF message stored in the tag with the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_ndef_size()</span> function. The parameters are similar to the ones described above, but instead of the <span style="font-family: Courier New,Courier,monospace;">tag_type</span> variable, the pointer is passed to an unsigned <span style="font-family: Courier New,Courier,monospace;">int</span> variable where the current size of the tag is stored.</p>
+<p>Get the size of the NDEF message stored in the tag with the <code>nfc_tag_get_ndef_size()</code> function. The parameters are similar to the ones described above, but instead of the <code>tag_type</code> variable, the pointer is passed to an unsigned <code>int</code> variable where the current size of the tag is stored.</p>
<pre class="prettyprint">
nfc_tag_get_ndef_size(tag, &size);
</pre>
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_maximum_ndef_size()</span> function to get the maximum NDEF message size that can be stored in the tag. The function takes 2 parameters, where the first one is a tag handle and the second is a pointer to an unsigned <span style="font-family: Courier New,Courier,monospace;">int</span> where the maximum size of the tag is stored.</p>
+<p>Use the <code>nfc_tag_get_maximum_ndef_size()</code> function to get the maximum NDEF message size that can be stored in the tag. The function takes 2 parameters, where the first one is a tag handle and the second is a pointer to an unsigned <code>int</code> where the maximum size of the tag is stored.</p>
<pre class="prettyprint">
nfc_tag_get_maximum_ndef_size(tag, &maximum_ndef_bytes_size);
</pre>
</li>
<li>
-<p>Retrieve all remaining tag information by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_foreach_information()</span> 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, <span style="font-family: Courier New,Courier,monospace;">NULL</span> is passed as the last parameter.</p>
+<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 */
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_information_event()</span> callback prints out the found keys and their values.</p>
+<p>The <code>on_nfc_tag_information_event()</code> callback prints out the found keys and their values.</p>
<pre class="prettyprint">
on_nfc_tag_information_event(const char *key, const unsigned char *value,
int value_size, void *user_data)
return true;
}
</pre>
-<p>The iteration over the key and value pairs continues while the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
+<p>The iteration over the key and value pairs continues while the callback returns <code>true</code>.</p>
</li>
</ol>
</li>
<li>
-<p>Check the NFC tag filter and print it out. This ensures that the callback was called and informs you what kind of a tag filter is set right now. For example, if the callback has not printed any information about the tag, but it printed out that the tag filter is <span style="font-family: Courier New,Courier,monospace;">NFC_TAG_FILTER_ALL_DISABLE</span>, the filter needs to be set to the proper value to read the specific tag type. To check the current tag filter, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_get_tag_filter()</span> function:</p>
+<p>Check the NFC tag filter and print it out. This ensures that the callback was called and informs you what kind of a tag filter is set right now. For example, if the callback has not printed any information about the tag, but it printed out that the tag filter is <code>NFC_TAG_FILTER_ALL_DISABLE</code>, the filter needs to be set to the proper value to read the specific tag type. To check the current tag filter, use the <code>nfc_manager_get_tag_filter()</code> function:</p>
<pre class="prettyprint">
filter = nfc_manager_get_tag_filter();
</pre>
</li>
<li>
-<p>Read the tag data with the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_read_ndef()</span> function. The parameters are the tag handle, the callback evoked when the reading is completed, and user data passed to the callback.</p>
+<p>Read the tag data with the <code>nfc_tag_read_ndef()</code> function. The parameters are the tag handle, the callback evoked when the reading is completed, and user data passed to the callback.</p>
<pre class="prettyprint">
error_code = nfc_tag_read_ndef(tag, on_nfc_tag_read_completed, NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre>
-<p>After the tag message has been read, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_read_completed()</span> 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 <span style="font-family: Courier New,Courier,monospace;">NULL</span> if no data need to be passed.</p>
+<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>
</li>
<li>
-<p>If the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_read_ndef()</span> function returned no error (<span style="font-family: Courier New,Courier,monospace;">error_code == NFC_ERROR_NONE</span>), you can operate on the retrieved message:</p>
+<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>
<ol type="a">
<li>
-<p>To read information from the message, use the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_read_cb()</span> function. The function takes as a parameter a handle to the tag message. Pass the cloned message to it.</p>
+<p>To read information from the message, use the <code>nfc_ndef_message_read_cb()</code> function. The function takes as a parameter a handle to the tag message. Pass the cloned message to it.</p>
<pre class="prettyprint">
nfc_ndef_message_read_cb(clone_message(message));
</pre>
<p>To create a cloned message:</p>
<ol type="a">
<li>
-<p>Clone the message by calling the <span style="font-family: Courier New,Courier,monospace;">clone_message()</span> function:</p>
+<p>Clone the message by calling the <code>clone_message()</code> function:</p>
<pre class="prettyprint">
static
nfc_ndef_message_h clone_message(nfc_ndef_message_h msg)
</pre>
</li>
<li>
-<p>Get the copy of the bytes array of the NDEF message with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_rawdata()</span> function. The parameters are the handle to the NDEF message, the 2-dimensional bytes array, and the size of the bytes array.</p>
+<p>Get the copy of the bytes array of the NDEF message with the <code>nfc_ndef_message_get_rawdata()</code> function. The parameters are the handle to the NDEF message, the 2-dimensional bytes array, and the size of the bytes array.</p>
<p>The parameters are variables that must be passed to be fulfilled inside the called function. </p>
<pre class="prettyprint">
nfc_ndef_message_get_rawdata(msg, &rawdata, &rawdata_size);
</pre>
</li>
<li>
-<p>Create an NDEF handle from raw serial bytes with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_create_from_rawdata()</span> function. Use it to create a copy of the message retrieved from the tag to make it possible to read information from the copy. The parameters are the message handle, <span style="font-family: Courier New,Courier,monospace;">rawdata</span>, and <span style="font-family: Courier New,Courier,monospace;">rawdata_size</span>.</p>
-<p>In the end, <span style="font-family: Courier New,Courier,monospace;">rawdata</span> must be released with the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<p>Create an NDEF handle from raw serial bytes with the <code>nfc_ndef_message_create_from_rawdata()</code> function. Use it to create a copy of the message retrieved from the tag to make it possible to read information from the copy. The parameters are the message handle, <code>rawdata</code>, and <code>rawdata_size</code>.</p>
+<p>In the end, <code>rawdata</code> must be released with the <code>free()</code> function.</p>
<pre class="prettyprint">
nfc_ndef_message_create_from_rawdata(&msg_cp, rawdata, rawdata_size);
free(rawdata);
</ol>
</li>
<li>
-<p>Get the number of records stored in the tag message with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record_count()</span> function. It needs the handle to the message that is operated on and the pointer to an integer which is fulfilled by the function with the number of records in the message.</p>
+<p>Get the number of records stored in the tag message with the <code>nfc_ndef_message_get_record_count()</code> function. It needs the handle to the message that is operated on and the pointer to an integer which is fulfilled by the function with the number of records in the message.</p>
<pre class="prettyprint">
error_code = nfc_ndef_message_get_record_count(message, &count);
if (NFC_ERROR_NONE != error_code)
</pre>
</li>
<li>
-<p>Iterate through all the records in the message and get all information stored in each record. Call the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record()</span> function first. The parameters are the handle of the NDEF message, index of the record, and handle to the record. This function gets a record from the message by index. It returns a pointer to the record, so if you change the record, it directly affects the NDEF message.</p>
+<p>Iterate through all the records in the message and get all information stored in each record. Call the <code>nfc_ndef_message_get_record()</code> function first. The parameters are the handle of the NDEF message, index of the record, and handle to the record. This function gets a record from the message by index. It returns a pointer to the record, so if you change the record, it directly affects the NDEF message.</p>
<pre class="prettyprint">
error_code = nfc_ndef_message_get_record(message, i, &rec);
if (NFC_ERROR_NONE != error_code)
<p>Now, when the pointer to the specific record exists, get the record data:</p>
-<ul><li>Get the record ID by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_id()</span> function:
+<ul><li>Get the record ID by calling the <code>nfc_ndef_record_get_id()</code> function:
<pre class="prettyprint">
error_code = nfc_ndef_record_get_id(rec, &id, &id_len);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li>
-<li>Get the record type using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_type()</span> function:
+<li>Get the record type using the <code>nfc_ndef_record_get_type()</code> function:
<pre class="prettyprint">
error_code = nfc_ndef_record_get_type(rec, &type_str, &type_len);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li>
-<li>Get the record TNF (Type Name Format) with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_tnf()</span> function:
+<li>Get the record TNF (Type Name Format) with the <code>nfc_ndef_record_get_tnf()</code> function:
<pre class="prettyprint">
error_code = nfc_ndef_record_get_tnf(rec, &tnf);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li>
-<li>Get the record payload by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_payload()</span> function:
+<li>Get the record payload by calling the <code>nfc_ndef_record_get_payload()</code> function:
<pre class="prettyprint">
error_code = nfc_ndef_record_get_payload(record, &payload, &payload_len);
if (NFC_ERROR_NONE != error_code)
<li>
<p>To get more information from the tag, specify what type of a tag message you are dealing with:</p>
<ul>
-<li>If there is a message with <span style="font-family: Courier New,Courier,monospace;">Type = "T"</span> and the TNF is <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_WELL_KNOWN</span>, it is possible to get the following data:
+<li>If there is a message with <code>Type = "T"</code> and the TNF is <code>NFC_RECORD_TNF_WELL_KNOWN</code>, it is possible to get the following data:
<pre class="prettyprint">
/* Get the record text */
error_code = nfc_ndef_record_get_text(record, &text);
</pre>
</li>
<li>
-<p>If there is a message with <span style="font-family: Courier New,Courier,monospace;">Type="U"</span> and TNF is also <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_WELL_KNOWN</span>, you can get the URI using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_uri()</span> function:</p>
+<p>If there is a message with <code>Type="U"</code> and TNF is also <code>NFC_RECORD_TNF_WELL_KNOWN</code>, you can get the URI using the <code>nfc_ndef_record_get_uri()</code> function:</p>
<pre class="prettyprint">
error_code = nfc_ndef_record_get_uri(record, &uri);
</pre>
</li>
<li>
-<p>If the TNF of the record is <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_MIME_MEDIA</span>, it is possible to get the record mime type:</p>
+<p>If the TNF of the record is <code>NFC_RECORD_TNF_MIME_MEDIA</code>, it is possible to get the record mime type:</p>
<pre class="prettyprint">
error_code = nfc_ndef_record_get_mime_type(record, &mime);
if (NFC_ERROR_NONE != error_code)
<p>NFC NDEF messages are handled in the same way as NFC tag NDEF messages, described above.</p>
-<p>In the registered <span style="font-family: Courier New,Courier,monospace;">on_nfc_ndef_discovered()</span> callback, get the number of records in the message and then iterate through those records.</p>
+<p>In the registered <code>on_nfc_ndef_discovered()</code> callback, get the number of records in the message and then iterate through those records.</p>
<p>Retrieve the record handles, and then the record payloads.</p>
<pre class="prettyprint">
static void
<li>
<p>When the device is connected to a P2P target, you can exchange NDEF data with that peer target by sending and receiving messages.</p>
-<p>In the registered <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span> callback, check the value of the first parameter, which defines the type of the NFC discovery using the <span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications). If the type is <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span>, the remote device is attached to the device:</p>
+<p>In the registered <code>on_nfc_p2p_target_discovered()</code> callback, check the value of the first parameter, which defines the type of the NFC discovery using the <code>nfc_discovered_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications). If the type is <code>NFC_DISCOVERED_TYPE_ATTACHED</code>, the remote device is attached to the device:</p>
<pre class="prettyprint">
if (type == NFC_DISCOVERED_TYPE_ATTACHED)
/* Remote device is attached; execute code */
</pre>
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_p2p_set_data_received_cb()</span> function to register a callback that is invoked when any data from the connected target is received:</p>
+<p>Use the <code>nfc_p2p_set_data_received_cb()</code> function to register a callback that is invoked when any data from the connected target is received:</p>
<pre class="prettyprint">
error_code = nfc_p2p_set_data_received_cb(target, on_nfc_p2p_read_completed, 0);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre>
-<p>Use the callback to read the received message. You can check its number of records using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record_count()</span> function and get more detailed info about the message itself by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_read_cb()</span> function, similarly as with the NFC tag messages described earlier.</p>
+<p>Use the callback to read the received message. You can check its number of records using the <code>nfc_ndef_message_get_record_count()</code> function and get more detailed info about the message itself by calling the <code>nfc_ndef_message_read_cb()</code> function, similarly as with the NFC tag messages described earlier.</p>
<pre class="prettyprint">
static void
on_nfc_p2p_read_completed(nfc_p2p_target_h target, nfc_ndef_message_h message,
<li>Handling NFC secure elements and related events:
<ol>
<li>
-<p>The secure element event notification is received through the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_event()</span> callback. The first parameter defines the event type, which determines the additional actions you can take.</p>
+<p>The secure element event notification is received through the <code>on_nfc_se_event()</code> callback. The first parameter defines the event type, which determines the additional actions you can take.</p>
<pre class="prettyprint">
static void
on_nfc_se_event(nfc_se_event_e event, void *user_data)
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>
<p>To get a cached NFC message:</p>
<ol>
-<li>Set the NFC tag filter with the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function:
+<li>Set the NFC tag filter with the <code>nfc_manager_set_tag_filter()</code> function:
<pre class="prettyprint">
nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);
</pre></li>
if (nfc_manager_is_system_handler_enabled() != true)
nfc_manager_set_system_handler_enable(true);
</pre></li>
-<li>Get the cached message by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_get_cached_message()</span> function. Pass a variable of the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span> type, which is fulfilled with the cached message by the function.
+<li>Get the cached message by calling the <code>nfc_manager_get_cached_message()</code> function. Pass a variable of the <code>nfc_ndef_message_h</code> type, which is fulfilled with the cached message by the function.
<pre class="prettyprint">
nfc_ndef_message_h message = NULL;
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre>
-<p>After getting the message, get the detailed information from the message as described in <a href="#work">Working with NFC Connections and Messages</a>. First check whether there are any errors and that the message is not <span style="font-family: Courier New,Courier,monospace;">NULL</span>:</p>
+<p>After getting the message, get the detailed information from the message as described in <a href="#work">Working with NFC Connections and Messages</a>. First check whether there are any errors and that the message is not <code>NULL</code>:</p>
<pre class="prettyprint">
if (message != NULL)
on_nfc_ndef_discovered(clone_message(message), NULL);
<li>Initialize the card emulation application:
<ol type="a">
<li>
-<p>To initialize NFC, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function: </p>
+<p>To initialize NFC, use the <code>nfc_manager_initialize()</code> function: </p>
<pre class="prettyprint">
int ret = NFC_ERROR_NONE;
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;
}
</pre></li>
-<li><p>Specify an <span style="font-family: Courier New,Courier,monospace;">AID</span> value for the application:</p>
+<li><p>Specify an <code>AID</code> value for the application:</p>
<ol type="a">
<li>
<p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the manifest file:</p>
<?xml version="1.0" encoding="utf-8"?>
<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">
+ <profile name="wearable"/>
+ <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"
</ui-application>
</manifest>
</pre>
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">metadata</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">key</span> and <span style="font-family: Courier New,Courier,monospace;">value</span> attributes.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">key</span> attribute must be <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/metadata/nfc_cardemulation</span>.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute must contain the AID XML file path.
-<p>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute is a relative path starting from the application root path.</p></li>
+<ul><li>The <code>metadata</code> element must contain the <code>key</code> and <code>value</code> attributes.</li>
+<li>The <code>key</code> attribute must be <code>http://tizen.org/metadata/nfc_cardemulation</code>.</li>
+<li>The <code>value</code> attribute must contain the AID XML file path.
+<p>The <code>value</code> attribute is a relative path starting from the application root path.</p></li>
</ul>
</li>
<li><p>The metadata element points to an AID XML file. The following is an example of the file with an AID declaration:</p>
</wallet>
</application>
</pre>
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain a <span style="font-family: Courier New,Courier,monospace;">name</span> attribute with an application name.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">wallet</span> element, each of which must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element. </li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element is required to contain a <span style="font-family: Courier New,Courier,monospace;">category</span> attribute with the <span style="font-family: Courier New,Courier,monospace;">payment</span> or <span style="font-family: Courier New,Courier,monospace;">other</span> value.</li>
-<li>Each <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid</span> element, each of which contains a single AID. The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> can have as many <span style="font-family: Courier New,Courier,monospace;">aid</span> elements as you want.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">aid</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">aid</span>, <span style="font-family: Courier New,Courier,monospace;">se_type</span>, <span style="font-family: Courier New,Courier,monospace;">unlock</span>, and <span style="font-family: Courier New,Courier,monospace;">power</span> attributes.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">se_type</span> attribute must contain <span style="font-family: Courier New,Courier,monospace;">hce</span>, <span style="font-family: Courier New,Courier,monospace;">ese</span>, or <span style="font-family: Courier New,Courier,monospace;">uicc</span>. The <span style="font-family: Courier New,Courier,monospace;">se_type</span> value can be added later.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">unlock</span> attribute must contain one of the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">true</span>: The card cannot work when the device is locked.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">false</span>: The card can work when the device is locked.</li></ul></li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">power</span> must contain one of the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">on</span>: The card can work when the device is on.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">off</span>: The card can work when the device is off.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">sleep</span>: The card can work when the device is in the sleep mode.</li></ul></li>
+<ul><li>The <code>application</code> element must contain a <code>name</code> attribute with an application name.</li>
+<li>The <code>application</code> element must contain one or more <code>wallet</code> element, each of which must contain one or more <code>aid-group</code> element. </li>
+<li>The <code>aid-group</code> element is required to contain a <code>category</code> attribute with the <code>payment</code> or <code>other</code> value.</li>
+<li>Each <code>aid-group</code> element must contain one or more <code>aid</code> element, each of which contains a single AID. The <code>aid-group</code> can have as many <code>aid</code> elements as you want.</li>
+<li>The <code>aid</code> element must contain the <code>aid</code>, <code>se_type</code>, <code>unlock</code>, and <code>power</code> attributes.</li>
+<li>The <code>se_type</code> attribute must contain <code>hce</code>, <code>ese</code>, or <code>uicc</code>. The <code>se_type</code> value can be added later.</li>
+<li>The <code>unlock</code> attribute must contain one of the following:
+<ul><li><code>true</code>: The card cannot work when the device is locked.</li>
+<li><code>false</code>: The card can work when the device is locked.</li></ul></li>
+<li>The <code>power</code> must contain one of the following:
+<ul><li><code>on</code>: The card can work when the device is on.</li>
+<li><code>off</code>: The card can work when the device is off.</li>
+<li><code>sleep</code>: The card can work when the device is in the sleep mode.</li></ul></li>
</ul>
</li>
</ol></li></ol></li>
<li>Define HCE event handling.
<p>The application must be able to handle an HCE event from the NFC reader. Define and register a callback that is triggered when data arrives from the NFC reader.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_hce_send_apdu_response()</span> function to send a response to the NFC reader. The actual data moving between the NFC reader and the application can be anything. The APDU protocol only defines a promise between the application producer and NFC reader.</p>
+<p>Use the <code>nfc_hce_send_apdu_response()</code> function to send a response to the NFC reader. The actual data moving between the NFC reader and the application can be anything. The APDU protocol only defines a promise between the application producer and NFC reader.</p>
<pre class="prettyprint">
static void
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;
}
</pre>
</li>
<li>Implement optional HCE features:
-<ul><li>To determine whether the application is an active handler for a specific AID or category, use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_is_activated_handler_for_aid()</span> and <span style="font-family: Courier New,Courier,monospace;">nfc_se_is_activated_handler_for_category()</span> functions:
+<ul><li>To determine whether the application is an active handler for a specific AID or category, use the <code>nfc_se_is_activated_handler_for_aid()</code> and <code>nfc_se_is_activated_handler_for_category()</code> functions:
<pre class="prettyprint">
int ret = NFC_ERROR_NONE;
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) {
"nfc_se_is_activated_handler_for_category failed: %d", ret);
}
</pre></li>
-<li>To register or deregister the AID at application runtime, use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_register_aid()</span> and <span style="font-family: Courier New,Courier,monospace;">nfc_se_unregister_aid()</span> functions:
+<li>To register or deregister the AID at application runtime, use the <code>nfc_se_register_aid()</code> and <code>nfc_se_unregister_aid()</code> functions:
<pre class="prettyprint">
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);
return false;
}
</pre></li>
-<li>To check whether the application has a registered AID (including a registered AID at the install time), use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_foreach_registered_aids()</span> function (the callback is called for each AID value separately):
+<li>To check whether the application has a registered AID (including a registered AID at the install time), use the <code>nfc_se_foreach_registered_aids()</code> function (the callback is called for each AID value separately):
<pre class="prettyprint">
static void
_registered_aid_cb(nfc_se_type_e se_type, const char *aid,
/* 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;
}
</pre>
-<p>When an application receives an app control event, the application can receive the AID value using the <span style="font-family: Courier New,Courier,monospace;">data</span> app control extra key.</p></li>
+<p>When an application receives an app control event, the application can receive the AID value using the <code>data</code> app control extra key.</p></li>
</ul></li>
<li>When HCE operations are no longer needed, deinitialize the resources:
<pre class="prettyprint">
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;
}
</pre>
</li>
<li>To create a preferred application:
-<p>You can register your application as a preferred handler through the Preferred API. Instead of the default handler selected in the NFC settings (the wallet application), the preferred handler receives a card emulation event.</p>
+<p>You can register your application as a preferred handler through the "preferred" functions. Instead of the default handler selected in the NFC settings (the wallet application), the preferred handler receives a card emulation event.</p>
-<p>The Preferred API has 2 functions, which can be called when the application is on the foreground:</p>
+<p>The "preferred" functions can be called when the application is on the foreground:</p>
<ul>
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">nfc_se_set_preferred_handler()</span> function when the application is resumed from the paused state.</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">nfc_se_unset_preferred_handler()</span> function when the application is paused.</li>
+<li>Call the <code>nfc_se_set_preferred_handler()</code> function when the application is resumed from the paused state.</li>
+<li>Call the <code>nfc_se_unset_preferred_handler()</code> function when the application is paused.</li>
</ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Preferred API is available since Tizen 3.0.
- <p>Because of security issues, the API usage policy is different for each Tizen device. For example, if the application is in the payment category, using this API can be prohibited depending on the device.</p>
- </td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The "preferred" functions are available since Tizen 3.0.
+ <p>Because of security issues, the API usage policy is different for each Tizen device. For example, if the application is in the payment category, using the "preferred" functions can be prohibited depending on the device.</p>
+ </div>
<p>The following example shows the entire preferred application sample code:</p>
<pre class="prettyprint">
static void
int
app_run(app_data *user_data, int argc, char **argv)
{
- ui_app_lifecycle_callback_s cbs =
- {
+ ui_app_lifecycle_callback_s cbs = {
.create = _on_create_cb,
.terminate = _on_terminate_cb,
.pause = _on_pause_cb,
<p>The platform supports the following application control operations for NFC applications: </p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default_changed</span>
+<li><code>default_changed</code>
-<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span> application control event when the default wallet is changed. For example, in <strong>Setting > NFC > Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</p>
+<p>The system sends the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</code> application control event when the default wallet is changed. For example, in <strong>Setting > NFC > Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</p>
-<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+<p>You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">host_apdu_service</span>
-<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> application control event when an HCE event occurs. For example, when a mobile device receives a host-based APDU (HCE) event from a POS terminal, an application control with this operation is sent to NFC applications. </p>
-<p>You can get the target AID information using the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data()</span> function with the <span style="font-family: Courier New,Courier,monospace">data</span> key. The target AID key comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> operation is launching.</p>
-<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+<li><code>host_apdu_service</code>
+<p>The system sends the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</code> application control event when an HCE event occurs. For example, when a mobile device receives a host-based APDU (HCE) event from a POS terminal, an application control with this operation is sent to NFC applications. </p>
+<p>You can get the target AID information using the <code>app_control_get_extra_data()</code> function with the <code>data</code> key. The target AID key comes packaged when the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</code> operation is launching.</p>
+<p>You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">off_host_apdu_service</span>
+<li><code>off_host_apdu_service</code>
-<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> application control event when an SE transaction occurs. For example, when a mobile device receives an off-host APDU event from a POS terminal, an application control with this operation is sent to NFC applications.</p>
-<p>You can get the target AID information using the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data()</span> function with the <span style="font-family: Courier New,Courier,monospace">data</span> key. The target AID key comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> operation is launching.</p>
-<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+<p>The system sends the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</code> application control event when an SE transaction occurs. For example, when a mobile device receives an off-host APDU event from a POS terminal, an application control with this operation is sent to NFC applications.</p>
+<p>You can get the target AID information using the <code>app_control_get_extra_data()</code> function with the <code>data</code> key. The target AID key comes packaged when the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</code> operation is launching.</p>
+<p>You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>.</p>
</li>
</ul>
<p>To use the NFC application controls:</p>
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1"
package="org.tizen.basicuiapplication" version="1.0.0">
- <profile name="wearable" />
+ <profile name="wearable"/>
<ui-application appid="org.tizen.basicuiapplication" exec="basicuiapplication"
type="capp" multiple="false" taskmanage="true" nodisplay="false">
<icon>basicuiapplication.png</icon>
</pre>
</li>
<li>
-<p>Define the callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>:</p>
+<p>Define the callback and register it to <code>ui_app_lifecycle_callback::app_control</code>:</p>
<pre class="prettyprint">
#define NFC_APPCONTROL_STRING "http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service"
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);
}
<ol>
<li><p>Make sure you have 2 target devices that support the NFC P2P mode.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The device screen must be unlocked to use NFC.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ The device screen must be unlocked to use NFC.
+ </div>
</li>
-<li>To start using the NFC API, initialize the API by calling the <span style="font-family: Courier New,Courier,monospace">nfc_manager_initialize()</span> function:
+<li>To start using the NFC API, initialize the API by calling the <code>nfc_manager_initialize()</code> function:
<pre class="prettyprint">
nfc_manager_initialize();
</pre></li>
-<li><p>After the initialization of the NFC manager, ensure that NFC is supported and activated on the device. The <span style="font-family: Courier New,Courier,monospace">nfc_manager_is_supported()</span> function checks whether NFC is supported. The <span style="font-family: Courier New,Courier,monospace">nfc_manager_is_activated()</span> function gets the NFC activation state. </p>
+<li><p>After the initialization of the NFC manager, ensure that NFC is supported and activated on the device. The <code>nfc_manager_is_supported()</code> function checks whether NFC is supported. The <code>nfc_manager_is_activated()</code> function gets the NFC activation state. </p>
<pre class="prettyprint">
if (!nfc_manager_is_supported())
/* Report error, end the application */
/* Report error, ask the user to switch on NFC */
</pre></li>
-<li><p>At the end of the application life-cycle, call the <span style="font-family: Courier New,Courier,monospace">nfc_manager_deinitialize()</span> function. It releases all resources of the NFC manager and disconnects the session between it and your application.</p>
+<li><p>At the end of the application life-cycle, call the <code>nfc_manager_deinitialize()</code> function. It releases all resources of the NFC manager and disconnects the session between it and your application.</p>
<pre class="prettyprint">
nfc_manager_deinitialize();
</pre></li></ol>
<li>
<p>An NDEF message consists of several NDEF records. A record payload type is determined by 2 values: the TNF (Type Name Format) and type. There are a few TNFs and related types of the NDEF records, such as text record, URI record, and MIME record. In this example, only text records are used.</p>
<p>The message in this example contains a name, phone number, and email address of the device owner. Values can be stored in a file or taken from the UI of the application – in this example, getting values has been omitted.</p>
-<p>To create a text record, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_create_text()</span> function. The parameters are a record handle, the text to store, the language code (for example, en-US or ko-KR), and the encoding type. The following example creates 3 records for a name, phone number, and email address:</p>
+<p>To create a text record, use the <code>nfc_ndef_record_create_text()</code> function. The parameters are a record handle, the text to store, the language code (for example, en-US or ko-KR), and the encoding type. The following example creates 3 records for a name, phone number, and email address:</p>
<pre class="prettyprint">
nfc_ndef_record_h ndef_name_record = NULL;
nfc_ndef_record_h ndef_phone_record = NULL;
</pre>
</li>
<li>
-<p>Create and initialize an NDEF message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_create()</span> function. Pass a handle to the created message as the parameter.</p>
+<p>Create and initialize an NDEF message using the <code>nfc_ndef_message_create()</code> function. Pass a handle to the created message as the parameter.</p>
<pre class="prettyprint">
nfc_ndef_message_h ndef_message = NULL;
nfc_ndef_message_create(&ndef_message);
</pre>
</li>
<li>
-<p>Append the created records to the message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_append_record()</span> function. This function appends the record with the next index. To insert a record at the specified index, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_insert_record()</span> function instead.</p>
+<p>Append the created records to the message using the <code>nfc_ndef_message_append_record()</code> function. This function appends the record with the next index. To insert a record at the specified index, use the <code>nfc_ndef_message_insert_record()</code> function instead.</p>
<pre class="prettyprint">
nfc_ndef_message_append_record(ndef_message, ndef_name_record);
nfc_ndef_message_append_record(ndef_message, ndef_phone_record);
</li>
<li>Register a callback to receive notifications about discovered P2P targets.
-<p>To exchange messages using P2P, register a callback for receiving notifications about discovered P2P targets using the <span style="font-family: Courier New,Courier,monospace">nfc_manager_set_p2p_target_discovered_cb()</span> function. When the P2P target is discovered, the callback provides a handle to that device and information on whether it is attached or detached.</p>
+<p>To exchange messages using P2P, register a callback for receiving notifications about discovered P2P targets using the <code>nfc_manager_set_p2p_target_discovered_cb()</code> function. When the P2P target is discovered, the callback provides a handle to that device and information on whether it is attached or detached.</p>
<pre class="prettyprint">
nfc_manager_set_p2p_target_discovered_cb(on_target_discovered, NULL);
</pre></li>
<li id="received" name="received">Register a callback to receive notifications about the received data.
-<p>In this example, both devices receive and send a message to each other, so when another P2P target is attached, register a callback for receiving notifications about received data from this device. Use the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_set_data_received_cb()</span> function (the best way is to place this code in the callback called after the P2P device is discovered). Specify the peer target handle that was provided by the previously set callback.</p>
+<p>In this example, both devices receive and send a message to each other, so when another P2P target is attached, register a callback for receiving notifications about received data from this device. Use the <code>nfc_p2p_set_data_received_cb()</code> function (the best way is to place this code in the callback called after the P2P device is discovered). Specify the peer target handle that was provided by the previously set callback.</p>
<pre class="prettyprint">
nfc_p2p_set_data_received_cb(target, on_p2p_data_received, NULL);
</pre>
</li>
<li>Send a message to another device.
-<p>When another P2P device is attached, send the prepared message to it. You can use the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_send()</span> function if you do not want to check permissions. Provide a target handle and a sent message handle. You can also set a callback called when the sending is completed.</p>
+<p>When another P2P device is attached, send the prepared message to it. You can use the <code>nfc_p2p_send()</code> function if you do not want to check permissions. Provide a target handle and a sent message handle. You can also set a callback called when the sending is completed.</p>
<pre class="prettyprint">
nfc_p2p_send(target, ndef_message, NULL, NULL);
</pre></li>
<li id="receive" name="receive">Receive a message from another device.
<p>The callback about receive data is invoked when the device receives a message from another device. The callback provides a handle to the received message and a handle to the message source.</p>
-<p>Get the number of records in the received message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_get_record_count()</span> function. In this example, the number must be 3, since there are 3 records: a name, phone number, and email address.</p>
+<p>Get the number of records in the received message using the <code>nfc_ndef_message_get_record_count()</code> function. In this example, the number must be 3, since there are 3 records: a name, phone number, and email address.</p>
<pre class="prettyprint">
int count;
nfc_ndef_message_get_record_count(message, &count);
</pre>
-<p>To get a specified record from the message, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_get_record()</span> function. Specify a message handle, a record index, and a handle to store the obtained record. When the text record is obtained, get the stored text using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_get_text()</span> function.</p>
+<p>To get a specified record from the message, use the <code>nfc_ndef_message_get_record()</code> function. Specify a message handle, a record index, and a handle to store the obtained record. When the text record is obtained, get the stored text using the <code>nfc_ndef_record_get_text()</code> function.</p>
<pre class="prettyprint">
nfc_ndef_record_h ndef_record;
<li>To use the DNS-SD protocol:
<ol>
<li>
-<p>To use the functions and data types of the DNSSD API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><dnssd.h></span> header file in your application:</p>
+<p>To use the functions and data types of the DNSSD API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">wearable</a> applications), include the <code><dnssd.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <dnssd.h>
</pre>
</li>
<li>
-<p>Initialize DNS-SD using the <span style="font-family: Courier New,Courier,monospace;">dnssd_initialize()</span> function:</p>
+<p>Initialize DNS-SD using the <code>dnssd_initialize()</code> function:</p>
<pre class="prettyprint">
int error_code;
<li>To use the SSDP protocol:
<ol>
<li>
-<p>To use the functions and data types of the SSDP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><ssdp.h></span> header file in your application:</p>
+<p>To use the functions and data types of the SSDP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">wearable</a> applications), include the <code><ssdp.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <ssdp.h>
</pre>
</li>
<li>
-<p>Initialize SSDP using the <span style="font-family: Courier New,Courier,monospace;">ssdp_initialize()</span> function:</p>
+<p>Initialize SSDP using the <code>ssdp_initialize()</code> function:</p>
<pre class="prettyprint">
int error_code;
<h2 id="dnssd_service" name="dnssd_service">Managing a Local Service with DNSSD</h2>
-<p>To announce a local service, create a local service handle using the <span style="font-family: Courier New,Courier,monospace">dnssd_create_local_service()</span> function, and set the service information using the handle. Afterwards, you can register the local service using the <span style="font-family: Courier New,Courier,monospace">dnssd_register_local_service()</span> function.</p>
+<p>To announce a local service, create a local service handle using the <code>dnssd_create_local_service()</code> function, and set the service information using the handle. Afterwards, you can register the local service using the <code>dnssd_register_local_service()</code> function.</p>
<p>To manage a local service, you must create and register the service:</p>
<li>Create the local service:
<ol type="a">
<li>To provide a local service on a network, you must create a handle containing information about the service.
-<p>At the beginning, define a <
span style="font-family: Courier New,Courier,monospace">dnssd_service_h</span> variable to store the service handle. The target is used to create the handle, which represents a DNS-SD service to be advertised through a network. To set the service type, see <a href="http://www.dns-sd.org/ServiceTypes.html" target="_blank">http://www.dns-sd.org/ServiceTypes.html</a>.</p>
+<p>At the beginning, define a <
code>dnssd_service_h</code> variable to store the service handle. The target is used to create the handle, which represents a DNS-SD service to be advertised through a network. To set the service type, see <a href="http://www.dns-sd.org/ServiceTypes.html" target="_blank">http://www.dns-sd.org/ServiceTypes.html</a>.</p>
<pre class="prettyprint">
dnssd_service_h service_handle;
error_code = dnssd_create_local_service(service_type, &service_handle);
if (error_code == DNSSD_ERROR_NONE)
- prinf("Success in creating a service handle.");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in creating a service handle.");
</pre>
</li>
int port = 80;
if (dnssd_service_set_name(service_handle, service_name) == DNSSD_ERROR_NONE)
- printf("Success in setting service name");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting service name");
if (dnssd_service_set_port(service_handle, port) == DNSSD_ERROR_NONE)
- printf("Success in setting port");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting port");
</pre>
</li>
<li>You can add a TXT record, which gives additional information about the created service. The TXT record is stored in a structured form using key-value pairs.
char* value = "http://www.samsung.com";
int length = 30;
-if (dnssd_service_add_txt_record_value(service_handle, key, length, value) == DNSSD_ERROR_NONE)
- printf("Success in setting service TXT");
+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>
<p>When no longer needed, you can remove the TXT record from the created service:</p>
char* key = "path";
if (dnssd_service_remove_txt_record_value(service_handle, key) == DNSSD_ERROR_NONE)
- printf("Success in removing service TXT");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in removing service TXT");
</pre>
</li>
</ol>
<pre class="prettyprint">
error_code = dnssd_register_local_service(service_handle, __registered_cb, NULL);
if (error_code == DNSSD_ERROR_NONE)
- prinf("Success in registering a local service.");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in registering a local service.");
</pre>
</li>
-<li>The callback defined in the <span style="font-family: Courier New,Courier,monospace">dnssd_register_local_service()</span> function is called when the service registration is finished:
+<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 */
- printf("Registered");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Registered");
} else if (result == DNSSD_NAME_CONFLICT) {
/* Name conflict exists */
- printf("Name conflict");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Name conflict");
} else if (result == DNSSD_ALREADY_REGISTERED) {
/* Service is already registered */
- printf("Already registered");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Already registered");
} else {
/* Result is unknown */
- printf("Unknown result");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Unknown result");
}
}
</pre>
</li>
</ol>
</li>
-<li>When you no longer want to provide the local service, deregister it with the <span style="font-family: Courier New,Courier,monospace">dnssd_deregister_local_service()</span> function.
-<p>To destroy the local service handle, use the <span style="font-family: Courier New,Courier,monospace">dnssd_destroy_local_service()</span> function.</p>
+<li>When you no longer want to provide the local service, deregister it with the <code>dnssd_deregister_local_service()</code> function.
+<p>To destroy the local service handle, use the <code>dnssd_destroy_local_service()</code> function.</p>
<pre class="prettyprint">
dnssd_deregister_local_service(service_handle):
dnssd_destroy_local_service(service_handle);
<p>To search for available services on a network, use a service type or target information:</p>
<ol>
-<li>To start searching, use the <span style="font-family: Courier New,Courier,monospace">dnssd_start_browsing_service()</span> function.
-<p>The DNS-SD browser handle is stored in a <
span style="font-family: Courier New,Courier,monospace">dnssd_browser_h</span> variable. For more information on the service types, see <a href="http://www.dns-sd.org/ServiceTypes.html" target="_blank">http://www.dns-sd.org/ServiceTypes.html</a>.</p>
+<li>To start searching, use the <code>dnssd_start_browsing_service()</code> function.
+<p>The DNS-SD browser handle is stored in a <
code>dnssd_browser_h</code> variable. For more information on the service types, see <a href="http://www.dns-sd.org/ServiceTypes.html" target="_blank">http://www.dns-sd.org/ServiceTypes.html</a>.</p>
<pre class="prettyprint">
dnssd_browser_h browser_handle;
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)
- prinf("Start browsing");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Start browsing");
</pre>
</li>
-<li>The callback defined in the <span style="font-family: Courier New,Courier,monospace">dnssd_start_browsing_service()</span> function is called when the remote service becomes available or unavailable:
+<li>The callback defined in the <code>dnssd_start_browsing_service()</code> function is called when the remote service becomes available or unavailable:
<pre class="prettyprint">
void
__dnssd_print_found(dnssd_service_h dnssd_remote_service)
int port = 0;
error_code = dnssd_service_get_name(dnssd_remote_service, &service_name);
if (error_code == DNSSD_ERROR_NONE && service_ name!= NULL)
- printf("Service name [%s]", service_ name);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Service name [%s]", service_ name);
error_code = dnssd_service_get_type(dnssd_remote_service, &service_type);
if (error_code == DNSSD_ERROR_NONE && service_type != NULL)
- printf("Service type [%s]", service_type);
+ 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)
- printf("IPV4 address [%s]", ip_v4_address);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "IPV4 address [%s]", ip_v4_address);
if (ip_v6_address)
- printf("IPV6 address [%s]", ip_v6_address);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "IPV6 address [%s]", ip_v6_address);
}
error_code = dnssd_service_get_port(dnssd_remote_service, &port)
if (error_code == DNSSD_ERROR_NONE)
- printf("Service port [%d]", port);
- error_code = dnssd_service_get_txt_record_value(dnssd_remote_service, &txt_record_value, &value);
+ 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);
if (error_code == DNSSD_ERROR_NONE && txt_record_value!= NULL)
- printf("Service TXT [%s]", txt_record_value);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Service TXT [%s]", txt_record_value);
if (service_name)
free(service_name);
}
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)
{
- printf("Browse Service Callback\n");
- printf("Handler: %u\n", dnssd_remote_service);
- printf("State: ");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Browse Service Callback\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Handler: %u\n", dnssd_remote_service);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "State: ");
switch (browse_state) {
case DNSSD_SERVICE_STATE_AVAILABLE:
/* DNS-SD service found */
__dnssd_print_found(dnssd_remote_service);
- printf("Available\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Available\n");
break;
case DNSSD_SERVICE_STATE_UNAVAILABLE:
/* DNS-SD service becomes unavailable */
- printf("Un-Available\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Un-Available\n");
break;
case DNSSD_SERVICE_STATE_NAME_LOOKUP_FAILED:
/* Browsing failed */
- printf("Browse Failure\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Browse Failure\n");
break;
case DNSSD_SERVICE_STATE_HOST_NAME_LOOKUP_FAILED:
/* Resolving service name failed */
- printf("Resolve Service Name Failure\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Resolve Service Name Failure\n");
break;
case DNSSD_SERVICE_STATE_ADDRESS_LOOKUP_FAILED:
/* Resolving service address failed */
- printf("Resolve Service Address\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Resolve Service Address\n");
break;
default:
- printf("Unknown Browse State\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Unknown Browse State\n");
break;
}
}
<h2 id="ssdp_service" name="ssdp_service">Managing a Local Service with SSDP</h2>
-<p>To announce a local service, create a local service handle using the <span style="font-family: Courier New,Courier,monospace">ssdp_create_local_service()</span> function, and set the service information using the handle. Afterwards, you can register the local service using the <span style="font-family: Courier New,Courier,monospace">ssdp_register_local_service()</span> function.</p>
+<p>To announce a local service, create a local service handle using the <code>ssdp_create_local_service()</code> function, and set the service information using the handle. Afterwards, you can register the local service using the <code>ssdp_register_local_service()</code> function.</p>
<p>To manage a local service, you must create and register the service:</p>
<li>Create the local service:
<ol type="a">
<li>To provide a local service on a network, you must create a handle containing information about the service.
-<p>At the beginning, define an <
span style="font-family: Courier New,Courier,monospace">ssdp_service_h</span> variable to store the service handle. The target is used to create the handle, which represents a device or service type specified in the <a href="http://upnp.org" target="_blank">UPnP forum</a>.</p>
+<p>At the beginning, define an <
code>ssdp_service_h</code> variable to store the service handle. The target is used to create the handle, which represents a device or service type specified in the <a href="http://upnp.org" target="_blank">UPnP forum</a>.</p>
<pre class="prettyprint">
ssdp_service_h service_handle;
error_code = ssdp_create_local_service(target, &service_handle);
if (error_code == SSDP_ERROR_NONE)
- prinf("Success in creating a service handle.");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in creating a service handle.");
</pre>
</li>
char* url = "192.168.0.2:1234";
if (ssdp_service_set_usn(service_handle, usn) == SSDP_ERROR_NONE)
- printf("Success in setting USN");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting USN");
if (ssdp_service_set_url(service_handle, url) == SSDP_ERROR_NONE)
- printf("Success in setting URL");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting URL");
</pre>
</li>
</ol>
<pre class="prettyprint">
error_code = ssdp_register_local_service(service_handle, __registered_cb, NULL);
if (error_code == SSDP_ERROR_NONE)
- prinf("Success in registering a local service.");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Success in registering a local service.");
</pre>
</li>
-<li>The callback defined in the <span style="font-family: Courier New,Courier,monospace">ssdp_register_local_service()</span> function is called when the service registration is finished:
+<li>The callback defined in the <code>ssdp_register_local_service()</code> function is called when the service registration is finished:
<pre class="prettyprint">
void
__registered_cb(ssdp_error_e result, ssdp_service_h ssdp_service, void *user_data)
{
- printf("Register result: %d\n", result);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Register result: %d\n", result);
}
</pre>
</li>
</ol>
</li>
-<li>When you no longer want to provide the local service, deregister it with the <span style="font-family: Courier New,Courier,monospace">ssdp_deregister_local_service()</span> function.
-<p>To destroy the local service handle, use the <span style="font-family: Courier New,Courier,monospace">ssdp_destroy_local_service()</span> function.</p>
+<li>When you no longer want to provide the local service, deregister it with the <code>ssdp_deregister_local_service()</code> function.
+<p>To destroy the local service handle, use the <code>ssdp_destroy_local_service()</code> function.</p>
<pre class="prettyprint">
ssdp_deregister_local_service(service_handle);
ssdp_destroy_local_service(service_handle);
<p>To search for available services on a network, use a service type or target information:</p>
<ol>
-<li>To start searching, use the <span style="font-family: Courier New,Courier,monospace">ssdp_start_browsing_service()</span> function.
-<p>The SSDP browser handle is stored in an <span style="font-family: Courier New,Courier,monospace">ssdp_browser_h</span> variable.</p>
+<li>To start searching, use the <code>ssdp_start_browsing_service()</code> function.
+<p>The SSDP browser handle is stored in an <code>ssdp_browser_h</code> variable.</p>
<pre class="prettyprint">
ssdp_browser_h browser_handle;
error_code = ssdp_start_browsing_service(target, &browser_handle, __found_cb, NULL);
if (error_code == SSDP_ERROR_NONE)
- prinf("Start browsing");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Start browsing");
</pre>
</li>
-<li>The callback defined in the <span style="font-family: Courier New,Courier,monospace">ssdp_start_browsing_service()</span> function is called when the remote service becomes available or unavailable:
+<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);
- printf("state: %s\n", state==SSDP_SERVICE_STATE_AVAILABLE ? "AVAILABLE":"UNAVAILABLE");
- printf("usn: %s\n", usn);
- printf("url: %s\n", url);
+ 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);
}
</pre>
</li>
<p>This feature is supported in mobile applications only.</p>
-<p class="figure">Figure: Service Adaptor structure</p>
-<p style="text-align:center;"><img alt="Service Adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
+
<p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service Adaptor uses 2 path types:</p>
<ul>
<p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O" and "/folder1" is "2JI32UNJDWQEQWQWEADSSAD").</p>
</li>
</ul>
+
+<p align="center"><strong>Figure: Service Adaptor structure</strong></p>
+<p style="text-align:center;"><img alt="Service Adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
<h2 id="adaptors" name="adaptors">Available Adaptors</h2>
<p>This adaptor manages contact information in the Contact server, including the contact profiles and service registration information. It allows you to:</p>
<ul>
<li>Reset contact information in the Contact server and upload native contact information of the device to the server.</li>
- <li>Synchronize native contact information of the device with the Contact server according to the <span style="font-family: Courier New,Courier,monospace">[type]</span> field of each contact.</li>
+ <li>Synchronize native contact information of the device with the Contact server according to the <code>[type]</code> field of each contact.</li>
<li>Get contact profiles and service registration information.</li>
<li>Set and update the device profile in the server.</li>
<li>Upload and delete profile image meta in the File server and set the my profile image to the Profile server.</li>
<p>To start a plugin, use the following process:</p>
-<ol><li><a href="#prerequisites">Create a Service Adaptor</a> with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function.</li>
-<li>With a valid Service Adaptor handler, <a href="#Starting_up">iterate through all installed plugins</a> with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_foreach_plugin()</span> function.</li>
-<li>Inside the callback (invoked for each plugin), get the <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> value, which is passed to the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create_plugin()</span> function.</li>
-<li>Request a start initialization for the service plugin with the <span style="font-family: Courier New,Courier,monospace">service_plugin_start()</span> function.</li></ol>
+<ol><li><a href="#prerequisites">Create a Service Adaptor</a> with the <code>service_adaptor_create()</code> function.</li>
+<li>With a valid Service Adaptor handler, <a href="#Starting_up">iterate through all installed plugins</a> with the <code>service_adaptor_foreach_plugin()</code> function.</li>
+<li>Inside the callback (invoked for each plugin), get the <code>plugin_uri</code> value, which is passed to the <code>service_adaptor_create_plugin()</code> function.</li>
+<li>Request a start initialization for the service plugin with the <code>service_plugin_start()</code> function.</li></ol>
-<p>The following example starts all installed Auth and Storage plugins appending each <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> to the <span style="font-family: Courier New,Courier,monospace">list</span> object:</p>
+<p>The following example starts all installed Auth and Storage plugins appending each <code>plugin_uri</code> to the <code>list</code> object:</p>
<pre class="prettyprint">
bool
_plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data);
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;
<p>To enable your application to use the Service Adaptor functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a> API, include the <span style="font-family: Courier New,Courier,monospace"><service_adaptor_client.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a> API, include the <code><service_adaptor_client.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <service_adaptor_client.h>
</pre>
</li>
<li>
-<p>Create a Service Adaptor handle using the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function:</p>
+<p>Create a Service Adaptor handle using the <code>service_adaptor_create()</code> function:</p>
<pre class="prettyprint">
static service_adaptor_h service_adaptor;
</pre>
</li>
<li>
-<p>When no longer needed, destroy the Service Adaptor handle and release all its resources with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_destroy()</span> function:</p>
+<p>When no longer needed, destroy the Service Adaptor handle and release all its resources with the <code>service_adaptor_destroy()</code> function:</p>
<pre class="prettyprint">
static void
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 */
<ol>
<li>
-<p>Retrieve the list of files using the <span style="font-family: Courier New,Courier,monospace">service_storage_get_file_list()</span> function with the storage service plugin handle as the first parameter and the file list callback as the third parameter:</p>
+<p>Retrieve the list of files using the <code>service_storage_get_file_list()</code> function with the storage service plugin handle as the first parameter and the file list callback as the third parameter:</p>
<pre class="prettyprint">
void
plugin_get_file_list(service_plugin_h plugin)
</li>
<li>
-<p>Define the file list callback. In the callback, iterate through the list using the <span style="font-family: Courier New,Courier,monospace">service_storage_file_list_foreach_file()</span> function with the file callback as the second parameter. The file callback is called separately for each file in the list.</p>
+<p>Define the file list callback. In the callback, iterate through the list using the <code>service_storage_file_list_foreach_file()</code> function with the file callback as the second parameter. The file callback is called separately for each file in the list.</p>
<pre class="prettyprint">
/* Handle the returned file list */
static void
</li>
<li>
-<p>Define the file callback. In the callback, use the <span style="font-family: Courier New,Courier,monospace">service_storage_file_XXX()</span> functions to retrieve information about the current file.</p>
+<p>Define the file callback. In the callback, use the <code>service_storage_file_XXX()</code> functions to retrieve information about the current file.</p>
<pre class="prettyprint">
/* Handle a file from the file list */
static bool
<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;
<h2 id="File_remove" name="File_remove">Removing Files</h2>
-<p>To remove a file from the storage, use the <span style="font-family: Courier New,Courier,monospace">service_storage_remove()</span> function:</p>
+<p>To remove a file from the storage, use the <code>service_storage_remove()</code> function:</p>
<pre class="prettyprint">
/* Handle the results of removing the file */
<p>All of the above are used when you <a href="#send">send a transmission</a>.</p>
<p>The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.</p>
-<p class="figure">Figure: Smart card service architecture</p>
+<p align="center"><strong>Figure: Smart card service architecture</strong></p>
<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>
<p>The Smartcard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
<li>The "get version" function does not exist. In Tizen, version management is not performed through a function.</li>
<li>Allocation style differs dramatically.
The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen Smartcard API does not follow this allocation style.</li>
-<li>For the <span style="font-family: Courier New,Courier,monospace;">SE Service</span> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In some Tizen devices, after a specified time, the screen is automatically switched off and the CPU goes to the resting state. If this occurs during communication with the SE using the Smartcard API, the API may not function normally.
+<li>For the <code>SE Service</code> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
+
+ <div class="note">
+ <strong>Note</strong>
+ In some Tizen devices, after a specified time, the screen is automatically switched off and the CPU goes to the resting state. If this occurs during communication with the SE using the Smartcard API, the API may not function normally.
<p>To avoid the screen switching off and the CPU going to the resting state, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API to lock the device CPU (not the display):</p>
<pre class="prettyprint">
/* Input your Smartcard API code */
device_power_release_lock(POWER_LOCK_CPU);
</pre>
- </td>
- </tr>
- </tbody>
-</table>
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the smart card functionality:</p>
<ol>
<li>
-<p>To use the Smartcard API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Smartcard API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/secureelement</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Smartcard API, include the <span style="font-family: Courier New,Courier,monospace"><smartcard.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Smartcard API, include the <code><smartcard.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <smartcard.h>
</pre>
</pre>
</li>
-<li><p>Retrieve the available readers with the <span style="font-family: Courier New,Courier,monospace;">smartcard_get_readers()</span> function:</p>
+<li><p>Retrieve the available readers with the <code>smartcard_get_readers()</code> function:</p>
<pre class="prettyprint">
int pLength;
int *phReaders = NULL;
<p>To manage a reader:</p>
<ol><li>
-<p>Retrieve the name of the reader with the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_get_name()</span> function:</p>
+<p>Retrieve the name of the reader with the <code>smartcard_reader_get_name()</code> function:</p>
<pre class="prettyprint">
int ret;
int reader = phReaders[0]; /* Get the reader using smartcard_get_readers() */
</pre>
</li>
-<li><p>Before establishing a session, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_is_secure_element_present()</span> function to make sure that the SE is present in the reader:</p>
+<li><p>Before establishing a session, use the <code>smartcard_reader_is_secure_element_present()</code> function to make sure that the SE is present in the reader:</p>
<pre class="prettyprint">
bool is_present = false;
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>
-<li><p>Open a session to connect to the SE in the reader using the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_open_session()</span> function.</p>
-<p>When you no longer need the reader, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_close_sessions()</span> function to close all sessions opened on the specific reader.</p>
+<li><p>Open a session to connect to the SE in the reader using the <code>smartcard_reader_open_session()</code> function.</p>
+<p>When you no longer need the reader, use the <code>smartcard_reader_close_sessions()</code> function to close all sessions opened on the specific reader.</p>
<pre class="prettyprint">
int session;
ret = smartcard_reader_open_session(reader, &session);
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");
}
dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_select_next failed");
}
</pre>
-<p>To get a response for the selection command, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_channel_get_select_response()</span> function:</p>
+<p>To get a response for the selection command, use the <code>smartcard_channel_get_select_response()</code> function:</p>
<pre class="prettyprint">
int i;
int ret;
dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit failed");
}
</pre>
-<p>To get a response for the transmission, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_channel_transmit_retrieve_response()</span> function:</p>
+<p>To get a response for the transmission, use the <code>smartcard_channel_transmit_retrieve_response()</code> function:</p>
<pre class="prettyprint">
int i;
unsigned char * ptransmitResponse;
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;
<p>The following figure illustrates the Telephony Service and APIs.</p>
- <p class="figure">Figure: Telephony APIs and Telephony Service</p>
+ <p align="center"><strong>Figure: Telephony APIs and Telephony Service</strong></p>
<p align="center"><img alt="Telephony APIs and Telephony Service" src="../../images/telephony.png" /></p>
<h2 id="call" name="call">Call Information</h2>
<p>The Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) provides the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_preferred_voice_subscription()</span>
-<p>Gets the current value for the preferred voice call subscription. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_call_preferred_voice_subs_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#gafbb8572dabc68ea7cdb93a4eb8f9c719">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#gafbb8572dabc68ea7cdb93a4eb8f9c719">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span>
+<li><code>telephony_call_get_preferred_voice_subscription()</code>
+<p>Gets the current value for the preferred voice call subscription. It returns one of the <
code>telephony_call_preferred_voice_subs_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#gafbb8572dabc68ea7cdb93a4eb8f9c719">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#gafbb8572dabc68ea7cdb93a4eb8f9c719">wearable</a> applications).</p></li>
+<li><code>telephony_call_get_call_list()</code>
<p>Gets the list of the current call. It returns the current call count and the call handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span>
+<li><code>telephony_call_release_call_list()</code>
<p>Releases the list allocated to the call handle. When the call handle is no longer needed, this function must be called to free the handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_handle_id()</span>
+<li><code>telephony_call_get_handle_id()</code>
<p>Gets the call handle ID.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_number()</span>
+<li><code>telephony_call_get_number()</code>
<p>Gets the call number.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_type()</span>
-<p>Gets the call type. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_call_type_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga7fd22fc9506f04744c0672a3bb2d6197">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga7fd22fc9506f04744c0672a3bb2d6197">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_status()</span>
-<p>Gets the call status. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_call_status_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga57063fd38cbd104003151f511847e8ba">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga57063fd38cbd104003151f511847e8ba">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_direction()</span>
-<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_call_direction_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga821d2e9727a0cdab601f55f2e286af90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga821d2e9727a0cdab601f55f2e286af90">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_conference_status()</span>
-<p>Determines whether the call is conference call. It returns <span style="font-family: Courier New,Courier,monospace">true</span> for a conference call or <span style="font-family: Courier New,Courier,monospace">false</span> for a single call.</p></li></ul>
+<li><code>telephony_call_get_type()</code>
+<p>Gets the call type. It returns one of the <
code>telephony_call_type_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga7fd22fc9506f04744c0672a3bb2d6197">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga7fd22fc9506f04744c0672a3bb2d6197">wearable</a> applications).</p></li>
+<li><code>telephony_call_get_status()</code>
+<p>Gets the call status. It returns one of the <
code>telephony_call_status_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga57063fd38cbd104003151f511847e8ba">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga57063fd38cbd104003151f511847e8ba">wearable</a> applications).</p></li>
+<li><code>telephony_call_get_direction()</code>
+<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <
code>telephony_call_direction_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga821d2e9727a0cdab601f55f2e286af90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#ga821d2e9727a0cdab601f55f2e286af90">wearable</a> applications).</p></li>
+<li><code>telephony_call_get_conference_status()</code>
+<p>Determines whether the call is conference call. It returns <code>true</code> for a conference call or <code>false</code> for a single call.</p></li></ul>
-<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+<p>To get call state change notifications, the application must register for the notifications with the <code>telephony_set_noti_cb()</code> function, by specifying the notification ID.</p>
<p>The following table defines the available notification IDs.</p>
+ <p align="center" class="Table"><strong>Table: Call information notification IDs</strong></p>
<table>
- <caption>
- Table: Call information notification IDs
- </caption>
<tbody>
<tr>
<th>Change in state</th>
</tr>
<tr>
<td>Voice status idle</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</code></td>
</tr>
<tr>
<td>Voice status active</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</code></td>
</tr>
<tr>
<td>Voice status held</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</code></td>
</tr>
<tr>
<td>Voice status dialing</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</code></td>
</tr>
<tr>
<td>Voice status alerting</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</code></td>
</tr>
<tr>
<td>Voice status incoming</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</span></td>
+ <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</code></td>
</tr>
<tr>
<td>Video status idle</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</span></td>
+ <td><code>TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</code></td>
</tr>
<tr>
<td>Video status active</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</span></td>
+ <td><code>TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</code></td>
</tr>
<tr>
<td>Video status dialing</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</span></td>
+ <td><code>TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</code></td>
</tr>
<tr>
<td>Video status alerting</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</span></td>
+ <td><code>TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</code></td>
</tr>
<tr>
<td>Video status incoming</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</span></td>
+ <td><code>TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</code></td>
</tr>
<tr>
<td>Preferred voice subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</span></td>
+ <td><code>TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</code></td>
</tr>
</tbody>
</table>
<h2 id="sim" name="sim">SIM Information</h2>
<p>The SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>
+<ul><li><code>telephony_sim_get_icc_id()</code>
<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>
+<li><code>telephony_sim_get_operator()</code>
<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>
+<li><code>telephony_sim_get_msin()</code>
<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>
+<li><code>telephony_sim_get_spn()</code>
<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>
+<li><code>telephony_sim_get_cphs_operator_name()</code>
<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>
+<li><code>telephony_sim_get_subscriber_number()</code>
<p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>
-<p>Gets the state of the SIM. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>
+<li><code>telephony_sim_get_state()</code>
+<p>Gets the state of the SIM. It returns one of the <
code>telephony_sim_state_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p></li>
+<li><code>telephony_sim_is_changed()</code>
<p>Checks whether the current SIM card differs from the previous SIM card.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_application_list()</span>
-<p>Gets the application list on the UICC. It returns one of the masking values (<
span style="font-family: Courier New,Courier,monospace">telephony_sim_application_type_e</span> in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga9b13e5521ca5578a377455a16e721c86">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga9b13e5521ca5578a377455a16e721c86">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_id()</span>
+<li><code>telephony_sim_get_application_list()</code>
+<p>Gets the application list on the UICC. It returns one of the masking values (<
code>telephony_sim_application_type_e</code> in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga9b13e5521ca5578a377455a16e721c86">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga9b13e5521ca5578a377455a16e721c86">wearable</a> applications).</p></li>
+<li><code>telephony_sim_get_subscriber_id()</code>
<p>Gets the subscriber ID as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_lock_state()</span>
+<li><code>telephony_sim_get_lock_state()</code>
<p>Gets the SIM card lock state. If the SIM card is locked, you can use this function to retrieve the lock state.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_group_id1()</span>
+<li><code>telephony_sim_get_group_id1()</code>
<p>Gets the Group Identifier Level 1 (GID1) embedded in the SIM card.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_call_forwarding_indicator_state()</span>
-<p>Gets the call forwarding indicator state of the SIM. If the state is <span style="font-family: Courier New,Courier,monospace">true</span>, incoming call is forwarded to the selected number.</p></li>
+<li><code>telephony_sim_get_call_forwarding_indicator_state()</code>
+<p>Gets the call forwarding indicator state of the SIM. If the state is <code>true</code>, incoming call is forwarded to the selected number.</p></li>
</ul>
-<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+<p>To get SIM state change notifications, the application must register for the notifications with the <code>telephony_set_noti_cb()</code> function, by specifying the notification ID.</p>
<p>The following table defines the available notification IDs.</p>
-<table>
- <caption>
- Table: SIM information notification IDs
- </caption>
+ <p align="center" class="Table"><strong>Table: SIM information notification IDs</strong></p>
+<table>
<tbody>
<tr>
<th>Change in state</th>
</tr>
<tr>
<td>SIM state</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td>
+ <td><code>TELEPHONY_NOTI_SIM_STATUS</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <code>TELEPHONY_SIM_STATE_AVAILABLE</code>.
+ </div>
<h2 id="net" name="net">Network Information</h2>
<p>The Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>
+<ul><li><code>telephony_network_get_lac()</code>
<p>Gets the LAC (Location Area Code) of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>
+<li><code>telephony_network_get_cell_id()</code>
<p>Gets the cell ID of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>
+<li><code>telephony_network_get_rssi()</code>
<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>
-<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>
+<li><code>telephony_network_get_roaming_status()</code>
+<p>Gets the roaming state (<code>true</code> = roaming and <code>false</code> = not roaming).</p></li>
+<li><code>telephony_network_get_mcc()</code>
<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>
+<li><code>telephony_network_get_mnc()</code>
<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>
+<li><code>telephony_network_get_network_name()</code>
<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>
-<p>Gets the network service type of the current registered network. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga250d1e41f6ab9b949c46c842a7959329">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga250d1e41f6ab9b949c46c842a7959329">wearable</a> applications). </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>
-<p>Gets the current network state of the telephony service. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_ps_type()</span>
-<p>Gets the packet service type of the currently registered network. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_ps_type_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gac98431df26c117a457f4fbde5d4b1f3c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gac98431df26c117a457f4fbde5d4b1f3c">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name_option()</span>
-<p>Gets the network name option of the currently registered network. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_name_option_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae2ffe560f05c886539f5f7d2d32f2870">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae2ffe560f05c886539f5f7d2d32f2870">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_data_subscription()</span>
-<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_default_data_subs_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga6c9c05c55d8059a64cc4d666cf7dabef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga6c9c05c55d8059a64cc4d666cf7dabef">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_subscription()</span>
-<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_default_subs_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga8aecec279bb07cc0a6251f4210edf2dd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga8aecec279bb07cc0a6251f4210edf2dd">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_selection_mode()</span>
-<p>Gets the network selection mode. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_network_selection_mode_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gad5ec5e1e6b610f7ce7f03f75d710b548">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gad5ec5e1e6b610f7ce7f03f75d710b548">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_tac()</span>
+<li><code>telephony_network_get_type()</code>
+<p>Gets the network service type of the current registered network. It returns one of the <
code>telephony_network_type_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga250d1e41f6ab9b949c46c842a7959329">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga250d1e41f6ab9b949c46c842a7959329">wearable</a> applications). </p></li>
+<li><code>telephony_network_get_service_state()</code>
+<p>Gets the current network state of the telephony service. It returns one of the <
code>telephony_network_service_state_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_ps_type()</code>
+<p>Gets the packet service type of the currently registered network. It returns one of the <
code>telephony_network_ps_type_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gac98431df26c117a457f4fbde5d4b1f3c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gac98431df26c117a457f4fbde5d4b1f3c">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_network_name_option()</code>
+<p>Gets the network name option of the currently registered network. It returns one of the <
code>telephony_network_name_option_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae2ffe560f05c886539f5f7d2d32f2870">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae2ffe560f05c886539f5f7d2d32f2870">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_default_data_subscription()</code>
+<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <
code>telephony_network_default_data_subs_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga6c9c05c55d8059a64cc4d666cf7dabef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga6c9c05c55d8059a64cc4d666cf7dabef">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_default_subscription()</code>
+<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <
code>telephony_network_default_subs_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga8aecec279bb07cc0a6251f4210edf2dd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#ga8aecec279bb07cc0a6251f4210edf2dd">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_selection_mode()</code>
+<p>Gets the network selection mode. It returns one of the <
code>telephony_network_selection_mode_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gad5ec5e1e6b610f7ce7f03f75d710b548">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gad5ec5e1e6b610f7ce7f03f75d710b548">wearable</a> applications).</p></li>
+<li><code>telephony_network_get_tac()</code>
<p>Gets the TAC (Tracking Area Code) of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_system_id()</span>
+<li><code>telephony_network_get_system_id()</code>
<p>Gets the system ID of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_id()</span>
+<li><code>telephony_network_get_network_id()</code>
<p>Gets the network ID of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_base_station_id()</span>
+<li><code>telephony_network_get_base_station_id()</code>
<p>Gets the base station ID of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_base_station_latitude()</span>
+<li><code>telephony_network_get_base_station_latitude()</code>
<p>Gets the base station latitude of the current location.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_base_station_longitude()</span>
+<li><code>telephony_network_get_base_station_longitude()</code>
<p>Gets the base station longitude of the current location.</p></li>
</ul>
-<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+<p>To get network-related information change notifications, the application must register for the notifications with the <code>telephony_set_noti_cb()</code> function, by specifying the notification ID.</p>
<p>The following table defines the available notification IDs.</p>
-
+ <p align="center" class="Table"><strong>Table: Network information notification IDs</strong></p>
<table>
- <caption>
- Table: Network information notification IDs
- </caption>
<tbody>
<tr>
<th>Change in state</th>
</tr>
<tr>
<td>Network service state</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_SERVICE_STATE</code></td>
</tr>
<tr>
<td>Cell ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_CELLID</code></td>
</tr>
<tr>
<td>Roaming status</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</code></td>
</tr>
<tr>
<td>Signal strength</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</code></td>
</tr>
<tr>
<td>Network name</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_NETWORK_NAME</code></td>
</tr>
<tr>
<td>Packet-switched type</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_PS_TYPE</code></td>
</tr>
<tr>
<td>Default data subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</code></td>
</tr>
<tr>
<td>Default subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</code></td>
</tr>
<tr>
<td>Location Area Code</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_LAC</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_LAC</code></td>
</tr>
<tr>
<td>Tracking Area Code</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_TAC</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_TAC</code></td>
</tr>
<tr>
<td>System ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SYSTEM_ID</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_SYSTEM_ID</code></td>
</tr>
<tr>
<td>Network ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_ID</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_NETWORK_ID</code></td>
</tr>
<tr>
<td>Base station ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_BS_ID</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_BS_ID</code></td>
</tr>
<tr>
<td>Base station latitude</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_BS_LATITUDE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_BS_LATITUDE</code></td>
</tr>
<tr>
<td>Base station longitude</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_BS_LONGITUDE</span></td>
+ <td><code>TELEPHONY_NOTI_NETWORK_BS_LONGITUDE</code></td>
</tr>
</tbody>
</table>
<h2 id="modem" name="modem">Modem Information</h2>
<p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>
+<ul><li><code>telephony_modem_get_imei()</code>
<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_power_status()</span>
-<p>Gets the power status of the modem. It returns one of the <
span style="font-family: Courier New,Courier,monospace">telephony_modem_power_status_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_meid()</span>
+<li><code>telephony_modem_get_power_status()</code>
+<p>Gets the power status of the modem. It returns one of the <
code>telephony_modem_power_status_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">wearable</a> applications).</p></li>
+<li><code>telephony_modem_get_meid()</code>
<p>Gets the MEID (Mobile Equipment Identifier) of a mobile phone. You get the MEID as a string, which needs to be freed by the application.</p></li>
</ul>
<p>To enable your application to use the telephony information functionality:</p>
<ol>
<li>
-<p>To use the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p>
+<p>To use the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/telephony</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Telephony Information API, include the <span style="font-family: Courier New,Courier,monospace"><telephony.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Telephony Information API, include the <code><telephony.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <telephony.h>
</pre></li>
<li>
-<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in the <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span> header file:</p>
+<p>To create a telephony handle, use the <code>telephony_handle_list_s</code> structure that holds the handles for all the subscriptions defined in the <code>telephony_common.h</code> header file:</p>
<pre class="prettyprint">
struct _telephony_handle_list_s {
</pre>
</li>
<li>
-<p>Get the telephony handle with the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer as a parameter to get the telephony handles for all subscriptions.</p>
-<p>In a multi-SIM scenario, you must define which subscription (SIM1 or SIM2) you need, in case the application is related to calling, networks, modems, or SIM cards. The telephony feature provides a function to create handles for different subscriptions. For example, there are 2 handles in a dual SIM device. In this case, <span style="font-family: Courier New,Courier,monospace">handle[0]</span> means the primary SIM and <span style="font-family: Courier New,Courier,monospace">handle[1]</span> means the secondary SIM. You can send requests to specific subscriptions using the telephony handle for that subscription.</p>
+<p>Get the telephony handle with the <code>telephony_init()</code> function. Pass the <code>telephony_handle_list_s</code> structure pointer as a parameter to get the telephony handles for all subscriptions.</p>
+<p>In a multi-SIM scenario, you must define which subscription (SIM1 or SIM2) you need, in case the application is related to calling, networks, modems, or SIM cards. The telephony feature provides a function to create handles for different subscriptions. For example, there are 2 handles in a dual SIM device. In this case, <code>handle[0]</code> means the primary SIM and <code>handle[1]</code> means the secondary SIM. You can send requests to specific subscriptions using the telephony handle for that subscription.</p>
<pre class="prettyprint">
telephony_handle_list_s handle_list;
{
int i;
- ret = telephony_init(&handle_list); /* In case of single SIM, you get only one handle */
+ /* In case of single SIM, you get only one handle */
+ ret = telephony_init(&handle_list);
if (ret != TELEPHONY_ERROR_NONE) {
/* Error handling */
}
</pre></li>
-<li><p>When no longer needed, free the telephony handle with the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function:</p>
+<li><p>When no longer needed, free the telephony handle with the <code>telephony_deinit()</code> function:</p>
<pre class="prettyprint">
void
tutorial_telephony_deinit()
<h3 name="call_list" id="call_list">Getting the Current Call List</h3>
<p>To get the current call list:</p>
-<ol><li><p>Get the current call handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span> function.</p>
+<ol><li><p>Get the current call handle by using the <code>telephony_call_get_call_list()</code> function.</p>
<p>After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, and conference status).</p>
<pre class="prettyprint">
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",
</pre>
</li>
-<li><p>When no longer needed, free the call handle with the <span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span> function:</p>
+<li><p>When no longer needed, free the call handle with the <code>telephony_call_release_call_list()</code> function:</p>
<pre class="prettyprint">
void
tutorial_telephony_call_release_call_list()
<h3 name="change_noti" id="change_noti">Receiving Change Notifications for the Call State</h3>
-<p>To receive notifications of call state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
-<p>You have to register the callback separately for each call state, using the applicable <
span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_XXX</span> or <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_XXX</span> notification value in the second parameter of the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">telephony_noti_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
-<p>When the notifications are no longer needed, deregister the callback for each call state with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function.</p>
+<p>To receive notifications of call state changes asynchronously, register a callback with the <code>telephony_set_noti_cb()</code> function.</p>
+<p>You have to register the callback separately for each call state, using the applicable <
code>TELEPHONY_NOTI_VOICE_CALL_XXX</code> or <code>TELEPHONY_NOTI_VIDEO_CALL_XXX</code> notification value in the second parameter of the <code>telephony_set_noti_cb()</code> function. The available values are defined in the <code>telephony_noti_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
+<p>When the notifications are no longer needed, deregister the callback for each call state with the <code>telephony_unset_noti_cb()</code> function.</p>
<p>The following example registers callbacks for various voice call states:</p>
};
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",
<h3 name="sim_state" id="sim_state">Getting the SIM Card State</h3>
-<p>Before retrieving information from the SIM card, retrieve the card state. You can get SIM-related information only if the card state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
+<p>Before retrieving information from the SIM card, retrieve the card state. You can get SIM-related information only if the card state is <code>TELEPHONY_SIM_STATE_AVAILABLE</code>.</p>
-<p>To get the state, call the <
span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the SIM card state in its second parameter, using the values of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p>
+<p>To get the state, call the <
code>telephony_sim_get_state()</code> function. It returns the SIM card state in its second parameter, using the values of the <code>telephony_sim_state_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p>
<pre class="prettyprint">
void
{
telephony_sim_state_e state;
ret = telephony_sim_get_state(handle_list.handle[0], &state);
- if (ret != TELEPHONY_ERROR_NONE)
- {
+ if (ret != TELEPHONY_ERROR_NONE) {
/* Error handling */
return -1;
}
<h3 name="sim_noti" id="sim_noti">Receiving Change Notifications for the SIM Card State</h3>
-<p>To receive notifications of SIM card state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The callback returns the SIM state in its third parameter.</p>
-<p>When the notifications are no longer needed, deregister the callback with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID as a parameter.</p>
+<p>To receive notifications of SIM card state changes asynchronously, register a callback with the <code>telephony_set_noti_cb()</code> function. The callback returns the SIM state in its third parameter.</p>
+<p>When the notifications are no longer needed, deregister the callback with the <code>telephony_unset_noti_cb()</code> function by passing the notification ID as a parameter.</p>
<pre class="prettyprint">
<h3 name="sim_info" id="sim_info">Getting SIM Card Details</h3>
-<p>If the current SIM card state is <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, you can call various <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_XXX()</span> functions to retrieve the SIM card details: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber number, subscriber ID, and application list.</p>
+<p>If the current SIM card state is <code>SIM_STATE_AVAILABLE</code>, you can call various <code>telephony_sim_get_XXX()</code> functions to retrieve the SIM card details: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber number, subscriber ID, and application list.</p>
-<p>If the functions return <span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>, the requested SIM information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
+<p>If the functions return <code>SIM_ERROR_NONE</code>, the requested SIM information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
<p>For example, to get ICC-ID information from a SIM card:</p>
<h3 name="network_state" id="network_state">Getting the Network Service State</h3>
-<p>Before retrieving information about the current cellular network and telephony service, retrieve the network service state. You can get the related information only if the service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
-<p>To get the state, call the <
span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span> function. It returns the network service state in its second parameter, using the values of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
+<p>Before retrieving information about the current cellular network and telephony service, retrieve the network service state. You can get the related information only if the service state is <code>TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</code>.</p>
+<p>To get the state, call the <
code>telephony_network_get_service_state()</code> function. It returns the network service state in its second parameter, using the values of the <code>telephony_network_service_state_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
<pre class="prettyprint">
{
telephony_network_service_state_e network_service_state;
int ret;
- ret = telephony_network_get_service_state(handle_list.handle[0], &network_service_state);
- if (ret != TELEPHONY_ERROR_NONE)
- {
+ ret = telephony_network_get_service_state(handle_list.handle[0],
+ &network_service_state);
+ if (ret != TELEPHONY_ERROR_NONE) {
/* Error handling */
return -1;
<h3 id="network_noti" name="network_noti">Receiving Change Notifications for the Network Service State</h3>
-<p>To receive notifications of network service state changes asynchronously, register a callback with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The callback returns the service state in its third parameter.</p>
-<p>You have to register the callback separately for each service state (for example, Cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state), using the applicable <
span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_XXX</span> notification value in the second parameter of the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">telephony_noti_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
-<p>When the notifications are no longer needed, deregister the callback for each service state with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID as a parameter.</p>
+<p>To receive notifications of network service state changes asynchronously, register a callback with the <code>telephony_set_noti_cb()</code> function. The callback returns the service state in its third parameter.</p>
+<p>You have to register the callback separately for each service state (for example, Cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state), using the applicable <
code>TELEPHONY_NOTI_NETWORK_XXX</code> notification value in the second parameter of the <code>telephony_set_noti_cb()</code> function. The available values are defined in the <code>telephony_noti_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications).</p>
+<p>When the notifications are no longer needed, deregister the callback for each service state with the <code>telephony_unset_noti_cb()</code> function by passing the notification ID as a parameter.</p>
<p>The following example registers a callback for the network service states:</p>
<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);
<h3 name="network_info" id="network_info">Getting Network Details</h3>
-<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, you can call various <span style="font-family: Courier New,Courier,monospace">telephony_network_get_XXX()</span> functions to retrieve the network details: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
-<p>If the functions return <span style="font-family: Courier New,Courier,monospace">TELEPHONY_ERROR_NONE</span>, the requested network information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
+<p>If the current network service state is <code>NETWORK_INFO_SERVICE_STATE_IN_SERVICE</code>, you can call various <code>telephony_network_get_XXX()</code> functions to retrieve the network details: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
+<p>If the functions return <code>TELEPHONY_ERROR_NONE</code>, the requested network information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
<p>For example, to get the cell ID and MNC information:</p>
<pre class="prettyprint">
<h2 id="modem_use" name="modem_use">Getting Modem Information</h2>
<p>To access information about the modem, use the Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications).</p>
-<p>You can call various <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_XXX()</span> functions to retrieve the modem details: IMEI and power status.</p>
-<p>If the functions return <span style="font-family: Courier New,Courier,monospace">TELEPHONY_ERROR_NONE</span>, the requested modem information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
+<p>You can call various <code>telephony_modem_get_XXX()</code> functions to retrieve the modem details: IMEI and power status.</p>
+<p>If the functions return <code>TELEPHONY_ERROR_NONE</code>, the requested modem information is received and stored in an output parameter. Free all returned variables when they are no longer needed.</p>
<p>For example, to get IMEI information:</p>
<pre class="prettyprint">
<p>This feature is supported in mobile applications only.</p>
-<p class="figure">Figure: USB host mode overview</p>
+<p align="center"><strong>Figure: USB host mode overview</strong></p>
<p align="center"><img src="../../images/usb_host_mode.png" alt="USB host mode" /></p>
<p>The main features of the USB Host API include:</p>
</ul>
<p>The following figure shows an overview of the USB host architecture.</p>
-<p class="figure">Figure: USB host architecture</p>
+<p align="center"><strong>Figure: USB host architecture</strong></p>
<p align="center"><img src="../../images/usb_host_architecture.png" alt="USB host architecture" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<li>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__USB__HOST__MODULE.html">USB Host</a> API does not require any Tizen privileges to be defined, instead the user is asked for confirmation when performing a potentially privileged operation.
<p align="center"><img src="../../images/usb_host_access.png" alt="USB Host access" /></p>
</li>
-<li>To use the functions and data types of the USB Host API, include the <span style="font-family: Courier New,Courier,monospace"><usb_host.h></span> header file in your application:
+<li>To use the functions and data types of the USB Host API, include the <code><usb_host.h></code> header file in your application:
<pre class="prettyprint">
#include <usb_host.h>
</pre>
usb_host_interface_get_endpoint(interface, 1, &out_ep);
</pre>
-<p>The second parameter in the <span style="font-family: Courier New,Courier,monospace">usb_host_interface_get_endpoint()</span> function is not the endpoint address but its index inside the interface.</p>
+<p>The second parameter in the <code>usb_host_interface_get_endpoint()</code> function is not the endpoint address but its index inside the interface.</p>
<p>Programs which are dedicated for one specific device often hardcode the interface index and endpoints numbers. More flexible programs must go through a list of interfaces in a configuration, check the basic interface information (such as class), and check the endpoints. After finding a suitable interface, they claim it before starting communication with any of its endpoints.</p>
<h2 id="transfer">Transferring Data</h2>
-<p>To transfer data, claim the interface with the <span style="font-family: Courier New,Courier,monospace">usb_host_claim_interface()</span> function. This operation does not involve any USB traffic, but allows you to exclusively reserve the interface as a system resource.</p>
+<p>To transfer data, claim the interface with the <code>usb_host_claim_interface()</code> function. This operation does not involve any USB traffic, but allows you to exclusively reserve the interface as a system resource.</p>
<p>After claiming the interface, you can send or receive data through it. Release the interface after use.</p>
<pre class="prettyprint">
unsigned char buffer [1024];
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>
<li>VPN manager
<p>You can create or initialize the tunnel interface for the VPN device with various functions. The application can use those functions to <a href="#get_param">get various tunnel details</a>, such as the tunnel ID and tunnel name, MTU for the tunnel interface, and connection statistics.</p>
<p>You can also <a href="#set_param">set various details</a>, such as the MTU for the tunnel interface, and the session name.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">vpnsvc_tun_s</span> structure contains detailed information about the tunnel interface, such as the ID, name, and MTU. The possible errors are defined with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#ga8d8e9c964218d7aad622115bb51491e8">vpnsvc_error_e</a> enumerator.</p>
+<p>The <
code>vpnsvc_tun_s</code> structure contains detailed information about the tunnel interface, such as the ID, name, and MTU. The possible errors are defined with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#ga8d8e9c964218d7aad622115bb51491e8">vpnsvc_error_e</a> enumerator.</p>
+<p align="center" class="Table"><strong>Table: Common macros</strong></p>
<table>
-<caption>Table: Common macros</caption>
<tbody>
<tr>
<th>Macro</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">_MAX_FILE_PATH_LEN</span></td>
+ <td><code>_MAX_FILE_PATH_LEN</code></td>
<td>Maximum file path length</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">_USER_SETTING_DEFAULT_MTU</span></td>
+ <td><code>_USER_SETTING_DEFAULT_MTU</code></td>
<td>Default MTU</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">_USER_SETTING_DEFAULT_SESSION</span></td>
+ <td><code>_USER_SETTING_DEFAULT_SESSION</code></td>
<td>Default session name</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">VPNSVC_IP4_STRING_LEN</span></td>
+ <td><code>VPNSVC_IP4_STRING_LEN</code></td>
<td>IPv4 address string length</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">VPNSVC_TUN_IF_NAME_LEN</span></td>
+ <td><code>VPNSVC_TUN_IF_NAME_LEN</code></td>
<td>Tunnel interface name length</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">VPNSVC_SESSION_STRING_LEN</span></td>
+ <td><code>VPNSVC_SESSION_STRING_LEN</code></td>
<td>Session name string length</td>
</tr>
</tbody>
<p>You can map the VPN profile and get details about the VPN service using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#gaef3a3f46336ee7e8c43dd16144b22ac5">vpnsvc_h</a> handle.</p>
<p>The VPN profile provides different functions for routing management, DNS management, and firewall management:</p>
<ul>
- <li>The <
span style="font-family: Courier New,Courier,monospace">vpnsvc_up()</span> function is used to <a href="#config">set up the tunnel interface</a> by setting the default route and DNS parameters.</li>
- <li>The <
span style="font-family: Courier New,Courier,monospace">vpnsvc_block_networks()</span> function is used to <a href="#block">block network traffic</a> by creating a route parameter for allowed VPN and original interface routes.</li>
+ <li>The <
code>vpnsvc_up()</code> function is used to <a href="#config">set up the tunnel interface</a> by setting the default route and DNS parameters.</li>
+ <li>The <
code>vpnsvc_block_networks()</code> function is used to <a href="#block">block network traffic</a> by creating a route parameter for allowed VPN and original interface routes.</li>
</ul>
</li>
<li>VPN statistics
<p>The VPN service allows you to <a href="#read">track data transfer information</a>. Use the VPN statistics to gather and reset statistics on network usage, such as the size of the sent or received data, in bytes:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">vpnsvc_read()</span> function is used to read the data from tunnel interface in a specified time period.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">vpnsvc_write()</span> function is used to write data to a tunnel file descriptor with a specific size.</li>
+<li>The <code>vpnsvc_read()</code> function is used to read the data from tunnel interface in a specified time period.</li>
+<li>The <code>vpnsvc_write()</code> function is used to write data to a tunnel file descriptor with a specific size.</li>
</ul></li>
</ul>
<ol>
-<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html">VPN Service</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:
+<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html">VPN Service</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<privilege>http://developer.samsung.com/tizen/vpnservice</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the VPN Service API, include the <span style="font-family: Courier New,Courier,monospace"><vpn_service.h></span> header file in your application:
+<li>To use the functions and data types of the VPN Service API, include the <code><vpn_service.h></code> header file in your application:
<pre class="prettyprint">
#include <vpn_service.h>
</pre>
</li>
-<li>To be able to use all VPN functions, you must create a handle that contains information about the VPN. At the beginning, create a <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#gaef3a3f46336ee7e8c43dd16144b22ac5">vpnsvc_h</a> type variable, which is a <span style="font-family: Courier New,Courier,monospace">void*</span> that stores the VPN handle.
+<li>To be able to use all VPN functions, you must create a handle that contains information about the VPN. At the beginning, create a <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#gaef3a3f46336ee7e8c43dd16144b22ac5">vpnsvc_h</a> type variable, which is a <code>void*</code> that stores the VPN handle.
<pre class="prettyprint">
vpnsvc_h handle = NULL;
</pre>
</li>
-<li>Create the VPN handle using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_init()</span> function that allows you to obtain the VPN state and data transfer information:
+<li>Create the VPN handle using the <code>vpnsvc_init()</code> function that allows you to obtain the VPN state and data transfer information:
<pre class="prettyprint">
char *name = TEST_VPN_IF_NAME;
int ret = VPNSVC_ERROR_NONE;
printf("vpnsvc_init failed: %d\n", ret);
</pre>
</li>
-<li>When the VPN handle is no longer needed, destroy it using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_deinit()</span> function:
+<li>When the VPN handle is no longer needed, destroy it using the <code>vpnsvc_deinit()</code> function:
<pre class="prettyprint">
if (handle)
vpnsvc_deinit(handle);
<p>To get the interface parameters after successfully initializing the VPN service:</p>
<ul>
-<li>Get the tunnel file descriptor using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_get_tun_fd()</span> function:
+<li>Get the tunnel file descriptor using the <code>vpnsvc_get_tun_fd()</code> function:
<pre class="prettyprint">
int int_value;
printf("tun_fd: %d\n", int_value);
</pre>
</li>
-<li>Get the tunnel index using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_get_tun_index()</span> function:
+<li>Get the tunnel index using the <code>vpnsvc_get_tun_index()</code> function:
<pre class="prettyprint">
int int_value;
printf("tun_index: %d\n", int_value);
</pre>
</li>
-<li>Get the tunnel name using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_get_tun_name()</span> function:
+<li>Get the tunnel name using the <code>vpnsvc_get_tun_name()</code> function:
<pre class="prettyprint">
char* result_name = NULL;
int ret = VPNSVC_ERROR_NONE;
printf("tun_name: %s\n", result_name);
</pre>
</li>
-<li>Get the session for the tunnel interface using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_get_session()</span> function:
+<li>Get the session for the tunnel interface using the <code>vpnsvc_get_session()</code> function:
<pre class="prettyprint">
int ret = VPNSVC_ERROR_NONE;
char *get_session = NULL;
<p>To set the interface parameters:</p>
<ul>
-<li>Set the MTU configuration for the tunnel interface using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_set_mtu()</span> function. The MTU value is used when the user brings up the VPN interface using the VPN UP API.
+<li>Set the MTU configuration for the tunnel interface using the <code>vpnsvc_set_mtu()</code> function. The MTU value is used when the user brings up the VPN interface using the VPN UP API.
<pre class="prettyprint">
int ret;
printf("vpnsvc_set_mtu succeeded!\n");
</pre>
</li>
-<li>Set the session name for the tunnel interface using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_set_session()</span> function:
+<li>Set the session name for the tunnel interface using the <code>vpnsvc_set_session()</code> function:
<pre class="prettyprint">
char *set_session = "vpnsvc_test VPN Session";
int ret;
<p>To configure the interface:</p>
<ol>
-<li>Protect the underlying VPN traffic to be routed to the VPN itself by binding the socket to the underlying network interface, such as <span style="font-family: Courier New,Courier,monospace">wlan0</span>:
+<li>Protect the underlying VPN traffic to be routed to the VPN itself by binding the socket to the underlying network interface, such as <code>wlan0</code>:
<pre class="prettyprint">
int sock;
int ret;
</pre>
</li>
<li>Set up the tunnel interface.
-<p>The <span style="font-family: Courier New,Courier,monospace">vpnsvc_up()</span> function configures the VPN tunnel interface based on the configured parameters passed by the client application.</p>
-<p>To change the MTU parameter of the configured interface, the client application must invoke the <span style="font-family: Courier New,Courier,monospace">vpnsvc_set_mtu()</span> function that is used to set the MTU value. The client application must invoke the function before the <span style="font-family: Courier New,Courier,monospace">vpnsvc_up()</span> function call.</p>
+<p>The <code>vpnsvc_up()</code> function configures the VPN tunnel interface based on the configured parameters passed by the client application.</p>
+<p>To change the MTU parameter of the configured interface, the client application must invoke the <code>vpnsvc_set_mtu()</code> function that is used to set the MTU value. The client application must invoke the function before the <code>vpnsvc_up()</code> function call.</p>
<pre class="prettyprint">
int ret;
char local[VPNSVC_IP4_STRING_LEN] = {'\0',};
printf("vpnsvc_up succeeded!\n");
</pre>
</li>
-<li>Set down the tunnel interface, and remove it using the <span style="font-family: Courier New,Courier,monospace">vpnsvc_down()</span> function:
+<li>Set down the tunnel interface, and remove it using the <code>vpnsvc_down()</code> function:
<pre class="prettyprint">
int ret;
<div id="container"><div id="contents"><div class="content">
<h1>Web View</h1>
<p>The Web view features include accessing Web pages and Web content in your application.</p>
-<p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. The EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
+<p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. The EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <code>evas_*</code>, <code>elm_*</code>, and <code>eina_*</code>, are used to build up a complete application supporting Web browsing.</p>
<p>Use the Web features to create a simple Web browser:</p>
<ol>
<p>To enable your application to use the Web view functionality:</p>
<ol>
<li>
-<p>To use the Web API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Web API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<!--To launch another application conditionally-->
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the WebView API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><EWebKit.h></span> header file in your application:
+<li>To use the functions and data types of the WebView API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">wearable</a> applications), include the <code><EWebKit.h></code> header file in your application:
<pre class="prettyprint">
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <EWebKit.h>
#include <app.h>
</pre>
-<p>The sample browser created in this guide also requires the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Getopt.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eet.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eina.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Evas.h></span>, and <span style="font-family: Courier New,Courier,monospace;"><app.h></span> header files.</p>
+<p>The sample browser created in this guide also requires the <code><Ecore.h></code>, <code><Ecore_Evas.h></code>, <code><Ecore_Getopt.h></code>, <code><Eet.h></code>, <code><Eina.h></code>, <code><Elementary.h></code>, <code><Evas.h></code>, and <code><app.h></code> header files.</p>
</li>
-<li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, store the browser window data (including the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances) in the <span style="font-family: Courier New,Courier,monospace">Browser_window</span> data structure:
+<li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, store the browser window data (including the <code>Evas_Object</code> instances) in the <code>Browser_window</code> data structure:
<pre class="prettyprint">
struct _Browser_Window {
Evas_Object *elm_window;
}
</pre></li>
-<li>To create a window, call the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function in the <span style="font-family: Courier New,Courier,monospace">br_app_create()</span> life-cycle callback function:
+<li>To create a window, call the <code>window_create()</code> function in the <code>br_app_create()</code> life-cycle callback function:
<pre class="prettyprint">
window = window_create(NULL, 0, 0, EINA_FALSE);
</pre></li></ol>
<p>To create a window object:</p>
<ol>
-<li>To create a window object, use the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function:
+<li>To create a window object, use the <code>elm_win_add()</code> function:
<pre class="prettyprint">
static Browser_Window*
</pre></li>
<li>Add a smart callback to the window to handle the window deletion event.
-<p>In the callback, call the <span style="font-family: Courier New,Courier,monospace">window_close()</span> function for the object returned from the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function call.</p>
+<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
<p>Create the layout for the browser window. The layout contains 2 boxes:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">vertical_layout</span> contains the view object that displays the browser pages.</li>
-<li><span style="font-family: Courier New,Courier,monospace">horizontal_layout</span> is a top bar that contains the buttons used to move between browser pages.</li>
+<li><code>vertical_layout</code> contains the view object that displays the browser pages.</li>
+<li><code>horizontal_layout</code> is a top bar that contains the buttons used to move between browser pages.</li>
</ul>
-<p class="figure">Figure: Window layout</p>
+<p align="center"><strong>Figure: Window layout</strong></p>
<p align="center"><img alt="Window layout" src="../../images/window_layout.png"/></p>
<ol>
<li><p>Create new boxes:</p>
<ol type="a">
-<li>Add the boxes using the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function.</li>
-<li>Set the hints for the object weight using the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function.
-<p>The <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> are macro definitions for the values 1.0 and -1.0.</p></li>
-<li>Add the <span style="font-family: Courier New,Courier,monospace">vertical_layout</span> box as a resize subobject of the window using the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.
+<li>Add the boxes using the <code>elm_box_add()</code> function.</li>
+<li>Set the hints for the object weight using the <code>evas_object_size_hint_weight_set()</code> function.
+<p>The <code>EVAS_HINT_EXPAND</code> and <code>EVAS_HINT_FILL</code> are macro definitions for the values 1.0 and -1.0.</p></li>
+<li>Add the <code>vertical_layout</code> box as a resize subobject of the window using the <code>elm_win_resize_object_add()</code> function.
<p>The resize subobject size and position are controlled by the window directly.</p></li>
-<li>Add a subobject at the end of the pack list using the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function. </li>
-<li>Make the object visible using the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</li>
+<li>Add a subobject at the end of the pack list using the <code>elm_box_pack_end()</code> function. </li>
+<li>Make the object visible using the <code>evas_object_show()</code> function.</li>
</ol>
<pre class="prettyprint">
<li>Create a window view to display the browser pages and set the user agent:
<ul>
-<li>To create the view, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_add()</span> function.</li>
-<li>To set the user agent, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_user_agent_set()</span> function.</li>
+<li>To create the view, use the <code>ewk_view_add()</code> function.</li>
+<li>To set the user agent, use the <code>ewk_view_user_agent_set()</code> function.</li>
</ul>
<pre class="prettyprint">
<p>To handle mouse or key events in the window:</p>
<ol>
-<li>Set callbacks for the mouse and key events using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function:
+<li>Set callbacks for the mouse and key events using the <code>evas_object_event_callback_add()</code> function:
<pre class="prettyprint">
static Browser_Window*
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>
<li>Define the key event down callback.
-<p>The <span style="font-family: Courier New,Courier,monospace">ev->key</span> instance contains the name of the key that caused the event.</p>
-<p>To handle pressed key modifiers, such as <strong>Ctrl</strong> or <strong>Alt</strong>, use the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_is_set()</span> function. To get the <span style="font-family: Courier New,Courier,monospace">Evas_Modifier</span> object that contains information about which key modifiers are registered, call the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_get()</span> function, passing the <span style="font-family: Courier New,Courier,monospace">Evas</span> canvas object as a parameter.</p>
+<p>The <code>ev->key</code> instance contains the name of the key that caused the event.</p>
+<p>To handle pressed key modifiers, such as <strong>Ctrl</strong> or <strong>Alt</strong>, use the <code>evas_key_modifier_is_set()</code> function. To get the <code>Evas_Modifier</code> object that contains information about which key modifiers are registered, call the <code>evas_key_modifier_get()</code> function, passing the <code>Evas</code> canvas object as a parameter.</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>For example, if the <strong>Alt + Left Arrow</strong> key combination is pressed, the <span style="font-family: Courier New,Courier,monospace">(!strcmp(ev->key, "Left") && altPressed)</span> statement must evaluate to <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+<p>For example, if the <strong>Alt + Left Arrow</strong> key combination is pressed, the <code>(!strcmp(ev->key, "Left") && altPressed)</code> statement must evaluate to <code>TRUE</code>.</p>
<p>The following table shows how the key combinations match to specific view functions.</p>
+<p align="center" class="Table"><strong>Table: Key behavior</strong></p>
<table>
- <caption>
- Table: Key behavior
- </caption>
<tbody>
<tr>
<th>Key</th>
<tr>
<td>Alt+Left</td>
<td>Go to the previous view in the browsing history.</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_back()</span></td>
+ <td><code>ewk_view_back()</code></td>
</tr>
<tr>
<td>Alt+Right</td>
<td>Go to the next view in the browsing history.</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_forward()</span></td>
+ <td><code>ewk_view_forward()</code></td>
</tr>
<tr>
<td>F5</td>
<td>Reload the view.</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_reload()</span></td>
+ <td><code>ewk_view_reload()</code></td>
</tr>
<tr>
<td>Alt+F5</td>
<td>Reload the view bypassing the cache.</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_bypass_cache()</span></td>
+ <td><code>ewk_view_bypass_cache()</code></td>
</tr>
<tr>
<td>F6</td>
<td>Stop loading the view.</td>
- <td><span style="font-family: Courier New,Courier,monospace">ewk_view_stop()</span></td>
+ <td><code>ewk_view_stop()</code></td>
</tr>
</tbody>
</table>
</li>
<li>Define the mouse down event callback.
-<p>The mouse down event information is stored in the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> instance. Similarly as in the key events, the <span style="font-family: Courier New,Courier,monospace">ev->button</span> instance contains information on which button was pressed.</p>
-<p>In the following example, pressing the first button calls the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to update the focus:</p>
+<p>The mouse down event information is stored in the <code>Evas_Event_Mouse_Down</code> instance. Similarly as in the key events, the <code>ev->button</code> instance contains information on which button was pressed.</p>
+<p>In the following example, pressing the first button calls the <code>view_focus_set()</code> function to update the focus:</p>
<pre class="prettyprint">
static void
<h2 id="show" name="show">Showing the Window and Setting the Focus</h2>
-<p>In EFL, the UI focus control is implemented in an Elementary, not Evas, object. Therefore, the application using EWK derived from an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> must control the focus itself.</p>
-<p>To show the window with the view object (<span style="font-family: Courier New,Courier,monospace">ewk_view</span>) and set the focus to the view:</p>
+<p>In EFL, the UI focus control is implemented in an Elementary, not Evas, object. Therefore, the application using EWK derived from an <code>Evas_Object</code> must control the focus itself.</p>
+<p>To show the window with the view object (<code>ewk_view</code>) and set the focus to the view:</p>
<ol>
<li>
-<p>Steal focus away from the <span style="font-family: Courier New,Courier,monospace">elm_window</span> object and give it to the <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</p>
-<p>Unfocus the window with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function, and move the focus to the view with the <span style="font-family: Courier New,Courier,monospace">evas_object_focus_set()</span> function:</p>
+<p>Steal focus away from the <code>elm_window</code> object and give it to the <code>ewk_view</code>.</p>
+<p>Unfocus the window with the <code>elm_object_focus_set()</code> function, and move the focus to the view with the <code>evas_object_focus_set()</code> function:</p>
<pre class="prettyprint">
static void
</pre>
</li>
<li>
-<p>Within the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function to make the window visible, and call the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to perform the focus change defined above:</p>
+<p>Within the <code>window_create()</code> function, use the <code>evas_object_show()</code> function to make the window visible, and call the <code>view_focus_set()</code> function to perform the focus change defined above:</p>
<pre class="prettyprint">
window_create()
<p>You can use helper functions to find window structures:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> helper function takes the <span style="font-family: Courier New,Courier,monospace">elm_window</span> as a parameter and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function does the same for <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</li>
+<li>The <code>window_find_with_elm_window()</code> helper function takes the <code>elm_window</code> as a parameter and returns a pointer to the <code>Browser_Window</code> object that the window is part of.</li>
+<li>The <code>window_find_with_ewk_view()</code> function does the same for <code>ewk_view</code>.</li>
</ul>
-<p>Both functions use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the window list.</p>
+<p>Both functions use the <code>EINA_LIST_FOREACH</code> macro to iterate over the window list.</p>
<pre class="prettyprint">
static Browser_Window*
<p>To close the application correctly:</p>
<ol>
-<li>To clean up any resources your application has allocated, use the <span style="font-family: Courier New,Courier,monospace">ewk_shutdown()</span> function in the termination life-cycle callback:
+<li>To clean up any resources your application has allocated, use the <code>ewk_shutdown()</code> function in the termination life-cycle callback:
<pre class="prettyprint">
static void
</pre>
</li>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">main()</span> function, register the termination callback:</p>
+<p>In the <code>main()</code> function, register the termination callback:</p>
<pre class="prettyprint">
main()
<p>You can <a href="#creating_group">create a Wi-Fi Direct™ group</a> and manage the group.</p></li>
</ul>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">You can test the Wi-Fi Direct™ functionality only on target devices. The <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Emulator</a> does not support this feature currently.</td>
-</tr>
-</tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ You can test the Wi-Fi Direct™ functionality only on target devices. The <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> does not support this feature currently.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the Wi-Fi Direct™ functionality:</p>
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/wifidirect</privilege>
</privileges>
</pre>
</li>
-<li><p>To use the functions and data types of the Wi-Fi Direct API, include the <span style="font-family: Courier New,Courier,monospace"><wifi_direct.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Wi-Fi Direct API, include the <code><wifi_direct.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <wifi_direct.h>
</pre></li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_initialize()</span> function:
+<li>Call the <code>wifi_direct_initialize()</code> function:
<pre class="prettyprint">
int error_code;
</pre>
</li>
-<li><p>To get the Wi-Fi Direct™ activation and deactivation events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_device_state_changed_cb()</span> callback:</p>
+<li><p>To get the Wi-Fi Direct™ activation and deactivation events, set up the <code>wifi_direct_device_state_changed_cb()</code> callback:</p>
<pre class="prettyprint">
void
</pre>
</li>
-<li><p>To get the Wi-Fi Direct™ discovery events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovery_state_changed_cb()</span> callback:</p>
+<li><p>To get the Wi-Fi Direct™ discovery events, set up the <code>wifi_direct_discovery_state_changed_cb()</code> callback:</p>
<pre class="prettyprint">
void
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>
-<li><p>To get Wi-Fi Direct™ connection events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_connection_state_changed_cb()</span> callback:</p>
+<li><p>To get Wi-Fi Direct™ connection events, set up the <code>wifi_direct_connection_state_changed_cb()</code> callback:</p>
<pre class="prettyprint">
void
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>
<ol><li>Activate a Wi-Fi Direct™ local device
-<p>Define the <span style="font-family: Courier New,Courier,monospace;">device_state_changed_cb()</span> callback function, which is invoked whenever a Wi-Fi Direct™ local device activates or deactivates. In the following example, an information message is printed in the console.</p>
+<p>Define the <code>device_state_changed_cb()</code> callback function, which is invoked whenever a Wi-Fi Direct™ local device activates or deactivates. In the following example, an information message is printed in the console.</p>
<pre class="prettyprint">
static void
}
</pre></li>
-<li><p>Switch on the Wi-Fi Direct™ local device with the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_activate()</span> function.</p>
-<p>After the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_activate()</span> function is completed, the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_device_state_changed_cb()</span> callback is invoked.</p>
+<li><p>Switch on the Wi-Fi Direct™ local device with the <code>wifi_direct_activate()</code> function.</p>
+<p>After the <code>wifi_direct_activate()</code> function is completed, the <code>wifi_direct_device_state_changed_cb()</code> callback is invoked.</p>
<pre class="prettyprint">
error_code = wifi_activate(NULL);
</pre></li>
<li>Check the Wi-Fi Direct™ state.
-<p>You can check the Wi-Fi Direct™ local device state using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_get_state()</span> function:</p>
+<p>You can check the Wi-Fi Direct™ local device state using the <code>wifi_direct_get_state()</code> function:</p>
<pre class="prettyprint">
wifi_direct_state_e state = WIFI_DIRECT_STATE_DEACTIVATED;
</pre></li>
<li>Start the discovery by scanning for nearby devices.
-<p>When the Wi-Fi Direct™ discovery state changes, the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovery_state_changed_cb()</span> function is called.</p>
+<p>When the Wi-Fi Direct™ discovery state changes, the <code>wifi_direct_discovery_state_changed_cb()</code> function is called.</p>
<pre class="prettyprint">
wifi_direct_start_discovery(false, 0);
<li>Show the search results.
-<p>Show the discovery result using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovered_peer_cb()</span> callback, which is invoked by the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_foreach_discovered_peers()</span> function. In the following example, the Wi-Fi Direct™ peer device information is printed.</p>
+<p>Show the discovery result using the <code>wifi_direct_discovered_peer_cb()</code> callback, which is invoked by the <code>wifi_direct_foreach_discovered_peers()</code> function. In the following example, the Wi-Fi Direct™ peer device information is printed.</p>
<pre class="prettyprint">
bool
<ol><li>Define the callback function for the connection state.
-<p>The connection event received from the Wi-Fi Direct™ framework invokes a callback. The following example defines a <span style="font-family: Courier New,Courier,monospace;">connection_state_changed_cb()</span> callback to handle all Wi-Fi Direct™ connection events.</p>
+<p>The connection event received from the Wi-Fi Direct™ framework invokes a callback. The following example defines a <code>connection_state_changed_cb()</code> callback to handle all Wi-Fi Direct™ connection events.</p>
<pre class="prettyprint">
static void
<li>Connect with a Wi-Fi Direct™ peer device.
-<p>Check whether Wi-Fi Direct™ is activated using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_get_state()</span> function, and then get the specific device address.</p>
-<p>You can obtain the address directly from the user (as in the following example), or by calling the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_foreach_discovered_peers()</span> function to the address through the device discovery process.</p>
+<p>Check whether Wi-Fi Direct™ is activated using the <code>wifi_direct_get_state()</code> function, and then get the specific device address.</p>
+<p>You can obtain the address directly from the user (as in the following example), or by calling the <code>wifi_direct_foreach_discovered_peers()</code> function to the address through the device discovery process.</p>
<pre class="prettyprint">
char * mac_address = NULL;
<p>To deactivate Wi-Fi Direct™ when it is no longer needed (or the application is exiting):</p>
<ol>
<li>
-<p>Power off the local device using the <span style="font-family: Courier New,Courier,monospace">wifi_direct_deactivate()</span> function:</p>
+<p>Power off the local device using the <code>wifi_direct_deactivate()</code> function:</p>
<pre class="prettyprint">
wifi_direct_deactivate(NULL);
</pre>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">Wi-Fi Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">Wi-Fi Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Wi-Fi</h1>
<p>Tizen allows your application to connect to a Wireless Local Area Network (WLAN) and transfer data over the network. The Wi-Fi Manager enables your application to activate and deactivate a local Wi-Fi device, and to connect to a WLAN network in the infrastructure mode.</p>
-<p>The main features of the Wi-Fi API include:</p>
+<p>The main features of the Wi-Fi Manager API include:</p>
<ul><li>Wi-Fi device and connection management
<p> You can use the <a href="#wifi_manager">Wi-Fi Manager</a> to implement and manage Wi-Fi connection features.</p></li>
<li>Access point management
<p>You can use the <a href="#wifi_monitor">Wi-Fi Monitor</a> to monitor the Wi-Fi connection state.</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can test the Wi-Fi functionality only on a target device. The Emulator does not support this feature.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You can test the Wi-Fi functionality only on a target device. The emulator does not support this feature.
+ </div>
<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>
<p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>
<ul><li>Activate and deactivate a Wi-Fi device
-<p>You can <a href="#activate">activate and deactivate a local Wi-Fi device</a> using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> functions. Both functions have a callback function as the first parameter. The callback function is called after the activation or deactivation is completed. You can use the <span style="font-family: Courier New,Courier,monospace">NULL</span> value, if you want no notifications.</p>
+<p>You can <a href="#activate">activate and deactivate a local Wi-Fi device</a> using the <code>wifi_manager_activate()</code> and <code>wifi_manager_deactivate()</code> functions. Both functions have a callback function as the first parameter. The callback function is called after the activation or deactivation is completed. You can use the <code>NULL</code> value, if you want no notifications.</p>
</li>
<li>Connect to an access point
-<p>You can <a href="#connect">connect to an access point</a> asynchronously using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>
+<p>You can <a href="#connect">connect to an access point</a> asynchronously using the <code>wifi_manager_connect()</code> function.</p>
</li>
<li>Scan the access points
-<p>To <a href="#scan">scan access points</a>, use the <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> functions.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function allows you to get the result of the scan. It also invokes a callback function.</p></li></ul>
+<p>To <a href="#scan">scan access points</a>, use the <code>wifi_manager_scan()</code> and <code>wifi_manager_foreach_found_ap()</code> functions.</p>
+<p>The <code>wifi_manager_scan()</code> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <code>wifi_manager_foreach_found_ap()</code> function allows you to get the result of the scan. It also invokes a callback function.</p></li></ul>
<h2 id="ap" name="ap">Access Point</h2>
-<p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>
+<p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<code>wifi_manager_ap_h</code>) for using the API functions. </p>
<p>The Access Point API supports the following main features:</p>
<ul><li>Creating and destroying an AP handle</li>
<li>Getting the network information</li>
<li>Getting the security information</li></ul>
-<p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">wearable</a> applications).</p>
-<table>
- <caption>
- Table: Network information details
- </caption>
+<p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__NETWORK__MODULE.html">wearable</a> applications).</p>
+
+<p align="center" class="Table"><strong>Table: Network information details</strong></p>
+ <table>
<tbody>
<tr>
<th>Information</th>
</table>
-<p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">wearable</a> applications).</p>
-<table>
- <caption>
- Table: Security information details
- </caption>
+<p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__SECURITY__MODULE.html">wearable</a> applications).</p>
+<p align="center" class="Table"><strong>Table: Security information details</strong></p>
+ <table>
<tbody>
<tr>
<th>Information</th>
</table>
<p>You can also obtain the EAP information listed in the following table.</p>
-<table>
- <caption>
- Table: EAP information details
- </caption>
+<p align="center" class="Table"><strong>Table: EAP information details</strong></p>
+ <table>
<tbody>
<tr>
<th>Information</th>
<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2>
-<p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>
+<p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>
<p>The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_FAILURE</span>
+<ul><li><code>WIFI_CONNECTION_STATE_FAILURE</code>
<p>Connection failed.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_DISCONNECTED</span>
+<li><code>WIFI_CONNECTION_STATE_DISCONNECTED</code>
<p>Disconnected.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_ASSOCIATION</span>
+<li><code>WIFI_CONNECTION_STATE_ASSOCIATION</code>
<p>Association.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONFIGURATION</span>
+<li><code>WIFI_CONNECTION_STATE_CONFIGURATION</code>
<p>Configuration.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONNECTED</span>
+<li><code>WIFI_CONNECTION_STATE_CONNECTED</code>
<p>Connected.</p></li></ul>
<p>The Wi-Fi Monitor also allows monitoring the changes in Wi-Fi. With the Wi-Fi Monitor, you can register callback functions, which notify you when Wi-Fi properties change. The property changes resulting in notifications are listed in the following table.</p>
-<table>
- <caption>
- Table: Property changes
- </caption>
+<p align="center" class="Table"><strong>Table: Property changes</strong></p>
+<table>
<tbody>
<tr>
<th>Change in</th>
<p>To enable your application to use the Wi-Fi functionality:</p>
<ol>
<li>
-<p>To use the Wi-Fi API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/network.get</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Wi-Fi API, include the <span style="font-family: Courier New,Courier,monospace"><wifi.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Wi-Fi Manager API, include the <code><wifi-manager.h></code> header file in your application:</p>
<pre class="prettyprint">
-#include <wifi.h>
+#include <wifi-manager.h>
</pre>
</li>
<li>
-<p>To be able to use all Wi-Fi functions, initialize Wi-Fi using the <span style="font-family: Courier New,Courier,monospace;">wifi_initialize()</span> function:</p>
+<p>To be able to use all Wi-Fi functions, initialize Wi-Fi using the <code>wifi_manager_initialize()</code> function:</p>
<pre class="prettyprint">
int error_code;
-error_code = wifi_initialize();
+error_code = wifi_manager_initialize(wifi);
if (error_code != WIFI_ERROR_NONE)
return;
</pre>
<p>When Wi-Fi is no longer needed or the application is exiting, release Wi-Fi:</p>
<pre class="prettyprint">
-wifi_deinitialize();
+wifi_manager_deinitialize(wifi);
</pre>
</li>
</ol>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The Wi-Fi feature is not thread-safe and depends on the ecore main loop. Implement Wi-Fi within the ecore main loop, and do not use it in a thread.</td>
-</tr>
-</tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ The Wi-Fi feature is not thread-safe and depends on the ecore main loop. Implement Wi-Fi within the ecore main loop, and do not use it in a thread.
+ </div>
<h2 id="activate" name="activate">Activating a Wi-Fi Device</h2>
<p>To activate and deactivate a local Wi-Fi device, and to check that Wi-Fi is activated:</p>
-<ol><li>Activate a Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> function:
+<ol><li>Activate a Wi-Fi device using the <code>wifi_manager_activate()</code> function:
<pre class="prettyprint">
-error_code = wifi_activate(__wifi_activated_cb, NULL);
+error_code = wifi_manager_activate(wifi, __wifi_manager_activated_cb, NULL);
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">__wifi_activated_cb()</span> callback, which is invoked when the Wi-Fi activation is completed.</p>
+<p>Define the <code>__wifi_manager_activated_cb()</code> callback, which is invoked when the Wi-Fi activation is completed.</p>
<p>In the following example, the callback prints an information message using the dlogutil tool:</p>
<pre class="prettyprint">
static void
-__wifi_activated_cb(wifi_error_e result, void *user_data)
+__wifi_manager_activated_cb(wifi_error_e result, void *user_data)
{
if (result == WIFI_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Success to activate Wi-Fi device!");
}
</pre></li>
-<li>Check the Wi-Fi connection using the <span style="font-family: Courier New,Courier,monospace">wifi_is_activated()</span> function. The parameter indicates whether Wi-Fi is activated.
+<li>Check the Wi-Fi connection using the <code>wifi_manager_is_activated()</code> function. The parameter indicates whether Wi-Fi is activated.
<pre class="prettyprint">
-bool wifi_activated = false;
-wifi_is_activated(&wifi_activated);
-if (wifi_activated)
+bool wifi_manager_activated = false;
+wifi_manager_is_activated(wifi, &wifi_manager_activated);
+if (wifi_manager_activated)
dlog_print(DLOG_INFO, LOG_TAG, "Success to get Wi-Fi device state.");
else
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Wi-Fi device state.");
</pre></li>
<li>
-<p>To deactivate the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> function:</p>
+<p>To deactivate the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the <code>wifi_manager_deactivate()</code> function:</p>
<pre class="prettyprint">
-wifi_deactivate(NULL, NULL);
+wifi_manager_deactivate(wifi, NULL, NULL);
</pre>
</li>
</ol>
<ol><li>Scan nearby access points asynchronously:
<pre class="prettyprint">
-wifi_scan(__scan_request_cb, NULL);
+wifi_manager_scan(wifi, __scan_request_cb, NULL);
</pre></li>
<li>Define a callback, which is invoked when the scan is finished.
-<p>In the following example, the callback calls the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function for getting information on the found AP. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function gets the result of the scan, and the <span style="font-family: Courier New,Courier,monospace">__wifi_found_ap_cb()</span> callback is called for each found access point.</p>
+<p>In the following example, the callback calls the <code>wifi_manager_foreach_found_ap()</code> function for getting information on the found AP. The <code>wifi_manager_foreach_found_ap()</code> function gets the result of the scan, and the <code>__wifi_manager_found_ap_cb()</code> callback is called for each found access point.</p>
<pre class="prettyprint">
void
__scan_request_cb(wifi_error_e error_code, void *user_data)
{
- error_code = wifi_foreach_found_aps(__wifi_found_ap_cb, NULL);
+ error_code = wifi_manager_foreach_found_ap(wifi, __wifi_manager_found_ap_cb, NULL);
if (error_code != WIFI_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Failed to scan");
}
</pre></li>
-<li>Show the result of the scan using the <span style="font-family: Courier New,Courier,monospace">__wifi_found_ap_cb()</span> callback.
+<li>Show the result of the scan using the <code>__wifi_manager_found_ap_cb()</code> callback.
<p>In the following example, the callback prints the AP name and connection state:</p>
<pre class="prettyprint">
bool
-__wifi_found_ap_cb(wifi_ap_h ap, void *user_data)
+__wifi_manager_found_ap_cb(wifi_ap_h ap, void *user_data)
{
int error_code = 0;
char *ap_name = NULL;
wifi_connection_state_e state;
- error_code = wifi_ap_get_essid(ap, &ap_name);
+ error_code = wifi_manager_ap_get_essid(ap, &ap_name);
if (error_code != WIFI_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name.");
return false;
}
- error_code = wifi_ap_get_connection_state(ap, &state);
+ error_code = wifi_manager_ap_get_connection_state(ap, &state);
if (error_code != WIFI_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get state.");
<p>To make a connection using a specific access point:</p>
<ol><li>Select an access point.
-<p>Check whether Wi-Fi is activated using the <span style="font-family: Courier New,Courier,monospace">wifi_is_activated()</span> function, and receive the specific AP name from the user. Call the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function to compare the AP name with the result of the scan:</p>
+<p>Check whether Wi-Fi is activated using the <code>wifi_manager_is_activated()</code> function, and receive the specific AP name from the user. Call the <code>wifi_manager_foreach_found_ap()</code> function to compare the AP name with the result of the scan:</p>
<pre class="prettyprint">
char ap_name[33];
bool state = false;
-wifi_is_activated(&state);
+wifi_manager_is_activated(wifi, &state);
if (state == false)
return -1;
-dlog_print(DLOG_INFO, LOG_TAG, "Input a part of AP name to connect : ");
+dlog_print(DLOG_INFO, LOG_TAG, "Input a part of AP name to connect: ");
error_code = scanf("%32s", ap_name);
-error_code = wifi_foreach_found_aps(__found_connect_ap_cb, ap_name);
+error_code = wifi_manager_foreach_found_ap(wifi, __found_connect_ap_cb, ap_name);
if (error_code != WIFI_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Failed to connect (can't get AP list)");
</pre></li>
<li>Make a connection with an access point.
-<p>Define the <span style="font-family: Courier New,Courier,monospace">__found_connect_ap_cb()</span> callback invoked by the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function.</p>
-<p>The callback compares <span style="font-family: Courier New,Courier,monospace">user_data</span> (the AP name from the user input) with the name of the found AP. If it is correct, the function checks whether the AP requires a passphrase. Set the passphrase using the <span style="font-family: Courier New,Courier,monospace">wifi_ap_set_passphrase()</span> function.</p>
-<p>Finally, connect to a specific AP using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>
+<p>Define the <code>__found_connect_ap_cb()</code> callback invoked by the <code>wifi_manager_foreach_found_ap()</code> function.</p>
+<p>The callback compares <code>user_data</code> (the AP name from the user input) with the name of the found AP. If it is correct, the function checks whether the AP requires a passphrase. Set the passphrase using the <code>wifi_manager_ap_set_passphrase()</code> function.</p>
+<p>Finally, connect to a specific AP using the <code>wifi_manager_connect()</code> function.</p>
<pre class="prettyprint">
static bool
char *ap_name = NULL;
char *ap_name_part = (char*)user_data;
- error_code = wifi_ap_get_essid(ap, &ap_name);
+ error_code = wifi_manager_ap_get_essid(ap, &ap_name);
if (error_code != WIFI_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name");
if (strstr(ap_name, ap_name_part) != NULL) {
bool required = false;
- if (wifi_ap_is_passphrase_required(ap, &required) == WIFI_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Passphrase required: %s", required ? "True" : "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");
else
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Passphrase required");
if (required) {
char passphrase[100];
- dlog_print(DLOG_INFO, LOG_TAG, "Input passphrase for %s :", passphrase);
+ dlog_print(DLOG_INFO, LOG_TAG, "Input passphrase for %s: ", passphrase);
error_code = scanf("99%s", passphrase);
- error_code = wifi_ap_set_passphrase(ap, passphrase);
+ error_code = wifi_manager_ap_set_passphrase(ap, passphrase);
if (error_code != WIFI_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Failed to set passphrase");
}
}
- error_code = wifi_connect(ap, __connected_cb, NULL);
+ error_code = wifi_manager_connect(wifi, ap, __connected_cb, NULL);
if (error_code != WIFI_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Failed in connection request");
else
</pre></li>
<li>Provide a notification about the connection result.
-<p>The <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function called within the <span style="font-family: Courier New,Courier,monospace">__found_connect_ap_cb()</span> callback invokes the <span style="font-family: Courier New,Courier,monospace">__connected_cb()</span> function, which you can use to notify the user of the connection result:</p>
+<p>The <code>wifi_manager_connect()</code> function called within the <code>__found_connect_ap_cb()</code> callback invokes the <code>__connected_cb()</code> function, which you can use to notify the user of the connection result:</p>
<pre class="prettyprint">
static void
<p>Tizen enables you to get storage information and manage directories.</p>
<p>The Storage API provides access to accessible parts of the file system, which are represented as virtual root locations. The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p>
+<p align="center" class="Table"><strong>Table: Filesystem virtual roots</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Filesystem virtual roots
- </caption>
<tbody>
<tr>
<th>Virtual root</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">images</span></td>
+ <td><code>images</code></td>
<td>Location for storing images.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">sounds</span></td>
+ <td><code>sounds</code></td>
<td>Location for storing sound files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">videos</span></td>
+ <td><code>videos</code></td>
<td>Location for storing video files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">camera</span></td>
+ <td><code>camera</code></td>
<td>Location for storing photos.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td>
+ <td><code>downloads</code></td>
<td>Location for storing downloaded items.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">music</span></td>
+ <td><code>music</code></td>
<td>Location for storing audio files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">documents</span></td>
+ <td><code>documents</code></td>
<td>Location for storing documents.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">others</span></td>
+ <td><code>others</code></td>
<td>Location for storing other files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td>
+ <td><code>ringtones</code></td>
<td>Location for ringtones (read-only location).</td>
</tr>
</tbody>
<p>The main features of the Storage API include:</p>
<ul>
- <li>Storage management <p>You can manage different storages on the device with the Storage APIs.</p> <p>You can <a href="#storage">retrieve additional information about the storages</a>, including which storage is supported in the device using the <
span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function. The callback function returns the storage type, mount state, and virtual root path. You can also <a href="#memory">retrieve memory sizes</a> and <a href="#state">monitor storage state changes</a>.</p>
+ <li>Storage management <p>You can manage different storages on the device with the Storage APIs.</p> <p>You can <a href="#storage">retrieve additional information about the storages</a>, including which storage is supported in the device using the <
code>storage_foreach_device_supported()</code> function. The callback function returns the storage type, mount state, and virtual root path. You can also <a href="#memory">retrieve memory sizes</a> and <a href="#state">monitor storage state changes</a>.</p>
</li>
<li>Storage space management
<p>You can <a href="#space">get the available and total space</a> size of the storage.</p></li></ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types 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), include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
+<p>To use the functions and data types 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), include the <code><storage.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <storage.h>
</pre>
<p>Use the statvfs wrapper to get memory sizes:</p>
<ul>
-<li>Get the internal memory size with the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> function.
+<li>Get the internal memory size with the <code>storage_get_internal_memory_size()</code> function.
<p>The function returns the internal memory size. Use it instead of the statvfs function when you need the internal memory size.</p>
-<p>When the memory is low, the system must at least be able to launch a low memory pop-up. To do that, it reserves a minimum memory, whose size depends on the device storage size. The memory size returned by the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> function excludes the minimum memory size.</p>
-<p>The statvfs structure has a different structure size than the <span style="font-family: Courier New,Courier,monospace;">__USE_FILE_OFFSET64</span> option. If you define this option, libstorage changes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> function to <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size64()</span> automatically.</p>
+<p>When the memory is low, the system must at least be able to launch a low memory pop-up. To do that, it reserves a minimum memory, whose size depends on the device storage size. The memory size returned by the <code>storage_get_internal_memory_size()</code> function excludes the minimum memory size.</p>
+<p>The statvfs structure has a different structure size than the <code>__USE_FILE_OFFSET64</code> option. If you define this option, libstorage changes the <code>storage_get_internal_memory_size()</code> function to <code>storage_get_internal_memory_size64()</code> automatically.</p>
<pre class="prettyprint">
int error;
struct statvfs s;
</pre>
</li>
-<li>Get the external memory size with the <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function.
+<li>Get the external memory size with the <code>storage_get_external_memory_size()</code> function.
<p>The function returns the external memory size. Use it instead of the statvfs function when you need the external memory size.</p>
-<p>When the memory is low, the system must at least be able to launch a low memory pop-up. To do that, it reserves a minimum memory, whose size depends on the device storage size. The memory size returned by the <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function excludes the minimum memory size.</p>
-<p>The statvfs structure has a different structure size than the <span style="font-family: Courier New,Courier,monospace;">__USE_FILE_OFFSET64</span> option. If you define this option, libstorage changes the <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function to <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size64()</span> automatically.</p>
+<p>When the memory is low, the system must at least be able to launch a low memory pop-up. To do that, it reserves a minimum memory, whose size depends on the device storage size. The memory size returned by the <code>storage_get_external_memory_size()</code> function excludes the minimum memory size.</p>
+<p>The statvfs structure has a different structure size than the <code>__USE_FILE_OFFSET64</code> option. If you define this option, libstorage changes the <code>storage_get_external_memory_size()</code> function to <code>storage_get_external_memory_size64()</code> automatically.</p>
<pre class="prettyprint">
int error;
struct statvfs s;
<p>To retrieve storage information:</p>
<ul>
-<li>Retrieve all storages in a device using the <span style="font-family: Courier New,Courier,monospace;">storage_foreach_device_supported()</span> function.
+<li>Retrieve all storages in a device using the <code>storage_foreach_device_supported()</code> function.
-<p>The function triggers a separate callback for each storage. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the storages.</p>
+<p>The function triggers a separate callback for each storage. As long as the callback returns <code>true</code>, the foreach function continues to loop over the storages.</p>
<p>Within the callback, you can get information about the individual storage type, state, location, and ID.</p>
<pre class="prettyprint">
static int internal_storage_id;
</pre>
</li>
-<li>Get the root directory of a specific storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_root_directory()</span> function.
+<li>Get the root directory of a specific storage using the <code>storage_get_root_directory()</code> function.
<p>The function retrieves the absolute path to the root directory.</p>
<pre class="prettyprint">
</pre>
</li>
-<li>Get the directory of a specific type within a specific storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function.
+<li>Get the directory of a specific type within a specific storage using the <code>storage_get_directory()</code> function.
<p>The function retrieves the absolute path to the directory.</p>
-<p>The second parameter defines the directory type based on the <
span style="font-family: Courier New,Courier,monospace;">storage_directory_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gaacf2209a06b947c1cee4ba223679383a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gaacf2209a06b947c1cee4ba223679383a">wearable</a> applications).</p>
+<p>The second parameter defines the directory type based on the <
code>storage_directory_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gaacf2209a06b947c1cee4ba223679383a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gaacf2209a06b947c1cee4ba223679383a">wearable</a> applications).</p>
<p>To get the media directory:</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Get the storage type of a specified storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_type()</span> function.
+<li>Get the storage type of a specified storage using the <code>storage_get_type()</code> function.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">storage_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">wearable</a> applications) defines the available storage types.</p>
+<p>The <
code>storage_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">wearable</a> applications) defines the available storage types.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Get the storage mount state of a specific storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_state()</span> function.
+<li>Get the storage mount state of a specific storage using the <code>storage_get_state()</code> function.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">storage_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">wearable</a> applications) defines the available storage states.</p>
+<p>The <
code>storage_state_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">wearable</a> applications) defines the available storage states.</p>
<pre class="prettyprint">
int error;
<h2 id="space" name="space">Retrieving Storage Space Information</h2>
-<p>To get the available and total space size of the storage, use the <span style="font-family: Courier New,Courier,monospace">storage_get_total_space()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_available_space()</span> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <span style="font-family: Courier New,Courier,monospace">statvfs</span> function directly in Tizen. Instead, use <span style="font-family: Courier New,Courier,monospace">storage_get_internal_memory_size()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_external_memory_size()</span>. The Statvfs structure has a different structure size defined by "__USE_FILE_OFFSET64". However, you can ignore this, since the Storage API uses a proper function automatically.</p>
+<p>To get the available and total space size of the storage, use the <code>storage_get_total_space()</code> and <code>storage_get_available_space()</code> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <code>statvfs</code> function directly in Tizen. Instead, use <code>storage_get_internal_memory_size()</code> and <code>storage_get_external_memory_size()</code>. The Statvfs structure has a different structure size defined by "__USE_FILE_OFFSET64". However, you can ignore this, since the Storage API uses a proper function automatically.</p>
<p>To retrieve storage space information:</p>
<ul>
-<li>Get the total space of the storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_total_space()</span> function.
-<p>The function returns the total space of the given storage in bytes. It invokes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> or <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function internally.</p>
+<li>Get the total space of the storage using the <code>storage_get_total_space()</code> function.
+<p>The function returns the total space of the given storage in bytes. It invokes the <code>storage_get_internal_memory_size()</code> or <code>storage_get_external_memory_size()</code> function internally.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Get the available space of the storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_available_space()</span> function.
-<p>The function returns the available space of the given storage in bytes. It invokes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> or <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function internally.</p>
+<li>Get the available space of the storage using the <code>storage_get_available_space()</code> function.
+<p>The function returns the available space of the given storage in bytes. It invokes the <code>storage_get_internal_memory_size()</code> or <code>storage_get_external_memory_size()</code> function internally.</p>
<pre class="prettyprint">
int error;
<h2 id="prepare">Preparing the Database</h2>
<p>This guide only covers the basics of encryption and database usage. For more information, see <a href="http://www.openssl.org" target="_blank">OpenSSL</a> and <a href="http://www.sqlite.org" target="_blank">SQLite</a> Web pages.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">While operating with real data, make sure that you fulfill all security requirements. This guide demonstrates how to use the library APIs on Tizen, but does not show how to perform fully secure encryption.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ While operating with real data, make sure that you fulfill all security requirements. This guide demonstrates how to use the library APIs on Tizen, but does not show how to perform fully secure encryption.
+ </div>
+
<p>To prepare the database:</p>
<ol><li>Define the needed variables:
#define BUFLEN 300 /* Buffer size, used in functions */
const int key_len = 256; /* AES key length */
-static const unsigned char password[] = {"DummyPassword"}; /* Password to generate key */
+/* Password to generate key */
+static const unsigned char password[] = {"DummyPassword"};
sqlite3 *db; /* Database handle */
sqlite3_config(SQLITE_CONFIG_URI, 1);
</pre>
</li>
-<li>Initialize the interface with the <span style="font-family: Courier New,Courier,monospace">sqlite3_initialize()</span> function:
+<li>Initialize the interface with the <code>sqlite3_initialize()</code> function:
<pre class="prettyprint">
sqlite3_initialize();
</pre>
</li>
-<li>Open the database using the <
span style="font-family: Courier New,Courier,monospace">sqlite3_open()</span> function. <p>The function creates a new database file, if the URI in the first parameter points to a non-existing one. The handle to the database is stored in the second parameter.</p>
+<li>Open the database using the <
code>sqlite3_open()</code> function. <p>The function creates a new database file, if the URI in the first parameter points to a non-existing one. The handle to the database is stored in the second parameter.</p>
<pre class="prettyprint">
char file_path[BUFLEN];
char *document_path;
-/* Fill the variable with the value obtained using storage_foreach_device_supported() */
+/*
+ Fill the variable with the value obtained
+ 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);
<pre class="prettyprint">
CreateTable();
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">CreateTable()</span> function prepares a SQL query, and uses the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function to execute the query in the defined database.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function passes a return message to a callback function as an array of strings. It creates a database only if one does not exist already. In the following example, the created database name is <span style="font-family: Courier New,Courier,monospace">EncryptedData</span>, and it contains the DATA, ENCRYPTED, SALT, IV, PART, and KEY fields.</p>
+<p>The <code>CreateTable()</code> function prepares a SQL query, and uses the <code>sqlite3_exec()</code> function to execute the query in the defined database.</p>
+<p>The <code>sqlite3_exec()</code> function passes a return message to a callback function as an array of strings. It creates a database only if one does not exist already. In the following example, the created database name is <code>EncryptedData</code>, and it contains the DATA, ENCRYPTED, SALT, IV, PART, and KEY fields.</p>
<pre class="prettyprint">
static int
CreateTable()
{
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);
<li><p>To operate with OpenSSL AES, salt and initial vectors are needed. Those are auxiliary variables, which are used to generate a cryptographic key:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">RAND_bytes()</span> generates a random chain of bytes.</li>
+ <li><code>RAND_bytes()</code> generates a random chain of bytes.</li>
<li>An additional character is appended after the last character of a chain to point the end of the salt[8]=0x00 variable.</li>
- <li><span style="font-family: Courier New,Courier,monospace">PrepareToSQL()</span> removes some of the SQL special characters from the chain to make it possible to insert it to the database.</li>
+ <li><code>PrepareToSQL()</code> removes some of the SQL special characters from the chain to make it possible to insert it to the database.</li>
</ul>
<pre class="prettyprint">
RAND_bytes(salt, 8);
<li>
<p>Include the required headers:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">#include <string.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <time.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <stdint.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <stdlib.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <sqlite3.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <openssl/aes.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <openssl/crypto.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <openssl/rand.h></span></li>
-<li><span style="font-family: Courier New,Courier,monospace">#include <openssl/evp.h></span></li>
+<li><code>#include <string.h></code></li>
+<li><code>#include <time.h></code></li>
+<li><code>#include <stdint.h></code></li>
+<li><code>#include <stdlib.h></code></li>
+<li><code>#include <sqlite3.h></code></li>
+<li><code>#include <openssl/aes.h></code></li>
+<li><code>#include <openssl/crypto.h></code></li>
+<li><code>#include <openssl/rand.h></code></li>
+<li><code>#include <openssl/evp.h></code></li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">time.h</span> is obtained to create an example message to encrypt and store.</p></li></ol>
+<p>The <code>time.h</code> is obtained to create an example message to encrypt and store.</p></li></ol>
<h2 id="store" name="store">Storing Encrypted Data</h2>
EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
</pre>
-<p>The OpenSSL <span style="font-family: Courier New,Courier,monospace">AES_encrypt()</span> function allows encrypting up to 16 characters at once. Adding a short message (at most 16 characters long) requires the following steps:</p>
+<p>The OpenSSL <code>AES_encrypt()</code> function allows encrypting up to 16 characters at once. Adding a short message (at most 16 characters long) requires the following steps:</p>
<ol type="a">
-<li>Encrypt plain text with the <span style="font-family: Courier New,Courier,monospace">EncryptMsg()</span> function:
+<li>Encrypt plain text with the <code>EncryptMsg()</code> function:
<ol type="a">
-<li>Generate a string for key generation from a password and salt using <span style="font-family: Courier New,Courier,monospace">PKCS5_PBKDF2_HMAC_SHA1()</span>.
+<li>Generate a string for key generation from a password and salt using <code>PKCS5_PBKDF2_HMAC_SHA1()</code>.
<p>An initial vector can be used in different hash functions. In this example, only the first byte of the initial vector is used as an iteration variable for a hash algorithm.</p></li>
-<li>Generate the encryption key using the <span style="font-family: Courier New,Courier,monospace">AES_set_encrypt_key()</span> function.
+<li>Generate the encryption key using the <code>AES_set_encrypt_key()</code> function.
<p>The second parameter defines the AES key length. Check the actual recommended length and encoding type before use. This example uses AES 256 (defined in <a href="#prepare">Preparing the Database</a>).</p></li>
-<li>Encrypt the data with the <span style="font-family: Courier New,Courier,monospace">AES_encrypt()</span> function.</li>
-<li>Encode Base64 with the <span style="font-family: Courier New,Courier,monospace">base64_encode()</span> function.
+<li>Encrypt the data with the <code>AES_encrypt()</code> function.</li>
+<li>Encode Base64 with the <code>base64_encode()</code> function.
<p>The data is encoded to make it safe to insert it to the database. Base 64 does not contain any special characters. For the encoding and decoding function details, see <a href="#base64">Base64 functions</a>.</p></li>
<li>Add a delimiting 0x00 character at the end of the byte array.</li>
</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];
</pre>
</li>
-<li>Execute the database insertion with the <span style="font-family: Courier New,Courier,monospace">InsertRecord()</span> function.
-<p>To insert data to the database, use the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function. A query is prepared with common C functions. The encrypted variable is stored in the database and indicates whether the DATA field in the database is encrypted.</p>
+<li>Execute the database insertion with the <code>InsertRecord()</code> function.
+<p>To insert data to the database, use the <code>sqlite3_exec()</code> function. A query is prepared with common C functions. The encrypted variable is stored in the database and indicates whether the DATA field in the database is encrypted.</p>
<pre class="prettyprint">
static int
InsertRecord(unsigned char *msg, int encrypted,
</li>
</ol>
-<p>To store longer messages (more than 16 characters), split them into shorter parts. In the following example, the message is divided into blocks 16 characters long. Each block is tagged by its own number with a <span style="font-family: Courier New,Courier,monospace">parts</span> variable, and the tag is stored in the database in the <span style="font-family: Courier New,Courier,monospace">PART</span> field. Each block is then stored in its own record to simplify the decoding procedure.</p>
+<p>To store longer messages (more than 16 characters), split them into shorter parts. In the following example, the message is divided into blocks 16 characters long. Each block is tagged by its own number with a <code>parts</code> variable, and the tag is stored in the database in the <code>PART</code> field. Each block is then stored in its own record to simplify the decoding procedure.</p>
<pre class="prettyprint">
ret = InsertMessage((unsigned char *)text);
0: DATA = xPRnJYwvQTc4VJKkW4EroQ==
1: DATA = EZI+uOGxcnUseJnbH57/Bg==
</pre>
-<p>To list the records in the database, use the <span style="font-family: Courier New,Courier,monospace">ShowRecords()</span> function:</p>
+<p>To list the records in the database, use the <code>ShowRecords()</code> function:</p>
<ul>
-<li>To list all records, use the <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query.
-<p>The callback function is invoked for each record returned by SQLite. To pass user data to the callback, use the fourth parameter of the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function.</p></li>
+<li>To list all records, use the <code>SELECT * FROM EncryptedData</code> query.
+<p>The callback function is invoked for each record returned by SQLite. To pass user data to the callback, use the fourth parameter of the <code>sqlite3_exec()</code> function.</p></li>
<li>The callback simply prints the obtained record.
-<p>The record is passed in the form of a few arrays of strings: the <span style="font-family: Courier New,Courier,monospace">argv</span> array contains the column content and <span style="font-family: Courier New,Courier,monospace">azColName</span> the column name. The <span style="font-family: Courier New,Courier,monospace">argc</span> parameter is the number of columns.</p>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace">counter</span>, is the user data, which in this example is used to indicate the record number in a row (not a SQL primary key) while listing.</p>
-<p>If the content of any column is empty, the <span style="font-family: Courier New,Courier,monospace">NULL</span> string is printed.</p>
+<p>The record is passed in the form of a few arrays of strings: the <code>argv</code> array contains the column content and <code>azColName</code> the column name. The <code>argc</code> parameter is the number of columns.</p>
+<p>The first parameter, <code>counter</code>, is the user data, which in this example is used to indicate the record number in a row (not a SQL primary key) while listing.</p>
+<p>If the content of any column is empty, the <code>NULL</code> string is printed.</p>
</li>
</ul>
<pre class="prettyprint">
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");
</li>
<li>Decrypt the database records.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">DecryptRecords()</span> function to select all encrypted records from the database, and decrypt and list them:</p>
+<p>Use the <code>DecryptRecords()</code> function to select all encrypted records from the database, and decrypt and list them:</p>
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query where <span style="font-family: Courier New,Courier,monospace">ENCRYPTED='1'</span> query to retrieve all encrypted records.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">callbackdecrypt()</span> callback is invoked for each found record. In case of an error, the SQLite API requires you to release the error message memory with the <span style="font-family: Courier New,Courier,monospace">sqlite3_free()</span> function.</li>
+<li>Use the <code>SELECT * FROM EncryptedData</code> query where <code>ENCRYPTED='1'</code> query to retrieve all encrypted records.</li>
+<li>The <code>callbackdecrypt()</code> callback is invoked for each found record. In case of an error, the SQLite API requires you to release the error message memory with the <code>sqlite3_free()</code> function.</li>
<li>The callback is similar to the earlier callback used to list the database content.
-<p>There is an action added for the <span style="font-family: Courier New,Courier,monospace">argv[ i ] && i == 0</span> case, which includes the encrypted content in columns that are not empty and are DATA.</p>
-<p>To decrypt the message, decode the data from Base 64, add a delimiting character, perform the actual decryption with the <span style="font-family: Courier New,Courier,monospace">DecryptMsg()</span> function, and list the decrypted data.</p></li>
+<p>There is an action added for the <code>argv[ i ] && i == 0</code> case, which includes the encrypted content in columns that are not empty and are DATA.</p>
+<p>To decrypt the message, decode the data from Base 64, add a delimiting character, perform the actual decryption with the <code>DecryptMsg()</code> function, and list the decrypted data.</p></li>
</ul>
<pre class="prettyprint">
static void
(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");
}
}
<p>To enable your application to use the device functionality:</p>
<ol>
<li>
-<p>To use the Device API submodules (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Device API submodules (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<!--To use the Display API-->
<li>
<p>To use the functions and data types of the Device API submodules, include the related header files in your application:</p>
<ul>
-<li>For the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/battery.h></span>.</li>
-<li>For the Display API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/display.h></span>.</li>
-<li>For the Haptic API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/haptic.h></span>.</li>
-<li>For the IR API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__IR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__IR__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/ir.h></span>.</li>
-<li>For the Led API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/led.h></span>.</li>
-<li>For the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/power.h></span>.</li>
-<li>For the Callback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">wearable</a> applications), include <span style="font-family: Courier New,Courier,monospace;"><device/callback.h></span>.</li>
+<li>For the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications), include <code><device/battery.h></code>.</li>
+<li>For the Display API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">wearable</a> applications), include <code><device/display.h></code>.</li>
+<li>For the Haptic API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">wearable</a> applications), include <code><device/haptic.h></code>.</li>
+<li>For the IR API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__IR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__IR__MODULE.html">wearable</a> applications), include <code><device/ir.h></code>.</li>
+<li>For the Led API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">wearable</a> applications), include <code><device/led.h></code>.</li>
+<li>For the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications), include <code><device/power.h></code>.</li>
+<li>For the Callback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">wearable</a> applications), include <code><device/callback.h></code>.</li>
</ul>
<pre class="prettyprint">
<p>To retrieve battery information:</p>
<ul>
- <li>Get the battery percentage with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_percent()</span> function.
+ <li>Get the battery percentage with the <code>device_battery_get_percent()</code> function.
<p>The function returns the current battery percentage as an integer value from 0 to 100 that indicates the remaining battery charge as a percentage of the maximum level.</p>
<pre class="prettyprint">
error = device_battery_get_percent(&pct);
</pre></li>
- <li>Get the current charging battery state with the <span style="font-family: Courier New,Courier,monospace;">device_battery_is_charging()</span> function:
+ <li>Get the current charging battery state with the <code>device_battery_is_charging()</code> function:
<pre class="prettyprint">
int error;
</pre>
</li>
- <li>Get the current battery level state with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_level_status()</span> function.
- <p>The <
span style="font-family: Courier New,Courier,monospace;">device_battery_level_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">wearable</a> applications) defines the available battery levels.</p>
+ <li>Get the current battery level state with the <code>device_battery_get_level_status()</code> function.
+ <p>The <
code>device_battery_level_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">wearable</a> applications) defines the available battery levels.</p>
<pre class="prettyprint">
int error;
device_battery_level_e level;
<p>To retrieve and set display properties:</p>
<ul>
- <li>Get the number of display devices with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_numbers()</span> function:
+ <li>Get the number of display devices with the <code>device_display_get_numbers()</code> function:
<pre class="prettyprint">
int error;
int num;
</pre>
</li>
- <li>Get the maximum brightness with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_max_brightness()</span> function.
+ <li>Get the maximum brightness with the <code>device_display_get_max_brightness()</code> function.
<p>The function returns the maximum brightness value that can be set.</p>
<pre class="prettyprint">
</pre>
</li>
- <li>Get and set the display brightness with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_brightness()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_set_brightness()</span> functions:
+ <li>Get and set the display brightness with the <code>device_display_get_brightness()</code> and <code>device_display_set_brightness()</code> functions:
<pre class="prettyprint">
int error;
</pre>
</li>
- <li>Get and set the display state with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_state()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_change_state()</span> functions.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">display_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">wearable</a> applications) defines the available display states.</p>
+ <li>Get and set the display state with the <code>device_display_get_state()</code> and <code>device_display_change_state()</code> functions.
+<p>The <
code>display_state_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">wearable</a> applications) defines the available display states.</p>
<pre class="prettyprint">
int error;
display_state_e state;
<p>To control haptic devices:</p>
<ol>
-<li>Get the number of haptic devices with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_get_count()</span> function:
+<li>Get the number of haptic devices with the <code>device_haptic_get_count()</code> function:
<pre class="prettyprint">
int error;
</li>
<li>To manage a haptic device:
<ol type="a">
-<li>Initialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_open()</span> function.
+<li>Initialize the haptic device with the <code>device_haptic_open()</code> function.
<p>The function opens a haptic-vibration device and returns the handle to it. It makes a connection to the vibrator.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Play and stop an effect on the device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_vibrate()</span> and <span style="font-family: Courier New,Courier,monospace;">device_haptic_stop()</span> functions.
+<li>Play and stop an effect on the device with the <code>device_haptic_vibrate()</code> and <code>device_haptic_stop()</code> functions.
<p>The device vibrates during specified time with a constant intensity. The effect handle can be 0.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>When no longer needed, deinitialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_close()</span> function.
+<li>When no longer needed, deinitialize the haptic device with the <code>device_haptic_close()</code> function.
<p>The function closes the haptic handle and disconnects the connection to the vibrator.</p>
<pre class="prettyprint">
<p>To control an IR device:</p>
<ol>
-<li>Determine whether IR is available in the device using the <span style="font-family: Courier New,Courier,monospace;">device_ir_is_available()</span> function:
+<li>Determine whether IR is available in the device using the <code>device_ir_is_available()</code> function:
<pre class="prettyprint">
bool avail;
int error;
</pre>
</li>
-<li>Transmit an IR pattern with a specific carrier frequency using the <span style="font-family: Courier New,Courier,monospace;">device_ir_transmit()</span> function:
+<li>Transmit an IR pattern with a specific carrier frequency using the <code>device_ir_transmit()</code> function:
<pre class="prettyprint">
int error;
int carrier_frequency;
<p>To control a LED device:</p>
<ul>
-<li>Get the maximum brightness value of a torch LED with the <span style="font-family: Courier New,Courier,monospace;">device_flash_get_max_brightness()</span> function.
+<li>Get the maximum brightness value of a torch LED with the <code>device_flash_get_max_brightness()</code> function.
<p>The function returns the maximum brightness value of the torch LED located next to the camera.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Get and set the current brightness value of a torch LED with the <span style="font-family: Courier New,Courier,monospace;">device_flash_get_brightness()</span> and <span style="font-family: Courier New,Courier,monospace;">device_flash_set_brightness()</span> functions:
+<li>Get and set the current brightness value of a torch LED with the <code>device_flash_get_brightness()</code> and <code>device_flash_set_brightness()</code> functions:
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Play and stop a custom effect of the service LED with the <span style="font-family: Courier New,Courier,monospace;">device_led_play_custom()</span> and <span style="font-family: Courier New,Courier,monospace;">device_led_stop_custom()</span> functions.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">led_custom_flags</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">wearable</a> applications) defines the available custom effects.</p>
+<li>Play and stop a custom effect of the service LED with the <code>device_led_play_custom()</code> and <code>device_led_stop_custom()</code> functions.
+<p>The <
code>led_custom_flags</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">wearable</a> applications) defines the available custom effects.</p>
<p>The custom effect plays on the service LED that is located on the front of the device.</p>
<pre class="prettyprint">
<p>To lock and unlock the power state:</p>
<ul>
-<li>Lock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_request_lock()</span> function.
+<li>Lock the power state with the <code>device_power_request_lock()</code> function.
<p>The function locks the specific lock type for a specified time. After the given timeout, the lock type is unlocked automatically. If the process is destroyed, every lock is removed.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">power_lock_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">wearable</a> applications) defines the available lock types.</p>
+<p>The <
code>power_lock_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">wearable</a> applications) defines the available lock types.</p>
<pre class="prettyprint">
int error;
</pre>
</li>
-<li>Unlock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_release_lock()</span> function.
+<li>Unlock the power state with the <code>device_power_release_lock()</code> function.
<p>The function releases the specific lock type locked before.</p>
<pre class="prettyprint">
int error;
<ol>
<li>Define a callback, which is called when the device status changes.
-<p>The <
span style="font-family: Courier New,Courier,monospace;">device_callback_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">wearable</a> applications) defines the available callback types.</p>
+<p>The <
code>device_callback_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">wearable</a> applications) defines the available callback types.</p>
<pre class="prettyprint">
static void
</li>
<li>Register the callback function.
-<p>To monitor the display state changes, use the <span style="font-family: Courier New,Courier,monospace;">DEVICE_CALLBACK_DISPLAY_STATE</span> callback type.</p>
+<p>To monitor the display state changes, use the <code>DEVICE_CALLBACK_DISPLAY_STATE</code> callback type.</p>
<pre class="prettyprint">
int error;
error = device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb, NULL);
<p>You can control any external devices attached to the actual user device, and monitor changes in their state. For example, you can access information about the device battery, display, camera flash LED, and power state.</p></li>
-<li><a href="ext_output_n.htm">External Output Devices</a> <strong>in mobile applications only</strong>
+<li><a href="ext_output_n.htm">External Output Devices</a>
<p>You can control external output devices, allowing you to display the application screen on a separate device. You can manage the presentation mode, receive information and notifications from the device, and set the attributes for the external output.</p></li>
<p>You can access information about the system settings. You can retrieve the system configuration related to user preferences.</p></li>
-<li><a href="feedback_n.htm">Sound and Vibration Feedback</a> <strong>in mobile applications only</strong>
+<li><a href="feedback_n.htm">Sound and Vibration Feedback</a>
<p>You can play a feedback pattern using sound or vibration. You can use specific patterns, or specific type and pattern. You can also check whether a specific pattern is supported.</p></li>
</ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/EOM" target="_blank">EOM Sample Description</a></li>
</ul>
</div></div>
<p>The External Output Manager (EOM) is a module for controlling the external output devices.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>The main features of the External Output Manager API include:</p>
<ul>
<li>Managing modes
<ul>
<li>The mirror mode is the default mode. If a mode is not specified, the EOM uses the mirror mode when an external output device is connected.
- <p class="figure">Figure: Mirror mode</p>
+ <p align="center"><strong>Figure: Mirror mode</strong></p>
<p align="center"><img alt="Mirror mode" src="../../images/eom_mirror_mode.png" /></p>
</li>
<li>The presentation mode can be set by an application. If the application wants to display an image or video only in an external output device, the presentation mode must be used.
- <p class="figure">Figure: Presentation mode</p>
+ <p align="center"><strong>Figure: Presentation mode</strong></p>
<p align="center"><img alt="Presentation mode" src="../../images/eom_presentation_mode.png" /></p>
<p>You must use the EOM attributes to set the presentation mode by defining the EOM priority. With these attributes, you can display a fullscreen window on the external output device.</p>
- <table>
- <caption>Table: Presentation mode attributes</caption>
+ <p align="center" class="Table"><strong>Table: Presentation mode attributes</strong></p>
+ <table>
<tbody>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_NORMAL</span></td>
- <td>This priority can be set, if the current priority is none (mirror mode) or <span style="font-family: Courier New,Courier,monospace">NORMAL</span>.
- <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span> or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.</p>
+ <td><code>EOM_OUTPUT_ATTRIBUTE_NORMAL</code></td>
+ <td>This priority can be set, if the current priority is none (mirror mode) or <code>NORMAL</code>.
+ <p>This priority cannot be set, if the current priority is <code>EXCLUSIVE_SHARE</code> or <code>EXCLUSIVE</code>.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE</span></td>
- <td>This priority can be set, if the current priority is none (mirror mode), <span style="font-family: Courier New,Courier,monospace">NORMAL</span>, or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span>.
- <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.</p>
+ <td><code>EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE</code></td>
+ <td>This priority can be set, if the current priority is none (mirror mode), <code>NORMAL</code>, or <code>EXCLUSIVE_SHARE</code>.
+ <p>This priority cannot be set, if the current priority is <code>EXCLUSIVE</code>.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE</span></td>
- <td>This priority can be set, if the current priority is none (mirror mode), <span style="font-family: Courier New,Courier,monospace">NORMAL</span>, or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.
- <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span>.</p>
+ <td><code>EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE</code></td>
+ <td>This priority can be set, if the current priority is none (mirror mode), <code>NORMAL</code>, or <code>EXCLUSIVE</code>.
+ <p>This priority cannot be set, if the current priority is <code>EXCLUSIVE_SHARE</code>.</p>
</td>
</tr>
</tbody>
</table>
- <p>In most applications, the <span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_NORMAL</span> priority is the best option.</p>
+ <p>In most applications, the <code>EOM_OUTPUT_ATTRIBUTE_NORMAL</code> priority is the best option.</p>
</li>
</ul>
<li>Receiving notifications
<p>The EOM can send a notification event to the application. The EOM tracks several changes, such as additions and removals in the external output, mode changes, and attribute state changes, and can notify the application about them.</p></li>
<li>Getting information about the external output device
- <p>You can <a href="#getstatus">get information about the external output device</a> by using various functions. For example, to <a href="#getid">get the ID of the external output device</a>, use the <span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids()</span> function, and to get attribute information, use the <span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute()</span> function.</p>
+ <p>You can <a href="#getstatus">get information about the external output device</a> by using various functions. For example, to <a href="#getid">get the ID of the external output device</a>, use the <code>eom_get_eom_output_ids()</code> function, and to get attribute information, use the <code>eom_get_output_attribute()</code> function.</p>
</li>
<li>Setting the external output
<p>The application can set information (such as attributes and window size) in the EOM.</p>
- <p>Use the <
span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function to <a href="#presentation">set the presentation mode</a>, and use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_window()</span> function to <a href="#setwin">set the window to the external output</a> with the best resolution of the external output device.</p>
+ <p>Use the <
code>eom_set_output_attribute()</code> function to <a href="#presentation">set the presentation mode</a>, and use the <code>eom_set_output_window()</code> function to <a href="#setwin">set the window to the external output</a> with the best resolution of the external output device.</p>
</li>
</ul>
<p>To enable your application to use the EOM functionality:</p>
<ol>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><eom.h></span> header file in your application:
+<li>To use the functions and data types of the External Output Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">wearable</a> applications), include the <code><eom.h></code> header file in your application:
<pre class="prettyprint">
#include <eom.h>
</pre>
</li>
-<li>Initialize the application with the <span style="font-family: Courier New,Courier,monospace">eom_init()</span> function.</li>
+<li>Initialize the application with the <code>eom_init()</code> function.</li>
</ol>
<h2 id="getid" name="getid">Getting the Output ID</h2>
-<p>To retrieve the output ID, use the <span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids()</span> function. You need the ID to get information about the output device and to control the external window.</p>
+<p>To retrieve the output ID, use the <code>eom_get_eom_output_ids()</code> function. You need the ID to get information about the output device and to control the external window.</p>
<pre class="prettyprint">
int
sample_get_output_id(const char *output_name)
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;
}
<h2 id="presentation" name="presentation">Setting the Presentation Mode</h2>
-<p>To connect to an external output device in the presentation mode, use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function to set the presentation mode priority attribute.</p>
+<p>To connect to an external output device in the presentation mode, use the <code>eom_set_output_attribute()</code> function to set the presentation mode priority attribute.</p>
<p>If the setting is successful, the External Output Manager module uses the presentation mode when the external output device connected.</p>
<pre class="prettyprint">
int
}
</pre>
-<p>If the <span style="font-family: Courier New,Courier,monospace">EOM_ERROR_NONE</span> response is received from the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function, the application can use the external output device.</p>
+<p>If the <code>EOM_ERROR_NONE</code> response is received from the <code>eom_set_output_attribute()</code> function, the application can use the external output device.</p>
<h2 id="setwin" name="setwin">Setting the External Window</h2>
-<p>To set an external window, use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_window()</span> function. This function moves the window to the external output and automatically resizes it to the best resolution of the external output device.</p>
-<p>Before calling this function, you must receive a success return from the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function.</p>
+<p>To set an external window, use the <code>eom_set_output_window()</code> function. This function moves the window to the external output and automatically resizes it to the best resolution of the external output device.</p>
+<p>Before calling this function, you must receive a success return from the <code>eom_set_output_attribute()</code> function.</p>
<pre class="prettyprint">
int
make_external_window()
<ul>
<li>You can retrieve information about the external output device details with the following functions:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_type()</span>: Get the connection type of the external output.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_mode()</span>: Get the external output mode.
-<p>The mirror mode is the default mode. If the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function has executed successfully, the external output works in the presentation mode.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute()</span>: Get the presentation mode priority attribute information.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute_state()</span>: Get the attribute state information.
+<li><code>eom_get_output_type()</code>: Get the connection type of the external output.</li>
+<li><code>eom_get_output_mode()</code>: Get the external output mode.
+<p>The mirror mode is the default mode. If the <code>eom_set_output_attribute()</code> function has executed successfully, the external output works in the presentation mode.</p></li>
+<li><code>eom_get_output_attribute()</code>: Get the presentation mode priority attribute information.</li>
+<li><code>eom_get_output_attribute_state()</code>: Get the attribute state information.
<p>If the application sets the attribute, the EOM sends the current attribute state to the application:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ACTIVE</span>: The application can use the external output.</li>
-<li><span style="font-family: Courier New,Courier,monospace">INACTIVE</span>: The application was disconnected from the external output.</li>
-<li><span style="font-family: Courier New,Courier,monospace">LOST</span>: The application cannot use the external output because another application has set the attribute. The application cannot receive the attribute state anymore.</li>
+<li><code>ACTIVE</code>: The application can use the external output.</li>
+<li><code>INACTIVE</code>: The application was disconnected from the external output.</li>
+<li><code>LOST</code>: The application cannot use the external output because another application has set the attribute. The application cannot receive the attribute state anymore.</li>
</ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_resolution()</span>: Get the best resolution of the external output device.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_physical_size()</span>: Get the physical size of the external output device.</li>
+<li><code>eom_get_output_resolution()</code>: Get the best resolution of the external output device.</li>
+<li><code>eom_get_output_physical_size()</code>: Get the physical size of the external output device.</li>
</ul>
</li>
<li>You can receive notifications about state changes in the external output device:
eom_get_output_attribute_state(output_id, &state);
if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE) {
- /* Start displaying the image to the external output (info->external_window); */
+ /*
+ Start displaying the image to the external output
+ (info->external_window);
+ */
} else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE) {
/* Stop displaying the image */
/* Destroy the external_window */
}
</pre>
-<p>You can also define the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback to be triggered when the EOM output mode changes.</p>
+<p>You can also define the <code>eom_mode_change_cb</code> callback to be triggered when the EOM output mode changes.</p>
</li>
<li>Register the callbacks:
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();
elm_run();
</pre>
-<p>To register the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback, use the <span style="font-family: Courier New,Courier,monospace">eom_set_mode_changed_cb()</span> function.</p>
+<p>To register the <code>eom_mode_change_cb</code> callback, use the <code>eom_set_mode_changed_cb()</code> function.</p>
</li>
<li>When no longer needed, delete the callbacks:
}
</pre>
-<p>To delete the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback, use the <span style="font-family: Courier New,Courier,monospace">eom_unset_mode_changed_cb()</span> function.</p>
+<p>To delete the <code>eom_mode_change_cb</code> callback, use the <code>eom_unset_mode_changed_cb()</code> function.</p>
</li>
</ol>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Sound and Vibration Feedback</h1>
<p>You can play feedback for a specific pattern or play it for a specific type and pattern. You can also check whether a specific pattern is supported.</p>
- <p>This feature is supported in mobile applications only.</p>
<p>The main features of the Feedback API include:</p>
<ul>
<ul>
<li>Sound management
<p>You can request the sound-server to play a sound by using the mm-keysound library.</p>
- <p>You can use sound feedback with the <span style="font-family: Courier New,Courier,monospace">feedback_play()</span> or <span style="font-family: Courier New,Courier,monospace">feedback_play_type()</span> function. The attribute for the sound type is <span style="font-family: Courier New,Courier,monospace">FEEDBACK_TYPE_SOUND</span>.</p>
+ <p>You can use sound feedback with the <code>feedback_play()</code> or <code>feedback_play_type()</code> function. The attribute for the sound type is <code>FEEDBACK_TYPE_SOUND</code>.</p>
</li>
<li>Vibration management
- <p>You can request the device to vibrate by using a dbus method call. A haptic monotone or haptic effect is requested to device, based on the vibration data type in the <span style="font-family: Courier New,Courier,monospace">vibration.conf</span> configuration.</p>
- <p>You can use vibration feedback with the <span style="font-family: Courier New,Courier,monospace">feedback_play()</span> or <span style="font-family: Courier New,Courier,monospace">feedback_play_type()</span> function. The attribute for the vibration type is <span style="font-family: Courier New,Courier,monospace">FEEDBACK_TYPE_VIBRATION</span>.</p></li></ul>
+ <p>You can request the device to vibrate by using a dbus method call. A haptic monotone or haptic effect is requested to device, based on the vibration data type in the <code>vibration.conf</code> configuration.</p>
+ <p>You can use vibration feedback with the <code>feedback_play()</code> or <code>feedback_play_type()</code> function. The attribute for the vibration type is <code>FEEDBACK_TYPE_VIBRATION</code>.</p></li></ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><feedback.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Feedback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">wearable</a> applications), include the <code><feedback.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <feedback.h>
</pre>
<h2 id="play" name="play">Playing Feedback for a Specific Pattern</h2>
-<p>To play a sound and vibrate for a specific pattern, use the <span style="font-family: Courier New,Courier,monospace;">feedback_play()</span> function.</p>
-<p>Internally, the function invokes the <span style="font-family: Courier New,Courier,monospace;">sound_play</span> or <span style="font-family: Courier New,Courier,monospace;">vibrator_play</span> feedback type. It returns success when the pattern enum is valid.</p>
+<p>To play a sound and vibrate for a specific pattern, use the <code>feedback_play()</code> function.</p>
+<p>Internally, the function invokes the <code>sound_play</code> or <code>vibrator_play</code> feedback type. It returns success when the pattern enum is valid.</p>
<pre class="prettyprint">
int ret;
ret = feedback_play(pattern);
<h2 id="playtype" name="playtype">Playing Feedback for a Specific Type and Pattern</h2>
-<p>To play a sound and vibrate for a specific type and pattern, use the <span style="font-family: Courier New,Courier,monospace;">feedback_play_type()</span> function.</p>
-<p>Internally, the function invokes the <span style="font-family: Courier New,Courier,monospace;">sound_play</span> or <span style="font-family: Courier New,Courier,monospace;">vibrator_play</span> feedback type. It returns success when the pattern enum is valid.</p>
+<p>To play a sound and vibrate for a specific type and pattern, use the <code>feedback_play_type()</code> function.</p>
+<p>Internally, the function invokes the <code>sound_play</code> or <code>vibrator_play</code> feedback type. It returns success when the pattern enum is valid.</p>
<pre class="prettyprint">
static int ret;
ret = feedback_play(type, pattern);
<h2 id="support" name="support">Checking for Pattern Support</h2>
-<p>To determine whether a specific pattern is supported for a specific feedback type, use the <span style="font-family: Courier New,Courier,monospace;">feedback_is_supported_pattern()</span> function.</p>
-<p>Internally, the function invokes the <span style="font-family: Courier New,Courier,monospace;">sound_is_supported</span> or <span style="font-family: Courier New,Courier,monospace;">vibrator_is_supported</span> feedback type.</p>
+<p>To determine whether a specific pattern is supported for a specific feedback type, use the <code>feedback_is_supported_pattern()</code> function.</p>
+<p>Internally, the function invokes the <code>sound_is_supported</code> or <code>vibrator_is_supported</code> feedback type.</p>
<pre class="prettyprint">
static int ret;
bool status;
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <code><runtime_info.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <runtime_info.h>
</pre>
<p>To get information on, for example, whether Bluetooth is enabled or an audio jack connected:</p>
<ol>
<li>Check whether Bluetooth is enabled.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span> key with the data type-specific get function.</p>
-<p>The Bluetooth enabled key data type is <span style="font-family: Courier New,Courier,monospace">bool</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_bool()</span> function.</p>
+<p>Use the <code>RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</code> key with the data type-specific get function.</p>
+<p>The Bluetooth enabled key data type is <code>bool</code>, which means that you need to use the <code>runtime_info_get_value_bool()</code> function.</p>
<pre class="prettyprint">
#include <stdbool.h>
}
</pre></li>
<li>Get the audio jack connection status.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span> key with the data type-specific get function.</p>
-<p>The audio jack status key data type is <span style="font-family: Courier New,Courier,monospace">integer</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_int()</span> function.</p>
+<p>Use the <code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code> key with the data type-specific get function.</p>
+<p>The audio jack status key data type is <code>integer</code>, which means that you need to use the <code>runtime_info_get_value_int()</code> function.</p>
<pre class="prettyprint">
void
<h2 id="get_function" name="get_function">Getting Runtime Information with a Function</h2>
<p>Some runtime information can be retrieved by using a function.</p>
-<p>To get information on, for example, the current frequency of the CPU core 0, retrieve the CPU core frequency with the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_processor_current_frequency()</span> function:</p>
+<p>To get information on, for example, the current frequency of the CPU core 0, retrieve the CPU core frequency with the <code>runtime_info_get_processor_current_frequency()</code> function:</p>
<pre class="prettyprint">
void
<p>To monitor, for example, the connection state of the USB cable:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">runtime_info_set_changed_cb()</span> function with the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span> key to register a callback that is triggered each time the USB cable connection state changes:
+<li>Use the <code>runtime_info_set_changed_cb()</code> function with the <code>RUNTIME_INFO_KEY_USB_CONNECTED</code> key to register a callback that is triggered each time the USB cable connection state changes:
<pre class="prettyprint">
#include <stdbool.h>
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;
}
</pre>
</li>
-<li>When no longer needed, deregister the callback with the <span style="font-family: Courier New,Courier,monospace">runtime_info_unset_changed_cb()</span> function:
+<li>When no longer needed, deregister the callback with the <code>runtime_info_unset_changed_cb()</code> function:
<pre class="prettyprint">
ret = runtime_info_unset_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED);
if (ret != RUNTIME_INFO_ERROR_NONE) {
<h2 id="keys">Runtime Information Keys</h2>
<p>The following table lists the available runtime information keys.</p>
-
+
+ <p align="center" class="Table"><strong>Table: Runtime information keys</strong></p>
<table id="runtime_information_keys" border="1">
- <caption>
- Table: Runtime information keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether Bluetooth is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether a Wi-Fi hotspot is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether Bluetooth tethering is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether USB tethering is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether the location service is allowed to use location data from GPS satellites.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether the packet data through 3G network is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether data roaming is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_VIBRATION_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_VIBRATION_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether vibration is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether an audio jack is connected.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_GPS_STATUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>RUNTIME_INFO_KEY_GPS_STATUS</code></td>
+ <td><code>int</code></td>
<td>Indicates the current status of GPS.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether the battery is currently charging.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_TV_OUT_CONNECTED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_TV_OUT_CONNECTED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether TV out is connected.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code></td>
+ <td><code>int</code></td>
<td>Indicates the current status of the audio jack.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_USB_CONNECTED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether USB is connected.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_CHARGER_CONNECTED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_CHARGER_CONNECTED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether a charger is connected.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td><code>RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</code></td>
+ <td><code>bool</code></td>
<td>Indicates whether auto-rotation is enabled.</td>
</tr>
</tbody>
<p>The System Settings API provides 2 function types listed in the following table. Certain functions support both types, whereas others only support the getter function.</p>
+<p align="center" class="Table"><strong>Table: System Settings API function types</strong></p>
<table>
-<caption>Table: System Settings API function types</caption>
<tbody>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_bool()</span>
- <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_int()</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string()</span></p></td>
+ <td><code>GETTER</code></td>
+ <td><code>system_settings_get_value_bool()</code>
+ <p><code>system_settings_get_value_int()</code></p>
+ <p><code>system_settings_get_value_string()</code></p></td>
<td>Get the user-defined values by data type (bool, int, or string).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb()</span><p><span style="font-family: Courier New,Courier,monospace">system_settings_unset_changed_cb()</span></p></td>
- <td>Register and deregister callback functions which are triggered when the <span style="font-family: Courier New,Courier,monospace">SETTER</span> related to the key is called.</td>
+ <td><code>NOTIFIER</code></td>
+ <td><code>system_settings_set_changed_cb()</code><p><code>system_settings_unset_changed_cb()</code></p></td>
+ <td>Register and deregister callback functions which are triggered when the <code>SETTER</code> related to the key is called.</td>
</tr></tbody>
</table>
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 */
</pre>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the System Settings API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><system_settings.h></span> header file in your application:</p>
+<p>To use the functions and data types of the System Settings API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">wearable</a> applications), include the <code><system_settings.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <system_settings.h>
</pre>
} _SYSTEM_SETTINGS_TYPES;
struct _ret_type_define
-_ret_type[] =
-{
+_ret_type[] = {
{
SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE, _RET_STRING
},
};
static const char*
-_info_key[SYS_INFO_COUNT]=
-{
+_info_key[SYS_INFO_COUNT] = {
"SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE",
"SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN",
"SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN",
</li>
<li><p>Obtain the setting data.</p>
-<p>The available settings are defined in the <
span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications).</p>
+<p>The available settings are defined in the <
code>system_settings_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications).</p>
<p>Read the data using the following functions, according to the data type of the value you want to read:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_int()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_bool()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_double()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string()</span></li>
+<ul><li><code>system_settings_get_value_int()</code></li>
+<li><code>system_settings_get_value_bool()</code></li>
+<li><code>system_settings_get_value_double()</code></li>
+<li><code>system_settings_get_value_string()</code></li>
</ul>
<pre class="prettyprint">
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);
<li><p>Monitor changes in the setting values.</p>
-<ol type="a"><li><p>To monitor when a system setting value changes, set a callback using the <span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb()</span> function with the appropriate key as the first parameter:</p>
+<ol type="a"><li><p>To monitor when a system setting value changes, set a callback using the <code>system_settings_set_changed_cb()</code> function with the appropriate key as the first parameter:</p>
<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>
-<p>The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> key refers to the key that has changed.</p>
+<p>The <code>system_settings_key_e</code> key refers to the key that has changed.</p>
<pre class="prettyprint">
static void
<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>
<h2 id="details">System Setting Keys</h2>
-<p>The <
span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications) defines all enumerations that work as parameters for the System Settings API.</p>
+<p>The <
code>system_settings_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications) defines all enumerations that work as parameters for the System Settings API.</p>
<p>The following table lists the available system setting keys.</p>
- <table id="input" border="1">
- <caption>
- Table: System settings keys
- </caption>
+ <p align="center" class="Table"><strong>Table: System settings keys</strong></p>
+<table id="input" border="1">
<tbody>
<tr>
<th>Key</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER</code></td>
<td>Current system default font type.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEVICE_NAME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_DEVICE_NAME</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Device name.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether rotation control is automatic.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_EMAIL_ALERT_RINGTONE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_EMAIL_ALERT_RINGTONE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>File path of the current email alert ringtone.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_SIZE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_FONT_SIZE</code></td>
+ <td><code>int</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Current system font size.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_TYPE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_FONT_TYPE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Current system font type.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>File path of the current ringtone.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Current country setting in the <LANGUAGE>_<REGION> syntax. The country setting is in the ISO 639-2 format, and the region setting is in the ISO 3166-1 alpha-2 format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Current language setting in the <LANGUAGE>_<REGION> syntax. The language setting is in the ISO 639-2 format and the region setting is in the ISO 3166-1 alpha-2 format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
- <td>Indicates whether the 24-hour clock is used. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the 12-hour clock is used.</td>
+ <td><code>SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
+ <td>Indicates whether the 24-hour clock is used. If the value is <code>false</code>, the 12-hour clock is used.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Current time zone.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the motion service is activated.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the device is in the flight mode.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_WIFI_NOTIFICATION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_NETWORK_WIFI_NOTIFICATION</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether Wi-Fi-related notifications are enabled on the device.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_LOCK</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_SOUND_LOCK</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the screen lock sound is enabled on the device (for example, whether the LCD on/off sound is enabled). </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>File path of the current notification tone set by the user. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION_REPETITION_PERIOD</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION_REPETITION_PERIOD</code></td>
+ <td><code>int</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Time period for notification repetitions.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the device is in the silent mode.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_TOUCH</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_SOUND_TOUCH</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the screen touch sound is enabled on the device.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_TIME_CHANGED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_TIME_CHANGED</code></td>
+ <td><code>int</code></td>
+ <td><code>NOTIFIER</code></td>
<td>Event that occurs when the system changes time to notify you about the time change.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_USB_DEBUGGING_ENABLED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_USB_DEBUGGING_ENABLED</code></td>
+ <td><code>bool</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>Indicates whether the USB debugging is enabled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>File path of the current home screen wallpaper.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+ <td><code>SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN</code></td>
+ <td><code>string</code></td>
+ <td><code>GETTER, NOTIFIER</code></td>
<td>File path of the current lock screen wallpaper.</td>
</tr>
</tbody>
<p>You can <a href="#check">check whether the device supports a feature</a>, such as camera.</p></li>
</ul>
- <table border="1">
- <caption>
- Table: Device-specific information categories
- </caption>
+ <p align="center" class="Table"><strong>Table: Device-specific information categories</strong></p>
+ <table border="1">
<tbody>
<tr>
<th>Category</th>
<p>To obtain the information, query a feature or system key.</p>
+<p align="center" class="Table"><strong>Table: System information keys</strong></p>
<table>
-<caption>Table: System information keys</caption>
<tbody>
<tr>
<th colspan="4"><a href="#feature">Feature keys</a></th>
</tr>
</tbody></table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some device-specific information keys look similar to feature keys for application filtering, but their usage differs. Feature keys for device-specific information are used to determine whether the feature is supported in the system. Feature keys for application filtering let the Tizen store filter applications based on features.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ Some device-specific information keys look similar to feature keys for application filtering, but their usage differs. Feature keys for device-specific information are used to determine whether the feature is supported in the system. Feature keys for application filtering let the Tizen store filter applications based on features.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
+<p>To use the functions and data types of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications), include the <code><system_info.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <system_info.h>
</pre>
<h2 id="model" name="model">Getting the Device Model Name</h2>
-<p>Device-specific information consists of "key, value" pairs. To get the device model name, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/system/model_name</span> key with the data type-specific get function.</p>
-<p>The model name key data type is <span style="font-family: Courier New,Courier,monospace;">string</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_string()</span> function.</p>
-<p>When no longer needed, release the value of the key with the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<p>Device-specific information consists of "key, value" pairs. To get the device model name, use the <code>http://tizen.org/system/model_name</code> key with the data type-specific get function.</p>
+<p>The model name key data type is <code>string</code>, which means that you need to use the <code>system_info_get_platform_string()</code> function.</p>
+<p>When no longer needed, release the value of the key with the <code>free()</code> function.</p>
<pre class="prettyprint">
void
<h2 id="check" name="check">Checking for Supported Features</h2>
-<p>To determine, for example, whether the device has a camera, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/camera</span> key with the data type-specific get function.</p>
-<p>The camera key data type is <span style="font-family: Courier New,Courier,monospace;">bool</span>, which means that you need to use the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_bool()</span> function.</p>
+<p>To determine, for example, whether the device has a camera, use the <code>http://tizen.org/feature/camera</code> key with the data type-specific get function.</p>
+<p>The camera key data type is <code>bool</code>, which means that you need to use the <code>system_info_get_platform_bool()</code> function.</p>
<pre class="prettyprint">
#include <stdbool.h>
<h2 id="feature">Feature Keys</h2>
<p>The following table lists the battery feature keys.</p>
-<table id="battery" border="1">
- <caption>
- Table: Battery feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Battery feature keys</strong></p>
+
+ <table id="battery" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/battery</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a battery.</td>
+ <td><code>http://tizen.org/feature/battery</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device has a battery.</td>
</tr>
</tbody>
</table>
<p>The following table lists the camera feature keys.</p>
+<p align="center" class="Table"><strong>Table: Camera feature keys</strong></p>
<table id="camera" border="1">
- <caption>
- Table: Camera feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides any kind of a camera.</td>
+ <td><code>http://tizen.org/feature/camera</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device provides any kind of a camera.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a back-facing camera.</td>
+ <td><code>http://tizen.org/feature/camera.back</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera</code> key, if the device provides a back-facing camera.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span> key, if the device provides a back-facing camera with a flash.</td>
+ <td><code>http://tizen.org/feature/camera.back.flash</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera.back</code> key, if the device provides a back-facing camera with a flash.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a front-facing camera.</td>
+ <td><code>http://tizen.org/feature/camera.front</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera</code> key, if the device provides a front-facing camera.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span> key, if the device provides a front-facing camera with a flash.</td>
+ <td><code>http://tizen.org/feature/camera.front.flash</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera.front</code> key, if the device provides a front-facing camera with a flash.</td>
</tr>
</tbody>
</table>
<p>The following table lists the consumer IR feature keys.</p>
+<p align="center" class="Table"><strong>Table: Consumer IR feature keys</strong></p>
<table id="consumer" border="1">
- <caption>
- Table: Consumer IR feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/consumer_ir</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Consumer Infrared (CIR) feature.</td>
+ <td><code>http://tizen.org/feature/consumer_ir</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Consumer Infrared (CIR) feature.</td>
</tr>
</tbody>
</table>
<p>The following table lists the convergence D2D feature keys.</p>
+<p align="center" class="Table"><strong>Table: Convergence D2D feature keys</strong></p>
<table id="convergence" border="1">
- <caption>
- Table: Convergence D2D feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/convergence.d2d</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a service for the discovery of near-by devices and the communication with the remote devices. The device must support 1 or more network features.</td>
+ <td><code>http://tizen.org/feature/convergence.d2d</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports a service for the discovery of near-by devices and the communication with the remote devices. The device must support 1 or more network features.</td>
</tr>
</tbody>
</table>
<p>The following table lists the database feature keys.</p>
+<p align="center" class="Table"><strong>Table: Database feature keys</strong></p>
<table id="database" border="1">
- <caption>
- Table: Database feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports database encryption.</td>
+ <td><code>http://tizen.org/feature/database.encryption</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports database encryption.</td>
</tr>
</tbody>
</table>
<p>The following table lists the datasync feature keys.</p>
-<table id="datasync" border="1">
- <caption>
- Table: Datasync feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Datasync feature keys</strong></p>
+<table id="datasync" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the DataSynchronization API.</td>
+ <td><code>http://tizen.org/feature/datasync</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the DataSynchronization API.</td>
</tr>
</tbody>
</table>
<p>The following table lists the download feature keys.</p>
-<table id="download" border="1">
- <caption>
- Table: Download feature keys
- </caption>
+<p align="center" class="Table"><strong>Table: Download feature keys</strong></p>
+<table id="download" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Download API.</td>
+ <td><code>http://tizen.org/feature/download</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Download API.</td>
</tr>
</tbody>
</table>
<p>The following table lists the FIDO feature keys.</p>
+<p align="center" class="Table"><strong>Table: FIDO feature keys</strong></p>
<table id="fido" border="1">
- <caption>
- Table: FIDO feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fido.uaf</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td>
+ <td><code>http://tizen.org/feature/fido.uaf</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td>
</tr>
</tbody>
</table>
<p>The following table lists the FM radio feature keys.</p>
+ <p align="center" class="Table"><strong>Table: FM radio feature keys</strong></p>
<table id="fmradio" border="1">
- <caption>
- Table: FM radio feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports an FM radio.</td>
+ <td><code>http://tizen.org/feature/fmradio</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports an FM radio.</td>
</tr>
</tbody>
</table>
- <p>The following table lists the graphics feature keys.</p>
- <table id="graphics" border="1">
- <caption>
- Table: Graphics feature keys
- </caption>
+ <p>The following table lists the graphics feature keys.</p>
+ <p align="center" class="Table"><strong>Table: Graphics feature keys</strong></p>
+ <table id="graphics" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports graphics hardware acceleration.</td>
+ <td><code>http://tizen.org/feature/graphics.acceleration</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports graphics hardware acceleration.</td>
</tr>
</tbody>
</table>
<p>The following table lists the human activity monitor feature keys.</p>
-<table id="ham" border="1">
- <caption>
- Table: Human activity monitor feature keys
- </caption>
+<p align="center" class="Table"><strong>Table: Human activity monitor feature keys</strong></p>
+ <table id="ham" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any of the human activity monitor sensors.</td>
+ <td><code>http://tizen.org/feature/humanactivitymonitor</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports any of the human activity monitor sensors.</td>
</tr>
</tbody>
</table>
<p>The following table lists the input feature keys.</p>
- <table id="input" border="1">
- <caption>
- Table: Input feature keys
- </caption>
+<p align="center" class="Table"><strong>Table: Input feature keys</strong></p>
+ <table id="input" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides a built-in keyboard supporting any keyboard layout.</td>
+ <td><code>http://tizen.org/feature/input.keyboard</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device provides a built-in keyboard supporting any keyboard layout.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
- <td>The platform returns the keyboard layout (such as <span style="font-family: Courier New,Courier,monospace">qwerty</span>) supported by the built-in keyboard for this key and returns <span style="font-family: Courier New,Courier,monospace">true</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.
- <p>If the device does not provide a built-in keyboard, the platform returns an empty string for this key and returns <span style="font-family: Courier New,Courier,monospace">false</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.</p></td>
+ <td><code>http://tizen.org/feature/input.keyboard.layout</code></td>
+ <td><code>String</code></td>
+ <td>The platform returns the keyboard layout (such as <code>qwerty</code>) supported by the built-in keyboard for this key and returns <code>true</code> for the <code>http://tizen.org/feature/input.keyboard</code> key.
+ <p>If the device does not provide a built-in keyboard, the platform returns an empty string for this key and returns <code>false</code> for the <code>http://tizen.org/feature/input.keyboard</code> key.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotating bezel feature.</td>
+ <td><code>http://tizen.org/feature/input.rotating_bezel</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the rotating bezel feature.</td>
</tr>
</tbody>
</table>
<p>The following table lists the IOT feature keys.</p>
-<table id="iot" border="1">
- <caption>
- Table: IOT feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: IOT feature keys</strong></p>
+<table id="iot" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/iot.ocf</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Open Connectivity Foundation (OCF) framework.</td>
+ <td><code>http://tizen.org/feature/iot.ocf</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Open Connectivity Foundation (OCF) framework.</td>
</tr>
</tbody>
</table>
<p>The following table lists the LED feature keys.</p>
+<p align="center" class="Table"><strong>Table: LED feature keys</strong></p>
<table id="led" border="1">
- <caption>
- Table: LED feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED.</td>
+ <td><code>http://tizen.org/feature/led</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the LED.</td>
</tr>
</tbody>
</table>
<p>The following table lists the location feature keys.</p>
-<table id="location" border="1">
- <caption>
- Table: Location feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Location feature keys</strong></p>
+<table id="location" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports location positioning.</td>
+ <td><code>http://tizen.org/feature/location</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports location positioning.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the GPS batch feature.</td>
+ <td><code>http://tizen.org/feature/location.batch</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the GPS batch feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.geofence</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the geofence feature.</td>
+ <td><code>http://tizen.org/feature/location.geofence</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the geofence feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the Global Positioning System (GPS).</td>
+ <td><code>http://tizen.org/feature/location.gps</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the Global Positioning System (GPS).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps.satellite</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> key, if the device has a GPS chip that supports satellite information.</td>
+ <td><code>http://tizen.org/feature/location.gps.satellite</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location.gps</code> key, if the device has a GPS chip that supports satellite information.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the Wi-Fi-based Positioning System (WPS).</td>
+ <td><code>http://tizen.org/feature/location.wps</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the Wi-Fi-based Positioning System (WPS).</td>
</tr>
</tbody>
</table>
<p>The following table lists the maps feature keys.</p>
+ <p align="center" class="Table"><strong>Table: Maps feature keys</strong></p>
<table id="maps" border="1">
- <caption>
- Table: Maps feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/maps</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the map service feature.</td>
+ <td><code>http://tizen.org/feature/maps</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the map service feature.</td>
</tr>
</tbody>
</table>
<p>The following table lists the media feature keys.</p>
- <table id="media" border="1">
- <caption>
- Table: Media feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Media feature keys</strong></p>
+ <table id="media" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the audio recording feature.</td>
+ <td><code>http://tizen.org/feature/media.audio_recording</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the audio recording feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the image capture feature.</td>
+ <td><code>http://tizen.org/feature/media.image_capture</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the image capture feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the video recording feature.</td>
+ <td><code>http://tizen.org/feature/media.video_recording</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the video recording feature.</td>
</tr>
</tbody>
</table>
<p>The following table lists the microphone feature keys.</p>
+<p align="center" class="Table"><strong>Table: Microphone feature keys</strong></p>
<table id="microphone" border="1">
- <caption>
- Table: Microphone feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a microphone.</td>
+ <td><code>http://tizen.org/feature/microphone</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports a microphone.</td>
</tr>
</tbody>
</table>
-<p>The following table lists the multimedia feature keys.</p>
+<p>The following table lists the multimedia feature keys.</p>
+<p align="center" class="Table"><strong>Table: Multimedia feature keys</strong></p>
<table id="multimedia" border="1">
- <caption>
- Table: Multimedia feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the transcoder.</td>
+ <td><code>http://tizen.org/feature/multimedia.transcoder</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the transcoder.</td>
</tr>
</tbody>
</table>
<p>The following table lists the multi-point touch feature keys.</p>
- <table id="multipoint" border="1">
- <caption>
- Table: Multi-point touch feature keys
- </caption>
+<p align="center" class="Table"><strong>Table: Multi-point touch feature keys</strong></p>
+ <table id="multipoint" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports pinch zoom gestures.</td>
+ <td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports pinch zoom gestures.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td>
+ <td><code>int</code></td>
<td>The platform returns the maximum number of supported multi-touch points for this key.
<p>The platform returns a value less than 2 for this key, if the device does not support multi-point touch.</p></td>
</tr>
</tbody>
</table>
<p>The following table lists the network feature keys.</p>
- <table id="network" border="1">
- <caption>
- Table: Network feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Network feature keys</strong></p>
+ <table id="network" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth.</td>
+ <td><code>http://tizen.org/feature/network.bluetooth</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Handsfree Profile (HFP).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Handsfree Profile (HFP).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.controller</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Advanced Audio Distribute Profile (A2DP).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Advanced Audio Distribute Profile (A2DP).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Health Device Profile (HDP).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.health</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Health Device Profile (HDP).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Human Input Device (HID).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.hid</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Human Input Device (HID).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid.device</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Bluetooth Human Interface Device (HID) device feature.</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.hid.device</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Bluetooth Human Interface Device (HID) device feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Low Energy (BLE).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.le</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Low Energy (BLE).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Object Push Profile (OPP).</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.opp</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth Object Push Profile (OPP).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.phonebook.client</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Bluetooth Phone Book Access (PBAP) client feature.</td>
+ <td><code>http://tizen.org/feature/network.bluetooth.phonebook.client</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Bluetooth Phone Book Access (PBAP) client feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.ethernet</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Ethernet.</td>
+ <td><code>http://tizen.org/feature/network.ethernet</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Ethernet.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Internet access.</td>
+ <td><code>http://tizen.org/feature/network.internet</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Internet access.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.mtp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Media Transfer Protocol (MTP) Host (Initiator) feature.</td>
+ <td><code>http://tizen.org/feature/network.mtp</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Media Transfer Protocol (MTP) Host (Initiator) feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.net_proxy</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the net-proxy, a proxy type connection for a device that acts as an intermediary between client (network service customer) and server (network service provider).</td>
+ <td><code>http://tizen.org/feature/network.net_proxy</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the net-proxy, a proxy type connection for a device that acts as an intermediary between client (network service customer) and server (network service provider).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Adapter and NDEF APIs which require Near Field Communication (NFC).</td>
+ <td><code>http://tizen.org/feature/network.nfc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Adapter and NDEF APIs which require Near Field Communication (NFC).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device is recognized by the NFC card readers.</td>
+ <td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device is recognized by the NFC card readers.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HCE card emulation feature.</td>
+ <td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the HCE card emulation feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports P2P APIs which require Near Field Communication (NFC).</td>
+ <td><code>http://tizen.org/feature/network.nfc.p2p</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports P2P APIs which require Near Field Communication (NFC).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> key, if the device supports the NFC reserved push feature.</td>
+ <td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.nfc</code> key, if the device supports the NFC reserved push feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Tag APIs which require Near Field Communication (NFC).</td>
+ <td><code>http://tizen.org/feature/network.nfc.tag</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Tag APIs which require Near Field Communication (NFC).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the IP push service provided by
+ <td><code>http://tizen.org/feature/network.push</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the IP push service provided by
the Tizen reference implementation.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports secure elements.</td>
+ <td><code>http://tizen.org/feature/network.secure_element</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports secure elements.</td>
</tr><tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports eSE secure elements.</td>
+ <td><code>http://tizen.org/feature/network.secure_element.ese</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports eSE secure elements.</td>
</tr><tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports UICC secure elements.</td>
+ <td><code>http://tizen.org/feature/network.secure_element.uicc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports UICC secure elements.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.dnssd</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the DNS-based Service Discovery Feature (DNSSD).</td>
+ <td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the DNS-based Service Discovery Feature (DNSSD).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.service_discovery.ssdp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Simple Service Discovery Protocol feature (SSDP).</td>
+ <td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Simple Service Discovery Protocol feature (SSDP).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports telephony.</td>
+ <td><code>http://tizen.org/feature/network.telephony</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports telephony.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports MMS.</td>
+ <td><code>http://tizen.org/feature/network.telephony.mms</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports MMS.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.cdma</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the CDMA service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.cdma</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the CDMA service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.edge</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the EDGE service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.edge</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the EDGE service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.gprs</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the GPRS service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.gprs</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the GPRS service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.gsm</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the GSM service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.gsm</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the GSM service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.hsdpa</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HSDPA service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.hsdpa</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the HSDPA service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.hspa</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HSPA service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.hspa</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the HSPA service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.hsupa</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HSUPA service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.hsupa</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the HSUPA service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.lte</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LTE service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.lte</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the LTE service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.service.umts</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the UMTS service.</td>
+ <td><code>http://tizen.org/feature/network.telephony.service.umts</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the UMTS service.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports SMS.</td>
+ <td><code>http://tizen.org/feature/network.telephony.sms</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports SMS.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms.cbs</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports the cell broadcast service (CBS) for SMS.</td>
+ <td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports the cell broadcast service (CBS) for SMS.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any kind of tethering.</td>
+ <td><code>http://tizen.org/feature/network.tethering</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports any kind of tethering.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over Bluetooth.</td>
+ <td><code>http://tizen.org/feature/network.tethering.bluetooth</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over Bluetooth.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over USB connection.</td>
+ <td><code>http://tizen.org/feature/network.tethering.usb</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over USB connection.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over Wi-Fi.</td>
+ <td><code>http://tizen.org/feature/network.tethering.wifi</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over Wi-Fi.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.vpn</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Virtual Private Network feature (VPN).</td>
+ <td><code>http://tizen.org/feature/network.vpn</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Virtual Private Network feature (VPN).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi.</td>
+ <td><code>http://tizen.org/feature/network.wifi</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports all APIs which require Wi-Fi.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct™.</td>
+ <td><code>http://tizen.org/feature/network.wifi.direct</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.wifi</code> key, if the device supports Wi-Fi Direct™.</td>
</tr><tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct™ display feature.</td>
+ <td><code>http://tizen.org/feature/network.wifi.direct.display</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.wifi</code> key, if the device supports Wi-Fi Direct™ display feature.</td>
</tr><tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct™ service discovery.</td>
+ <td><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.wifi</code> key, if the device supports Wi-Fi Direct™ service discovery.</td>
</tr><tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.tdls</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Wi-Fi Tunneled Direct Link Setup (TDLS).</td>
+ <td><code>http://tizen.org/feature/network.wifi.tdls</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Wi-Fi Tunneled Direct Link Setup (TDLS).</td>
</tr>
</tbody>
</table>
<p>The following table lists the OpenGL® ES feature keys.</p>
+<p align="center" class="Table"><strong>Table: OpenGL® ES feature keys</strong></p>
<table id="opengl" border="1">
- <caption>
- Table: OpenGL® ES feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any OpenGL® ES version and any texture format.</td>
+ <td><code>http://tizen.org/feature/opengles</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports any OpenGL® ES version and any texture format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any OpenGL® ES or compressed texture format.
+ <td><code>http://tizen.org/feature/opengles.texture_format</code></td>
+ <td><code>String</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports any OpenGL® ES or compressed texture format.
<p>If the device supports no formats, the platform returns an empty string for this key.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the 3DC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the 3DC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ATC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the ATC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ETC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the ETC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PTC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the PTC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PVRTC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the PVRTC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the UTC texture format for OpenGL® ES.</td>
+ <td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the UTC texture format for OpenGL® ES.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL® ES version 1.1.</td>
+ <td><code>http://tizen.org/feature/opengles.version.1_1</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL® ES version 1.1.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL® ES version 2.0.</td>
+ <td><code>http://tizen.org/feature/opengles.version.2_0</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL® ES version 2.0.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.3_0</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL® ES version 3.0.</td>
+ <td><code>http://tizen.org/feature/opengles.version.3_0</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL® ES version 3.0.</td>
</tr>
</tbody>
</table>
<p>The following table lists the platform feature keys.</p>
- <table id="platformfeat" border="1">
- <caption>
- Table: Platform feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Platform feature keys</strong></p>
+ <table id="platformfeat" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.api.version</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.core.api.version</code></td>
+ <td><code>String</code></td>
<td>The platform returns the version of the Tizen Core API in the "[Major].[Minor]" format.
<p>If a device does not provide the Tizen Core API, it returns an empty string for this key.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.core.cpu.arch</code></td>
+ <td><code>String</code></td>
<td>The platform returns the CPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv6</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv6 CPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.cpu.arch.armv6</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the ARMv6 CPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv7 CPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the ARMv7 CPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the x86 CPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the x86 CPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.frequency</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/platform.core.cpu.frequency</code></td>
+ <td><code>int</code></td>
<td>The platform returns the frequency at which a core CPU is running.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch</code></td>
+ <td><code>String</code></td>
<td>The platform returns the FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE2 FPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the SSE2 FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE3 FPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the SSE3 FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSSE3 FPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the SSSE3 FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV2 FPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv2</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the VFPV2 FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV3 FPU architecture.</td>
+ <td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device runs on the VFPV3 FPU architecture.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.api.version</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.native.api.version</code></td>
+ <td><code>String</code></td>
<td>The platform returns the version of the native API in the "[Major].[Minor]" format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.osp_compatible</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the bada compatibility mode.</td>
+ <td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the bada compatibility mode.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.version</code></td>
+ <td><code>String</code></td>
<td>The platform returns the version of the platform in the "[Major].[Minor].[Patch Version]" format.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version.name</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.version.name</code></td>
+ <td><code>String</code></td>
<td>The platform returns the platform version name.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.web.api.version</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/feature/platform.web.api.version</code></td>
+ <td><code>String</code></td>
<td>The platform returns the version of the Web API in the "[Major].[Minor]" format.</td>
</tr>
</tbody>
</table>
<p>The following table lists the profile feature keys.</p>
+<p align="center" class="Table"><strong>Table: Profile feature keys</strong></p>
<table id="profile_feat" border="1">
- <caption>
- Table: Profile feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/profile</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
- <td>The platform returns a compliant device profile (such as <span style="font-family: Courier New,Courier,monospace">mobile-full</span>) for this key.</td>
+ <td><code>http://tizen.org/feature/profile</code></td>
+ <td><code>String</code></td>
+ <td>The platform returns a compliant device profile (such as <code>mobile-full</code>) for this key.</td>
</tr>
</tbody>
</table>
<p>The following table lists the screen feature keys.</p>
-<table id="screen" border="1">
- <caption>
- Table: Screen feature keys
- </caption>
+<p align="center" class="Table"><strong>Table: Screen feature keys</strong></p>
+ <table id="screen" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a display screen.</td>
+ <td><code>http://tizen.org/feature/screen</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device has a display screen.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.always_on.high_color</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the high color mode Always On Display (AOD) feature.</td>
+ <td><code>http://tizen.org/feature/screen.always_on.high_color</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the high color mode Always On Display (AOD) feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.always_on.low_bit_color</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the low bit color mode Always On Display (AOD) feature.</td>
+ <td><code>http://tizen.org/feature/screen.always_on.low_bit_color</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the low bit color mode Always On Display (AOD) feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports screen auto-rotation.</td>
+ <td><code>http://tizen.org/feature/screen.auto_rotation</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports screen auto-rotation.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.bpp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/screen.bpp</code></td>
+ <td><code>int</code></td>
<td>The platform returns the number of bits per pixel supported by the device for this key. The value depends on the screen, and is typically 8, 16, 24, or 32.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.large</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size for the coordinate system.</td>
+ <td><code>http://tizen.org/feature/screen.coordinate_system.size.large</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the large screen size for the coordinate system.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.normal</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the normal screen size for the coordinate system.</td>
+ <td><code>http://tizen.org/feature/screen.coordinate_system.size.normal</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the normal screen size for the coordinate system.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/screen.dpi</code></td>
+ <td><code>int</code></td>
<td>The platform returns the number of dots per inch supported by the device for this key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/screen.height</code></td>
+ <td><code>int</code></td>
<td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.hdmi</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports HDMI output.</td>
+ <td><code>http://tizen.org/feature/screen.output.hdmi</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports HDMI output.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.rca</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports RCA output.</td>
+ <td><code>http://tizen.org/feature/screen.output.rca</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports RCA output.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a circular screen shape.</td>
+ <td><code>http://tizen.org/feature/screen.shape.circle</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports a circular screen shape.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a rectangular screen shape.</td>
+ <td><code>http://tizen.org/feature/screen.shape.rectangle</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports a rectangular screen shape.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">true</span>, if the device supports any screen sizes and resolutions.</td>
+ <td><code>http://tizen.org/feature/screen.size.all</code></td>
+ <td><code>bool</code></td>
+ <td>The platform always returns <code>true</code>, if the device supports any screen sizes and resolutions.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size.</td>
+ <td><code>http://tizen.org/feature/screen.size.large</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the large screen size.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">false</span> for this key.</td>
+ <td><code>http://tizen.org/feature/screen.size.normal</code></td>
+ <td><code>bool</code></td>
+ <td>The platform always returns <code>false</code> for this key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 240 x 400 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 240 x 400 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 320 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 320 x 320 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 480 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 320 x 480 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.360</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 360 x 360 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.360.360</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 360 x 360 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 360 x 480 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 360 x 480 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 480 x 800 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 480 x 800 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 540 x 960 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 540 x 960 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 600 x 1024 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 600 x 1024 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 720 x 1280 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 720 x 1280 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 1080 x 1290 resolution for the normal screen size.
-<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+ <td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the 1080 x 1290 resolution for the normal screen size.
+<p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.width</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/feature/screen.width</code></td>
+ <td><code>int</code></td>
<td>The platform returns the width of the screen in pixels supported by the device for this key.</td>
</tr>
</tbody>
</table>
<p>The following table lists the sensor feature keys.</p>
+<p align="center" class="Table"><strong>Table: Sensor feature keys</strong></p>
<table id="sensor" border="1">
- <caption>
- Table: Sensor feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the acceleration sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the acceleration sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span> key, if the device supports the wake-up operation by the acceleration sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.accelerometer</code> key, if the device supports the wake-up operation by the acceleration sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the activity recognition.</td>
+ <td><code>http://tizen.org/feature/sensor.activity_recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the activity recognition.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barometer sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.barometer</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the barometer sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span> key, if the device supports the wake-up operation by the barometer sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.barometer</code> key, if the device supports the wake-up operation by the barometer sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the geomagnetic-based rotation vector sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the geomagnetic-based rotation vector sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gesture recognition.</td>
+ <td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the gesture recognition.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gravity sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.gravity</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the gravity sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gyro sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the gyro sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gyroscope-based rotation vector sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the gyroscope-based rotation vector sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the uncalibrated gyroscope sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the uncalibrated gyroscope sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span> key, if the device supports the wake-up operation by the gyro sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.gyroscope</code> key, if the device supports the wake-up operation by the gyro sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the heart rate monitor.</td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the heart rate monitor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED green sensor of the heart rate monitor.</td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the LED green sensor of the heart rate monitor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED infrared sensor of the heart rate monitor.</td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the LED infrared sensor of the heart rate monitor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED red sensor of the heart rate monitor.</td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the LED red sensor of the heart rate monitor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the humidity sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.humidity</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the humidity sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the linear acceleration sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the linear acceleration sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the magnetic sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the magnetic sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the uncalibrated geomagnetic sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the uncalibrated geomagnetic sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span> key, if the device supports the wake-up operation by the magnetic sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.magnetometer</code> key, if the device supports the wake-up operation by the magnetic sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the pedometer.</td>
+ <td><code>http://tizen.org/feature/sensor.pedometer</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the pedometer.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the photo (light) sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.photometer</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the photo (light) sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span> key, if the device supports the wake-up operation by the photo sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.photometer</code> key, if the device supports the wake-up operation by the photo sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the proximity sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.proximity</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the proximity sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span> key, if the device supports the wake-up operation by the proximity sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.proximity</code> key, if the device supports the wake-up operation by the proximity sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotation vector sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.rotation_vector</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the rotation vector sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.sleep_monitor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the sleep monitor sensor or the sleep detector sensor which tracks and detects the human sleep state.</td>
+ <td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the sleep monitor sensor or the sleep detector sensor which tracks and detects the human sleep state.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.stress_monitor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the stress monitor which tracks the human stress level.</td>
+ <td><code>http://tizen.org/feature/sensor.stress_monitor</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the stress monitor which tracks the human stress level.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the temperature sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.temperature</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the temperature sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the tilt sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.tiltmeter</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the tilt sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span> key, if the device supports the wake-up operation by the tilt sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.tiltmeter</code> key, if the device supports the wake-up operation by the tilt sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the ultraviolet sensor.</td>
+ <td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the ultraviolet sensor.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the wrist up action.</td>
+ <td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the wrist up action.</td>
</tr>
</tbody>
</table>
<p>The following table lists the shell feature keys.</p>
+<p align="center" class="Table"><strong>Table: Shell feature keys</strong></p>
<table id="shell" border="1">
- <caption>
- Table: Shell feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget.</td>
+ <td><code>http://tizen.org/feature/shell.appwidget</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the AppWidget.</td>
</tr>
</tbody>
</table>
<p>The following table lists the sip feature keys.</p>
- <table id="sip" border="1">
- <caption>
- Table: Sip feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Sip feature keys</strong></p>
+ <table id="sip" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
+ <td><code>http://tizen.org/feature/sip.voip</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
</tr>
</tbody>
</table>
<p>The following table lists the speech feature keys.</p>
- <table id="speech" border="1">
- <caption>
- Table: Speech feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Speech feature keys</strong></p>
+ <table id="speech" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports voice control.</td>
+ <td><code>http://tizen.org/feature/speech.control</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports voice control.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech recognition (STT).</td>
+ <td><code>http://tizen.org/feature/speech.recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports speech recognition (STT).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech synthesis (TTS).</td>
+ <td><code>http://tizen.org/feature/speech.synthesis</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports speech synthesis (TTS).</td>
</tr>
</tbody>
</table>
<p>The following table lists the system setting feature keys.</p>
+<p align="center" class="Table"><strong>Table: System setting feature keys</strong></p>
<table id="systemsetting" border="1">
- <caption>
- Table: System setting feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the SystemSetting API.</td>
+ <td><code>http://tizen.org/feature/systemsetting</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the SystemSetting API.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.home_screen</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span> key, if the device supports a way to change or get the picture on the home screen.</td>
+ <td><code>http://tizen.org/feature/systemsetting.home_screen</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get the picture on the home screen.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.incoming_call</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span> key, if the device supports a way to change or get a ringtone for all incoming calls.</td>
+ <td><code>http://tizen.org/feature/systemsetting.incoming_call</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get a ringtone for all incoming calls.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.lock_screen</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span> key, if the device supports a way to change or get the lock screen wallpaper.</td>
+ <td><code>http://tizen.org/feature/systemsetting.lock_screen</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get the lock screen wallpaper.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.notification_email</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span> key, if the device supports a way to change or get a ringtone for all email notifications.</td>
+ <td><code>http://tizen.org/feature/systemsetting.notification_email</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get a ringtone for all email notifications.</td>
</tr>
</tbody>
</table>
<p>The following table lists the USB feature keys.</p>
- <table id="usb" border="1">
- <caption>
- Table: USB feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: USB feature keys</strong></p>
+ <table id="usb" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB client or accessory mode.</td>
+ <td><code>http://tizen.org/feature/usb.accessory</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the USB client or accessory mode.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB host mode.</td>
+ <td><code>http://tizen.org/feature/usb.host</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the USB host mode.</td>
</tr>
</tbody>
</table>
<p>The following table lists the vision feature keys.</p>
- <table id="vision" border="1">
- <caption>
- Table: Vision feature keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Vision feature keys</strong></p>
+ <table id="vision" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barcode detection feature.</td>
+ <td><code>http://tizen.org/feature/vision.barcode_detection</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the barcode detection feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barcode generation feature.</td>
+ <td><code>http://tizen.org/feature/vision.barcode_generation</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the barcode generation feature.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports face recognition.</td>
+ <td><code>http://tizen.org/feature/vision.face_recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports face recognition.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports image recognition.</td>
+ <td><code>http://tizen.org/feature/vision.image_recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports image recognition.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code generation.</td>
+ <td><code>http://tizen.org/feature/vision.qrcode_generation</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports QR code generation.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code recognition.</td>
+ <td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports QR code recognition.</td>
</tr>
</tbody>
</table>
<p>The following table lists the Web feature keys.</p>
+<p align="center" class="Table"><strong>Table: Web feature keys</strong></p>
<table id="web" border="1">
- <caption>
- Table: Web feature keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.ime</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Web IME.</td>
+ <td><code>http://tizen.org/feature/web.ime</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports Web IME.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Web service model.</td>
+ <td><code>http://tizen.org/feature/web.service</code></td>
+ <td><code>bool</code></td>
+ <td>The platform returns <code>true</code> for this key, if the device supports the Web service model.</td>
</tr>
</tbody>
</table>
<h2 id="system">System Keys</h2>
<p>The following table lists the build system keys.</p>
- <table id="build" border="1">
- <caption>
- Table: Build system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Build system keys</strong></p>
+ <table id="build" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.date</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.date</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build date. The build date is made when the platform image is created. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.id</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.id</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build ID. The build ID is made when the platform image is created. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.string</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build information string. The build information string is made when the platform image is created. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.time</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.time</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build time. The build time is made when the platform image is created. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.type</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.type</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build type, such as "user" or "eng". The build type is made when the platform image is created. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.variant</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.variant</code></td>
+ <td><code>String</code></td>
<td>The platform returns the variant release information. The variant release information is made when the platform image is created.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.version.release</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/build.version.release</code></td>
+ <td><code>String</code></td>
<td>The platform returns the build version information. The build version information is made when the platform image is created.</td>
</tr>
</tbody>
</table>
<p>The following table lists the DUID system keys.</p>
- <table id="duid" border="1">
- <caption>
- Table: DUID system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: DUID system keys</strong></p>
+ <table id="duid" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/duid</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/duid</code></td>
+ <td><code>String</code></td>
<td>The platform returns the device unique ID.</td>
</tr>
</tbody>
</table>
<p>The following table lists the manufacturer keys.</p>
- <table id="manufacturer" border="1">
- <caption>
- Table: Manufacturer keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Manufacturer keys</strong></p>
+<table id="manufacturer" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/manufacturer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/manufacturer</code></td>
+ <td><code>String</code></td>
<td>The platform returns the manufacturer name. </td>
</tr>
</tbody>
</table>
<p>The following table lists the model name system keys.</p>
- <table id="modelname" border="1">
- <caption>
- Table: Model name system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Model name system keys</strong></p>
+ <table id="modelname" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/model_name</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/model_name</code></td>
+ <td><code>String</code></td>
<td>The platform returns the device model name.</td>
</tr>
</tbody>
</table>
<p>The following table lists the platform system keys.</p>
- <table id="platformsys" border="1">
- <caption>
- Table: Platform system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Platform system keys</strong></p>
+ <table id="platformsys" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.communication_processor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/platform.communication_processor</code></td>
+ <td><code>String</code></td>
<td>The platform returns the device communication processor name.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.name</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/platform.name</code></td>
+ <td><code>String</code></td>
<td>The platform returns the platform name.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.processor</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/platform.processor</code></td>
+ <td><code>String</code></td>
<td>The platform returns the device processor name.</td>
</tr>
</tbody>
</table>
<p>The following table lists the sound system keys.</p>
- <table id="sound" border="1">
- <caption>
- Table: Sound system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: Sound system keys</strong></p>
+ <table id="sound" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/sound.media.volume.resolution.max</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/system/sound.media.volume.resolution.max</code></td>
+ <td><code>int</code></td>
<td>The platform returns the maximum sound volume level of the media category.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/sound.notification.volume.resolution.max</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/system/sound.notification.volume.resolution.max</code></td>
+ <td><code>int</code></td>
<td>The platform returns the maximum sound volume level of the notification category.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/sound.ringtone.volume.resolution.max</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/system/sound.ringtone.volume.resolution.max</code></td>
+ <td><code>int</code></td>
<td>The platform returns the maximum sound volume level of the ringtone category.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/sound.system.volume.resolution.max</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>http://tizen.org/system/sound.system.volume.resolution.max</code></td>
+ <td><code>int</code></td>
<td>The platform returns the maximum sound volume level of the system category.</td>
</tr>
</tbody>
</table>
<p>The following table lists the TizenID system keys.</p>
- <table id="tizenid" border="1">
- <caption>
- Table: TizenID system keys
- </caption>
+ <p align="center" class="Table"><strong>Table: TizenID system keys</strong></p>
+ <table id="tizenid" border="1">
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/tizenid</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>http://tizen.org/system/tizenid</code></td>
+ <td><code>String</code></td>
<td>The platform returns the TizenID. TizenID is a randomly generated value based on the model name. </td>
</tr>
</tbody>
MESSAGES_ERROR_NONE /* Successful */
MESSAGES_ERROR_INVALID_PARAMETER /* Invalid parameter */
MESSAGES_ERROR_SERVER_NOT_READY /* Server is not ready */
- MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Communication with server failed */
+ MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Server communication failed */
</pre>
</li>
<li>APIs returning values (indirectly returning error codes)
</li>
<li>Obtaining a message for specific error code
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function to query the meaning of each error code.
+<p>Use the <code>get_error_message()</code> function to query the meaning of each error code.
The pointer returned is a static variable, you must not free it.</p>
<p>For example:</p>
dlog_print(DLOG_INFO, "MyTag", "%s", errMsg);
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
+<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
</li>
</ul>
<p>Every error code in the Tizen native API is represented as an integer value.</p>
<p>You can use the message priority and tag to filter the output and only view specific messages.</p></li>
<li>In the Tizen Studio (when testing with an emulator), use the <strong>Log</strong> view.
<p>You can filter the messages based on their priority level. You can also search the messages based on keywords, such as pid, tid, tag, and message.</p>
-<p class="figure">Figure: Messages in the Log view</p>
-<p align="center"><img width="95%" alt="Messages in the Log view" src="../../images/debugging.png"/></p></li>
+<p align="center"><strong>Figure: Messages in the Log view</strong></p>
+<p align="center"><img alt="Messages in the Log view" src="../../images/debugging.png"/></p></li>
</ul>
</li></ul>
<p>The following figure illustrates the general architecture of the dlog logging service.</p>
-<p class="figure">Figure: Architecture</p>
+<p align="center"><strong>Figure: Architecture</strong></p>
<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p>
<li>
<p>The priority level indicates the urgency of the log message.</p>
+<p align="center" class="Table"><strong>Table: Priority levels</strong></p>
<table>
- <caption>
- Table: Priority levels
- </caption>
<tbody>
<tr>
<th>Priority</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span></td>
+ <td><code>DLOG_DEBUG</code></td>
<td>Debugging message for an unexpected exception that needs to be checked</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span></td>
+ <td><code>DLOG_INFO</code></td>
<td>Information message describing normal operation</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span></td>
+ <td><code>DLOG_WARN</code></td>
<td>Warning message, which means that an error is likely to occur if no action is taken</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span></td>
+ <td><code>DLOG_ERROR</code></td>
<td>Error message describing a problem</td>
</tr>
</tbody>
}
</pre>
-<p>To <a href="#send">create and send a log message</a>, use the <
span style="font-family: Courier New,Courier,monospace">dlog_print()</span> and <span style="font-family: Courier New,Courier,monospace">dlog_vprint()</span> functions. The first parameter defines the priority level, and the second parameter defines the tag. Both functions return a value from the <span style="font-family: Courier New,Courier,monospace">dlog_error_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html#ga75b37fc3103da74bb4122d98968d8c17">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html#ga75b37fc3103da74bb4122d98968d8c17">wearable</a> applications).</p>
+<p>To <a href="#send">create and send a log message</a>, use the <
code>dlog_print()</code> and <code>dlog_vprint()</code> functions. The first parameter defines the priority level, and the second parameter defines the tag. Both functions return a value from the <code>dlog_error_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html#ga75b37fc3103da74bb4122d98968d8c17">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html#ga75b37fc3103da74bb4122d98968d8c17">wearable</a> applications).</p>
<pre class="prettyprint">
/* dlog_print */
<p>The priority level for the log message can be defined using macros. The following examples show how to create log messages using different priority levels:</p>
<ul>
- <li>Information message with the <span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span> priority and the <span style="font-family: Courier New,Courier,monospace">MyTag</span> tag:
+ <li>Information message with the <code>DLOG_INFO</code> priority and the <code>MyTag</code> tag:
<pre class="prettyprint">
/* Print the info message with the tag to the console */
dlog_print(DLOG_INFO, "MyTag", "Initialization successful.");
</pre></li>
- <li>Debug message with the <span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span> priority and the <span style="font-family: Courier New,Courier,monospace">MyTag</span> tag:
+ <li>Debug message with the <code>DLOG_DEBUG</code> priority and the <code>MyTag</code> tag:
<pre class="prettyprint">
/* Print the debug message with the tag to the console */
dlog_print(DLOG_DEBUG, "MyTag", "string:","%s", "Test");
</pre></li>
- <li>Error message with the <span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span> priority and the <span style="font-family: Courier New,Courier,monospace">MyTag</span> tag:
+ <li>Error message with the <code>DLOG_ERROR</code> priority and the <code>MyTag</code> tag:
<pre class="prettyprint">
if (something_wrong) {
/* Print the error message with the tag to the console */
dlog_print(DLOG_ERROR, "MyTag", "An unexpected error occurred");
}
</pre></li>
- <li>Warning message with the <span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span> priority and the <span style="font-family: Courier New,Courier,monospace">MyTag</span> tag:
+ <li>Warning message with the <code>DLOG_WARN</code> priority and the <code>MyTag</code> tag:
<pre class="prettyprint">
/* Print the warning message with the tag to the console */
dlog_print(DLOG_WARN, "MyTag", "warning!");
<ul>
<li>Options
-<p>The following table lists the available options for the <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command.</p>
-<table>
- <caption>
- Table: Command options
- </caption>
+<p>The following table lists the available options for the <code>dlogutil</code> command.</p>
+ <p align="center" class="Table"><strong>Table: Command options</strong></p>
+ <table>
<tbody>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-b <buffer></span></td>
+ <td><code>-b <buffer></code></td>
<td>Alternates the log buffer. The main buffer is used by the default buffer.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-c</span></td>
+ <td><code>-c</code></td>
<td>Clears the entire log and exits.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-d</span></td>
+ <td><code>-d</code></td>
<td>Dumps the log and exits.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-f <filename></span></td>
- <td>Writes the log to <filename>. The default filename is <span style="font-family: Courier New,Courier,monospace">stdout</span>.</td>
+ <td><code>-f <filename></code></td>
+ <td>Writes the log to <filename>. The default filename is <code>stdout</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-g</span></td>
+ <td><code>-g</code></td>
<td>Prints the size of the specified log buffer and exits.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-n <count></span></td>
- <td>Sets the maximum number of rotated logs to <count>. The default value is 4. Requires the <span style="font-family: Courier New,Courier,monospace">-r</span> option.</td>
+ <td><code>-n <count></code></td>
+ <td>Sets the maximum number of rotated logs to <count>. The default value is 4. Requires the <code>-r</code> option.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-r <Kbytes></span></td>
- <td>Rotates the log file every <Kbytes> of output. The default value is 16. Requires the <span style="font-family: Courier New,Courier,monospace">-f</span> option.</td>
+ <td><code>-r <Kbytes></code></td>
+ <td>Rotates the log file every <Kbytes> of output. The default value is 16. Requires the <code>-f</code> option.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-s</span></td>
+ <td><code>-s</code></td>
<td>Sets the default filter spec to silent.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">-v <format></span></td>
+ <td><code>-v <format></code></td>
<td>Sets the output format for log messages.
<p>The log messages contain a number of metadata fields in addition to tag and priority. This option modifies the output format for messages so that they display a specific metadata field. The supported output formats are:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">brief</span> (default): Displays the priority/tag and PID of the originating process.</li>
- <li><span style="font-family: Courier New,Courier,monospace">process</span>: Displays the PID only.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tag</span>: Displays the priority/tag only.</li>
- <li><span style="font-family: Courier New,Courier,monospace">thread</span>: Displays the process:thread and priority/tag only.</li>
- <li><span style="font-family: Courier New,Courier,monospace">raw</span>: Displays the raw log message, with no other metadata fields.</li>
- <li><span style="font-family: Courier New,Courier,monospace">time</span>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>
- <li><span style="font-family: Courier New,Courier,monospace">long</span>: Displays all metadata fields and separates messages with blank lines.</li>
+ <li><code>brief</code> (default): Displays the priority/tag and PID of the originating process.</li>
+ <li><code>process</code>: Displays the PID only.</li>
+ <li><code>tag</code>: Displays the priority/tag only.</li>
+ <li><code>thread</code>: Displays the process:thread and priority/tag only.</li>
+ <li><code>raw</code>: Displays the raw log message, with no other metadata fields.</li>
+ <li><code>time</code>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>
+ <li><code>long</code>: Displays all metadata fields and separates messages with blank lines.</li>
</ul></td>
</tr>
</tbody>
</pre>
</li>
<li>Filter specs
-<p>You can use the filter specs in the <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command to determine which commands are included in the output. Use the <span style="font-family: Courier New,Courier,monospace">tag:priority</span> format, where the tag indicates the message tag and the priority indicates the minimum level of priority to report for that tag. Only the messages that include the specified tag and are at least on the defined priority level are included in the command output.</p>
+<p>You can use the filter specs in the <code>dlogutil</code> command to determine which commands are included in the output. Use the <code>tag:priority</code> format, where the tag indicates the message tag and the priority indicates the minimum level of priority to report for that tag. Only the messages that include the specified tag and are at least on the defined priority level are included in the command output.</p>
<p>The priority is one of the following character values, ordered from the lowest to the highest priority:</p>
<ul><li>D: Debug</li>
<li>W: Warning</li>
<li>E: Error</li></ul>
-<p>You can add any number of <span style="font-family: Courier New,Courier,monospace">tag:priority</span> specifications in a single command.</p>
+<p>You can add any number of <code>tag:priority</code> specifications in a single command.</p>
-<p>For example, to print out all log messages on or above the info priority, or all log messages on or above the debug priority with the <span style="font-family: Courier New,Courier,monospace">MyApp</span> tag:</p>
+<p>For example, to print out all log messages on or above the info priority, or all log messages on or above the debug priority with the <code>MyApp</code> tag:</p>
<pre class="prettyprint">
/* All messages on or above info priority */
<p>To enable your application to use the dlog functionality:</p>
-<ol><li><p>To use the functions and data types of the dlog API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><dlog.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the dlog API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">wearable</a> applications), include the <code><dlog.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <dlog.h>
</pre></li>
<li>Make sure you have the necessary tools:
<ul>
- <li>dlog library: <span style="font-family: Courier New,Courier,monospace">libdlog.so</span>
+ <li>dlog library: <code>libdlog.so</code>
<p>The dlog library provides a logging function to send log messages to the kernel log device.</p></li>
- <li>dlogutil: <span style="font-family: Courier New,Courier,monospace">dlogutil</span>
+ <li>dlogutil: <code>dlogutil</code>
<p>dlogutil enables you to view log messages in the log device, and provides filtered message output.</p></li>
<li>linux-2.6.32 kernel</li>
</ul></li></ol>
<h2 id="send" name="send">Sending a Log Message</h2>
-<p>To send a log message with the <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with various priorities, use the <span style="font-family: Courier New,Courier,monospace">dlog_print()</span> function:</p>
+<p>To send a log message with the <code>MY_APP</code> tag with various priorities, use the <code>dlog_print()</code> function:</p>
<pre class="prettyprint">
#define TAG "MY_APP"
<p>The first 2 principles are very basic, but still quite important, since the CPU-GPU bandwidth and memory capacity of embedded systems are limited in general.</p>
<ol>
-<li>As presented in <a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL ES</a>, although the vertex array is intuitive, it is inefficient to use only the vertex array. It is almost always recommended to use an <strong>index array</strong> and the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function. This reduces the amount of data transferring from CPU to GPU. The bigger the model is, the more efficient the index array approach is.</li>
+<li>As presented in <a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL ES</a>, although the vertex array is intuitive, it is inefficient to use only the vertex array. It is almost always recommended to use an <strong>index array</strong> and the <code>glDrawElements()</code> function. This reduces the amount of data transferring from CPU to GPU. The bigger the model is, the more efficient the index array approach is.</li>
<li>If the polygon mesh is not frequently changed, you can use <strong>vertex buffer objects</strong> (VBO) in order to cache the data into the GPU memory, as illustrated in <a href="vertex_shader_n.htm#uniforms_attributes">Uniforms and Attributes in OpenGL ES</a>.</li>
-<li>In general, you do not need to call the <span style="font-family: Courier New,Courier,monospace">glFinish()</span> function. As drawing commands are requested by the <span style="font-family: Courier New,Courier,monospace">draw_glview()</span> callback and are executed in the background, it is enough to call the <span style="font-family: Courier New,Courier,monospace">glFlush()</span> function at the end of the <span style="font-family: Courier New,Courier,monospace">draw_glview()</span> callback.</li>
-<li>You are not required to clear every buffer, or to clear them at the same time. Instead, you can obtain the best performance by calling the <span style="font-family: Courier New,Courier,monospace">glClear()</span> function once per frame with all the buffers to be simultaneously cleared.</li>
-<li>Do not create and destroy the graphic resources (such as textures and FBO) per frame. You can create and store them in the <span style="font-family: Courier New,Courier,monospace">app_data</span> structure in the <span style="font-family: Courier New,Courier,monospace">init_glview()</span> callback and reuse them later.</li>
-<li>Try to avoid using the <span style="font-family: Courier New,Courier,monospace">if</span> statement in the shader code. Since the vertex and fragment shaders are executed in parallel (in batches) on most GPU architectures, <span style="font-family: Courier New,Courier,monospace">if-then-else</span> statement can block some other batches to determine which one can be run next. It means that parallel processing cannot be fully implemented.</li>
+<li>In general, you do not need to call the <code>glFinish()</code> function. As drawing commands are requested by the <code>draw_glview()</code> callback and are executed in the background, it is enough to call the <code>glFlush()</code> function at the end of the <code>draw_glview()</code> callback.</li>
+<li>You are not required to clear every buffer, or to clear them at the same time. Instead, you can obtain the best performance by calling the <code>glClear()</code> function once per frame with all the buffers to be simultaneously cleared.</li>
+<li>Do not create and destroy the graphic resources (such as textures and FBO) per frame. You can create and store them in the <code>app_data</code> structure in the <code>init_glview()</code> callback and reuse them later.</li>
+<li>Try to avoid using the <code>if</code> statement in the shader code. Since the vertex and fragment shaders are executed in parallel (in batches) on most GPU architectures, <code>if-then-else</code> statement can block some other batches to determine which one can be run next. It means that parallel processing cannot be fully implemented.</li>
<li>Try to avoid writing a heavy fragment shader. If the same data apply to all fragments, do not compute the data in the fragment shader but compute them at the CPU side and provide them as uniforms. On the other hand, whenever the data can be computed at the vertex shader, use it.</li>
-<li>In general, the <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span> function is quite slow, because it reinforces CPU-GPU synchronization, drastically decreasing the overall performance. In most cases, it is possible to obtain the desired result with the framebuffer object (FBO), avoiding the use of <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span>. With FBO, you can access the pixels of the framebuffer (the output of GPU processing) through a texture object (render-to-texture). Since it uses texture data from a GPU stage to another GPU stage, CPU does not have to be synchronized. If the application must use the <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span>function, use another thread to avoid blocking the main thread.</li>
+<li>In general, the <code>glReadPixels()</code> function is quite slow, because it reinforces CPU-GPU synchronization, drastically decreasing the overall performance. In most cases, it is possible to obtain the desired result with the framebuffer object (FBO), avoiding the use of <code>glReadPixels()</code>. With FBO, you can access the pixels of the framebuffer (the output of GPU processing) through a texture object (render-to-texture). Since it uses texture data from a GPU stage to another GPU stage, CPU does not have to be synchronized. If the application must use the <code>glReadPixels()</code>function, use another thread to avoid blocking the main thread.</li>
<li>With FBO, various effects can be made. Consider an application requiring a number of rendering chains for making a complex effect: A framebuffer is mapped to a texture, the texture is used to render another framebuffer, the framebuffer is mapped to another texture, and so on. This enables you to create a very complex scene, but unfortunately the rendering chain cannot be parallelized. Make the rendering chains as small as possible.</li>
-<li>According to the <a href="../app_management/efl_ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <span style="font-family: Courier New,Courier,monospace">app_pause()</span> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state.
-<p>As presented in <a href="interactive_ui_n.htm">Interactive UI</a>, the application can control the rendering loop by using an animator internally and then stop the animator in the <span style="font-family: Courier New,Courier,monospace">app_pause()</span> callback.</p></li>
+<li>According to the <a href="../app_management/efl_ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <code>app_pause()</code> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state.
+<p>As presented in <a href="interactive_ui_n.htm">Interactive UI</a>, the application can control the rendering loop by using an animator internally and then stop the animator in the <code>app_pause()</code> callback.</p></li>
</ol>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>In order to increase reusability, this section presents a simple OpenGL ES (GL)-based renderer and a sample view architecture based on the renderer. Its class diagram is shown in the following figure. SampleLauncher creates a sample view instance, such as TexturingView. Each sample view inherits from the SampleView class, which creates the GLView and BasicRenderer instances.</p>
-<p class="figure">Figure: Class diagram for sample views and renderer</p>
+<p align="center"><strong>Figure: Class diagram for sample views and renderer</strong></p>
<p align="center"><img alt="Class diagram for sample views and renderer" src="../../images/adv_render_class.png" /></p>
-<p>The callback functions for GLView are registered as presented in <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a>. At the initialization stage, the sample view uses the FileLoader class to read the resource files, such as shaders, 3D objects, and texture images, from the Tizen application resource file path. These data are passed to BasicRenderer. At the initialization stage when the <span style="font-family: Courier New,Courier,monospace">init_glview()</span> callback is invoked, BasicRenderer uses the shader code and BasicShader to create, compile, and link the program object. </p>
-<p>In addition to BasicShader, BasicRenderer uses, for example, BasicCamera, vertex array, and texture object ID, for rendering a scene. When rendering is requested by the sample view, BasicRenderer initializes color and depth buffers through the <span style="font-family: Courier New,Courier,monospace">glClear()</span> function, and then computes many data needed for rendering, such as world, view, and projection matrices. These are transferred to BasicShader, which invokes the <span style="font-family: Courier New,Courier,monospace">glUniformXXX()</span> function to pass them to the current program object. Finally, the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function is invoked.</p>
-<p>For handling texture images, the sample uses the TexData class. The sample application creates a TexData instance and passes it to FileLoader together with the file name of the texture image. Then, FileLoader stores the decoded pixel data into the TexData instance. When the TexData instance is given to BasicRender, GL functions, such as <span style="font-family: Courier New,Courier,monospace">glGenTexture()</span> and <span style="font-family: Courier New,Courier,monospace">glTexImage2D()</span>, are invoked. After the texture object is created and sampler uniforms, such as <span style="font-family: Courier New,Courier,monospace">sampler2D</span> and <span style="font-family: Courier New,Courier,monospace">samplerCube</span>, are passed to the fragment shader, texturing can be done.</p>
+<p>The callback functions for GLView are registered as presented in <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a>. At the initialization stage, the sample view uses the FileLoader class to read the resource files, such as shaders, 3D objects, and texture images, from the Tizen application resource file path. These data are passed to BasicRenderer. At the initialization stage when the <code>init_glview()</code> callback is invoked, BasicRenderer uses the shader code and BasicShader to create, compile, and link the program object. </p>
+<p>In addition to BasicShader, BasicRenderer uses, for example, BasicCamera, vertex array, and texture object ID, for rendering a scene. When rendering is requested by the sample view, BasicRenderer initializes color and depth buffers through the <code>glClear()</code> function, and then computes many data needed for rendering, such as world, view, and projection matrices. These are transferred to BasicShader, which invokes the <code>glUniformXXX()</code> function to pass them to the current program object. Finally, the <code>glDrawElements()</code> function is invoked.</p>
+<p>For handling texture images, the sample uses the TexData class. The sample application creates a TexData instance and passes it to FileLoader together with the file name of the texture image. Then, FileLoader stores the decoded pixel data into the TexData instance. When the TexData instance is given to BasicRender, GL functions, such as <code>glGenTexture()</code> and <code>glTexImage2D()</code>, are invoked. After the texture object is created and sampler uniforms, such as <code>sampler2D</code> and <code>samplerCube</code>, are passed to the fragment shader, texturing can be done.</p>
<p>For convenience, use the OpenGL mathematics library, GLM. GLM is a header only C++ mathematics library for graphics software based on the OpenGL shading language (GLSL) specification. GLM provides classes and functions designed and implemented with the same naming conventions and functionalities as in GLSL.</p>
<h2 id="framebuffer" name="framebuffer">Framebuffer Object and Render-to-texture</h2>
<p>In Tizen, the drawing surface is created by GLView. To render a scene, GL receives this surface, which is called 'on-screen buffer'. For simple applications, the on-screen-buffer alone is sufficient. However, if the application needs to render to a texture, for example, an 'off-screen-buffer' is helpful as it can be used as a texture. In GL, the Framebuffer Object (FBO) can be an 'off-screen-buffer' and also supports 'render to texture.'</p>
<p>GL provides functions to generate, bind, and configure an FBO. As shown in the following figure, the FBO consists of color, depth, and stencil attachments. It can be used as a texture by binding a texture object to its color or depth attachment point. On the other hand, GL supports a renderbuffer object, which is a 2D image buffer and can be bound to color, depth or stencil attachment point. FBO is useful for environment mapping, shadow mapping, post-processing and effects, including, for example, motion blur.</p>
-<p class="figure">Figure: Framebuffer, renderbuffer, and texture objects</p>
+<p align="center"><strong>Figure: Framebuffer, renderbuffer, and texture objects</strong></p>
<p align="center"><img alt="Framebuffer, renderbuffer, and texture objects" src="../../images/adv_render_framebuffer.png" /></p>
<p>FBO is defined as follows:</p>
<ol>
-<li>A texture or renderbuffer object is generated using the <span style="font-family: Courier New,Courier,monospace">glGenTextures()</span> or <span style="font-family: Courier New,Courier,monospace">glGenRenderbuffers()</span> function.</li>
-<li>Binding is made using the <span style="font-family: Courier New,Courier,monospace">glBindTexture()</span> or <span style="font-family: Courier New,Courier,monospace">glBindRenderbuffer()</span> function before being attached to the FBO.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">glTexParameteri()</span> or <span style="font-family: Courier New,Courier,monospace">glRenderbufferStorage()</span> function is called to specify the properties of the object.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">glFramebufferRenderbuffer()</span> or <span style="font-family: Courier New,Courier,monospace">glFramebufferTexture2D()</span> function is invoked to attach the object to the FBO.</li>
+<li>A texture or renderbuffer object is generated using the <code>glGenTextures()</code> or <code>glGenRenderbuffers()</code> function.</li>
+<li>Binding is made using the <code>glBindTexture()</code> or <code>glBindRenderbuffer()</code> function before being attached to the FBO.</li>
+<li>The <code>glTexParameteri()</code> or <code>glRenderbufferStorage()</code> function is called to specify the properties of the object.</li>
+<li>The <code>glFramebufferRenderbuffer()</code> or <code>glFramebufferTexture2D()</code> function is invoked to attach the object to the FBO.</li>
</ol>
<p>The following code creates an FBO as an 'off-screen-buffer' that enables render-to-texture:</p>
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16,
texWidth, texWidth); /* 16-bit depthbuffer */
- /* Generate framebuffer object and bind texture and renderbuffer object to attachment points */
+ /*
+ Generate framebuffer object and bind texture and
+ renderbuffer object to attachment points
+ */
glGenFramebuffers(1, &newFbo);
glBindFramebuffer(GL_FRAMEBUFFER, newFbo);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
<p><strong>Environment mapping</strong> is a technique to simulate a shiny object reflecting its surrounding environment, as shown in the following figure. Among several implementations of environment mapping, the most popular is <strong>cube mapping</strong>. It uses a <strong>cube map</strong> composed of 6 square image textures. The images are textured to the surface of the shiny object.</p>
-<p class="figure">Figure: Cube mapping example</p>
+<p align="center"><strong>Figure: Cube mapping example</strong></p>
<p align="center"><img alt="Cube mapping example" src="../../images/adv_render_cube.png" /></p>
<p>A cube map is created by positioning a camera at the center of the object and rendering along each positive/negative principal axis directions using a 90-degree field of view. The following figure shows how a cube map texture is composed. For a static environment, this is made at the preprocessing stage.</p>
-<p class="figure">Figure: Composition of the cubemap texture</p>
+<p align="center"><strong>Figure: Composition of the cubemap texture</strong></p>
<p align="center"><img alt="Composition of the cubemap texture" src="../../images/adv_render_cube_composition.png" /></p>
-<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using GL APIs. For using a cube map texture, provide <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_CUBE_MAP</span> instead of <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_2D</span> for the <span style="font-family: Courier New,Courier,monospace">glGenTexture()</span> and <span style="font-family: Courier New,Courier,monospace">glBindTexture()</span> functions.</p>
+<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using GL APIs. For using a cube map texture, provide <code>GL_TEXTURE_CUBE_MAP</code> instead of <code>GL_TEXTURE_2D</code> for the <code>glGenTexture()</code> and <code>glBindTexture()</code> functions.</p>
<p>The following code creates a cube map texture for environment mapping:</p>
<pre class="prettyprint">
void
checkGlError("glTexImage2D");
}
</pre>
-<p>In the above code, see <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_CUBE_MAP_POSITIVE_X</span>, a parameter of the <span style="font-family: Courier New,Courier,monospace">TexBuffer()</span> function. It represents which side of the environment is contained in the cube map texture.</p>
-<p>To access the cube map texture in the fragment shader, compute a reflection vector. The viewing direction vector is reflected with respect to the normal. This vector is used as texture coordinates to fetch the cube map through the <span style="font-family: Courier New,Courier,monospace">textureCube()</span> function. The following shader code calculates the reflection vector and accesses the cube map texture:</p>
+<p>In the above code, see <code>GL_TEXTURE_CUBE_MAP_POSITIVE_X</code>, a parameter of the <code>TexBuffer()</code> function. It represents which side of the environment is contained in the cube map texture.</p>
+<p>To access the cube map texture in the fragment shader, compute a reflection vector. The viewing direction vector is reflected with respect to the normal. This vector is used as texture coordinates to fetch the cube map through the <code>textureCube()</code> function. The following shader code calculates the reflection vector and accesses the cube map texture:</p>
<pre class="prettyprint">
precision mediump float;
<h2 id="normal_map" name="normal_map">Normal Mapping with Multi-texturing</h2>
-<p>A <strong>normal map</strong> is a 2D texture that stores a normal vector at each texel. The red channel represents the <span style="font-family: Courier New,Courier,monospace">x</span> component, the green channel the <span style="font-family: Courier New,Courier,monospace">y</span> component, and the blue channel the <span style="font-family: Courier New,Courier,monospace">z</span> component. This triple is scaled and biased in the shader to map to a normal, each component of which is in [-1, 1].</p>
-<p>The normals of a normal map are defined in the <strong>tangent spaces</strong> of the object surface. In a tangent space, the Z axis corresponds to the surface normal. The left side of the following figure shows 2 tangent spaces, one defined for a surface point <span style="font-family: Courier New,Courier,monospace">p</span> and the other for another point <span style="font-family: Courier New,Courier,monospace">q</span>. Observe that the tangent spaces vary across the object surface. Assuming that a tangent space is defined for a surface point to be normal-mapped, the normal fetched from the normal map is taken as being defined in the tangent space of the point. In this respect, it is named the <strong>tangent-space normal</strong>. The tangent-space normals perturb the surface normal.</p>
+<p>A <strong>normal map</strong> is a 2D texture that stores a normal vector at each texel. The red channel represents the <code>x</code> component, the green channel the <code>y</code> component, and the blue channel the <code>z</code> component. This triple is scaled and biased in the shader to map to a normal, each component of which is in [-1, 1].</p>
+<p>The normals of a normal map are defined in the <strong>tangent spaces</strong> of the object surface. In a tangent space, the Z axis corresponds to the surface normal. The left side of the following figure shows 2 tangent spaces, one defined for a surface point <code>p</code> and the other for another point <code>q</code>. Observe that the tangent spaces vary across the object surface. Assuming that a tangent space is defined for a surface point to be normal-mapped, the normal fetched from the normal map is taken as being defined in the tangent space of the point. In this respect, it is named the <strong>tangent-space normal</strong>. The tangent-space normals perturb the surface normal.</p>
-<p class="figure">Figure: Tangent spaces</p>
+<p align="center"><strong>Figure: Tangent spaces</strong></p>
<p align="center"><img alt="Tangent spaces" src="../../images/adv_render_tangent1.png" /> <img alt="Tangent spaces" src="../../images/adv_render_tangent2.png" /></p>
<p>The surface normal of a polygon mesh is computed per vertex at the modeling stage. It is the vertex normal. The tangent space is constructed per vertex so that its Z axis corresponds to the vertex normal, as shown in the right side of the above figure.</p>
<p>3 orthonormal vectors define the tangent space:</p>
<ul>
-<li>Vertex normal denoted by <span style="font-family: Courier New,Courier,monospace">N</span></li>
-<li>Vector denoted by <span style="font-family: Courier New,Courier,monospace">T</span> (for <strong>tangent</strong>)</li>
-<li>Vector denoted by <span style="font-family: Courier New,Courier,monospace">B</span> (for <strong>binormal</strong>)</li>
+<li>Vertex normal denoted by <code>N</code></li>
+<li>Vector denoted by <code>T</code> (for <strong>tangent</strong>)</li>
+<li>Vector denoted by <code>B</code> (for <strong>binormal</strong>)</li>
</ul>
-<p>Tangent vectors (<span style="font-family: Courier New,Courier,monospace">T</span>) are computed in BasicRenderer. Then, <span style="font-family: Courier New,Courier,monospace">N</span> and <span style="font-family: Courier New,Courier,monospace">T</span> are passed to the vertex shader, where <span style="font-family: Courier New,Courier,monospace">B</span> is computed by taking the cross product of <span style="font-family: Courier New,Courier,monospace">N</span> and <span style="font-family: Courier New,Courier,monospace">T</span> and then a rotation matrix is constructed from the <span style="font-family: Courier New,Courier,monospace">TBN</span> vectors. This <strong>basis-change matrix</strong> converts the world space light vector into the tangent space, so that lighting is computed at the tangent space by the fragment shader.</p>
-<p>The following vertex shader presents how to construct the basis-change matrix from the <span style="font-family: Courier New,Courier,monospace">TBN</span> vectors:</p>
+<p>Tangent vectors (<code>T</code>) are computed in BasicRenderer. Then, <code>N</code> and <code>T</code> are passed to the vertex shader, where <code>B</code> is computed by taking the cross product of <code>N</code> and <code>T</code> and then a rotation matrix is constructed from the <code>TBN</code> vectors. This <strong>basis-change matrix</strong> converts the world space light vector into the tangent space, so that lighting is computed at the tangent space by the fragment shader.</p>
+<p>The following vertex shader presents how to construct the basis-change matrix from the <code>TBN</code> vectors:</p>
<pre class="prettyprint">
uniform mat4 worldMat;
}
</pre>
-<p class="figure">Figure: Normal mapping example</p>
+<p align="center"><strong>Figure: Normal mapping example</strong></p>
<p align="center"><img alt="Normal mapping example" src="../../images/adv_render_normal_map.png" /></p>
<h2 id="back_face">Back Face Culling</h2>
-<p><strong>Back faces</strong> are polygons facing away from the eye whereas polygons facing towards the eye are called <strong>front faces</strong>. In general, the front faces are to be accepted, but the back faces are discarded. The following figure compares a back face (<span style="font-family: Courier New,Courier,monospace">t<sub>1</sub></span>) and a front face (<span style="font-family: Courier New,Courier,monospace">t<sub>2</sub></span>).</p>
+<p><strong>Back faces</strong> are polygons facing away from the eye whereas polygons facing towards the eye are called <strong>front faces</strong>. In general, the front faces are to be accepted, but the back faces are discarded. The following figure compares a back face (<code>t<sub>1</sub></code>) and a front face (<code>t<sub>2</sub></code>).</p>
-<p class="figure">Figure: Seen from the eye position, <span style="font-family: Courier New,Courier,monospace">t<sub>1</sub></span> is a back face whereas <span style="font-family: Courier New,Courier,monospace">t<sub>2</sub></span> is a front face</p>
+<p align="center"><strong>Figure: Seen from the eye position, <code>t<sub>1</sub></code> is a back face whereas <code>t<sub>2</sub></code> is a front face</strong></p>
<p align="center"><img src="../../images/front_back_face.png" alt="Back face and front face" /></p>
-<p>By default, vertices of every 3D triangle are in a counter-clockwise (CCW) order. In the above figure, for example, the vertices are ordered as (<span style="font-family: Courier New,Courier,monospace">v<sub>1</sub></span>, <span style="font-family: Courier New,Courier,monospace">v<sub>2</sub></span>, <span style="font-family: Courier New,Courier,monospace">v<sub>3</sub></span>). While maintaining the view direction in the figure, consider only the x- and y-coordinates of the vertices. Then, <span style="font-family: Courier New,Courier,monospace">t<sub>1</sub></span> and <span style="font-family: Courier New,Courier,monospace">t<sub>2</sub></span> can be illustrated as in the following figure. Observe that <span style="font-family: Courier New,Courier,monospace">t<sub>1</sub></span> (back face) has the clockwise (CW)-ordered vertices while <span style="font-family: Courier New,Courier,monospace">t<sub>2</sub></span> (front face) has the CCW-ordered vertices.</p>
+<p>By default, vertices of every 3D triangle are in a counter-clockwise (CCW) order. In the above figure, for example, the vertices are ordered as (<code>v<sub>1</sub></code>, <code>v<sub>2</sub></code>, <code>v<sub>3</sub></code>). While maintaining the view direction in the figure, consider only the x- and y-coordinates of the vertices. Then, <code>t<sub>1</sub></code> and <code>t<sub>2</sub></code> can be illustrated as in the following figure. Observe that <code>t<sub>1</sub></code> (back face) has the clockwise (CW)-ordered vertices while <code>t<sub>2</sub></code> (front face) has the CCW-ordered vertices.</p>
-<p class="figure">Figure: Vertices of a 2D back face are in a clockwise order (left) and the vertices of a 2D front face are in counter-clockwise order (right)</p>
+<p align="center"><strong>Figure: Vertices of a 2D back face are in a clockwise order (left) and the vertices of a 2D front face are in counter-clockwise order (right)</strong></p>
<p align="center"><img src="../../images/2d_front_back_face.png" alt="2D back face and front face" /></p>
-<p>To determine whether such a projected (2D) triangle has CW- or CCW-ordered vertices, use the <strong>determinant</strong> shown below. The first row is the vector connecting <span style="font-family: Courier New,Courier,monospace">v<sub>1</sub></span> and <span style="font-family: Courier New,Courier,monospace">v<sub>2</sub></span> and the second one connects <span style="font-family: Courier New,Courier,monospace">v<sub>1</sub></span> and <span style="font-family: Courier New,Courier,monospace">v<sub>3</sub></span>. If the determinant is negative, the triangle is a back face; if positive, it is a front face.</p>
+<p>To determine whether such a projected (2D) triangle has CW- or CCW-ordered vertices, use the <strong>determinant</strong> shown below. The first row is the vector connecting <code>v<sub>1</sub></code> and <code>v<sub>2</sub></code> and the second one connects <code>v<sub>1</sub></code> and <code>v<sub>3</sub></code>. If the determinant is negative, the triangle is a back face; if positive, it is a front face.</p>
-<p class="figure">Figure: Example of a determinant</p>
+<p align="center"><strong>Figure: Example of a determinant</strong></p>
<p align="center"><img src="../../images/determinant.png" alt="Example of a determinant" /></p>
<p>Note that back faces are not always culled, but often need to be rendered. Consider rendering a translucent sphere. For the back faces to show through the front faces, no face can be culled. On the other hand, consider culling only the front faces of a hollow sphere to obtain the cross-section view of the sphere.</p>
-<p>Face culling is disabled by default. However, it can be activated by the <span style="font-family: Courier New,Courier,monospace">glEnable(GL_CULL_FACE)</span> function. When face culling is enabled, the <span style="font-family: Courier New,Courier,monospace">glCullFace()</span> function is used to specify which face is to be culled. The parameter can be <span style="font-family: Courier New,Courier,monospace">GL_FRONT</span>, <span style="font-family: Courier New,Courier,monospace">GL_BACK</span> (default value), or <span style="font-family: Courier New,Courier,monospace">GL_FRONT_AND_BACK</span>. Then, the <span style="font-family: Courier New,Courier,monospace">glFrontFace()</span> function specifies the orientation of the front face vertices. Either <span style="font-family: Courier New,Courier,monospace">GL_CW</span> or <span style="font-family: Courier New,Courier,monospace">GL_CCW</span> is given to the <span style="font-family: Courier New,Courier,monospace">glFrontFace()</span> function. The default value is <span style="font-family: Courier New,Courier,monospace">GL_CCW</span>.</p>
+<p>Face culling is disabled by default. However, it can be activated by the <code>glEnable(GL_CULL_FACE)</code> function. When face culling is enabled, the <code>glCullFace()</code> function is used to specify which face is to be culled. The parameter can be <code>GL_FRONT</code>, <code>GL_BACK</code> (default value), or <code>GL_FRONT_AND_BACK</code>. Then, the <code>glFrontFace()</code> function specifies the orientation of the front face vertices. Either <code>GL_CW</code> or <code>GL_CCW</code> is given to the <code>glFrontFace()</code> function. The default value is <code>GL_CCW</code>.</p>
<h2 id="viewport">Viewport Transform</h2>
<p>A window at the computer screen is associated with its own <strong>window space</strong>. A <strong>viewport</strong> is defined in the window space, as shown in the following figure.</p>
-<p class="figure">Figure: Viewport in the window space is defined by its lower left corner point (MinX, MinY), height H, width W, and the depth range [MinZ, MaxZ]</p>
+<p align="center"><strong>Figure: Viewport in the window space is defined by its lower left corner point (MinX, MinY), height H, width W, and the depth range [MinZ, MaxZ]</strong></p>
<p align="center"><img src="../../images/viewport.png" alt="Viewport" /></p>
-<p>A viewport is created by the <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function. Then, the <span style="font-family: Courier New,Courier,monospace">glDepthRangef()</span> function is called to specify the desired depth range. The initial values for the first and second parameter are 0.0 and 1.0, respectively. The process of converting the scene object (within the 2<sup>3</sup>-sized box in the View frustrum figure) into the viewport of the window space is called <strong>viewport transform</strong>.</p>
+<p>A viewport is created by the <code>glViewport()</code> function. Then, the <code>glDepthRangef()</code> function is called to specify the desired depth range. The initial values for the first and second parameter are 0.0 and 1.0, respectively. The process of converting the scene object (within the 2<sup>3</sup>-sized box in the View frustrum figure) into the viewport of the window space is called <strong>viewport transform</strong>.</p>
<h2 id="rasterization">Rasterization (Scan Conversion)</h2>
<p>The viewport transform has converted every primitive into the window space. Considering only the x- and y-coordinates of a triangle, the last substage, rasterizer, breaks up each window-space triangle into a set of <strong>fragments</strong>.</p>
-<p class="figure">Figure: Fragments for a triangle are colored in yellow</p>
+<p align="center"><strong>Figure: Fragments for a triangle are colored in yellow</strong></p>
<p align="center"><img src="../../images/triangle_fragments.png" alt="Fragments for a triangle are colored in yellow" /></p>
<p>The per-vertex attributes are interpolated to determine the per-fragment attributes. If colors are assigned to the vertices, they are interpolated across the triangle. The following figure shows color-interpolated triangle examples.</p>
-<p class="figure">Figure: Color-interpolated triangles</p>
+<p align="center"><strong>Figure: Color-interpolated triangles</strong></p>
<p align="center"><img src="../../images/triangle_color.png" alt="Color-interpolated triangles" /></p>
<p>In reality, however, the per-vertex attributes rarely include colors. In general, vertex normals and texture coordinates are interpolated. The following figure visualizes the interpolated normals, where the per-vertex normals (in blue) are first interpolated along the triangle edges (in green) and then interpolated along the scanlines (in red). These per-fragment attributes are passed to the fragment shader.</p>
-<p class="figure">Figure: Interpolated normals</p>
+<p align="center"><strong>Figure: Interpolated normals</strong></p>
<p align="center"><img src="../../images/interpolated_normals.png" alt="Interpolated normals" /></p>
<h2 id="cairotizen" name="cairotizen">Cairo in Tizen</h2>\r
<p>Cairo is a part of the Tizen Graphics layer. As shown in the following figure, the rendering functionality of Cairo is provided through the use of the APIs of the lower modules, such as Pixman or OpenGL ES.</p>\r
\r
-<p class="figure">Figure: Cairo within the Tizen framework</p> \r
+<p align="center"><strong>Figure: Cairo within the Tizen framework</strong></p> \r
<p align="center"><img alt="Cairo within the Tizen framework" src="../../images/cairo_tizen.png" /></p> \r
\r
<p>The Cairo GL backend allows hardware-accelerated rendering by targeting the OpenGL ES API. The goal of the Cairo GL backend is to achieve better performance with equal functionality to the Cairo Image backend, whenever possible.</p>\r
-\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Since Tizen only exposes EvasGL binding in place of EGL, Cairo EvasGL APIs have been newly added and specified. To use the Cairo GL backend in Tizen, an application must include in its source code the <span style="font-family: Courier New,Courier,monospace">cairo-evas-gl.h</span> header file instead of <span style="font-family: Courier New,Courier,monospace">cairo-gl.h</span>.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+ \r
+ <div class="note">\r
+ <strong>Note</strong>\r
+ Since Tizen only exposes EvasGL binding in place of EGL, Cairo EvasGL APIs have been newly added and specified. To use the Cairo GL backend in Tizen, an application must include in its source code the <code>cairo-evas-gl.h</code> header file instead of <code>cairo-gl.h</code>.\r
+ </div>\r
\r
<h2 id="prerequisites">Prerequisites</h2>\r
<p>To enable your application to use the Cairo functionality:</p>\r
<li>In creating native UI applications in Tizen, make sure you understand <a href="../ui/efl/efl_n.htm">EFL and its features</a>.</li>\r
</ul>\r
</li>\r
-<li>To use the functions and data types of the Cairo image and GL backends, include the <span style="font-family: Courier New,Courier,monospace"><cairo.h></span> header file in your application. For the Cairo GL backend, you also need the <span style="font-family: Courier New,Courier,monospace"><cairo-evas-gl.h></span>, and <span style="font-family: Courier New,Courier,monospace"><Evas_GL.h></span> header files.\r
+<li>To use the functions and data types of the Cairo image and GL backends, include the <code><cairo.h></code> header file in your application. For the Cairo GL backend, you also need the <code><cairo-evas-gl.h></code>, and <code><Evas_GL.h></code> header files.\r
<pre class="prettyprint">\r
#include <cairo.h>\r
\r
\r
<h3>Creating a Cairo Image Surface in the Evas GL Backend</h3>\r
\r
-<p>To develop an application with Elementary, you create a window by using the elementary utility function, <
span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span>. And, in order to make the GL application use the GPU, you must call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating the window. You also place an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image into your application's main window. For more information about creating and placing an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image, see <a href="../ui/efl/evas_basic_objects_n.htm">Manipulating Graphical Objects</a>.</p>
\r+<p>To develop an application with Elementary, you create a window by using the elementary utility function, <
code>elm_win_util_standard_add()</code>. And, in order to make the GL application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window. You also place an <code>Evas_Object</code> image into your application's main window. For more information about creating and placing an <code>Evas_Object</code> image, see <a href="../ui/efl/evas_basic_objects_n.htm">Manipulating Graphical Objects</a>.</p>
\r \r
-<p>In the Cairo Image backend, you can create a new Cairo image surface by using the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create()</span> or <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> function. The former function requires only the pixel format and dimensions to be specified, while the latter function requires additional data, such as a pointer to an image buffer (supplied by the application) in which to write the content. In order to display a result of Cairo rendering, you must also link an Evas image object to the created Cairo image surface. For this purpose, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function.</p>\r
+<p>In the Cairo Image backend, you can create a new Cairo image surface by using the <code>cairo_image_surface_create()</code> or <code>cairo_image_surface_create_for_data()</code> function. The former function requires only the pixel format and dimensions to be specified, while the latter function requires additional data, such as a pointer to an image buffer (supplied by the application) in which to write the content. In order to display a result of Cairo rendering, you must also link an Evas image object to the created Cairo image surface. For this purpose, use the <code>evas_object_image_data_set()</code> function.</p>\r
\r
<p>To create the image surface:</p>\r
\r
<ul>\r
-<li>With the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create()</span> function.\r
+<li>With the <code>cairo_image_surface_create()</code> function.\r
\r
-<p>Call the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_get_data()</span> function before calling the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function. The <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_get_data()</span> function returns a pointer to the raw image data of the created image surface. This pointer is used for the raw data to be linked with an Evas image object in the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function.</p>\r
+<p>Call the <code>cairo_image_surface_get_data()</code> function before calling the <code>evas_object_image_data_set()</code> function. The <code>cairo_image_surface_get_data()</code> function returns a pointer to the raw image data of the created image surface. This pointer is used for the raw data to be linked with an Evas image object in the <code>evas_object_image_data_set()</code> function.</p>\r
\r
<pre class="prettyprint">\r
elm_config_accel_preference_set("opengl");\r
-Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide", " Cairo Image Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
+ " 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, WIDTH, HEIGHT);\r
+cairo_surface_t *cairo_surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,\r
+ WIDTH, HEIGHT);\r
cairo_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
\r
</pre>\r
</li>\r
\r
-<li>With the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> function.\r
-<p>To use the function, you need a pointer to an image data, which can be retrieved with the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function. The function returns the data pointer of an image object and requires a parameter to determine whether the data is modified. If modification is enabled by setting the parameter to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, Evas updates the image pixels in the next rendering cycle. Finally, you can link the pixel buffer with the image object by using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function.</p>\r
+<li>With the <code>cairo_image_surface_create_for_data()</code> function.\r
+<p>To use the function, you need a pointer to an image data, which can be retrieved with the <code>evas_object_image_data_get()</code> function. The function returns the data pointer of an image object and requires a parameter to determine whether the data is modified. If modification is enabled by setting the parameter to <code>EINA_TRUE</code>, Evas updates the image pixels in the next rendering cycle. Finally, you can link the pixel buffer with the image object by using the <code>evas_object_image_data_set()</code> function.</p>\r
\r
-<p>Since the default backend for Evas is GL, the Cairo Image backend is much slower due to the memory copy operation, which occurs whenever the rendered result from Cairo is uploaded to Evas. To enhance the performance of Cairo Image backend to enable the zero copy feature, set the <span style="font-family: Courier New,Courier,monospace">EVAS_IMAGE_CONTENT_HINT_DYNAMIC</span> property with the <span style="font-family: Courier New,Courier,monospace">evas_object_image_content_hint_set()</span> function.</p>\r
+<p>Since the default backend for Evas is GL, the Cairo Image backend is much slower due to the memory copy operation, which occurs whenever the rendered result from Cairo is uploaded to Evas. To enhance the performance of Cairo Image backend to enable the zero copy feature, set the <code>EVAS_IMAGE_CONTENT_HINT_DYNAMIC</code> property with the <code>evas_object_image_content_hint_set()</code> function.</p>\r
\r
-<p>To update a rectangular region on the screen, the <
span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> 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+<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", " Cairo Image Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
+ " 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 = cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);\r
+cairo_surface_t *cairo_surface =\r
+ cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32,\r
+ WIDTH, HEIGHT, row_stride);\r
cairo_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
\r
</li>\r
</ul>\r
\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Take care when using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function. You must match the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> functions as a pair. Since the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function keeps a rendering sink, the rendered result with Cairo can be reflected outside the Evas area, if the functions are not matched.</td> \r
- </tr> \r
- </tbody> \r
- </table> \r
- \r
+ <div class="note">\r
+ <strong>Note</strong>\r
+ Take care when using the <code>evas_object_image_data_set()</code> function. You must match the <code>evas_object_image_data_get()</code> and <code>evas_object_image_data_set()</code> functions as a pair. Since the <code>evas_object_image_data_get()</code> function keeps a rendering sink, the rendered result with Cairo can be reflected outside the Evas area, if the functions are not matched.\r
+ </div>\r
+\r
<h3>Creating a Cairo GL Surface in the Evas GL Backend</h3>\r
\r
<p>With the Cairo GL backend, you can create a Cairo surface using OpenGL. For more information on OpenGL, see the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>\r
<p>To create the GL surface:</p>\r
\r
<ol>\r
-<li>Since an application utilizing the Cairo GL backend in Tizen is based on Evas GL, an Evas GL handler must be created with the <span style="font-family: Courier New,Courier,monospace">evas_gl_new()</span> function during the initial stage.\r
+<li>Since an application utilizing the Cairo GL backend in Tizen is based on Evas GL, an Evas GL handler must be created with the <code>evas_gl_new()</code> function during the initial stage.\r
\r
-<p>Afterwards, the <
span style="font-family: Courier New,Courier,monospace">evas_gl_config</span>, <span style="font-family: Courier New,Courier,monospace">evas_gl_surface</span>, and <span style="font-family: Courier New,Courier,monospace">evas_gl_context</span> 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+<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", " Cairo GL Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo GL Backend guide",\r
+ " 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, WIDTH, HEIGHT);\r
+Evas_GL_Surface *evas_gl_surface = evas_gl_surface_create(evas_gl, evas_gl_config,\r
+ 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
</pre>\r
</li>\r
\r
-<li>A Cairo GL application can use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function in Tizen to show the rendered output on the screen. This function allows the rendered result to be redrawn on the screen for every animator callback in the default update refresh rate. The rendered results are saved inside the Evas object (in this example, the <span style="font-family: Courier New,Courier,monospace">img</span> object) connected to the Cairo GL backend during the Cairo drawing.\r
+<li>A Cairo GL application can use the <code>evas_object_image_pixels_dirty_set()</code> function in Tizen to show the rendered output on the screen. This function allows the rendered result to be redrawn on the screen for every animator callback in the default update refresh rate. The rendered results are saved inside the Evas object (in this example, the <code>img</code> object) connected to the Cairo GL backend during the Cairo drawing.\r
\r
<pre class="prettyprint">\r
evas_object_image_pixels_dirty_set(img, EINA_TRUE);\r
</pre>\r
</li>\r
\r
-<li>If your application employs the Cairo GL backend in Tizen, include the <span style="font-family: Courier New,Courier,monospace">cairo-evas-gl.h</span> header file instead of <span style="font-family: Courier New,Courier,monospace">cairo-gl.h</span>.</li>\r
+<li>If your application employs the Cairo GL backend in Tizen, include the <code>cairo-evas-gl.h</code> header file instead of <code>cairo-gl.h</code>.</li>\r
\r
-<li>To fully use the GPU acceleration, set the <span style="font-family: Courier New,Courier,monospace">CAIRO_GL_COMPOSITOR</span> property to <span style="font-family: Courier New,Courier,monospace">MSAA</span>.\r
+<li>To fully use the GPU acceleration, set the <code>CAIRO_GL_COMPOSITOR</code> property to <code>MSAA</code>.\r
\r
-<p>In addition, call the <span style="font-family: Courier New,Courier,monospace">cairo_gl_device_set_thread_aware()</span> function with <span style="font-family: Courier New,Courier,monospace">cairo_device</span> and <span style="font-family: Courier New,Courier,monospace">0</span> as input parameters to prevent unnecessary context switches. Cairo can be used in multithreaded environments, and switches out the current GL context by default after each draw finishes. Therefore, if no other thread uses Cairo for GL rendering, set the <span style="font-family: Courier New,Courier,monospace">thread_aware</span> parameter to 0.</p>\r
+<p>In addition, call the <code>cairo_gl_device_set_thread_aware()</code> function with <code>cairo_device</code> and <code>0</code> as input parameters to prevent unnecessary context switches. Cairo can be used in multithreaded environments, and switches out the current GL context by default after each draw finishes. Therefore, if no other thread uses Cairo for GL rendering, set the <code>thread_aware</code> parameter to 0.</p>\r
\r
-<p>To create the Cairo GL surface with the <span style="font-family: Courier New,Courier,monospace">cairo_gl_surface_create_for_evas_gl()</span> function, a <span style="font-family: Courier New,Courier,monospace">cairo_device</span> and an <span style="font-family: Courier New,Courier,monospace">evas_gl_surface</span> must be created beforehand:</p>\r
+<p>To create the Cairo GL surface with the <code>cairo_gl_surface_create_for_evas_gl()</code> function, a <code>cairo_device</code> and an <code>evas_gl_surface</code> must be created beforehand:</p>\r
<ul>\r
-<li>A <span style="font-family: Courier New,Courier,monospace">cairo_device</span> can be created with the <span style="font-family: Courier New,Courier,monospace">cairo_evas_gl_device_create()</span> function, which is an interface to the underlying rendering system. You also need the <span style="font-family: Courier New,Courier,monospace">evas_gl_object</span> and <span style="font-family: Courier New,Courier,monospace">evas_gl_context</span> as input parameters to the <span style="font-family: Courier New,Courier,monospace">cairo_evas_gl_device_create()</span> function.</li>\r
-<li>A <span style="font-family: Courier New,Courier,monospace">evas_gl_surface</span> object is needed to render 2D graphics through the rendering functionality of the Cairo GL backend.</li>\r
+<li>A <code>cairo_device</code> can be created with the <code>cairo_evas_gl_device_create()</code> function, which is an interface to the underlying rendering system. You also need the <code>evas_gl_object</code> and <code>evas_gl_context</code> as input parameters to the <code>cairo_evas_gl_device_create()</code> function.</li>\r
+<li>A <code>evas_gl_surface</code> object is needed to render 2D graphics through the rendering functionality of the Cairo GL backend.</li>\r
</ul>\r
\r
<pre class="prettyprint">\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, evas_gl_surface, evas_gl_config, WIDTH, HEIGHT);\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_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
</pre>\r
</li>\r
\r
-<li>When any drawing with the Cairo API is finished, call the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function. It guarantees a complete rendered result, because it does any pending drawing for the surface and also restores any temporary modifications Cairo has made to the surface state. Specially, this function must be called before switching from drawing on the surface with Cairo to drawing on it directly with native APIs.\r
+<li>When any drawing with the Cairo API is finished, call the <code>cairo_surface_flush()</code> function. It guarantees a complete rendered result, because it does any pending drawing for the surface and also restores any temporary modifications Cairo has made to the surface state. Specially, this function must be called before switching from drawing on the surface with Cairo to drawing on it directly with native APIs.\r
\r
<pre class="prettyprint">\r
cairo_surface_flush(cairo_surface);\r
\r
<h3>Using a Surface to Source Pattern</h3>\r
\r
-<p>Within the Cairo API, some functions, such as <span style="font-family: Courier New,Courier,monospace">cairo_set_source_surface()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_mask_surface()</span>, use a surface to set the source pattern. However, the performance of these functions in Tizen, under certain circumstances, can be heavily degraded if the source surface is created using the <span style="font-family: Courier New,Courier,monospace">cairo_gl_surface_create_for_evas_gl()</span> function.</p>\r
+<p>Within the Cairo API, some functions, such as <code>cairo_set_source_surface()</code> and <code>cairo_mask_surface()</code>, use a surface to set the source pattern. However, the performance of these functions in Tizen, under certain circumstances, can be heavily degraded if the source surface is created using the <code>cairo_gl_surface_create_for_evas_gl()</code> function.</p>\r
\r
-<p>In Tizen, you can create a Cairo GL surface with either the <span style="font-family: Courier New,Courier,monospace">cairo_gl_surface_create()</span> or <span style="font-family: Courier New,Courier,monospace">cairo_gl_surface_create_for_evas_gl()</span> function. To prevent performance issues, always create the source surface with the <span style="font-family: Courier New,Courier,monospace">cairo_gl_surface_create()</span> function.</p>\r
+<p>In Tizen, you can create a Cairo GL surface with either the <code>cairo_gl_surface_create()</code> or <code>cairo_gl_surface_create_for_evas_gl()</code> function. To prevent performance issues, always create the source surface with the <code>cairo_gl_surface_create()</code> function.</p>\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, evas_gl_config, WIDTH, HEIGHT);\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
\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, WIDTH, HEIGHT);\r
+evas_gl_surface_source = evas_gl_surface_create(evas_gl, evas_gl_config_source,\r
+ 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, CAIRO_CONTENT_COLOR_ALPHA, image_width, image_height);\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_t *cairo = cairo_create(gl_surface);\r
cairo_set_source_surface(cairo, image_surface, 0, 0);\r
cairo_paint(cairo);\r
\r
<h3>Support for Reading Various Image Files</h3>\r
\r
-<p>Cairo does not support a functionality for reading image files in JPEG or SPI format; only PNG is supported. With a PNG file, you can use the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_from_png()</span> function to make a new image surface from the image. However, handle this function with care, because it is experimental and only offers very simple functionality for reading PNG files.</p>\r
+<p>Cairo does not support a functionality for reading image files in JPEG or SPI format; only PNG is supported. With a PNG file, you can use the <code>cairo_image_surface_create_from_png()</code> function to make a new image surface from the image. However, handle this function with care, because it is experimental and only offers very simple functionality for reading PNG files.</p>\r
\r
<pre class="prettyprint">\r
cairo_surface_t *image = cairo_image_surface_create_from_png("test_image.png");\r
\r
<p>On the other hand, Cairo applications in Tizen can read JPEG and other image formats by using the Evas APIs. Evas supports image loaders for various formats as plug-in modules:</p>\r
<ol>\r
-<li>Create an image buffer as a temporary buffer for decoding an image file with the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function.</li>\r
-<li>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function to set the image file on the object (in this example, the <span style="font-family: Courier New,Courier,monospace">decoded_img</span> object).</li>\r
-<li>Use other Evas functions for the image object to manage it. Since the temporary buffers are only used for the decoded content of the given image file (in this example, <span style="font-family: Courier New,Courier,monospace">inline_buffr</span> and <span style="font-family: Courier New,Courier,monospace">decoded_img</span>), you do not need to call the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</li>\r
+<li>Create an image buffer as a temporary buffer for decoding an image file with the <code>evas_object_image_add()</code> function.</li>\r
+<li>Use the <code>evas_object_image_file_set()</code> function to set the image file on the object (in this example, the <code>decoded_img</code> object).</li>\r
+<li>Use other Evas functions for the image object to manage it. Since the temporary buffers are only used for the decoded content of the given image file (in this example, <code>inline_buffr</code> and <code>decoded_img</code>), you do not need to call the <code>evas_object_show()</code> function.</li>\r
</ol>\r
\r
<pre class="prettyprint">\r
evas_object_move(inline_buffr, 0, 0);\r
evas_object_resize(inline_buffr, surface_w, surface_h);\r
\r
-Evas_Object *decoded_img = evas_object_image_add(evas_object_evas_get(inline_buffer)); /* As a temporary buffer */\r
+/* As a temporary buffer */\r
+Evas_Object *decoded_img = evas_object_image_add(evas_object_evas_get(inline_buffer));\r
evas_object_image_file_set(decoded_img, "test_image.jpeg", NULL);\r
evas_object_image_size_get(decoded_img, &w, &h);\r
evas_object_image_fill_set(decoded_img, 0, 0, w, h);\r
evas_object_resize(decoded_img, w, h);\r
</pre>\r
\r
-<p>After the image file reading is complete, you can create a Cairo surface for the image object by using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> functions. The Cairo surface is used to create a pattern with the <span style="font-family: Courier New,Courier,monospace">cairo_set_source_surface()</span> function for the Cairo drawing. In addition, to prevent memory leaks, delete the temporary buffers that are no longer used.</p>\r
+<p>After the image file reading is complete, you can create a Cairo surface for the image object by using the <code>evas_object_image_data_get()</code> and <code>cairo_image_surface_create_for_data()</code> functions. The Cairo surface is used to create a pattern with the <code>cairo_set_source_surface()</code> function for the Cairo drawing. In addition, to prevent memory leaks, delete the temporary buffers that are no longer used.</p>\r
\r
<pre class="prettyprint">\r
src_buffer = (unsigned char *)evas_object_image_data_get(decoded_img, EINA_TRUE);\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_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_set_source_surface(cr, source, 0, 0);\r
cairo_paint(cr);\r
\r
\r
<h3>Drawing a Line</h3>\r
\r
-<p>When drawing an image with Cairo, you must prepare the context (nouns) for each of the drawing verbs. For example, if you want to use the <
span style="font-family: Courier New,Courier,monospace">cairo_stroke()</span> or <span style="font-family: Courier New,Courier,monospace">cairo_fill()</span> function, create a path first. Similarly, in case of using the <span style="font-family: Courier New,Courier,monospace">cairo_show_text()</span> function, you must position your text by its insertion point. A primary source is needed for using the <span style="font-family: Courier New,Courier,monospace">cairo_paint()</span> function and a second source pattern or surface is prepared for using the <span style="font-family: Courier New,Courier,monospace">cairo_mask()</span> function. For more information, see the <a href="http://www.cairographics.org/tutorial/" target="_blank">Cairo Tutorial in cairographics.org</a>.</p>
\r+<p>When drawing an image with Cairo, you must prepare the context (nouns) for each of the drawing verbs. For example, if you want to use the <
code>cairo_stroke()</code> or <code>cairo_fill()</code> function, create a path first. Similarly, in case of using the <code>cairo_show_text()</code> function, you must position your text by its insertion point. A primary source is needed for using the <code>cairo_paint()</code> function and a second source pattern or surface is prepared for using the <code>cairo_mask()</code> function. For more information, see the <a href="http://www.cairographics.org/tutorial/" target="_blank">Cairo Tutorial in cairographics.org</a>.</p>
\r \r
<p>The following example creates a line drawing with a rectangle, and a path that uses straight sections, arcs, and Bézier curves.</p>\r
\r
-<p class="figure">Figure: Rectangle and path drawing with Cairo</p> \r
+<p align="center"><strong>Figure: Rectangle and path drawing with Cairo</strong></p> \r
<p align="center"><img alt="Rectangle and path drawing with Cairo" src="../../images/cairo_draw.png" /></p> \r
\r
<p>To draw lines with Cairo APIs:</p>\r
<li>Prepare the sources.\r
<p>Prior to drawing a line, prepare and select sources. There are 3 main sources in Cairo - colors, gradients, and images:</p>\r
<ul>\r
-<li>Colors use a uniform hue and opacity for the entire source. You can select these without any preparation with the <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgb()</span> function and <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgba()</span> functions.\r
+<li>Colors use a uniform hue and opacity for the entire source. You can select these without any preparation with the <code>cairo_set_source_rgb()</code> function and <code>cairo_set_source_rgba()</code> functions.\r
<p>In this example, the color is opaque red:</p>\r
<pre class="prettyprint">\r
cairo_set_source_rgba(cairo, 1.0, 0.0, 0.0, 1.0);\r
</pre>\r
</li>\r
-<li>Gradients describe a progression of colors by setting a start and stop reference location and a series of "stops" along the way. There are linear and radial gradients built from 2 points. Stops are added to the gradient with the <span style="font-family: Courier New,Courier,monospace">cairo_add_color_stop_rgb()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_add_color_stop_rgba()</span> functions which take a color like the <span style="font-family: Courier New,Courier,monospace">cairo_add_color_stop_rgb()</span> or <span style="font-family: Courier New,Courier,monospace">cairo_add_color_stop_rgba()</span> function, as well as an offset to indicate where it lies between the reference locations.</li>\r
-<li>Images include both surfaces loaded from the existing files with the <
span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_from_png()</span> function and surfaces created from within Cairo as an earlier destination. For more information about these Cairo APIs, see <a href="http://www.cairographics.org/manual/cairo-cairo-pattern-t.html" target="_blank">the cairo_pattern_t in cairographics.org</a>.</li>
\r+<li>Gradients describe a progression of colors by setting a start and stop reference location and a series of "stops" along the way. There are linear and radial gradients built from 2 points. Stops are added to the gradient with the <code>cairo_add_color_stop_rgb()</code> and <code>cairo_add_color_stop_rgba()</code> functions which take a color like the <code>cairo_add_color_stop_rgb()</code> or <code>cairo_add_color_stop_rgba()</code> function, as well as an offset to indicate where it lies between the reference locations.</li>\r
+<li>Images include both surfaces loaded from the existing files with the <
code>cairo_image_surface_create_from_png()</code> function and surfaces created from within Cairo as an earlier destination. For more information about these Cairo APIs, see <a href="http://www.cairographics.org/manual/cairo-cairo-pattern-t.html" target="_blank">the cairo_pattern_t in cairographics.org</a>.</li>
\r </ul>\r
</li>\r
\r
\r
<li>To create the path:\r
<ol type="a">\r
-<li>To set the starting point with a user-specified offset, use the <span style="font-family: Courier New,Courier,monospace">cairo_translate()</span> function to modify the user-space origin (x, y) by translating it with the current transformation matrix (CTM):\r
+<li>To set the starting point with a user-specified offset, use the <code>cairo_translate()</code> function to modify the user-space origin (x, y) by translating it with the current transformation matrix (CTM):\r
\r
<pre class="prettyprint">\r
cairo_translate(cairo, 40, 40);\r
</pre>\r
\r
-<p>Cairo uses a connect-the-dots style system for creating paths. You can also set the starting point of the line with the <span style="font-family: Courier New,Courier,monospace">cairo_move_to()</span> function. This sets the current reference point without making the path connect the previous point to it.</p>\r
+<p>Cairo uses a connect-the-dots style system for creating paths. You can also set the starting point of the line with the <code>cairo_move_to()</code> function. This sets the current reference point without making the path connect the previous point to it.</p>\r
<pre class="prettyprint">\r
cairo_move_to(cairo, 40, 40);\r
</pre>\r
</li>\r
\r
-<li>To draw a line from point (100,100) to point (200,150) on a surface, use the <span style="font-family: Courier New,Courier,monospace">cairo_move_to()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> functions:\r
+<li>To draw a line from point (100,100) to point (200,150) on a surface, use the <code>cairo_move_to()</code> and <code>cairo_line_to()</code> functions:\r
\r
<pre class="prettyprint">\r
cairo_move_to(cairo, 100, 100);\r
</pre>\r
</li>\r
\r
-<li>To add a line on a path from the current point to a point at the offset (dx, dy), use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_line_to()</span> function. In this example, the offset is (100, -50).\r
+<li>To add a line on a path from the current point to a point at the offset (dx, dy), use the <code>cairo_rel_line_to()</code> function. In this example, the offset is (100, -50).\r
\r
<pre class="prettyprint">\r
cairo_rel_line_to(cairo, 100, -50);\r
</pre>\r
</li>\r
\r
-<li>To draw a circular arc of a given radius on the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_arc()</span> function.\r
+<li>To draw a circular arc of a given radius on the current path, use the <code>cairo_arc()</code> function.\r
\r
-<p>Arcs are parts of the outside of a circle. The point you directly specify is the center of the circle that makes up the addition to the path. Both a starting and an ending point on the circle must be specified, and these points are connected either clockwise using the <span style="font-family: Courier New,Courier,monospace">cairo_arc()</span> or counter-clockwise using the <span style="font-family: Courier New,Courier,monospace">cairo_arc_negative()</span> function.</p>\r
+<p>Arcs are parts of the outside of a circle. The point you directly specify is the center of the circle that makes up the addition to the path. Both a starting and an ending point on the circle must be specified, and these points are connected either clockwise using the <code>cairo_arc()</code> or counter-clockwise using the <code>cairo_arc_negative()</code> function.</p>\r
\r
<p>In this example, the radius is (100 * sqrt(2)), the arc is centered at (200, 200), begins at an angle (-0.25 * M_PI) and proceeds in the direction of increasing angles to end at an angle (0.25 * M_PI). If the end angle is less than the begin angle, the end angle is progressively increased by 2*M_PI until it is greater than the begin angle.</p>\r
\r
</pre>\r
</li>\r
\r
-<li>To draw a curve, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_curve_to()</span> function.\r
+<li>To draw a curve, use the <code>cairo_rel_curve_to()</code> function.\r
\r
-<p>Curves in Cairo are cubic Bézier splines. They start at the current reference point and smoothly follow the direction of 2 other points (without going through them) to get to a third specified point. Like lines, there are both absolute (<span style="font-family: Courier New,Courier,monospace">cairo_curve_to()</span>) and relative (<span style="font-family: Courier New,Courier,monospace">cairo_rel_curve_to()</span>) functions. Note that the relative variant specifies all points relative to the previous reference point, rather than each relative to the preceding control point of the curve.</p>\r
+<p>Curves in Cairo are cubic Bézier splines. They start at the current reference point and smoothly follow the direction of 2 other points (without going through them) to get to a third specified point. Like lines, there are both absolute (<code>cairo_curve_to()</code>) and relative (<code>cairo_rel_curve_to()</code>) functions. Note that the relative variant specifies all points relative to the previous reference point, rather than each relative to the preceding control point of the curve.</p>\r
\r
<p>In this example, the offsets of (-100, -50) and (-100, 50) are used as the control points. After this function call, the current point is offset by (-200, 0).</p>\r
\r
</pre>\r
</li>\r
\r
-<li>To add a line segment on the path from the current point to the beginning of the current sub-path, use the <span style="font-family: Courier New,Courier,monospace">cairo_close_path()</span> function. After this call, the current point is repositioned at the joined endpoint of the sub-path.\r
-<p>The behavior of the <span style="font-family: Courier New,Courier,monospace">cairo_close_path()</span> function differs from the <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> function with the equivalent coordinates very little: in the case of stroking, a line joining the final and initial segments of the sub-path is also created.</p>\r
+<li>To add a line segment on the path from the current point to the beginning of the current sub-path, use the <code>cairo_close_path()</code> function. After this call, the current point is repositioned at the joined endpoint of the sub-path.\r
+<p>The behavior of the <code>cairo_close_path()</code> function differs from the <code>cairo_line_to()</code> function with the equivalent coordinates very little: in the case of stroking, a line joining the final and initial segments of the sub-path is also created.</p>\r
\r
<pre class="prettyprint">\r
cairo_close_path(cairo);\r
</li>\r
</ol></li>\r
\r
-<li>To draw a rectangle, use the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle()</span> function.\r
+<li>To draw a rectangle, use the <code>cairo_rectangle()</code> function.\r
<p>In this example, the function draws a rectangle starting from the point (0, 0) with the width and height of 400 px.</p>\r
\r
<pre class="prettyprint">\r
</pre>\r
</li>\r
\r
-<li>If you need to create a stroke on a path, the <span style="font-family: Courier New,Courier,monospace">cairo_stroke()</span> function is a drawing operator that draws a stroke on the current path in accordance to the current line width and line color. After the function call, the current path is cleared from the Cairo context.\r
+<li>If you need to create a stroke on a path, the <code>cairo_stroke()</code> function is a drawing operator that draws a stroke on the current path in accordance to the current line width and line color. After the function call, the current path is cleared from the Cairo context.\r
\r
<pre class="prettyprint">\r
cairo_stroke(cairo);\r
</pre>\r
</li>\r
\r
-<li>To ensure that any pending Cairo operations are drawn, use the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function after finishing the Cairo drawing:\r
+<li>To ensure that any pending Cairo operations are drawn, use the <code>cairo_surface_flush()</code> function after finishing the Cairo drawing:\r
\r
<pre class="prettyprint">\r
cairo_surface_flush(surface);\r
<p>With images, Cairo supports the functionality only for the PNG format. These functions for PNG are experimental, so use them with care. For more information about PNG support, see <a href="http://www.cairographics.org/manual/cairo-PNG-Support.html" target="_blank">PNG Support in cairographics.org</a>.</p>\r
\r
<p>The following figure shows an example of painting with an image file.</p>\r
-<p class="figure">Figure: Painting with image file</p> \r
+<p align="center"><strong>Figure: Painting with image file</strong></p> \r
<p align="center"><img alt="Lines drawn using Cairo" src="../../images/cairo_image_png_sample.png" /></p>\r
\r
<p>To paint with image files:</p>\r
<ol>\r
<li>Get the image resource.\r
-<p>The following code snippet shows how to prepare image data for your application. To get an application's resource image data, use the <
span style="font-family: Courier New,Courier,monospace">app_get_resource_path()</span> function. This gets a stored PNG image file path to use as a resource. For more information about the <span style="font-family: Courier New,Courier,monospace">app_get_resource_path()</span> function, see the App Common API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications.</p>
\r+<p>The following code snippet shows how to prepare image data for your application. To get an application's resource image data, use the <
code>app_get_resource_path()</code> function. This gets a stored PNG image file path to use as a resource. For more information about the <code>app_get_resource_path()</code> function, see the App Common API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications.</p>
\r <pre class="prettyprint">\r
char image_filepath[256];\r
char *source_filename = "image.png";\r
</pre>\r
</li>\r
<li>Paint the Cairo surface.\r
-<p>The <
span style="font-family: Courier New,Courier,monospace">cairo_paint()</span> function uses a mask that transfers the entire source to the destination. It can be considered an infinitely large mask, or no mask, but the result is the same. To set a compositing operator, use the <span style="font-family: Courier New,Courier,monospace">cairo_set_operator()</span> and paint a Cairo surface using the source pattern obtained before. For more information about the <span style="font-family: Courier New,Courier,monospace">cairo_set_operator()</span> function, see <a href="http://www.cairographics.org/operators/" target="_blank">operators in cairographics.org</a>.</p>
\r+<p>The <
code>cairo_paint()</code> function uses a mask that transfers the entire source to the destination. It can be considered an infinitely large mask, or no mask, but the result is the same. To set a compositing operator, use the <code>cairo_set_operator()</code> and paint a Cairo surface using the source pattern obtained before. For more information about the <code>cairo_set_operator()</code> function, see <a href="http://www.cairographics.org/operators/" target="_blank">operators in cairographics.org</a>.</p>
\r <pre class="prettyprint">\r
cairo_set_operator(cairo, CAIRO_OPERATOR_SOURCE);\r
cairo_paint(cairo);\r
\r
<h2 id="text">Showing Text</h2>\r
\r
-<p>In Cairo, the <
span style="font-family: Courier New,Courier,monospace">cairo_font_face_t</span> class represents a particular font at a particular weight, slant, and other characteristics. For more information for using the cairo font, see <a href="http://www.cairographics.org/manual/cairo-cairo-font-face-t.html" target="_blank">cairo_font_face_t of cairographics.org</a>.</p>
\r+<p>In Cairo, the <
code>cairo_font_face_t</code> class represents a particular font at a particular weight, slant, and other characteristics. For more information for using the cairo font, see <a href="http://www.cairographics.org/manual/cairo-cairo-font-face-t.html" target="_blank">cairo_font_face_t of cairographics.org</a>.</p>
\r \r
<p>The following figure shows an example of text shown using Cairo.</p>\r
-<p class="figure">Figure: Text shown using Cairo</p> \r
+<p align="center"><strong>Figure: Text shown using Cairo</strong></p> \r
<p align="center"><img alt="Text shown using Cairo" src="../../images/cairo_text_sample.png" /></p>\r
\r
<p>To show text:</p>\r
</pre>\r
</li>\r
<li>Set text configurations.\r
-<p>In this example, create a font face implicitly using the <span style="font-family: Courier New,Courier,monospace">cairo_select_font_face()</span> 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
+<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, CAIRO_FONT_WEIGHT_NORMAL);\r
+cairo_select_font_face(cairo, "Sans", CAIRO_FONT_SLANT_NORMAL,\r
+ CAIRO_FONT_WEIGHT_NORMAL);\r
cairo_set_font_size(cairo, 52.0);\r
</pre>\r
</li>\r
<li>Show the text.\r
-<p>The <span style="font-family: Courier New,Courier,monospace">cairo_show_text()</span> function forms the mask from the text. You can think of the <span style="font-family: Courier New,Courier,monospace">cairo_show_text()</span> function as a shortcut for creating a path with the <span style="font-family: Courier New,Courier,monospace">cairo_text_path()</span> and using the <span style="font-family: Courier New,Courier,monospace">cairo_fill()</span> function to transfer it.</p>\r
-<p>The <
span style="font-family: Courier New,Courier,monospace">cairo_show_text()</span> function caches glyphs, and it is much more efficient if you work with a lot of text. Note that this function is experimental and must be handled with care. For more information about Cairo text, see the <a href="http://www.cairographics.org/manual/cairo-text.html" target="_blank">description of cairo_text</a>.</p>
\r+<p>The <code>cairo_show_text()</code> function forms the mask from the text. You can think of the <code>cairo_show_text()</code> function as a shortcut for creating a path with the <code>cairo_text_path()</code> and using the <code>cairo_fill()</code> function to transfer it.</p>\r
+<p>The <
code>cairo_show_text()</code> function caches glyphs, and it is much more efficient if you work with a lot of text. Note that this function is experimental and must be handled with care. For more information about Cairo text, see the <a href="http://www.cairographics.org/manual/cairo-text.html" target="_blank">description of cairo_text</a>.</p>
\r <pre class="prettyprint">\r
cairo_text_extents_t extents;\r
cairo_text_extents(cairo, utf8, &extents);\r
<h2 id="delete">Deleting Cairo</h2>\r
\r
<p>Delete the Cairo resources when they are no longer needed.</p>\r
-<p>In the <span style="font-family: Courier New,Courier,monospace">cairo_destroy()</span> function, a reference count for a Cairo context is decreased by one. If the count is to be zero, the Cairo context and all associated resources must be freed. The same steps apply for the <span style="font-family: Courier New,Courier,monospace">cairo_surface_destroy()</span> function as well.</p>\r
+<p>In the <code>cairo_destroy()</code> function, a reference count for a Cairo context is decreased by one. If the count is to be zero, the Cairo context and all associated resources must be freed. The same steps apply for the <code>cairo_surface_destroy()</code> function as well.</p>\r
<pre class="prettyprint">\r
cairo_surface_destroy(surface);\r
cairo_destroy(cairo);\r
<h1>Creating OpenGL ES Applications</h1>
-<p>The easiest way to use the OpenGL ES API in a Tizen application is to rely on the <span style="font-family: Courier New,Courier,monospace">Elm_GLView</span> component. The <span style="font-family: Courier New,Courier,monospace">Elm_GLView</span> component is one of the Elementary UI components, which creates an OpenGL ES (GL) target surface and a context. The <span style="font-family: Courier New,Courier,monospace">Elm_GLView</span> component can be embedded in any Tizen UI application. It is basically a wrapper of <span style="font-family: Courier New,Courier,monospace">Evas_GL</span>, the GL/EGL abstraction layer of EFL. By using the <span style="font-family: Courier New,Courier,monospace">Elm_GLView</span> component, you avoid having to consider how EGL environment is coupled with the native windowing systems. Some macros provided by EFL also allow you to use GL APIs directly. In addition, the UI framework can access the surface where the GPU outputs the rendering result and make the entire scene as a combination of 2D and 3D components in a single canvas.</p>
+<p>The easiest way to use the OpenGL ES API in a Tizen application is to rely on the <code>Elm_GLView</code> component. The <code>Elm_GLView</code> component is one of the Elementary UI components, which creates an OpenGL ES (GL) target surface and a context. The <code>Elm_GLView</code> component can be embedded in any Tizen UI application. It is basically a wrapper of <code>Evas_GL</code>, the GL/EGL abstraction layer of EFL. By using the <code>Elm_GLView</code> component, you avoid having to consider how EGL environment is coupled with the native windowing systems. Some macros provided by EFL also allow you to use GL APIs directly. In addition, the UI framework can access the surface where the GPU outputs the rendering result and make the entire scene as a combination of 2D and 3D components in a single canvas.</p>
-<p>The following example shows the steps to create a GL application. From now on, the <span style="font-family: Courier New,Courier,monospace">Elm_GLView</span> component is shortened to GLView.</p>
+<p>The following example shows the steps to create a GL application. From now on, the <code>Elm_GLView</code> component is shortened to GLView.</p>
<ol>
<li>Create a basic application as presented in the <a href="../../../../org.tizen.training/html/native/mobile/first_app_mn.htm#create">mobile</a> and <a href="../../../../org.tizen.training/html/native/wearable/first_app_wn.htm#create">wearable</a> Tizen first application example.
<p>The UI application's skeleton makes available the window object, which can contain the GLView component.</p></li>
<li>Enable hardware acceleration.
-<p>To develop a GL application, call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating the window. It makes an application use the GPU.</p>
-<p>For developing an application with Elementary, create a window with the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> Elementary utility function.</p>
+<p>To develop a GL application, call the <code>elm_config_accel_preference_set()</code> function before creating the window. It makes an application use the GPU.</p>
+<p>For developing an application with Elementary, create a window with the <code>elm_win_util_standard_add()</code> Elementary utility function.</p>
<pre class="prettyprint">
Evas_Object *win;
elm_config_accel_preference_set("opengl");
</pre>
<p>You must also set hardware acceleration in the manifest file. For more information, see <a href="hw_acceleration_n.htm">Hardware Acceleration</a>.</p></li>
<li>Initialize the GLView.
-<p>After creating the window, you can set the GLView mode with the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function to enable alpha channel, depth buffer, stencil buffer, MSAA, and the client-side rotation features. The following modes are supported:</p>
+<p>After creating the window, you can set the GLView mode with the <code>elm_glview_mode_set()</code> function to enable alpha channel, depth buffer, stencil buffer, MSAA, and the client-side rotation features. The following modes are supported:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Enable the alpha channel for rendering.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Enable the depth buffer for rendering.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Enable the stencil buffer for rendering.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_MULTISAMPLE_LOW</span>: Use MSAA with a minimum number of samples.</li>
+<li><code>ELM_GLVIEW_ALPHA</code>: Enable the alpha channel for rendering.</li>
+<li><code>ELM_GLVIEW_DEPTH</code>: Enable the depth buffer for rendering.</li>
+<li><code>ELM_GLVIEW_STENCIL</code>: Enable the stencil buffer for rendering.</li>
+<li><code>ELM_GLVIEW_MULTISAMPLE_LOW</code>: Use MSAA with a minimum number of samples.</li>
</ul>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace">_Elm_GLView_mode</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__GLView.html#gaabffbc1312be12b222eb67916e9645d1">wearable</a> applications).</p>
+<p>For more information, see the <code>Elm_GLView_Mode</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">wearable</a> applications).</p>
<p>In the following example, the alpha channel and depth buffer are enabled.</p>
<pre class="prettyprint">
/* Request a surface with alpha and a depth buffer */
elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
</pre>
-<p>Additionally, you can select the policies for resizing and rendering. The following example shows how to decide what to do with the GL surface when the GLView component is resized. With the default <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_RECREATE</span> option, the GL surface is destroyed and created again with the new size. The resizing policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+<p>Additionally, you can select the policies for resizing and rendering. The following example shows how to decide what to do with the GL surface when the GLView component is resized. With the default <code>ELM_GLVIEW_RESIZE_POLICY_RECREATE</code> option, the GL surface is destroyed and created again with the new size. The resizing policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>. In that case, only the image object is scaled, not the underlying GL surface.</p>
<pre class="prettyprint">
/*
Resize policy tells GLView what to do with the surface when it
</pre>
</li>
<li>Get the GL function pointer.
-<p>Originally, an application must call the GL APIs using the <span style="font-family: Courier New,Courier,monospace">Evas_GL</span> abstraction layer in EFL. It means that you must get a set of function pointers for abstract GL functions from the <span style="font-family: Courier New,Courier,monospace">Evas_GL</span> object and call functions through the object. This can be annoying, especially when you want to reuse GL parts implemented at other platforms. To resolve this problem, EFL provides convenient helper macros, which are defined in the <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> header file. The following example shows how to use the macros.</p>
+<p>Originally, an application must call the GL APIs using the <code>Evas_GL</code> abstraction layer in EFL. It means that you must get a set of function pointers for abstract GL functions from the <code>Evas_GL</code> object and call functions through the object. This can be annoying, especially when you want to reuse GL parts implemented at other platforms. To resolve this problem, EFL provides convenient helper macros, which are defined in the <code>Elementary_GL_Helpers.h</code> header file. The following example shows how to use the macros.</p>
<pre class="prettyprint">
#include <Elementary_GL_Helpers.h>
ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
ELEMENTARY_GLVIEW_GLOBAL_USE(glview);
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span> and <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span> macros must be in the same source code. If you have a global header file in your application, the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</span> macro can be in the header file. However, you must be very careful when using these macros. The recommended solution is to use the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_USE()</span> macro in every client function. The following are some situations where you must not use the helper macros:</p>
+<p>The <code>ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</code> and <code>ELEMENTARY_GLVIEW_GLOBAL_USE()</code> macros must be in the same source code. If you have a global header file in your application, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro can be in the header file. However, you must be very careful when using these macros. The recommended solution is to use the <code>ELEMENTARY_GLVIEW_USE()</code> macro in every client function. The following are some situations where you must not use the helper macros:</p>
<ul>
<li>When you use more than one Evas canvas at a time, such as multiple windows.</li>
<li>If you use multiple GL APIs, such as OpenGL ES 1.1, OpenGL ES 2.0, and OpenGL ES 3.0.</li>
<p>The helper macros must be used only for the following situations:</p>
<ul>
<li>When a single surface is used for GL rendering.</li>
-<li>When a single API set (either OpenGL ES 1.1, OpenGL ES 2.0, or OpenGL ES 3.0) is used. In this case, the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</span> macro must be used in a global header for the application.</li>
+<li>When a single API set (either OpenGL ES 1.1, OpenGL ES 2.0, or OpenGL ES 3.0) is used. In this case, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro must be used in a global header for the application.</li>
</ul>
</li>
<li>Set up callback functions.
</ol>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In case the GL functions are called outside the 4 GLView callback functions, you must call the <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current()</span> function before the GL function is called. However, this results in a performance degradation due to context switching, and only works if the direct rendering mode is not used.
+ <div class="note">
+ <strong>Note</strong>
+ In case the GL functions are called outside the 4 GLView callback functions, you must call the <code>evas_gl_make_current()</code> function before the GL function is called. However, this results in a performance degradation due to context switching, and only works if the direct rendering mode is not used.
<p>If Direct Rendering is enabled, all GL functions must be called from the 4 GLView callback functions only. All other operations can break the rendering order and cause unexpected rendering.</p>
- </td>
- </tr>
-</tbody>
-</table>
+ </div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</ul>
<p>The output of the fragment shader is the fragment color that is passed to the output merger.</p>
-<p class="figure" id="output">Figure: Vertex and fragment shader outputs</p>
+<p id="output" align="center"><strong>Figure: Vertex and fragment shader outputs</strong></p>
<p align="center"><img alt="Vertex and fragment shader outputs" src="../../images/fragment_output.png" /></p>
-<p>The following example is a simplest fragment shader, which performs just texturing. Given an <span style="font-family: Courier New,Courier,monospace">s_tex0</span> 2D image texture and the <span style="font-family: Courier New,Courier,monospace">v_texCoord</span> interpolated texture coordinates, the shader invokes the built-in <span style="font-family: Courier New,Courier,monospace">texture2D()</span> function to determine the color to be output to the built-in <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variable:</p>
+<p>The following example is a simplest fragment shader, which performs just texturing. Given an <code>s_tex0</code> 2D image texture and the <code>v_texCoord</code> interpolated texture coordinates, the shader invokes the built-in <code>texture2D()</code> function to determine the color to be output to the built-in <code>gl_FragColor</code> variable:</p>
<pre class="prettyprint">
uniform sampler2D s_tex0;
<h2 id="phong" name="phong">Phong Lighting Model</h2>
<p>Obviously, texturing alone is never enough to make an object look realistic. You need lighting or illumination, which refers to the technique handling the interaction between light sources and objects. The most popular real-time lighting technique is based on the <strong>Phong lighting model</strong>. It is composed of diffuse, specular, ambient, and emissive terms. For the sake of simplicity, this topic presents only the diffuse term. (For more information, see <a href="https://en.wikipedia.org/wiki/Phong_reflection_model" target="_blank">Phong reflection model</a> in Wikipedia.)</p>
-<p>The diffuse term is for the reflections from ideally diffuse surfaces, which are scattered with equal intensity in all directions (see the left image in the following figure). The amount of reflection perceived by the eye is proportional to the amount of incoming light. Consider a normalized <strong>light vector</strong> (denoted by <span style="font-family: Courier New,Courier,monospace">l</span>) connecting the surface point and the light source. The amount of incoming light is inversely proportional to the angle between <span style="font-family: Courier New,Courier,monospace">l</span> and the surface normal <span style="font-family: Courier New,Courier,monospace">n</span> (as shown in the middle image), and is described as <span style="font-family: Courier New,Courier,monospace">n⋅l</span>. In order to avoid negative reflection, it is modified into <span style="font-family: Courier New,Courier,monospace">max(n⋅l, 0)</span>.</p>
+<p>The diffuse term is for the reflections from ideally diffuse surfaces, which are scattered with equal intensity in all directions (see the left image in the following figure). The amount of reflection perceived by the eye is proportional to the amount of incoming light. Consider a normalized <strong>light vector</strong> (denoted by <code>l</code>) connecting the surface point and the light source. The amount of incoming light is inversely proportional to the angle between <code>l</code> and the surface normal <code>n</code> (as shown in the middle image), and is described as <code>n⋅l</code>. In order to avoid negative reflection, it is modified into <code>max(n⋅l, 0)</code>.</p>
-<p class="figure" id="diffuse">Figure: Diffuse reflection</p>
+<p id="diffuse" align="center"><strong>Figure: Diffuse reflection</strong></p>
<p align="center"><img alt="Diffuse reflection" src="../../images/fragment_diffuse.png" /></p>
<p>The reflected color of an object is determined by component-wise multiplication, as shown in the following figure. Suppose a white light source, (1,1,1). If an object lit by the light appears yellow, it means that the object reflects R and G and absorbs B. This kind of filtering can be implemented through the material parameter. For example, if it is (1,1,0), the reflected color is (1,1,1) ⊗ (1,1,0) = (1,1,0) where ⊗ is a component-wise multiplication.</p>
-<p class="figure">Figure: Component-wise multiplication for diffuse color</p>
+<p align="center"><strong>Figure: Component-wise multiplication for diffuse color</strong></p>
<p align="center"><img alt="Component-wise multiplication for diffuse color" src="../../images/fragment_diffuse_color.png" /></p>
-<p>The diffuse term combines the intensity and color: <
span style="font-family: Courier New,Courier,monospace">max(n⋅l, 0) s<sub>d</sub> ⊗ m<sub>d</sub></span> where <span style="font-family: Courier New,Courier,monospace">s<sub>d</sub></span> is the light source color and <span style="font-family: Courier New,Courier,monospace">m<sub>d</sub></span> is the object material color. The right side of the <a href="#diffuse">Diffuse reflection</a> figure shows an object lit with the diffuse term only.</p>
+<p>The diffuse term combines the intensity and color: <
code>max(n⋅l, 0) s<sub>d</sub> ⊗ m<sub>d</sub></code> where <code>s<sub>d</sub></code> is the light source color and <code>m<sub>d</sub></code> is the object material color. The right side of the <a href="#diffuse">Diffuse reflection</a> figure shows an object lit with the diffuse term only.</p>
<h2 id="shader" name="shader">Fragment Shader for Lighting and Texturing</h2>
<p>The following example shows how to implement Phong lighting (with the diffuse term only) and texturing.</p>
-<p>The vertex shader in the example computes the clip space vertex position and bypasses the texture coordinates, as usual. In addition, it outputs the 'world space' vertex position and normal of each vertex. The <span style="font-family: Courier New,Courier,monospace">v_position</span>, <span style="font-family: Courier New,Courier,monospace">v_normal</span>, and <span style="font-family: Courier New,Courier,monospace">v_texCoord</span> output variables are interpolated for fragments and the per-fragment attributes are provided for the fragment shader.</p>
+<p>The vertex shader in the example computes the clip space vertex position and bypasses the texture coordinates, as usual. In addition, it outputs the 'world space' vertex position and normal of each vertex. The <code>v_position</code>, <code>v_normal</code>, and <code>v_texCoord</code> output variables are interpolated for fragments and the per-fragment attributes are provided for the fragment shader.</p>
<pre class="prettyprint">
uniform mat4 viewProjMat;
}
</pre>
-<p>The following fragment shader obtains the object material color (<
span style="font-family: Courier New,Courier,monospace">m<sub>d</sub></span>) by filtering the texture and then asks the user-defined <span style="font-family: Courier New,Courier,monospace">phongDiffuse()</span> function to compute the diffuse term. It uses the <span style="font-family: Courier New,Courier,monospace">uniform vec3 lightPos</span> for calculating the light vector <span style="font-family: Courier New,Courier,monospace">l</span> (<span style="font-family: Courier New,Courier,monospace">lightDirection</span>) and simply implements <span style="font-family: Courier New,Courier,monospace">max(n⋅l, 0) s<sub>d</sub> ⊗ m<sub>d</sub></span> presented in <a href="#phong">Phong Lighting Model</a>.</p>
+<p>The following fragment shader obtains the object material color (<
code>m<sub>d</sub></code>) by filtering the texture and then asks the user-defined <code>phongDiffuse()</code> function to compute the diffuse term. It uses the <code>uniform vec3 lightPos</code> for calculating the light vector <code>l</code> (<code>lightDirection</code>) and simply implements <code>max(n⋅l, 0) s<sub>d</sub> ⊗ m<sub>d</sub></code> presented in <a href="#phong">Phong Lighting Model</a>.</p>
<pre class="prettyprint">
uniform sampler2D s_tex0;
<li>Getting a format list</li>
<li>Accessing the surface</li>
<li>Getting surface and plane information
- <p>Get the details using the <
span style="font-family: Courier New,Courier,monospace">tbm_surface_map()</span> or the <span style="font-family: Courier New,Courier,monospace">tbm_surface_get_info()</span> function. The surface information is assigned to the <span style="font-family: Courier New,Courier,monospace">tbm_surface_info_s</span> struct (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html#ga8d954dfd180e96cafbcfc7b92684b971">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html#ga8d954dfd180e96cafbcfc7b92684b971">wearable</a> applications).</p>
- <p>The surface information contains the surface width, height, BPP, size, and the number of planes, while the plane information includes the plane size, offset, stride, and pointer. For more information on the surface and plane details, see <
span style="font-family: Courier New,Courier,monospace">_tbm_surface_info</span> struct (in <a href="../../../../org.tizen.native.mobile.apireference/struct__tbm__surface__info.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/struct__tbm__surface__info.html">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">_tbm_surface_plane </span> struct (in <a href="../../../../org.tizen.native.mobile.apireference/struct__tbm__surface__plane.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/struct__tbm__surface__plane.html">wearable</a> applications).</p></li>
+ <p>Get the details using the <
code>tbm_surface_map()</code> or the <code>tbm_surface_get_info()</code> function. The surface information is assigned to the <code>tbm_surface_info_s</code> struct (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html#ga8d954dfd180e96cafbcfc7b92684b971">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html#ga8d954dfd180e96cafbcfc7b92684b971">wearable</a> applications).</p>
+ <p>The surface information contains the surface width, height, BPP, size, and the number of planes, while the plane information includes the plane size, offset, stride, and pointer. For more information on the surface and plane details, see <
code>_tbm_surface_info</code> struct (in <a href="../../../../org.tizen.native.mobile.apireference/struct__tbm__surface__info.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/struct__tbm__surface__info.html">wearable</a> applications) and <code>_tbm_surface_plane </code> struct (in <a href="../../../../org.tizen.native.mobile.apireference/struct__tbm__surface__plane.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/struct__tbm__surface__plane.html">wearable</a> applications).</p></li>
</ul>
<p>To store data in the low-level graphic buffer, get a plane pointer in the surface and use the pointer of each plane.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the TBM Surface API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">wearable</a> applications, include the <span style="font-family: Courier New,Courier,monospace"><tbm_surface.h></span> header file in your application:</p>
+<p>To use the functions and data types of the TBM Surface API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">wearable</a> applications, include the <code><tbm_surface.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <tbm_surface.h>
</pre>
<p>To create the TBM surface:</p>
<ol>
-<li>Query the formats supported by the system using the <span style="font-family: Courier New,Courier,monospace">tbm_surface_query_formats()</span> function. Free the array of formats after viewing the formats.
+<li>Query the formats supported by the system using the <code>tbm_surface_query_formats()</code> function. Free the array of formats after viewing the formats.
<pre class="prettyprint">
tbm_format *formats;
uint32_t format_num;
</li>
<li>
-<p>Create the TBM surface (<span style="font-family: Courier New,Courier,monospace">tbm_surface</span>) and define its format, height, and width:</p>
+<p>Create the TBM surface (<code>tbm_surface</code>) and define its format, height, and width:</p>
<pre class="prettyprint">
int i;
tbm_surface_h surface = NULL;
</li>
<li>
-<p>Map the TBM surface with the access option. After the surface is mapped, the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> information is saved in the <span style="font-family: Courier New,Courier,monospace">tbm_surface_info</span> structure:</p>
+<p>Map the TBM surface with the access option. After the surface is mapped, the <code>tbm_surface</code> information is saved in the <code>tbm_surface_info</code> structure:</p>
<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>
<li>
-<p>Store data at the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> instance by using a pointer of each plane:</p>
+<p>Store data at the <code>tbm_surface</code> instance by using a pointer of each plane:</p>
<pre class="prettyprint">
for (i = 0; i < surface_info.num_planes; i++)
memset(surface_info.planes[i].ptr, 0x0, surface_info.planes[i].size);
</pre>
</li>
-<li>When no longer needed, unmap and destroy the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> instance:
+<li>When no longer needed, unmap and destroy the <code>tbm_surface</code> instance:
<pre class="prettyprint">
if (tbm_surface_unmap(surface) != TBM_SURFACE_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "Failed to unmap tbm_surface\n");
<p>You can create OpenGL ES applications in Tizen with the EGL layer. Tizen native applications can use OpenGL ES not only for creating a 3D scene but also for a 2D scene that requires fast interaction. OpenGL ES is also good for improving performance and reducing power consumption when the native application performs computation-intensive tasks that can be run in parallel.</p></li>
<li><a href="vulkan_n.htm">SDL Graphics with Vulkan</a>
-<p>You can get high-efficiency access to graphics and computing on modern GPUs with Vulkan. You can use cutting edge 3D programming tools to create high-quality games and real-time graphics in your applications.</p>
+<p>You can get high-efficiency access to graphics and computing on modern GPUs with Vulkan. You can use cutting edge 3D programming tools to create high-quality games and real-time graphics in your applications.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>Tizen supports hardware acceleration since Tizen 2.3.1. If hardware acceleration is enabled, it increases rendering performance and allows you to use OpenGL ES.</p>
-<p>You can enable hardware acceleration in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest</span> file, using the manifest editor's <strong>Advanced</strong> tab.</p>
+<p>You can enable hardware acceleration in the <code>tizen-manifest</code> file, using the manifest editor's <strong>Advanced</strong> tab.</p>
-<p class="figure">Figure: Hardware acceleration option</p>
+<p align="center"><strong>Figure: Hardware acceleration option</strong></p>
<p align="center"><img alt="Hardware acceleration option" src="../../images/hw_acceleration.png" /></p>
-<p>In the <span style="font-family: Courier New,Courier,monospace">tizen-manifest</span> file, the option is shows as follows:</p>
+<p>In the <code>tizen-manifest</code> file, the option is shows as follows:</p>
<pre class="prettyprint">
<ui-application appid="example" hw-acceleration="on">
</pre>
-<p>The possible values are <span style="font-family: Courier New,Courier,monospace">on</span> (enabled) and <span style="font-family: Courier New,Courier,monospace">off</span> (disabled). If the value is not defined, the default system policy determines whether the hardware acceleration is enabled.</p>
+<p>The possible values are <code>on</code> (enabled) and <code>off</code> (disabled). If the value is not defined, the default system policy determines whether the hardware acceleration is enabled.</p>
<p>Normally, it is enough to modify the manifest file to enable hardware acceleration. In the following special cases, however, additional actions are required:</p>
<ul><li>OpenGL ES application
-<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating an elm window.</p>
+<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <code>elm_config_accel_preference_set()</code> function before creating an elm window.</p>
<p>In an indirect rendering mode:</p>
<pre class="prettyprint">
</pre>
<p>This function and option are supported since Tizen 2.3.</p>
-<p>In a direct rendering mode, if you want to use depth and stencil buffers or multisample, you have to specify them in the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function:</p>
+<p>In a direct rendering mode, if you want to use depth and stencil buffers or multisample, you have to specify them in the <code>elm_config_accel_preference_set()</code> function:</p>
<pre class="prettyprint">
elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
win = elm_win_util_standard_add(name, "OpenGL example");
<p>These special options are supported since Tizen 2.3.1. For more information, see the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>
</li>
<li>EFL WebKit (EWK) application
-<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating an elm window. Because EWK uses a 24-bit depth buffer and a 8-bit stencil buffer, you must also specify them in the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function:</p>
+<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <code>elm_config_accel_preference_set()</code> function before creating an elm window. Because EWK uses a 24-bit depth buffer and a 8-bit stencil buffer, you must also specify them in the <code>elm_config_accel_preference_set()</code> function:</p>
<pre class="prettyprint">
elm_config_accel_preference_set("opengl:depth24:stencil8");
win = elm_win_util_standard_add(name, "EWK example");
<h1>Interactive UI</h1>
-<p>The 2D canvas in Tizen (the <span style="font-family: Courier New,Courier,monospace">Evas object</span>) has been designed to draw scenes optimally. This means that when drawing a new frame, it does not always read the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> data. This mechanism can cause a problem for a 3D scene, because the 3D scene is updated by the external module, such as the GPU, and <span style="font-family: Courier New,Courier,monospace">Evas</span> does not know whether the 3D scene is updated.</p>
-<p>To solve the problem, GLView provides the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function to notify Evas that the 3D scene must be updated in the next frame. The <span style="font-family: Courier New,Courier,monospace">draw_glview()</span> callback is then invoked while Evas renders the next frame. The application must call the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function whenever necessary:</p>
+<p>The 2D canvas in Tizen (the <code>Evas object</code>) has been designed to draw scenes optimally. This means that when drawing a new frame, it does not always read the <code>Evas_Object</code> data. This mechanism can cause a problem for a 3D scene, because the 3D scene is updated by the external module, such as the GPU, and <code>Evas</code> does not know whether the 3D scene is updated.</p>
+<p>To solve the problem, GLView provides the <code>elm_glview_changed_set()</code> function to notify Evas that the 3D scene must be updated in the next frame. The <code>draw_glview()</code> callback is then invoked while Evas renders the next frame. The application must call the <code>elm_glview_changed_set()</code> function whenever necessary:</p>
<ul>
-<li><a href="#touch">Touch Event Handling</a> updates the scene by touch event, and you have to invoke the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</li>
-<li><a href="#update">Automatic Update</a> must be enabled to be used, and also requires calling the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</li>
+<li><a href="#touch">Touch Event Handling</a> updates the scene by touch event, and you have to invoke the <code>elm_glview_changed_set()</code> function.</li>
+<li><a href="#update">Automatic Update</a> must be enabled to be used, and also requires calling the <code>elm_glview_changed_set()</code> function.</li>
</ul>
<h2 id="touch" name="touch">Touch Event Handling</h2>
-<p>To handle touch events in Tizen, you must connect the event callback functions with <
span style="font-family: Courier New,Courier,monospace">Evas_object</span>. The functions are registered by the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function for a set of specific events which are already defined in EFL. To learn more about EFL event handling, see the <a href="../ui/efl/event_handling_n.htm">Event Handling</a>.</p>
+<p>To handle touch events in Tizen, you must connect the event callback functions with <
code>Evas_object</code>. The functions are registered by the <code>evas_object_event_callback_add()</code> function for a set of specific events which are already defined in EFL. To learn more about EFL event handling, see the <a href="../ui/efl/event_handling_n.htm">Event Handling</a>.</p>
<p>The following examples show how to register callback functions for handling touch information and rotating a cube object:</p>
<ol><li>Registering callback functions
-<p>The following code shows how to add callback functions to <span style="font-family: Courier New,Courier,monospace">Evas_object</span>. The parameters, <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>, <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>, and <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>, represent the specific events for which callbacks must be called. These events are defined in <span style="font-family: Courier New,Courier,monospace">Evas_Callback_Type</span>.</p>
+<p>The following code shows how to add callback functions to <code>Evas_object</code>. The parameters, <code>EVAS_CALLBACK_MOUSE_DOWN</code>, <code>EVAS_CALLBACK_MOUSE_UP</code>, and <code>EVAS_CALLBACK_MOUSE_MOVE</code>, represent the specific events for which callbacks must be called. These events are defined in <code>Evas_Callback_Type</code>.</p>
<pre class="prettyprint">
static Evas_Object*
}
</pre>
-<p>Each callback function has the <span style="font-family: Courier New,Courier,monospace">void *event_info</span> parameter in their signature. However, the parameter works differently depending on the registered events. In the <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> function, the void pointer <span style="font-family: Courier New,Courier,monospace">event_info</span> is cast to the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> type, which is associated with <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>. Therefore, you can get the information about the screen point when the user touches the screen. Using this information, the angles, <span style="font-family: Courier New,Courier,monospace">xangle</span> and <span style="font-family: Courier New,Courier,monospace">yangle</span>, are accumulated and the accumulated data are used for calculating the rotation matrix in the <span style="font-family: Courier New,Courier,monospace">draw_glview()</span> callback functions.</p>
-<p>Notice the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function. It notifies EFL that there has been a change in GLView. Then, the main loop of EFL invokes the rendering callback functions in GLView.</p></li></ol>
+<p>Each callback function has the <code>void *event_info</code> parameter in their signature. However, the parameter works differently depending on the registered events. In the <code>mouse_move_cb()</code> function, the void pointer <code>event_info</code> is cast to the <code>Evas_Event_Mouse_Move</code> type, which is associated with <code>EVAS_CALLBACK_MOUSE_MOVE</code>. Therefore, you can get the information about the screen point when the user touches the screen. Using this information, the angles, <code>xangle</code> and <code>yangle</code>, are accumulated and the accumulated data are used for calculating the rotation matrix in the <code>draw_glview()</code> callback functions.</p>
+<p>Notice the <code>elm_glview_changed_set()</code> function. It notifies EFL that there has been a change in GLView. Then, the main loop of EFL invokes the rendering callback functions in GLView.</p></li></ol>
<h2 id="update" name="update">Automatic Update</h2>
-<p>In order to allow GLView to update scenes continuously, you must trigger the GLView rendering at every frame. The <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> represents a method to enable the automatic update. It invokes the registered callback at every <span style="font-family: Courier New,Courier,monospace">N</span> seconds where <span style="font-family: Courier New,Courier,monospace">N</span> is the frametime interval set by the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime_set()</span> function. Then you can call the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function at the animator's callback to keep the 3D scene being rendered while the animator works.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> instance can be replaced by <span style="font-family: Courier New,Courier,monospace">Ecore_Timer</span>, which produces the same result as <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>. However, since <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> provides more advantages in maintaining the updating loop, prefer <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> instead of <span style="font-family: Courier New,Courier,monospace">Ecore_Timer</span>. For more information, see the Ecore Animator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html">wearable</a> applications).</p>
+<p>In order to allow GLView to update scenes continuously, you must trigger the GLView rendering at every frame. The <code>Ecore_Animator</code> represents a method to enable the automatic update. It invokes the registered callback at every <code>N</code> seconds where <code>N</code> is the frametime interval set by the <code>ecore_animator_frametime_set()</code> function. Then you can call the <code>elm_glview_changed_set()</code> function at the animator's callback to keep the 3D scene being rendered while the animator works.</p>
+<p>The <
code>Ecore_Animator</code> instance can be replaced by <code>Ecore_Timer</code>, which produces the same result as <code>Ecore_Animator</code>. However, since <code>Ecore_Animator</code> provides more advantages in maintaining the updating loop, prefer <code>Ecore_Animator</code> instead of <code>Ecore_Timer</code>. For more information, see the Ecore Animator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html">wearable</a> applications).</p>
<p>The following example adds and deletes an animator with the callback function:</p>
-<ol><li>Adding <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>
+<ol><li>Adding <code>Ecore_Animator</code>
<pre class="prettyprint">
/*
Add an animator so that the app regularly
return EINA_TRUE;
}
</pre>
-<p>The animator callback function is also triggered when the display is off. Use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">ecore_animator_thaw()</span> functions in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> and <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callbacks for power saving.</p></li></ol>
+<p>The animator callback function is also triggered when the display is off. Use the <code>ecore_animator_freeze()</code> and <code>ecore_animator_thaw()</code> functions in the <code>app_pause_cb()</code> and <code>app_resume_cb()</code> callbacks for power saving.</p></li></ol>
<h2 id="scene" name="scene">Integrating 3D Scene and 2D UI Components</h2>
<p>GLView can be used together with Elementary UI components. The following example creates a GLView and Elementary button component together in a simple box container. It is also possible to support interactions between 2D components and 3D scene.</p>
<p>The EvasGL use cases assume that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
-<p>To be able to call GL functions directly, first declare the global variable using the <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_DEFINE()</span> macro. Then, create an EvasGL and use the <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_USE()</span> macro, which is similar to the GLView macro. For more detailed information, see the <span style="font-family: Courier New,Courier,monospace">Evas_GL_GLES2_Helpers.h</span> file.</p>
+<p>To be able to call GL functions directly, first declare the global variable using the <code>EVAS_GL_GLOBAL_GLES2_DEFINE()</code> macro. Then, create an EvasGL and use the <code>EVAS_GL_GLOBAL_GLES2_USE()</code> macro, which is similar to the GLView macro. For more detailed information, see the <code>Evas_GL_GLES2_Helpers.h</code> file.</p>
<pre class="prettyprint">
#include <app.h>
<p>To create the Elm window and EvasGL:</p>
<ol>
<li>Create a window and EvasGL.
- <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span>. To develop a GL application and make the application use the GPU, you must call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating the window.</p>
+ <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <code>elm_win_util_standard_add()</code>. To develop a GL application and make the application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window.</p>
<pre class="prettyprint">
Evas_Object *win;
ad->win = elm_win_util_standard_add("Evas_GL Example", "Evas_GL Example");
</pre>
-<p>You can create the EvasGL handler using the <span style="font-family: Courier New,Courier,monospace">evas_gl_new()</span> function. This initializer takes the Evas canvas on which OpenGL ES is to be used as a parameter. When developing an application with Elementary, use the canvas of your window:</p>
+<p>You can create the EvasGL handler using the <code>evas_gl_new()</code> function. This initializer takes the Evas canvas on which OpenGL ES is to be used as a parameter. When developing an application with Elementary, use the canvas of your window:</p>
<pre class="prettyprint">
ad->evasgl = evas_gl_new(evas_object_evas_get(ad->win));
</pre>
-<p>To free the memory allocated to the handler, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_free()</span> function.</p>
+<p>To free the memory allocated to the handler, use the <code>evas_gl_free()</code> function.</p>
</li>
<li>Create a surface.
-<p>You must allocate a new config object to fill out the surface using the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span> function. As long as Evas creates the config object, it takes care of any backward compatibility issues. Once you have your config object, you can specify the surface settings:</p>
+<p>You must allocate a new config object to fill out the surface using the <code>evas_gl_config_new()</code> function. As long as Evas creates the config object, it takes care of any backward compatibility issues. Once you have your config object, you can specify the surface settings:</p>
<pre class="prettyprint">
appdata_s *ad;
ad->cfg->color_format = EVAS_GL_RGBA_8888; /* Surface color format */
ad->cfg->depth_bits = EVAS_GL_DEPTH_BIT_24; /* Surface depth format */
ad->cfg->stencil_bits = EVAS_GL_STENCIL_NONE; /* Surface stencil format */
-ad->cfg->options_bits = EVAS_GL_OPTIONS_NONE; /* Configuration options (here, no extra options are used) */
+/* Configuration options (here, no extra options are used) */
+ad->cfg->options_bits = EVAS_GL_OPTIONS_NONE;
</pre>
-<p>Once you have configured the surface behavior, you must initialize the surface using the <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create()</span> function. This function takes the given Evas_GL object as the first parameter and the pixel format, and the configuration of the rendering surface as the second parameter. The last 2 parameters are the width and height of the surface, which you can recover directly from the window.</p>
+<p>Once you have configured the surface behavior, you must initialize the surface using the <code>evas_gl_surface_create()</code> function. This function takes the given Evas_GL object as the first parameter and the pixel format, and the configuration of the rendering surface as the second parameter. The last 2 parameters are the width and height of the surface, which you can recover directly from the window.</p>
<pre class="prettyprint">
Evas_Coord w, h;
ad->sfc = evas_gl_surface_create(ad->evasgl, ad->cfg, w, h);
</pre>
-<p>To manually delete a GL surface, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy()</span> function.</p></li>
+<p>To manually delete a GL surface, use the <code>evas_gl_surface_destroy()</code> function.</p></li>
<li>Create a context.
-<p>Create a context for Evas_GL using the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create()</span> function. You can merge the context with a higher context definition that you must pass as a second parameter.</p>
+<p>Create a context for Evas_GL using the <code>evas_gl_context_create()</code> function. You can merge the context with a higher context definition that you must pass as a second parameter.</p>
<pre class="prettyprint">
ad->ctx = evas_gl_context_create(ad->evasgl, NULL);
EVAS_GL_GLOBAL_GLES2_USE(ad->evasgl, ad->ctx);
</pre>
-<p>To delete the context later, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy()</span> function. To delete the entire configuration object, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free()</span> function instead.</p>
+<p>To delete the context later, use the <code>evas_gl_context_destroy()</code> function. To delete the entire configuration object, use the <code>evas_gl_config_free()</code> function instead.</p>
</li>
</ol>
<h2 id="getapi" name="getapi">Getting OpenGL ES APIs</h2>
-<p>If you want to get the OpenGL ES API, you can get the API for rendering OpenGL ES with the <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get()</span> function. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES 2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas.</p>
+<p>If you want to get the OpenGL ES API, you can get the API for rendering OpenGL ES with the <code>evas_gl_api_get()</code> function. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES 2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas.</p>
-<p>If you already use a global macro, such as <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_XXX()</span>, you need not get the APIs.</p>
+<p>If you already use a global macro, such as <code>EVAS_GL_GLOBAL_GLES2_XXX()</code>, you need not get the APIs.</p>
<pre class="prettyprint">
Evas_GL_API *glapi;
/* draw_scene(); */
}</pre>
-<p>At every tick, set the given context as a current context for the given surface using the <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current()</span> function.</p>
+<p>At every tick, set the given context as a current context for the given surface using the <code>evas_gl_make_current()</code> function.</p>
</li>
-<li>You can use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to define the OpenGL ES main loop.
-<p>To use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>, create a callback that is called on every animation tick. This animation callback is used only to mark the image as "dirty", meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
+<li>You can use the <code>Ecore_Animator</code> to define the OpenGL ES main loop.
+<p>To use the <code>Ecore_Animator</code>, create a callback that is called on every animation tick. This animation callback is used only to mark the image as "dirty", meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
-<p>The animator callback function is also triggered when the display is off. Use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">ecore_animator_thaw()</span> functions in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> and <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callbacks for power saving.</p>
+<p>The animator callback function is also triggered when the display is off. Use the <code>ecore_animator_freeze()</code> and <code>ecore_animator_thaw()</code> functions in the <code>app_pause_cb()</code> and <code>app_resume_cb()</code> callbacks for power saving.</p>
<pre class="prettyprint">
static Eina_Bool
</pre></li>
<li>
-<p>Because the window size can be changed, set a resize callback for the window. In the callback, you must recreate an <span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface</span> and reset the viewport size with the new window size:</p>
+<p>Because the window size can be changed, set a resize callback for the window. In the callback, you must recreate an <code>Evas_GL_Surface</code> and reset the viewport size with the new window size:</p>
<pre class="prettyprint">
static void
<ol>
<li>Detect support for an extension.
- <p>In OpenGL ES, you must always call the <span style="font-family: Courier New,Courier,monospace;">glGetString(GL_EXTENSIONS)</span> function. Make sure that the extension name is present in the list and then dynamically find the function pointer using the <span style="font-family: Courier New,Courier,monospace;">dlsym()</span>, <span style="font-family: Courier New,Courier,monospace;">eglGetProcAddress()</span>, or <span style="font-family: Courier New,Courier,monospace;">glXGetProcAddress()</span> function.</p>
+ <p>In OpenGL ES, you must always call the <code>glGetString(GL_EXTENSIONS)</code> function. Make sure that the extension name is present in the list and then dynamically find the function pointer using the <code>dlsym()</code>, <code>eglGetProcAddress()</code>, or <code>glXGetProcAddress()</code> function.</p>
<p>Since EvasGL exposes only a structure with the function pointers set to internal wrappers or the proper OpenGL ES implementation library, it can also expose all the detected extensions simply by setting their function pointers.</p>
- <p>To detect support for the <span style="font-family: Courier New,Courier,monospace;">GL_OES_get_program_binary</span> extension or equivalent, and to get the function pointer associated:</p>
+ <p>To detect support for the <code>GL_OES_get_program_binary</code> extension or equivalent, and to get the function pointer associated:</p>
<pre class="prettyprint">
Evas_GL_API *gl = elm_glview_api_get(glview);
<ul>
<li>To use the image extension:
-<p>There are 2 versions of the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage()</span> function, out of which extra <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Context</span> is taken as a parameter. It is recommended to call the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImageForContext()</span> function if you are dealing with multiple contexts, otherwise calling the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage()</span> function is sufficient.</p>
+<p>There are 2 versions of the <code>evasglCreateImage()</code> function, out of which extra <code>Evas_GL_Context</code> is taken as a parameter. It is recommended to call the <code>evasglCreateImageForContext()</code> function if you are dealing with multiple contexts, otherwise calling the <code>evasglCreateImage()</code> function is sufficient.</p>
<ol>
<li>Check for support.
<li>
<p>To use direct rendering in GLView:</p>
-<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_DIRECT</span> option is one of GLView mode's enums and the option can be enabled using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function.</p>
+<p>In GLView, the <code>ELM_GLVIEW_DIRECT</code> option is one of GLView mode's enums and the option can be enabled using the <code>elm_glview_mode_set()</code> function.</p>
<pre class="prettyprint">
/* Tizen 2.3 */
/* elm_config_accel_preference_set("opengl"); */
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 <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
+<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>
</li>
<li>
<p>To use direct rendering in EvasGL:</p>
-<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL's config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
+<p>In EvasGL, the <code>EVAS_GL_OPTIONS_DIRECT</code> is one of EvasGL's config options and the option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
<pre class="prettyprint">
/* Tizen 2.3 */
/* elm_config_accel_preference_set("opengl"); */
cfg->multisample_bits = EVAS_GL_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 an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function. If the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
+<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 an <code>Evas_GL_Config</code> object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function. If the <code>Evas_GL_Config</code> object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If direct rendering is enabled, EvasGL renders directly to the back buffer of the window. Otherwise, EvasGL renders to the off screen buffer, then composited to the back buffer of the window.
+
+ <div class="note">
+ <strong>Note</strong>
+ If direct rendering is enabled, EvasGL renders directly to the back buffer of the window. Otherwise, EvasGL renders to the off screen buffer, then composited to the back buffer of the window.
<p>Although direct rendering is enabled, EvasGL not always renders directly to the back buffer. The following conditions disable direct rendering and force a fallback to indirect rendering in a frame buffer:</p>
<ul>
<li>If the object's color is not 255,255,255,255.</li>
<li>If the object has an Evas map.</li>
- <li>If the object size is different from the viewport (<span style="font-family: Courier New,Courier,monospace;">RESIZE_POLICY_SCALE</span>).</li>
- <li>If the window is rotated and <span style="font-family: Courier New,Courier,monospace;">CLIENT_SIDE_ROTATION</span> is not set.</li>
- <li>If the GLView policy is set to <span style="font-family: Courier New,Courier,monospace;">ALWAYS</span> render or the EvasGL does not use pixel getter callback.</li>
-</ul></td>
- </tr>
- </tbody>
- </table>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Caution</th>
- </tr>
- <tr>
- <td class="note">In the render callback function, call only GL functions.
-<p>In case the GL functions are called outside the render callback function, you must call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled.</p>
-
-<p>If the target buffer is an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering occurs.</p></td>
- </tr>
- </tbody>
- </table>
+ <li>If the object size is different from the viewport (<code>RESIZE_POLICY_SCALE</code>).</li>
+ <li>If the window is rotated and <code>CLIENT_SIDE_ROTATION</code> is not set.</li>
+ <li>If the GLView policy is set to <code>ALWAYS</code> render or the EvasGL does not use pixel getter callback.</li>
+</ul>
+ </div>
+
+ <div class="note">
+ <strong>Caution</strong>
+ In the render callback function, call only GL functions.
+<p>In case the GL functions are called outside the render callback function, you must call the <code>evas_gl_make_current()</code> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <code>Evas_GL_Surface</code> with Direct Rendering enabled.</p>
+
+<p>If the target buffer is an <code>Evas_GL_Surface</code> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering occurs.</p>
+ </div>
</li>
</ul>
<ul>
<li>To use GLView rotation:
-<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span> option is one of GLView mode's enums and the option can be enabled by using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function. This option is needed only when Direct Rendering is enabled.</p>
+<p>In GLView, the <code>ELM_GLVIEW_CLIENT_SIDE_ROTATION</code> option is one of GLView mode's enums and the option can be enabled by using the <code>elm_glview_mode_set()</code> function. This option is needed only when Direct Rendering is enabled.</p>
<pre class="prettyprint">
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>
<li>To use EvasGL rotation:
-<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> is one of EvasGL's config options and this option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
+<p>In EvasGL, the <code>EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</code> is one of EvasGL's config options and this option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
<pre class="prettyprint">
Evas_GL_Config *cfg;
cfg = evas_gl_config_new();
}
</pre>
-<p>To get the current rotation of the view, in degrees, call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_rotation_get()</span> function to properly handle the current rotation of the view. It always returns 0 unless the option <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>
+<p>To get the current rotation of the view, in degrees, call the <code>evas_gl_rotation_get()</code> function to properly handle the current rotation of the view. It always returns 0 unless the option <code>EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</code> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>
</li>
</ul>
-<p class="figure">Figure: OpenGL ES and EFL</p>
+<p align="center"><strong>Figure: OpenGL ES and EFL</strong></p>
<p align="center"><img src="../../images/opengl_es_efl.png" alt="OpenGL ES and EFL" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>The fragment shader returns a colored fragment, often called the <strong>RGBAZ</strong> fragment. A (for alpha) represents the fragment's opacity whereas Z represents the depth. In the output merger, the fragment competes or combines with the pixel in the <strong>color buffer</strong> to update the pixel's color. A and Z are used in this process. In addition to the color buffer, OpenGL ES (GL) supports another buffer named <strong>depth buffer</strong> or <strong>z-buffer</strong>. It has the same resolution as the color buffer and stores the depth values of the pixels.</p>
<h2 id="depth" name="depth">Depth Buffering</h2>
-<p>In the following figure, assume that <span style="font-family: Courier New,Courier,monospace">MinZ</span> of the viewport is 0.0, <span style="font-family: Courier New,Courier,monospace">MaxZ</span> is 1.0, the red triangle's depth is 0.8, and the blue triangle's is 0.5. By calling the <span style="font-family: Courier New,Courier,monospace">glClear()</span> function once per frame, the color and depth buffers are simultaneously cleared with the default values selected by the <span style="font-family: Courier New,Courier,monospace">glClearColor()</span> and <span style="font-family: Courier New,Courier,monospace">glClearDepthf()</span> functions, respectively.</p>
+<p>In the following figure, assume that <code>MinZ</code> of the viewport is 0.0, <code>MaxZ</code> is 1.0, the red triangle's depth is 0.8, and the blue triangle's is 0.5. By calling the <code>glClear()</code> function once per frame, the color and depth buffers are simultaneously cleared with the default values selected by the <code>glClearColor()</code> and <code>glClearDepthf()</code> functions, respectively.</p>
-<p class="figure" id="buffer">Figure: Depth buffering visualization: the rendering order is red to blue triangles</p>
+<p id="buffer" align="center"><strong>Figure: Depth buffering visualization: the rendering order is red to blue triangles</strong></p>
<p align="center"><img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer1.png" /> <img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer2.png" /></p>
-<p>When a fragment at <span style="font-family: Courier New,Courier,monospace">(x,y)</span> is passed from the fragment shader, its depth value is compared with the depth buffer value at <span style="font-family: Courier New,Courier,monospace">(x,y)</span>. If the fragment has a smaller depth value, its color and depth update the color buffer and depth buffer at <span style="font-family: Courier New,Courier,monospace">(x,y)</span>, respectively. Otherwise, the fragment is discarded. The above figure shows how the depth buffer is used for filling the color buffer. This method is called <strong>depth buffering</strong> or <strong>z-buffering</strong>.</p>
+<p>When a fragment at <code>(x,y)</code> is passed from the fragment shader, its depth value is compared with the depth buffer value at <code>(x,y)</code>. If the fragment has a smaller depth value, its color and depth update the color buffer and depth buffer at <code>(x,y)</code>, respectively. Otherwise, the fragment is discarded. The above figure shows how the depth buffer is used for filling the color buffer. This method is called <strong>depth buffering</strong> or <strong>z-buffering</strong>.</p>
<h2 id="alpha" name="alpha">Alpha Blending</h2>
<p>Suppose that the current fragment has a smaller depth than the pixel in the color buffer and is translucent. Then, the pixel must show through the fragment. This is achieved by blending the fragment color with the pixel color. The process uses the alpha value of the fragment, which is in the range of [0,1]: 0 denotes fully transparent and 1 denotes fully opaque.</p>
-<p>A typical blending equation is <
span style="font-family: Courier New,Courier,monospace">αc<sub>f</sub> + (1-α)c<sub>p</sub></span>, where <span style="font-family: Courier New,Courier,monospace">α</span> represents the fragment's opacity, <span style="font-family: Courier New,Courier,monospace">c<sub>f</sub></span> is the fragment color, and <span style="font-family: Courier New,Courier,monospace">c<sub>p</sub></span> is the pixel color. Assume that, in the <a href="#buffer">Depth buffering visualization</a> figure, all vertices of the blue triangle have the RGBA color, (0,0,1,0.5), and those of the red triangle have (1,0,0,1). The scan conversion algorithm interpolates the RGB channels and the alpha channel in the same manner. Therefore, all fragments of the blue triangle are assigned (0,0,1,0.5), and those of the red triangle are (1,0,0,1). Then, the blue fragment is blended with the red pixel at 3 pixel positions. The blended color is (0.5,0,0.5). This process is named <strong>alpha blending</strong>.</p>
-<p>GL supports the <span style="font-family: Courier New,Courier,monospace">glBlendFunc()</span> function, where the first parameter specifies the blending coefficient for the incoming (source) fragment and the second parameter specifies the blending coefficient for the destination pixel. Many values, such as <span style="font-family: Courier New,Courier,monospace">GL_ZERO</span> and <span style="font-family: Courier New,Courier,monospace">GL_ONE</span>, can be assigned to the parameters, but <span style="font-family: Courier New,Courier,monospace">GL_SRC_ALPHA</span> best fits the incoming fragment while <span style="font-family: Courier New,Courier,monospace">GL_ONE_MINUS_SRC_ALPHA</span> best fits the destination pixel.</p>
+<p>A typical blending equation is <
code>αc<sub>f</sub> + (1-α)c<sub>p</sub></code>, where <code>α</code> represents the fragment's opacity, <code>c<sub>f</sub></code> is the fragment color, and <code>c<sub>p</sub></code> is the pixel color. Assume that, in the <a href="#buffer">Depth buffering visualization</a> figure, all vertices of the blue triangle have the RGBA color, (0,0,1,0.5), and those of the red triangle have (1,0,0,1). The scan conversion algorithm interpolates the RGB channels and the alpha channel in the same manner. Therefore, all fragments of the blue triangle are assigned (0,0,1,0.5), and those of the red triangle are (1,0,0,1). Then, the blue fragment is blended with the red pixel at 3 pixel positions. The blended color is (0.5,0,0.5). This process is named <strong>alpha blending</strong>.</p>
+<p>GL supports the <code>glBlendFunc()</code> function, where the first parameter specifies the blending coefficient for the incoming (source) fragment and the second parameter specifies the blending coefficient for the destination pixel. Many values, such as <code>GL_ZERO</code> and <code>GL_ONE</code>, can be assigned to the parameters, but <code>GL_SRC_ALPHA</code> best fits the incoming fragment while <code>GL_ONE_MINUS_SRC_ALPHA</code> best fits the destination pixel.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>In real-time applications, such as games, an object is usually represented as a <strong>polygon mesh</strong>. The only polygon that OpenGL ES (GL) supports is a triangle and because of this, a polygon mesh in GL implies a <strong>triangle mesh</strong>. Given an object, its polygon mesh can have different resolutions, as shown in the following figure.</p>
<p>As the resolution is increased or the number of vertices increased, the polygon mesh samples the original smooth surface more accurately. However, rendering the mesh requires more time.</p>
-<p class="figure">Figure: Sphere surface is sampled in different resolutions</p>
+<p align="center"><strong>Figure: Sphere surface is sampled in different resolutions</strong></p>
<p align="center"><img src="../../images/sphere_surface.png" alt="Sphere surface is sampled in different resolutions" /></p>
<p>An intuitive way to represent a triangle mesh is to enumerate the vertices of the triangles and read 3 vertices at a time in linear order. The memory space storing the vertices is called a <strong>vertex</strong> array. The following figure shows an example of a simple 2D mesh.</p>
-<p class="figure">Figure: Vertex array</p>
+<p align="center"><strong>Figure: Vertex array</strong></p>
<p align="center"><img src="../../images/vertex_array.png" alt="Vertex array" /></p>
<p>The above representation is intuitive but inefficient. It is because the vertex array contains redundant data. For example, the vertex (1,0) appears 3 times in the vertex array. A better representation is using a separate <strong>index array</strong> in addition to the vertex array, as shown in the following figure:</p>
<li>Each vertex appears only once in the vertex array.</li>
<li>3 indices per triangle are stored in the index array.</li>
</ul>
-<p class="figure">Figure: Vertex array and index array</p>
+<p align="center"><strong>Figure: Vertex array and index array</strong></p>
<p align="center"><img src="../../images/vertex_index_array.png" alt="Vertex array and index array" /></p>
<p>In general, each cell of the vertex array contains not only the vertex position, but also the vertex normal, texture coordinates, and other attributes. Therefore, the vertex array storage saved by removing the duplicate data outweighs the additional storage needed for the index array.</p>
<p>The vertex normals are indispensable for computing illumination, as is presented in Fragment Shader. A vertex normal is typically computed by averaging the normals of all polygons sharing the vertex, as illustrated in the following figure. On the left is a cross-section view, where a vertex is shared by 2 triangles.</p>
<p>Vertex normals are automatically computed by graphics packages, such as 3ds Max.</p>
-<p class="figure">Figure: Computation of the vertex normals</p>
+<p align="center"><strong>Figure: Computation of the vertex normals</strong></p>
<p align="center"><img src="../../images/vertex_normals.png" alt="Computation of the vertex normals" /></p>
<p>Game objects created using off-line graphics packages are exported into files and then imported to the runtime application. In 3ds Max, for example, many file formats are supported for export. Among the popular are OBJ and FBX.</p>
<p>The mesh shown in the following figure is a low-resolution mesh of a unit sphere. The spherical coordinates are uniformly sampled at every 45 degrees so that the mesh is composed of 26 vertices in total. 5 vertex normals are illustrated for visualization purpose.</p>
-<p class="figure">Figure: Low-resolution mesh of a unit sphere</p>
+<p align="center"><strong>Figure: Low-resolution mesh of a unit sphere</strong></p>
<p align="center"><img src="../../images/low_res_sphere.png" alt="Low-resolution mesh of a unit sphere" /></p>
<p>The following figure shows some fractions of the OBJ file, where v stands for vertex position, vn stands for vertex normal, and f stands for face/triangle. The first v is indexed by 1 and so is the first vn. A triangle is defined by 3 instances of v//vn.</p>
-<p class="figure">Figure: Fractions of an OBJ file</p>
+<p align="center"><strong>Figure: Fractions of an OBJ file</strong></p>
<p align="center"><img src="../../images/obj_fractions.png" alt="Fractions of an OBJ file" /></p>
<p>The triangle mesh stored in the OBJ file is imported into the GL program to fill the vertex and index arrays. As the example mesh is composed of 48 triangles, the index array has 144 (48 times 3) elements, as shown in the following figure.</p>
-<p class="figure">Figure: Vertex and index arrays of a low-resolution sphere mesh</p>
+<p align="center"><strong>Figure: Vertex and index arrays of a low-resolution sphere mesh</strong></p>
<p align="center"><img src="../../images/low_res_arrays.png" alt="Vertex and index arrays of a low-resolution sphere mesh" /></p>
<h1>Texturing</h1>
<p>While the vertex shader outputs the clip space vertices, the rasterizer outputs a set of fragments at the window space. The per-fragment attributes usually include a normal and a set of texture coordinates. Using these data, the fragment shader determines the final color of each fragment. The most important things to do in the fragment shader are <strong>lighting</strong> and <strong>texturing</strong>.</p>
-<p>Before moving on to the fragment shader, consider the basics of texturing. The simplest among the various texturing methods is image texturing. An image texture is a 2D array of <strong>texels</strong> (texture elements). Each texel has a unique position. In the first of the following figures, for example, the lower-left texel's position is (0.5,0.5). For accessing a texture, you can use 'normalized' texture coordinates (<span style="font-family: Courier New,Courier,monospace">s,t</span>) instead of the texel position (as shown in the second of the following figures).</p>
+<p>Before moving on to the fragment shader, consider the basics of texturing. The simplest among the various texturing methods is image texturing. An image texture is a 2D array of <strong>texels</strong> (texture elements). Each texel has a unique position. In the first of the following figures, for example, the lower-left texel's position is (0.5,0.5). For accessing a texture, you can use 'normalized' texture coordinates (<code>s,t</code>) instead of the texel position (as shown in the second of the following figures).</p>
-<p class="figure">Figure: 2D array of texels</p>
+<p align="center"><strong>Figure: 2D array of texels</strong></p>
<p align="center"><img alt="2D array of texels" src="../../images/texturing_texel.png" /></p>
-<p class="figure">Figure: Accessing textures using normalized texture coordinates</p>
+<p align="center"><strong>Figure: Accessing textures using normalized texture coordinates</strong></p>
<p align="center"><img alt="Accessing textures using normalized texture coordinates" src="../../images/texturing_normalise.png" /></p>
<h2 id="process" name="process">Processing Texture Coordinates</h2>
-<p>The texture coordinates are assigned to the vertices of the polygon mesh. (This process is called <strong>surface parameterization</strong> or simply <strong>parameterization</strong>, and it is done by graphics packages, such as 3ds Max.) The scan conversion is also done with the texture coordinates. In the following figure, the scan conversion interpolates the per-vertex texture coordinates to determine the per-fragment texture coordinates. For example, the lower-left corner fragment is assigned the texture coordinates, (1/8,1/8). OpenGL ES (GL) simply multiplies the per-fragment texture coordinates by the texture resolution, <span style="font-family: Courier New,Courier,monospace">r<sub>x</sub></span> and <span style="font-family: Courier New,Courier,monospace">r<sub>y</sub></span>. If the resolution is 4x4, the texture coordinates, (1/8,1/8), are mapped to (0.5,0.5) and the lower-left corner texel is retrieved from the image texture.</p>
+<p>The texture coordinates are assigned to the vertices of the polygon mesh. (This process is called <strong>surface parameterization</strong> or simply <strong>parameterization</strong>, and it is done by graphics packages, such as 3ds Max.) The scan conversion is also done with the texture coordinates. In the following figure, the scan conversion interpolates the per-vertex texture coordinates to determine the per-fragment texture coordinates. For example, the lower-left corner fragment is assigned the texture coordinates, (1/8,1/8). OpenGL ES (GL) simply multiplies the per-fragment texture coordinates by the texture resolution, <code>r<sub>x</sub></code> and <code>r<sub>y</sub></code>. If the resolution is 4x4, the texture coordinates, (1/8,1/8), are mapped to (0.5,0.5) and the lower-left corner texel is retrieved from the image texture.</p>
-<p class="figure">Figure: From the texture coordinates to the texel position</p>
+<p align="center"><strong>Figure: From the texture coordinates to the texel position</strong></p>
<p align="center"><img alt="From the texture coordinates to the texel position" src="../../images/texturing_position1.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position2.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position3.png" /></p>
<h2 id="filter" name="filter">Texture Filtering</h2>
-<p>For a fragment located at (<span style="font-family: Courier New,Courier,monospace">x,y</span>) in the window, its texture coordinates (<span style="font-family: Courier New,Courier,monospace">s,t</span>) are mapped to (<span style="font-family: Courier New,Courier,monospace">s',t'</span>) as presented above. Basically, the fragment at (<span style="font-family: Courier New,Courier,monospace">x,y</span>) is <strong>projected</strong> onto (<span style="font-family: Courier New,Courier,monospace">s',t'</span>). In the contrived example given above, (<span style="font-family: Courier New,Courier,monospace">s',t'</span>) exactly falls into the center of a texel. In reality, however, this rarely happens. Then, the texels around (<span style="font-family: Courier New,Courier,monospace">s',t'</span>) are collected and combined to determine the texture color of the fragment. This process is called <strong>texture filtering</strong>.</p>
+<p>For a fragment located at (<code>x,y</code>) in the window, its texture coordinates (<code>s,t</code>) are mapped to (<code>s',t'</code>) as presented above. Basically, the fragment at (<code>x,y</code>) is <strong>projected</strong> onto (<code>s',t'</code>). In the contrived example given above, (<code>s',t'</code>) exactly falls into the center of a texel. In reality, however, this rarely happens. Then, the texels around (<code>s',t'</code>) are collected and combined to determine the texture color of the fragment. This process is called <strong>texture filtering</strong>.</p>
<p>Suppose a quad composed of 2 triangles. Depending on the view, view frustum, and viewport parameters, the quad size in the window space may vary. In the following figure, the top row shows a case where the window space quad appears larger than the given image texture. Then, the texture is <strong>magnified</strong> so as to be pasted onto the quad. In contrast, the window space quad in the bottom row appears smaller than the image texture, and the texture is <strong>minified</strong>. Note that the fragments are sparsely projected onto the texture space.</p>
<p>In the figure, the texture is depicted as a grid of dotted lines, where a texel is located in a grid cell. The gold dots represent the window space fragments projected onto the texture space.</p>
-<p class="figure">Figure: Magnification (top) vs. minification (bottom)</p>
+<p align="center"><strong>Figure: Magnification (top) vs. minification (bottom)</strong></p>
<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_magnification.png" /></p>
<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_minification.png" /></p>
<h3>Filtering for Magnification</h3>
<p>In case of magnification, you have 2 options. The first is <strong>nearest point sampling</strong>. Then, as you can see in the left example below, a block of fragments can be mapped to a single texel. Consequently, a blocky image is often produced. The second option is <strong>bilinear interpolation</strong> illustrated in the right example below. In general, bilinear interpolation is preferred to nearest point sampling.</p>
-<p class="figure">Figure: Nearest point sampling (left) vs. bilinear interpolation (right)</p>
+<p align="center"><strong>Figure: Nearest point sampling (left) vs. bilinear interpolation (right)</strong></p>
<p align="center"><img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_nearest.png" /> <img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_bilinear.png" /></p>
<h3>Filtering for Minification</h3>
<p>Consider the checkerboard image texture in the following figure. If all fragments are surrounded by dark-gray texels, the textured primitive appears dark gray. If all fragments are surrounded by light-gray texels, the textured primitive appears light gray.</p>
-<p class="figure">Figure: Minification problem</p>
+<p align="center"><strong>Figure: Minification problem</strong></p>
<p align="center"><img alt="Minification problem" src="../../images/texturing_problem.png" /></p>
<h2 id="mipmap" name="mipmap">Mipmapping</h2>
<p>The filtering for minification process discussed above has a problem, because the texture is larger than the window space primitive and therefore many texels are not involved in texture filtering. The solution is to make the texture smaller, so that all texels are involved for texture filtering. The best case is that the window space primitive and the texture have the same size.</p>
-<p>To make the texture smaller, it is repeatedly down-sampled to a quarter size, and the colors of 2x2 neighboring texels are averaged to determine the color of a texel in the quarter texture, as shown in the following figure. Given an original texture of 2<span style="font-family: Courier New,Courier,monospace"><sup>l</sup></span>x2<span style="font-family: Courier New,Courier,monospace"><sup>l</sup></span> resolution, a texture pyramid of (<span style="font-family: Courier New,Courier,monospace">l</span> + 1) levels is constructed, where the original texture is located at level 0. The pyramid is called a <strong>mipmap</strong>.</p>
+<p>To make the texture smaller, it is repeatedly down-sampled to a quarter size, and the colors of 2x2 neighboring texels are averaged to determine the color of a texel in the quarter texture, as shown in the following figure. Given an original texture of 2<code><sup>l</sup></code>x2<code><sup>l</sup></code> resolution, a texture pyramid of (<code>l</code> + 1) levels is constructed, where the original texture is located at level 0. The pyramid is called a <strong>mipmap</strong>.</p>
-<p class="figure">Figure: Mipmap generation process</p>
+<p align="center"><strong>Figure: Mipmap generation process</strong></p>
<p align="center"><img alt="Mipmap generation process" src="../../images/texturing_mipmap1.png" /> <img alt="Mipmap generation process" src="../../images/texturing_mipmap2.png" /></p>
<h3>Mipmap Generation in GL</h3>
-<p>To automatically generate a mipmap, GL invokes the <span style="font-family: Courier New,Courier,monospace">glGenerateMipmap()</span> function, where the parameter can be, for example, <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_2D</span> or <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_CUBE_MAP</span> (textures in GL 2.0 come in 2 forms: 2D textures and cube map textures). Use <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_2D</span> for general image texturing.</p>
+<p>To automatically generate a mipmap, GL invokes the <code>glGenerateMipmap()</code> function, where the parameter can be, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code> (textures in GL 2.0 come in 2 forms: 2D textures and cube map textures). Use <code>GL_TEXTURE_2D</code> for general image texturing.</p>
<h3 id="mipmap_mini">Mipmapping for Minification</h3>
-<p>In any given a mipmap, you must decide which level you want to use for texture filtering. Observe that a pixel (fragment) covers an area on the screen. For simplicity, consider the area as a square so that the entire screen is tiled by an array of square pixels. Then, a pixel's projection onto the texture space is not a 'point', but an 'area' centered at (<span style="font-family: Courier New,Courier,monospace">s',t'</span>). The projected area is called the <strong>footprint</strong> of the pixel.</p>
-<p>As a simple example, consider a footprint that covers <span style="font-family: Courier New,Courier,monospace">m x m</span> texels of the level-0 texture. Then, the GPU computes <span style="font-family: Courier New,Courier,monospace">log<sub>2</sub>m</span>, which is denoted by λ. In the following figure, λ = log<sub>2</sub>3 ≈ 1.585. Consider then ⌊λ⌋ and ⌈λ⌉, which in this example are levels 1 and 2. You have 2 options:</p>
+<p>In any given a mipmap, you must decide which level you want to use for texture filtering. Observe that a pixel (fragment) covers an area on the screen. For simplicity, consider the area as a square so that the entire screen is tiled by an array of square pixels. Then, a pixel's projection onto the texture space is not a 'point', but an 'area' centered at (<code>s',t'</code>). The projected area is called the <strong>footprint</strong> of the pixel.</p>
+<p>As a simple example, consider a footprint that covers <code>m x m</code> texels of the level-0 texture. Then, the GPU computes <code>log<sub>2</sub>m</code>, which is denoted by λ. In the following figure, λ = log<sub>2</sub>3 ≈ 1.585. Consider then ⌊λ⌋ and ⌈λ⌉, which in this example are levels 1 and 2. You have 2 options:</p>
<ul>
<li>Select the level closer to λ. In this example, you select level 2. The selected level can be filtered either by nearest point sampling or by bilinear interpolation.
-<p>For example: Take the nearest level: <span style="font-family: Courier New,Courier,monospace">i<sub>λ</sub>= ⌊λ+0.5⌋</span></p>
+<p>For example: Take the nearest level: <code>i<sub>λ</sub>= ⌊λ+0.5⌋</code></p>
<ul><li>At the level, you can take the nearest point.</li>
<li>In contrast, you can do bilinear interpolation.</li>
</ul>
</li></ul>
<p>Note that the last case performs 3 levels of linear interpolations. It is called <strong>trilinear interpolation</strong>.</p>
-<p class="figure">Figure: Selecting the mipmap levels</p>
+<p align="center"><strong>Figure: Selecting the mipmap levels</strong></p>
<p align="center"><img alt="Selecting the mipmap levels" src="../../images/texturing_mipmap_levels.png" /></p>
<p>There is of course a third option: not to do mipmapping but to use the original image (at level 0) instead. It can be filtered either by nearest point sampling or by bilinear interpolation. Therefore, minification has 6 varieties in total.</p>
<p>When an image file is to be used as a texture, it is first loaded into the GL program. Then, you must take the following steps:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">glGenTextures()</span> function, where the first parameter defines the number of texture objects to generate and the second parameter returns them in <span style="font-family: Courier New,Courier,monospace">textures</span>.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">glBindTexture()</span> function, where the first parameter specifies what the texture is used for as, for example, <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_2D</span> or <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_CUBE_MAP</span>.</li>
-<li>After a texture object is generated and bound, the image data must be loaded using the <span style="font-family: Courier New,Courier,monospace">glTexImage2D()</span> function, where the first parameter is either <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_2D</span> or one of the cube-map faces, such as <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_CUBE_MAP_POSITIVE_X</span>, the second parameter specifies the mipmap level, and the eighth parameter can be, for example, <span style="font-family: Courier New,Courier,monospace">GL_UNSIGNED_SHORT_4_4_4_4</span> or <span style="font-family: Courier New,Courier,monospace">GL_UNSIGNED_SHORT_5_6_5</span>.</li>
-<li>The GPU itself makes a choice between minification and magnification, but allows you to select what kind of filtering to use in each case. For this purpose, invoke the <
span style="font-family: Courier New,Courier,monospace">glTexParameteri()</span> function. If the second parameter (parameter name) is <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_MAG_FILTER</span>, the third parameter is either <span style="font-family: Courier New,Courier,monospace">GL_NEAREST</span> or <span style="font-family: Courier New,Courier,monospace">GL_LINEAR</span>. If the second parameter is <span style="font-family: Courier New,Courier,monospace">GL_TEXTURE_MIN_FILTER</span>, the third parameter is either <span style="font-family: Courier New,Courier,monospace">GL_NEAREST_MIPMAP_NEAREST</span>, <span style="font-family: Courier New,Courier,monospace">GL_LINEAR_MIPMAP_NEAREST</span>, <span style="font-family: Courier New,Courier,monospace">GL_NEAREST_MIPMAP_LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">GL_LINEAR_MIPMAP_LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">GL_NEAREST</span>, or <span style="font-family: Courier New,Courier,monospace">GL_LINEAR</span>. These 6 options are those presented in <a href="#mipmap_mini">Mipmapping for Minification</a>.</li>
+<li>Use the <code>glGenTextures()</code> function, where the first parameter defines the number of texture objects to generate and the second parameter returns them in <code>textures</code>.</li>
+<li>Use the <code>glBindTexture()</code> function, where the first parameter specifies what the texture is used for as, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code>.</li>
+<li>After a texture object is generated and bound, the image data must be loaded using the <code>glTexImage2D()</code> function, where the first parameter is either <code>GL_TEXTURE_2D</code> or one of the cube-map faces, such as <code>GL_TEXTURE_CUBE_MAP_POSITIVE_X</code>, the second parameter specifies the mipmap level, and the eighth parameter can be, for example, <code>GL_UNSIGNED_SHORT_4_4_4_4</code> or <code>GL_UNSIGNED_SHORT_5_6_5</code>.</li>
+<li>The GPU itself makes a choice between minification and magnification, but allows you to select what kind of filtering to use in each case. For this purpose, invoke the <
code>glTexParameteri()</code> function. If the second parameter (parameter name) is <code>GL_TEXTURE_MAG_FILTER</code>, the third parameter is either <code>GL_NEAREST</code> or <code>GL_LINEAR</code>. If the second parameter is <code>GL_TEXTURE_MIN_FILTER</code>, the third parameter is either <code>GL_NEAREST_MIPMAP_NEAREST</code>, <code>GL_LINEAR_MIPMAP_NEAREST</code>, <code>GL_NEAREST_MIPMAP_LINEAR</code>, <code>GL_LINEAR_MIPMAP_LINEAR</code>, <code>GL_NEAREST</code>, or <code>GL_LINEAR</code>. These 6 options are those presented in <a href="#mipmap_mini">Mipmapping for Minification</a>.</li>
</ol>
<h2 id="example" name="example">Texturing Example</h2>
-<p>In order to generate a texture in GL, you usually have to decode the image file stored in the file system. In Tizen, you can use the Evas API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications) to get the decoded bitmap buffer from the image file, as shown in the following example. The code creates an independent <span style="font-family: Courier New,Courier,monospace">Ecore_Evas</span> object, which contains <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. It provides a method to decode the designated image file and store the bitmap data into its own buffer. You can get the internal buffer pointer and then upload the buffer to the texture.</p>
+<p>In order to generate a texture in GL, you usually have to decode the image file stored in the file system. In Tizen, you can use the Evas API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications) to get the decoded bitmap buffer from the image file, as shown in the following example. The code creates an independent <code>Ecore_Evas</code> object, which contains <code>Evas_Object</code>. It provides a method to decode the designated image file and store the bitmap data into its own buffer. You can get the internal buffer pointer and then upload the buffer to the texture.</p>
<pre class="prettyprint">
/*
<p>The GPU rendering pipeline is split into <strong>programmable</strong> stages (vertex and fragment shaders) and <strong>hard-wired</strong> stages ("primitive assembler & rasterizer" and "output merger"). </p>
-<p class="figure">Figure: Stages of the GPU rendering pipeline</p>
+<p align="center"><strong>Figure: Stages of the GPU rendering pipeline</strong></p>
<p align="center"><img src="../../images/gpu_stages.png" alt="Stages of the GPU rendering pipeline" /></p>
<p>You have to provide programs for the vertex and fragment shaders. Without them, OpenGL ES (GL) cannot draw anything. The vertex shader operates on every vertex stored in the vertex array and performs various operations. The essential among them is applying a series of <strong>transforms</strong> to the vertices.</p>
-<p class="figure">Figure: Spaces and transforms for vertex shader</p>
+<p align="center"><strong>Figure: Spaces and transforms for vertex shader</strong></p>
<p align="center"><img src="../../images/vertex_shader_spaces.png" alt="Spaces and transforms for vertex shader" /></p>
<h2 id="object_world_space">Object Space, World Space, and World Transform</h2>
<p>Whereas the coordinate system used for creating an object is named <strong>object space</strong>, the virtual world containing all required objects is associated with the <strong>world space</strong>. The size, position, and orientation of an object in the world space are determined by what is called <strong>world transform</strong>. (GL calls this <strong>model transform</strong>.) Its main components are scaling, translation, and rotation. A distinct object has its own world transform. The following figure shows a world-transform example.</p>
<p>In the world space, many objects can exist. Among them, consider a teapot. In this example, its world transform is the combination of "rotation about the Y axis by 90 degrees" and "translation along the X axis by 7 units".</p>
-<p class="figure">Figure: Transformation of a teapot object</p>
+<p align="center"><strong>Figure: Transformation of a teapot object</strong></p>
<p align="center"><img src="../../images/teapot_transformation.png" alt="Transformation of a teapot object" /></p>
<h2 id="view_space">View Space and View Transform</h2>
<li><strong>AT</strong>: reference point which the eye looks at</li>
<li><strong>UP</strong>: view up vector describing where the top of the eye points</li>
</ul>
-<p>The following figure shows how to create a new space, <span style="font-family: Courier New,Courier,monospace">{EYE, u, v, n}</span>, called <strong>view space</strong>.</p>
+<p>The following figure shows how to create a new space, <code>{EYE, u, v, n}</code>, called <strong>view space</strong>.</p>
-<p class="figure">Figure: Computing the view space</p>
+<p align="center"><strong>Figure: Computing the view space</strong></p>
<p align="center"><img src="../../images/view_space.png" alt="Computing the view space" /></p>
<p>There are 2 coordinate systems, world space and view space. Note that a point is given different coordinates in different spaces. Suppose that, as shown in the following figure, <strong>AT</strong> is located at the teapot's mouth end (10,2,0) and <strong>EYE</strong> is at (18,8,0). Then, the teapot's mouth end has the view-space coordinates (0,0,-10) whereas its world-space coordinates are (10,2,0).</p>
<p>The red dot is on the end of the teapot's mouth. It has been taken as <strong>AT</strong> and so its u and v coordinates are 0. If <strong>EYE</strong> is located at (18,8,0), the distance between <strong>EYE</strong> and <strong>AT</strong> is 10 and so the red dot's n coordinate is -10.</p>
-<p class="figure">Figure: Different coordinates in different spaces</p>
+<p align="center"><strong>Figure: Different coordinates in different spaces</strong></p>
<p align="center"><img src="../../images/coord_space.png" alt="Different coordinates in different spaces" /></p>
<p>It becomes much easier to develop the rendering algorithms if all the world-space objects are newly defined in terms of the view space in the manner of the teapot's mouth end. This is done by the <strong>view transform</strong>, which is defined as a translation followed by a rotation. The following view matrix applies to all objects in the world space. </p>
-<p class="figure">Figure: View matrix</p>
+<p align="center"><strong>Figure: View matrix</strong></p>
<p align="center"><img src="../../images/view_matrix.png" alt="View matrix" /></p>
<h2 id="view_frustum">View Frustum and Projection Transform</h2>
-<p>Because the world space is no longer needed, denote the basis of the view space by <span style="font-family: Courier New,Courier,monospace">{x, y, z}</span> instead of <span style="font-family: Courier New,Courier,monospace">{u, v, n}</span> simply because <span style="font-family: Courier New,Courier,monospace">{x, y, z}</span> is more familiar. In the view space, define how much of the space to see. For this, give 4 parameters:</p>
+<p>Because the world space is no longer needed, denote the basis of the view space by <code>{x, y, z}</code> instead of <code>{u, v, n}</code> simply because <code>{x, y, z}</code> is more familiar. In the view space, define how much of the space to see. For this, give 4 parameters:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">fovy</span> which stands for the field of view along the Y axis</li>
-<li><span style="font-family: Courier New,Courier,monospace">aspect</span> for the field of view's aspect ratio</li>
-<li><span style="font-family: Courier New,Courier,monospace">n</span> for the distance from <strong>EYE</strong> to the 'near clipping plane'</li>
-<li><span style="font-family: Courier New,Courier,monospace">f</span> for the distance from <strong>EYE</strong> to the 'far clipping plane'</li>
+<li><code>fovy</code> which stands for the field of view along the Y axis</li>
+<li><code>aspect</code> for the field of view's aspect ratio</li>
+<li><code>n</code> for the distance from <strong>EYE</strong> to the 'near clipping plane'</li>
+<li><code>f</code> for the distance from <strong>EYE</strong> to the 'far clipping plane'</li>
</ul>
<p>This set of 4 parameters defines a truncated pyramid whose apex is located at <strong>EYE</strong>, as shown in the following figure. It is called <strong>view frustum</strong>.</p>
-<p class="figure">Figure: View frustum</p>
+<p align="center"><strong>Figure: View frustum</strong></p>
<p align="center"><img src="../../images/view_frustum.png" alt="View frustum" /></p>
<p>In the figure above, the teapot intersects the view frustum. The part of the teapot outside the view frustum needs to be <strong>clipped</strong> so that only the remaining is processed for display. Transform the view frustum to an axis-aligned box, and the transform is applied to all vertices in the view space, performing clipping with respect to the box. The transform is called projection transform. The following figure shows the result of the <strong>projection transform</strong>. The box has the dimension of 2<sup>3</sup> and its center is located at the origin. The clip space is assumed to be a left-hand coordinate system by convention.</p>
-<p class="figure">Figure: Projection transform M<sub>proj</sub> from the view space to the clip space</p>
+<p align="center"><strong>Figure: Projection transform M<sub>proj</sub> from the view space to the clip space</strong></p>
<p align="center"><img src="../../images/projection_transform.png" alt="Projection transform from the view space to the clip space" /></p>
-<p>The projection matrix is defined using the view frustum parameters, <span style="font-family: Courier New,Courier,monospace">fovy</span>, <span style="font-family: Courier New,Courier,monospace">aspect</span>, <span style="font-family: Courier New,Courier,monospace">n</span>, and <span style="font-family: Courier New,Courier,monospace">f</span>, as shown in the following figure.</p>
+<p>The projection matrix is defined using the view frustum parameters, <code>fovy</code>, <code>aspect</code>, <code>n</code>, and <code>f</code>, as shown in the following figure.</p>
-<p class="figure">Figure: Projection matrix</p>
+<p align="center"><strong>Figure: Projection matrix</strong></p>
<p align="center"><img src="../../images/projection_matrix.png" alt="Projection matrix" /></p>
<h2 id="vertex_shader">Vertex Shader Input and Output</h2>
<li>Attributes: Per-vertex data provided in a vertex array</li>
<li>Uniforms: Read-only values, such as the transform matrix, to be uniformly applied to the vertices</li>
</ul>
-<p class="figure">Figure: Input and output of the vertex shader</p>
+<p align="center"><strong>Figure: Input and output of the vertex shader</strong></p>
<p align="center"><img src="../../images/input_output_vertex.png" alt="Input and output of the vertex shader" /></p>
-<p>The following code shows an example vertex shader. The shader language is C-like but provides specialized types. For example, <span style="font-family: Courier New,Courier,monospace">mat4</span> is a 4x4 matrix and <span style="font-family: Courier New,Courier,monospace">vec3</span> is a 3D vector. The following vertex shader example has 5 input values: <span style="font-family: Courier New,Courier,monospace">viewProjMat</span> and <span style="font-family: Courier New,Courier,monospace">worldMat</span> are 'uniforms' described by the keyword uniform, whereas <span style="font-family: Courier New,Courier,monospace">position</span>, <span style="font-family: Courier New,Courier,monospace">normal</span>, and <span style="font-family: Courier New,Courier,monospace">texCoord</span> are 'attributes' described by the keyword attribute.</p>
+<p>The following code shows an example vertex shader. The shader language is C-like but provides specialized types. For example, <code>mat4</code> is a 4x4 matrix and <code>vec3</code> is a 3D vector. The following vertex shader example has 5 input values: <code>viewProjMat</code> and <code>worldMat</code> are 'uniforms' described by the keyword uniform, whereas <code>position</code>, <code>normal</code>, and <code>texCoord</code> are 'attributes' described by the keyword attribute.</p>
<pre class="prettyprint">
uniform mat4 viewProjMat; /* 4x4 matrix for view+projection transforms */
uniform mat4 worldMat; /* 4x4 matrix for world transform */
v_texCoord = texCoord;
}
</pre>
-<p>The output of the vertex shader must include the built-in variable, <span style="font-family: Courier New,Courier,monospace">gl_Position</span>, which stores the <strong>clip-space</strong> vertex position. This is the only required output of the vertex shader. Optional output variables are described with the keyword <span style="font-family: Courier New,Courier,monospace">varying</span>. The output usually includes vertex normal and texture coordinates. In the above example, the object-space vertex normal is transformed to the world space and output to <span style="font-family: Courier New,Courier,monospace">v_normal</span>. On the other hand, the texture coordinates, <span style="font-family: Courier New,Courier,monospace">texCoord</span>, is simply copied to <span style="font-family: Courier New,Courier,monospace">v_texCoord</span>.</p>
+<p>The output of the vertex shader must include the built-in variable, <code>gl_Position</code>, which stores the <strong>clip-space</strong> vertex position. This is the only required output of the vertex shader. Optional output variables are described with the keyword <code>varying</code>. The output usually includes vertex normal and texture coordinates. In the above example, the object-space vertex normal is transformed to the world space and output to <code>v_normal</code>. On the other hand, the texture coordinates, <code>texCoord</code>, is simply copied to <code>v_texCoord</code>.</p>
<h2 id="shader_program_objects">Shader and Program Objects</h2>
<p>Using a vertex or fragment shader stored in a file, create a <strong>shader object</strong>:</p>
<ol>
<li>Load its source code into the GL program.</li>
-<li>Create a new shader object using the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function, which takes either the <span style="font-family: Courier New,Courier,monospace">GL_VERTEX_SHADER</span> or <span style="font-family: Courier New,Courier,monospace">GL_FRAGMENT_SHADER</span> attribute and returns the ID of the shader object.</li>
-<li>Store the source code into the shader object using the <span style="font-family: Courier New,Courier,monospace">glShaderSource()</span> function with the vertex or fragment shader's source code and the shader object ID.</li>
-<li>Compile the shader object using the <span style="font-family: Courier New,Courier,monospace">glCompileShader()</span> function.</li>
+<li>Create a new shader object using the <code>glCreateShader()</code> function, which takes either the <code>GL_VERTEX_SHADER</code> or <code>GL_FRAGMENT_SHADER</code> attribute and returns the ID of the shader object.</li>
+<li>Store the source code into the shader object using the <code>glShaderSource()</code> function with the vertex or fragment shader's source code and the shader object ID.</li>
+<li>Compile the shader object using the <code>glCompileShader()</code> function.</li>
</ol>
<p>Using the shader objects, create the <strong>program object</strong>:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">glCreateProgram()</span> function, which takes no parameters and simply returns the ID of a new program object.</li>
-<li>Give the shader and program object IDs to the <span style="font-family: Courier New,Courier,monospace">glAttachShader()</span> function, which attaches the shader object to the program object.</li>
-<li>Link the program object using the <span style="font-family: Courier New,Courier,monospace">glLinkProgram()</span> function.</li>
-<li>Invoke the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function to use the program object for rendering.</li>
+<li>Use the <code>glCreateProgram()</code> function, which takes no parameters and simply returns the ID of a new program object.</li>
+<li>Give the shader and program object IDs to the <code>glAttachShader()</code> function, which attaches the shader object to the program object.</li>
+<li>Link the program object using the <code>glLinkProgram()</code> function.</li>
+<li>Invoke the <code>glUseProgram()</code> function to use the program object for rendering.</li>
</ol>
<h2 id="uniforms_attributes">Uniforms and Attributes in OpenGL ES</h2>
-<p>Consider a dynamic environment, where the scene objects continuously move. In the example vertex shader, worldMat must be updated per frame. On the other hand, <span style="font-family: Courier New,Courier,monospace">viewProjMat</span> must be updated if the eye moves. The GL program must update and provide them for the vertex shader. For this purpose, first find the uniform locations that have been determined during the link phase. Given a uniform name in the shader, the <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> function returns its location (denoted by an integer) in the program.</p>
+<p>Consider a dynamic environment, where the scene objects continuously move. In the example vertex shader, worldMat must be updated per frame. On the other hand, <code>viewProjMat</code> must be updated if the eye moves. The GL program must update and provide them for the vertex shader. For this purpose, first find the uniform locations that have been determined during the link phase. Given a uniform name in the shader, the <code>glGetUniformLocation()</code> function returns its location (denoted by an integer) in the program.</p>
<pre class="prettyprint">
/* mProgram denotes the program object */
GLint mWHandle = glGetUniformLocation(mProgram, "worldMat")
</pre>
-<p>Then, use the <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function to load the uniform with the updated <span style="font-family: Courier New,Courier,monospace">matrix</span>, <span style="font-family: Courier New,Courier,monospace">worldMat</span>. A list of functions for loading various uniforms is available and is collectively named <span style="font-family: Courier New,Courier,monospace">glUniformXXX()</span>, representing a set of variations including the <span style="font-family: Courier New,Courier,monospace">glUniform3f()</span> and <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4x3fv()</span> functions.</p>
+<p>Then, use the <code>glUniformMatrix4fv()</code> function to load the uniform with the updated <code>matrix</code>, <code>worldMat</code>. A list of functions for loading various uniforms is available and is collectively named <code>glUniformXXX()</code>, representing a set of variations including the <code>glUniform3f()</code> and <code>glUniformMatrix4x3fv()</code> functions.</p>
<p>Next, consider the attributes.</p>
<p>The vertex and index arrays for a polygon mesh are stored in the CPU memory, which is often called <strong>client memory</strong>. For rendering a mesh, make a <strong>drawcall</strong>. For every drawcall, the arrays have to be 'copied' from the client memory to the GPU memory.</p>
<p>Instead of resending the arrays every time a mesh is drawn, a more efficient way is to cache the data in the GPU memory. The arrays are transferred only once, and the rendering is done from the GPU memory cache. To achieve this, use <strong>vertex buffer objects</strong> (VBO).</p>
<p>There are 2 types of buffer objects in GL:</p>
<ul>
-<li><strong>Array buffer object</strong> represents the vertex array and is specified by <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span>.</li>
-<li><strong>Element array buffer object</strong> represents the index array and is specified by <span style="font-family: Courier New,Courier,monospace">GL_ELEMENT_ARRAY_BUFFER</span>.</li>
+<li><strong>Array buffer object</strong> represents the vertex array and is specified by <code>GL_ARRAY_BUFFER</code>.</li>
+<li><strong>Element array buffer object</strong> represents the index array and is specified by <code>GL_ELEMENT_ARRAY_BUFFER</code>.</li>
</ul>
<p>To create and bind VBOs:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">glGenBuffers()</span> function, which is asked for <span style="font-family: Courier New,Courier,monospace">n</span> buffer objects and returns them in buffers. In general, <span style="font-family: Courier New,Courier,monospace">n</span> is 2: one for vertices and the other for indices.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function, where the first parameter is either <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span> or <span style="font-family: Courier New,Courier,monospace">GL_ELEMENT_ARRAY_BUFFER</span>. This specifies what the buffer is used for. The <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function call creates a VBO.</li>
-<li>The buffer object is filled with data using the <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function, where the first parameter is either <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span> or <span style="font-family: Courier New,Courier,monospace">GL_ELEMENT_ARRAY_BUFFER</span> and the third parameter points to the vertex or index array.</li>
+<li>Use the <code>glGenBuffers()</code> function, which is asked for <code>n</code> buffer objects and returns them in buffers. In general, <code>n</code> is 2: one for vertices and the other for indices.</li>
+<li>Use the <code>glBindBuffer()</code> function, where the first parameter is either <code>GL_ARRAY_BUFFER</code> or <code>GL_ELEMENT_ARRAY_BUFFER</code>. This specifies what the buffer is used for. The <code>glBindBuffer()</code> function call creates a VBO.</li>
+<li>The buffer object is filled with data using the <code>glBufferData()</code> function, where the first parameter is either <code>GL_ARRAY_BUFFER</code> or <code>GL_ELEMENT_ARRAY_BUFFER</code> and the third parameter points to the vertex or index array.</li>
</ol>
<p>The GL program shown in the following example creates 2 VBOs:</p>
<pre class="prettyprint">
indices, GL_STATIC_DRAW));
</pre>
<p>The vertex array is often described as an "array of structures", where a structure contains a set of attributes: position, normal, and texCoord in the example shader.</p>
-<p class="figure">Figure: Array of vertex structures</p>
+<p align="center"><strong>Figure: Array of vertex structures</strong></p>
<p align="center"><img src="../../images/vertex_structure_array.png" alt="Array of vertex structures" /></p>
-<p>Such a structure must be presented to the shader. For this purpose, the GL program first invokes the <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function to enable each parameter. After that, the <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is called. In this function, the first parameter denotes the parameter index, the second specifies the number (1, 2, 3, or 4) of components per parameter, fifth specifies the byte distance between the consecutive parameters of the same kind, and the sixth points to the first occurrence of the parameter in bytes. The GL program shown in the following example details <span style="font-family: Courier New,Courier,monospace">position</span>, <span style="font-family: Courier New,Courier,monospace">normal</span>, and <span style="font-family: Courier New,Courier,monospace">texCoord</span> parameters.</p>
+<p>Such a structure must be presented to the shader. For this purpose, the GL program first invokes the <code>glEnableVertexAttribArray()</code> function to enable each parameter. After that, the <code>glVertexAttribPointer()</code> function is called. In this function, the first parameter denotes the parameter index, the second specifies the number (1, 2, 3, or 4) of components per parameter, fifth specifies the byte distance between the consecutive parameters of the same kind, and the sixth points to the first occurrence of the parameter in bytes. The GL program shown in the following example details <code>position</code>, <code>normal</code>, and <code>texCoord</code> parameters.</p>
<pre class="prettyprint">
int stride = sizeof(VertexStruct); /* VertexStruct with 3 attributes */
int offset = 0;
<p>All parameters and uniforms are now available. If you have a good fragment shader, you can draw a polygon mesh. For rendering a polygon mesh, you can make a drawcall. There are 2 options:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> for non-indexed mesh representation</li>
-<li><span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> for indexed mesh representation</li>
+<li><code>glDrawArrays()</code> for non-indexed mesh representation</li>
+<li><code>glDrawElements()</code> for indexed mesh representation</li>
</ul>
-<p>Assuming that you have only the vertex array for the low-resolution sphere, the <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> function is invoked. In the following example, the first parameter specifies what kind of primitives to render. Valid values include, for example, <span style="font-family: Courier New,Courier,monospace">GL_POINTS</span>, GL_LINES, GL_TRIANGLES, and GL_TRIANGLE_FAN. The second parameter specifies the starting index "in the vertex array". The last parameter specifies the number of vertices to be drawn.</p>
+<p>Assuming that you have only the vertex array for the low-resolution sphere, the <code>glDrawArrays()</code> function is invoked. In the following example, the first parameter specifies what kind of primitives to render. Valid values include, for example, <code>GL_POINTS</code>, GL_LINES, GL_TRIANGLES, and GL_TRIANGLE_FAN. The second parameter specifies the starting index "in the vertex array". The last parameter specifies the number of vertices to be drawn.</p>
<pre class="prettyprint">
glDrawArrays(GL_TRIANGLES, /* Mode */
0, /* First */
144); /* Count */
</pre>
-<p>When you have both the vertex array and index array, the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function is invoked. The first parameter is the same as in the <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> function. The second parameter specifies the number of elements "in the index array". The third parameter specifies the type of the values in the indices. It must be <span style="font-family: Courier New,Courier,monospace">GL_UNSIGNED_BYTE</span> or <span style="font-family: Courier New,Courier,monospace">GL_UNSIGNED_SHORT</span>. The last parameter points to the offset in bytes into the storage allocated by the <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function.</p>
+<p>When you have both the vertex array and index array, the <code>glDrawElements()</code> function is invoked. The first parameter is the same as in the <code>glDrawArrays()</code> function. The second parameter specifies the number of elements "in the index array". The third parameter specifies the type of the values in the indices. It must be <code>GL_UNSIGNED_BYTE</code> or <code>GL_UNSIGNED_SHORT</code>. The last parameter points to the offset in bytes into the storage allocated by the <code>glBufferData()</code> function.</p>
<pre class="prettyprint">
glDrawElements(GL_TRIANGLES, /* Mode */
144, /* Count */
<h2 id="glview_example">GLView Example</h2>
-<p>The following example code presents how to use GL APIs in the callbacks of the GLView. In the <span style="font-family: Courier New,Courier,monospace">init_glview()</span> callback function, compile and link the shaders, and create VBOs.</p>
+<p>The following example code presents how to use GL APIs in the callbacks of the GLView. In the <code>init_glview()</code> callback function, compile and link the shaders, and create VBOs.</p>
<pre class="prettyprint">
/* GL initialization callback */
static void
}
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">draw_glview()</span> callback, calculate the world, view, and projection matrices and then pass the combined matrix to the vertex shader through the <span style="font-family: Courier New,Courier,monospace">glUniformXXX()</span> function. When all uniforms are passed to the shader, the GL drawcall is made.</p>
+<p>In the <code>draw_glview()</code> callback, calculate the world, view, and projection matrices and then pass the combined matrix to the vertex shader through the <code>glUniformXXX()</code> function. When all uniforms are passed to the shader, the GL drawcall is made.</p>
<pre class="prettyprint">
/* GL drawing callback */
static void
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">Vulkan API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">Vulkan API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Vulkan is a generation API for high-efficiency access to graphics and computing on modern GPUs. It is an open-standard, cross-platform API designed from the ground-up by industry experts collaborating under the Khronos consortium. It aims to address the inefficiencies of existing 3D APIs, such as OpenGL, which are designed for single-core processors and lag to map modern hardware. It provides a much lower-level fine-grained control over the GPU to maximize performance and achieve consistent user experience across different operating environments. For general information on Vulkan, and the comparative merits of Vulkan and OpenGL, see the official Khronos's <a href="https://www.khronos.org/vulkan/" target="_blank">Vulkan Web site</a> and <a href="#vulkan_1">OpenGL vs. Vulkan</a>.</p>
<p>The Tizen platform supports the Vulkan API in order to provide the most cutting edge 3D programming tools for you to create high-quality games and real-time graphics in applications. Vulkan is especially recommended for performance- or latency-sensitive applications. With Vulkan, you can achieve a much smoother user experience by parallelizing the rendering job across multiple threads which can feed the GPU to the max. Applications demanding explicit control on work submission, synchronization, and less power consumption can seriously consider migrating to Vulkan as well. Tizen allows the <a href="#render">use of the Vulkan API</a> through <a href="#sdl">SDL</a>.</p>
-<p class="figure">Figure: Vulkan in Tizen</p>
-<p align="center"><img alt="SDL logo" src="../../images/vulkan_framework.png" /></p>
+<p align="center"><strong>Figure: Vulkan in Tizen</strong></p>
+<p align="center"><img alt="Vulkan in Tizen" src="../../images/vulkan_framework.png" /></p>
<p>Before using the Vulkan API in Tizen, make sure that you are familiar with the following key Vulkan features, which help you to align your application design around Vulkan concepts and exploit the hardware to the fullest:</p>
<p>The following SDL features are currently supported in Tizen:</p>
<ul>
<li>SDL basics function
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_hints.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_error.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_log.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_assert.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_version.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_error.h</span>, and <span style="font-family: Courier New,Courier,monospace">SDL_stdinc.h</span> header files.</p></li>
+<p>Use the <code>SDL.h</code>, <code>SDL_hints.h</code>, <code>SDL_error.h</code>, <code>SDL_log.h</code>, <code>SDL_assert.h</code>, <code>SDL_version.h</code>, <code>SDL_error.h</code>, and <code>SDL_stdinc.h</code> header files.</p></li>
<li>Display and window management
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL_video.h</span> and <span style="font-family: Courier New,Courier,monospace">SDL_syswm.h</span> header files.</p></li>
+<p>Use the <code>SDL_video.h</code> and <code>SDL_syswm.h</code> header files.</p></li>
<li>Event handling
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL_events.h</span> and <span style="font-family: Courier New,Courier,monospace">SDL_keyboard.h</span> header files.</p></li>
+<p>Use the <code>SDL_events.h</code> and <code>SDL_keyboard.h</code> header files.</p></li>
<li>Audio device management
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL_audio.h</span> header file.</p></li>
+<p>Use the <code>SDL_audio.h</code> header file.</p></li>
<li>Thread and timer management
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL_thread.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_mutex.h</span>, <span style="font-family: Courier New,Courier,monospace">SDL_atomic.h</span>, and <span style="font-family: Courier New,Courier,monospace">SDL_timer.h</span> header files.</p></li>
+<p>Use the <code>SDL_thread.h</code>, <code>SDL_mutex.h</code>, <code>SDL_atomic.h</code>, and <code>SDL_timer.h</code> header files.</p></li>
<li>Platform and power information
-<p>Use the <span style="font-family: Courier New,Courier,monospace">SDL_platform.h</span> and <span style="font-family: Courier New,Courier,monospace">SDL_power.h</span> header files.</p></li>
+<p>Use the <code>SDL_platform.h</code> and <code>SDL_power.h</code> header files.</p></li>
</ul>
-<p>For the list of features not currently supported in Tizen, see the <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SDL__FRAMEWORK.html">SDL API reference.</a></p>
+<p>For the list of features not currently supported in Tizen, see the SDL API (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).</p>
<h3 id="lifecycle">SDL Application Life-cycle in Tizen</h3>
-<p>The Tizen native application model is responsible for the application life-cycle and system events. The SDL application life-cycle is handled by the <
span style="font-family: Courier New,Courier,monospace">SDL_PollEvent()</span> function, which manages the main event loop, the application state change events, and basic system events (<a href="#SDL_event">general</a> and <a href="#tizen_event">Tizen-specific</a>).</p>
+<p>The Tizen native application model is responsible for the application life-cycle and system events. The SDL application life-cycle is handled by the <
code>SDL_PollEvent()</code> function, which manages the main event loop, the application state change events, and basic system events (<a href="#SDL_event">general</a> and <a href="#tizen_event">Tizen-specific</a>).</p>
-<p class="figure">Figure: SDL life-cycle</p>
-<p align="center"><img alt="SDL life-cycle" src="../../images/sdl_statemodel.png" /></p>
+<p align="center"><strong>Figure: SDL application life-cycle</strong></p>
+<p align="center"><img alt="SDL application life-cycle" src="../../images/sdl_statemodel.png" /></p>
<p>The SDL application can be in one of several different states, and the state changes are managed by the underlying framework.</p>
</table>
-<p>Typically, the application is launched by the user from the Launcher, or by another application. The application is normally launched as the top window, with focus. When the application loses the focus status, the <span style="font-family: Courier New,Courier,monospace">SDL_APP_WILLENTERBACKGROUND</span> and <span style="font-family: Courier New,Courier,monospace">SDL_APP_DIDENTERBACKGROUND</span> events are invoked. The application can go into the pause state, which means that it is not terminated but continues to run on the background. The pause state can happen when:</p>
+<p>Typically, the application is launched by the user from the Launcher, or by another application. The application is normally launched as the top window, with focus. When the application loses the focus status, the <code>SDL_APP_WILLENTERBACKGROUND</code> and <code>SDL_APP_DIDENTERBACKGROUND</code> events are invoked. The application can go into the pause state, which means that it is not terminated but continues to run on the background. The pause state can happen when:</p>
<ul>
<li>A new application is launched based on a request from your application.</li>
<li>The user requests to go to the home screen.</li>
<li>An alarm is triggered for another application, which becomes the topmost window and hides your application.</li>
</ul>
-<p>When the application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">SDL_APP_WILLENTERFOREGROUND</span> and <span style="font-family: Courier New,Courier,monospace">SDL_APP_DIDENTERFOREGROUND</span> events are invoked. The visibility returns, when:</p>
+<p>When the application becomes visible again, the <code>SDL_APP_WILLENTERFOREGROUND</code> and <code>SDL_APP_DIDENTERFOREGROUND</code> events are invoked. The visibility returns, when:</p>
<ul>
<li>Another application requests your application to run (such as the Task Navigator, which shows all running applications and lets user select any application to run).</li>
<li>All applications on top of your application in the window stack finish.</li>
<li>An alarm is triggered for your application, bringing it to the front and hiding other applications.</li>
</ul>
-<p>When the application starts exiting, the <span style="font-family: Courier New,Courier,monospace">SDL_Quit</span> and <span style="font-family: Courier New,Courier,monospace">SDL_TERMINATING</span> events are invoked. Your application can start the termination process, when:</p>
+<p>When the application starts exiting, the <code>SDL_Quit</code> and <code>SDL_TERMINATING</code> events are invoked. Your application can start the termination process, when:</p>
<ul>
-<li>The application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_exit()</span> or <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function to terminate the event loop.</li>
+<li>The application itself requests to exit by calling the <code>ui_app_exit()</code> or <code>service_app_exit()</code> function to terminate the event loop.</li>
<li>The low memory killer is terminating your application in a low memory situation.</li>
</ul>
</li>
<li>Check whether the device supports Vulkan.
-<p>As all Tizen devices available in the market do not support Vulkan yet, check the device support with the <span style="font-family: Courier New,Courier,monospace">system_info_get_platform_bool()</span> function before using the Vulkan APIs. If the device can support Vulkan, the function returns <span style="font-family: Courier New,Courier,monospace">true</span> in the second parameter.</p>
+<p>As all Tizen devices available in the market do not support Vulkan yet, check the device support with the <code>system_info_get_platform_bool()</code> function before using the Vulkan APIs. If the device can support Vulkan, the function returns <code>true</code> in the second parameter.</p>
<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 <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">Vulkan</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SDL__FRAMEWORK.html">SDL</a> APIs, include the <span style="font-family: Courier New,Courier,monospace"><SDL.h></span> and <span style="font-family: Courier New,Courier,monospace"><vulkan/vulkan.h></span> header files in your application:
+<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:
<pre class="prettyprint">
#include <SDL.h>
#include <vulkan/vulkan.h>
<ol>
<li>Initialize SDL and create an SDL window.
-<p>Before using any other SDL functions, call the <span style="font-family: Courier New,Courier,monospace">SDL_Init()</span> function to properly initialize the SDL library and start each of its various subsystems. The function accepts as a parameter a set of allowed flags OR'd together.</p>
-<p>After SDL is initialized successfully, create the <span style="font-family: Courier New,Courier,monospace">SDL_Window</span> instance using the <span style="font-family: Courier New,Courier,monospace">SDL_CreateWindow()</span> function. The parameters define the title of the window, the X and Y position coordinates, width, height, and a set of <span style="font-family: Courier New,Courier,monospace">SDL_WindowFlags</span> OR'd together.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To use the Vulkan context, use the <span style="font-family: Courier New,Courier,monospace">SDL_WINDOW_VULKAN</span> flag when you create a window. Do not use both <span style="font-family: Courier New,Courier,monospace">SDL_WINDOW_VULKAN</span> and <span style="font-family: Courier New,Courier,monospace">SDL_WINDOW_OPENGL</span> simultaneously.</td>
- </tr>
- </tbody>
- </table>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">SDL_main()</span> function is mandatory for the Tizen framework to initialize the SDL application. You must use the <span style="font-family: Courier New,Courier,monospace">SDL_main()</span> function instead of the usual <span style="font-family: Courier New,Courier,monospace">main()</span> function in your SDL application.</p>
+<p>Before using any other SDL functions, call the <code>SDL_Init()</code> function to properly initialize the SDL library and start each of its various subsystems. The function accepts as a parameter a set of allowed flags OR'd together.</p>
+<p>After SDL is initialized successfully, create the <code>SDL_Window</code> instance using the <code>SDL_CreateWindow()</code> function. The parameters define the title of the window, the X and Y position coordinates, width, height, and a set of <code>SDL_WindowFlags</code> OR'd together.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ To use the Vulkan context, use the <code>SDL_WINDOW_VULKAN</code> flag when you create a window. Do not use both <code>SDL_WINDOW_VULKAN</code> and <code>SDL_WINDOW_OPENGL</code> simultaneously.
+</div>
+
+<p>The <code>SDL_main()</code> function is mandatory for the Tizen framework to initialize the SDL application. You must use the <code>SDL_main()</code> function instead of the usual <code>main()</code> function in your SDL application.</p>
<pre class="prettyprint">
int
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>
<p>Create a Vulkan instance, which is the connection between the application and the Vulkan library. To create an instance:</p>
<ol type="a">
-<li>Fill in a <span style="font-family: Courier New,Courier,monospace">VkApplicationInfo</span> struct with some information about the application:
+<li>Fill in a <code>VkApplicationInfo</code> struct with some information about the application:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">sType</span> specifies the type of the structure. Most Vulkan structs require you to explicitly specify the structure type in the <span style="font-family: Courier New,Courier,monospace">sType</span> member.</li>
-<li><span style="font-family: Courier New,Courier,monospace">pNext</span> can point to extension information in the future, but currently leave it <span style="font-family: Courier New,Courier,monospace">NULL</span> for the default initialization.</li>
-<li><span style="font-family: Courier New,Courier,monospace">pApplicationName</span> points to a string containing the application name.</li>
-<li><span style="font-family: Courier New,Courier,monospace">applicationVersion</span> contains developer-supplied version number of the application.</li>
-<li><span style="font-family: Courier New,Courier,monospace">pEngineName</span> is a pointer to a string containing the name of the engine (if any) used to create the application.</li>
-<li><span style="font-family: Courier New,Courier,monospace">engineVersion</span> is an unsigned integer variable containing the developer-supplied version number of the engine used to create the application.</li>
-<li><span style="font-family: Courier New,Courier,monospace">apiVersion</span> is the version of the Vulkan API against which the application expects to run.</li>
+<li><code>sType</code> specifies the type of the structure. Most Vulkan structs require you to explicitly specify the structure type in the <code>sType</code> member.</li>
+<li><code>pNext</code> can point to extension information in the future, but currently leave it <code>NULL</code> for the default initialization.</li>
+<li><code>pApplicationName</code> points to a string containing the application name.</li>
+<li><code>applicationVersion</code> contains developer-supplied version number of the application.</li>
+<li><code>pEngineName</code> is a pointer to a string containing the name of the engine (if any) used to create the application.</li>
+<li><code>engineVersion</code> is an unsigned integer variable containing the developer-supplied version number of the engine used to create the application.</li>
+<li><code>apiVersion</code> is the version of the Vulkan API against which the application expects to run.</li>
</ul>
<pre class="prettyprint">
</pre>
</li>
-<li>Vulkan is a platform-agnostic API, which means that you need an extension to interface with the window system. The <span style="font-family: Courier New,Courier,monospace">SDL_Vulkan_GetInstanceExtensions()</span> SDL function returns the extensions Vulkan needs to interface with the windowing system. Pass them to the <span style="font-family: Courier New,Courier,monospace">VkInstanceCreateInfo</span> struct.
+<li>Vulkan is a platform-agnostic API, which means that you need an extension to interface with the window system. The <code>SDL_Vulkan_GetInstanceExtensions()</code> SDL function returns the extensions Vulkan needs to interface with the windowing system. Pass them to the <code>VkInstanceCreateInfo</code> struct.
-<p>Fill in the <span style="font-family: Courier New,Courier,monospace">VkInstanceCreateInfo</span> struct to provide sufficient information for creating an instance. This struct tells the Vulkan driver which global extensions and validation layers you want to use. Global means that they apply to the entire program and not only a specific device.</p>
+<p>Fill in the <code>VkInstanceCreateInfo</code> struct to provide sufficient information for creating an instance. This struct tells the Vulkan driver which global extensions and validation layers you want to use. Global means that they apply to the entire program and not only a specific device.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">sType</span> and <span style="font-family: Courier New,Courier,monospace">pNext</span> are similar to the <span style="font-family: Courier New,Courier,monospace">VkApplicationInfo</span> structure.</li>
-<li><span style="font-family: Courier New,Courier,monospace">enabledLayerCount</span> is the number of global layers to enable.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ppEnabledLayerNames</span> is a pointer to an array containing the names of layers to enable for the created instance.</li>
-<li><span style="font-family: Courier New,Courier,monospace">enabledExtensionCount</span> is the number of global extensions to enable.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ppEnabledExtensionNames</span> is a pointer to an array of strings containing the names of extensions to enable.</li>
+<li><code>sType</code> and <code>pNext</code> are similar to the <code>VkApplicationInfo</code> structure.</li>
+<li><code>enabledLayerCount</code> is the number of global layers to enable.</li>
+<li><code>ppEnabledLayerNames</code> is a pointer to an array containing the names of layers to enable for the created instance.</li>
+<li><code>enabledExtensionCount</code> is the number of global extensions to enable.</li>
+<li><code>ppEnabledExtensionNames</code> is a pointer to an array of strings containing the names of extensions to enable.</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,
};
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">vkCreateInstance()</span> function to actually create the instance:
+<li>Call the <code>vkCreateInstance()</code> function to actually create the instance:
<pre class="prettyprint">
vkCreateInstance(&inst_info, NULL, &demo->inst);
<li>Pointer to the custom allocator callbacks</li>
<li>Pointer to the variable that stores the handle to the new object</li>
</ul>
-<p>On success, the handle to the instance is returned in the wrapped <span style="font-family: Courier New,Courier,monospace">VkInstance</span> member.</p>
+<p>On success, the handle to the instance is returned in the wrapped <code>VkInstance</code> member.</p>
</li></ol>
</li>
<li>Select a physical device.
-<p>After creating a Vulkan instance, look for and select a graphics card in the system that supports the features you need. You can select any number of graphics cards and use them simultaneously, but the following example only selects the first graphics card. The selected graphics card is stored in a <span style="font-family: Courier New,Courier,monospace">VkPhysicalDevice</span> handle.</p>
-<p>Retrieve the list the graphics cards, store them in an array of the <span style="font-family: Courier New,Courier,monospace">VkPhysicalDevice</span> handles, and select the first graphics card as the physical device:</p>
+<p>After creating a Vulkan instance, look for and select a graphics card in the system that supports the features you need. You can select any number of graphics cards and use them simultaneously, but the following example only selects the first graphics card. The selected graphics card is stored in a <code>VkPhysicalDevice</code> handle.</p>
+<p>Retrieve the list the graphics cards, store them in an array of the <code>VkPhysicalDevice</code> handles, and select the first graphics card as the physical device:</p>
<pre class="prettyprint">
VkPhysicalDevice *physical_devices = malloc(sizeof(VkPhysicalDevice) * gpu_count);
err = vkEnumeratePhysicalDevices(demo->inst, &gpu_count, physical_devices);
<li>Check for supported queue families.
<p>Almost every operation in Vulkan, from drawing to uploading textures, requires commands to be submitted to a "queue". There are different types of queues that originate from different queue families, and each queue family allows only a subset of commands. You need to check which queue families are supported by the device and which one of them supports the commands that you want to use. The following example looks for a queue that supports graphics commands:</p>
<ol type="a">
-<li>Check which queue families are supported by the device with the <span style="font-family: Courier New,Courier,monospace">vkGetPhysicalDeviceQueueFamilyProperties()</span> function:
+<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;
vkGetPhysicalDeviceFeatures(demo->gpu, &features);
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">VkQueueFamilyProperties</span> struct contains details about the queue family, including the type of operations that are supported and the number of queues that can be created based on that family. Look for at least 1 queue family that supports <span style="font-family: Courier New,Courier,monospace">VK_QUEUE_GRAPHICS_BIT</span>:
+<li>The <code>VkQueueFamilyProperties</code> struct contains details about the queue family, including the type of operations that are supported and the number of queues that can be created based on that family. Look for at least 1 queue family that supports <code>VK_QUEUE_GRAPHICS_BIT</code>:
<pre class="prettyprint">
uint32_t graphicsQueueNodeIndex = UINT32_MAX;
for (i = 0; i < demo->queue_count; i++) {
<p>After selecting a physical device to use, you need to set up a logical device to interface with it. You can even create multiple logical devices from the same physical device, if you have varying requirements.</p>
<ol type="a">
-<li>Add a new <span style="font-family: Courier New,Courier,monospace">VkDevice</span> type member in which to store the logical device handle:
+<li>Add a new <code>VkDevice</code> type member in which to store the logical device handle:
<pre class="prettyprint">
VkDevice device;
</pre>
-<p>Logical devices are cleaned up with the <span style="font-family: Courier New,Courier,monospace">vkDestroyDevice()</span> function before the instance is cleaned up.</p>
+<p>Logical devices are cleaned up with the <code>vkDestroyDevice()</code> function before the instance is cleaned up.</p>
</li>
-<li>The creation of a logical device involves specifying a lot of details in structs again. First, fill in the <span style="font-family: Courier New,Courier,monospace">VkDeviceQueueCreateInfo</span> struct, which describes the number of queues you want for a single queue family. In the following example, only 1 queue with graphics capabilities is needed.
+<li>The creation of a logical device involves specifying a lot of details in structs again. First, fill in the <code>VkDeviceQueueCreateInfo</code> struct, which describes the number of queues you want for a single queue family. In the following example, only 1 queue with graphics capabilities is needed.
<p>The currently available drivers only allow you to create a low number of queues for each family queue, and you do not really need more than one. That is because you can create all of the command buffers on multiple threads and then submit them all at once on the main thread with a single low-overhead call.</p>
<p>Vulkan lets you assign priorities to queues to influence the scheduling of the command buffer execution using floating point numbers between 0.0 and 1.0. This is required even if there is only a single queue.</p>
};
</pre>
</li>
-<li>Fill in the main <span style="font-family: Courier New,Courier,monospace">VkDeviceCreateInfo</span> structure.
-<p>First add pointers to the queue creation info and device features structs. The remainder of the information requires you to specify device-specific extensions and validation layers. An example of a device-specific extension is <span style="font-family: Courier New,Courier,monospace">VK_KHR_swapchain</span>, which allows you to present rendered images from that device to windows. The following example enables the same validation layers for devices as before for the instance. It requires no device-specific extensions.</p>
+<li>Fill in the main <code>VkDeviceCreateInfo</code> structure.
+<p>First add pointers to the queue creation info and device features structs. The remainder of the information requires you to specify device-specific extensions and validation layers. An example of a device-specific extension is <code>VK_KHR_swapchain</code>, which allows you to present rendered images from that device to windows. The following example enables the same validation layers for devices as before for the instance. It requires no device-specific extensions.</p>
<pre class="prettyprint">
VkDeviceCreateInfo device = {
.sType = VK_STRUCTURE_TYPE_DEVICE_CREATE_INFO,
.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
};
</pre>
</li>
-<li>Instantiate the logical device with the <span style="font-family: Courier New,Courier,monospace">vkCreateDevice()</span> function.
+<li>Instantiate the logical device with the <code>vkCreateDevice()</code> function.
<p>The parameters are the physical device to interface with, the queue and usage info you just specified, the optional allocation callback pointer, and a pointer to a variable to store the logical device handle in.</p>
<pre class="prettyprint">
vkCreateDevice(demo->gpu, &device, NULL, &demo->device);
</li></ol></li>
<li>Create a window surface.
-<p>Since Vulkan is a platform-agnostic API, it cannot interface directly with the window system on its own. To establish the connection between Vulkan and the window system to present results to the screen, you need to use the WSI (Window System Integration) extensions. The <span style="font-family: Courier New,Courier,monospace">VK_KHR_surface</span> extension exposes a <span style="font-family: Courier New,Courier,monospace">VkSurfaceKHR</span> object that represents an abstract type of surface to present rendered images to. The surface in this example program is backed by the window that you have already created using SDL.</p>
+<p>Since Vulkan is a platform-agnostic API, it cannot interface directly with the window system on its own. To establish the connection between Vulkan and the window system to present results to the screen, you need to use the WSI (Window System Integration) extensions. The <code>VK_KHR_surface</code> extension exposes a <code>VkSurfaceKHR</code> object that represents an abstract type of surface to present rendered images to. The surface in this example program is backed by the window that you have already created using SDL.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">VK_KHR_surface</span> extension is an instance-level extension and you have actually already enabled it, because it is included in the list returned by the <span style="font-family: Courier New,Courier,monospace"> SDL_Vulkan_GetInstanceExtensions()</span> function. Even though the window surface is created before the logical device in this example, it is only mentioned here after the logical device creation, because window surfaces are part of the render targets and presentation part, and explaining them earlier would have cluttered up the basic setup.</p>
+<p>The <code>VK_KHR_surface</code> extension is an instance-level extension and you have actually already enabled it, because it is included in the list returned by the <code> SDL_Vulkan_GetInstanceExtensions()</code> function. Even though the window surface is created before the logical device in this example, it is only mentioned here after the logical device creation, because window surfaces are part of the render targets and presentation part, and explaining them earlier would have cluttered up the basic setup.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Window surfaces are an entirely optional component in Vulkan, if you just need off-screen rendering. Vulkan allows you to do that without hacks, such as creating an invisible window (necessary for OpenGL).</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Window surfaces are an entirely optional component in Vulkan, if you just need off-screen rendering. Vulkan allows you to do that without hacks, such as creating an invisible window (necessary for OpenGL).
+</div>
<ol type="a">
-<li>Add a <span style="font-family: Courier New,Courier,monospace">VkSurfaceKHR</span> type variable:
+<li>Add a <code>VkSurfaceKHR</code> type variable:
<pre class="prettyprint">
VkSurfaceKHR surface;
</pre>
-<p>When no longer needed, surfaces are destroyed with the <span style="font-family: Courier New,Courier,monospace">vkDestroySurfaceKHR()</span> function.</p>
+<p>When no longer needed, surfaces are destroyed with the <code>vkDestroySurfaceKHR()</code> function.</p>
</li>
-<li>Although the <span style="font-family: Courier New,Courier,monospace">VkSurfaceKHR</span> object and its usage is platform-agnostic, its creation is not, because it depends on the window system details. Therefore, there is a platform-specific addition to the extension, which on Tizen is <span style="font-family: Courier New,Courier,monospace">SDL_vulkanSurface</span> and is also automatically included in the list from the <span style="font-family: Courier New,Courier,monospace">SDL_Vulkan_GetInstanceExtensions()</span> function.
-<p>This platform-specific extension on Tizen provides the <span style="font-family: Courier New,Courier,monospace">SDL_Vulkan_CreateSurface()</span> function to create a surface hiding the platform differences for you. The parameters are the SDL window pointer, custom allocators, and pointer to the <span style="font-family: Courier New,Courier,monospace">VkSurfaceKHR</span> variable.
-It simply passes through the <span style="font-family: Courier New,Courier,monospace">VkResult</span> from the relevant platform call. </p>
+<li>Although the <code>VkSurfaceKHR</code> object and its usage is platform-agnostic, its creation is not, because it depends on the window system details. Therefore, there is a platform-specific addition to the extension, which on Tizen is <code>SDL_vulkanSurface</code> and is also automatically included in the list from the <code>SDL_Vulkan_GetInstanceExtensions()</code> function.
+<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>
<p>Although the Vulkan implementation can support window system integration, that does not mean that every device in the system supports it. Therefore, you need to ensure that a device can present images to the surface you created. Since the presentation is a queue-specific feature, the problem is actually about finding a queue family that supports presenting to the surface you created.</p>
<ol type="a">
-<li>Look for a queue family that has the capability of presenting to your window surface, by using the <span style="font-family: Courier New,Courier,monospace">vkGetPhysicalDeviceSurfaceSupportKHR()</span> function, which takes the physical device, queue family index, and surface as parameters. Then simply check the value of the <span style="font-family: Courier New,Courier,monospace">boolean</span> 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:
+<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>
-<li>Add a member variable for the <span style="font-family: Courier New,Courier,monospace">VkQueue</span> handle:
+<li>Add a member variable for the <code>VkQueue</code> handle:
<pre class="prettyprint">
VkQueue queue;
</pre></li>
-<li>Ideally, you need multiple <span style="font-family: Courier New,Courier,monospace">VkDeviceQueueCreateInfo</span> structs to create a queue from both graphics and presentation queue families. An elegant way to do that is to create a set of all unique queue families that are necessary for the required queues and modify <span style="font-family: Courier New,Courier,monospace">VkDeviceCreateInfo</span> to point to the vector. However, in this example, as the queue families are the same and the 2 handles most likely have the same value, you only need to pass the same index once and retrieve the queue handle:
+<li>Ideally, you need multiple <code>VkDeviceQueueCreateInfo</code> structs to create a queue from both graphics and presentation queue families. An elegant way to do that is to create a set of all unique queue families that are necessary for the required queues and modify <code>VkDeviceCreateInfo</code> to point to the vector. However, in this example, as the queue families are the same and the 2 handles most likely have the same value, you only need to pass the same index once and retrieve the queue handle:
<pre class="prettyprint">
vkGetDeviceQueue(demo->device, demo->graphics_queue_node_index, 0, &demo->queue);
</pre>
<p>To handle general SDL events:</p>
<ol>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">SDL_PollEvent()</span> function, which polls the currently pending events and returns the <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> instance. Before calling the <span style="font-family: Courier New,Courier,monospace">SDL_PollEvent()</span> function, create an empty <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> structure.
+<li>Call the <code>SDL_PollEvent()</code> function, which polls the currently pending events and returns the <code>SDL_Event</code> instance. Before calling the <code>SDL_PollEvent()</code> function, create an empty <code>SDL_Event</code> structure.
<pre class="prettyprint">
void
updateApp(appdata_s* ad)
{
- /* SDL_Event is a union that contains structures for the different event types */
+ /* 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);
}
}
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">SDL_PollEvent()</span> function removes the next event from the event queue. If there is no event in the queue, it returns 0. If there is an event, it fills the <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> object with the event information.
-<p>The <
span style="font-family: Courier New,Courier,monospace">SDL_Event</span> object is a union that contains structures for the different event types. The <span style="font-family: Courier New,Courier,monospace">type</span> member specifies the event type, shared with all events. The <span style="font-family: Courier New,Courier,monospace">type</span> member is related to the <a href="https://wiki.libsdl.org/SDL_EventType" target="blank">SDL_EventType</a> enumeration.</p>
+<li>The <code>SDL_PollEvent()</code> function removes the next event from the event queue. If there is no event in the queue, it returns 0. If there is an event, it fills the <code>SDL_Event</code> object with the event information.
+<p>The <
code>SDL_Event</code> object is a union that contains structures for the different event types. The <code>type</code> member specifies the event type, shared with all events. The <code>type</code> member is related to the <a href="https://wiki.libsdl.org/SDL_EventType" target="blank">SDL_EventType</a> enumeration.</p>
<p>To handle each event type separately, use a switch statement:</p>
<pre class="prettyprint">
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:
<p>To handle SDl events specifically added to the Tizen application framework:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">SDL_APP_CONTROL</span>
-<p>This event is invoked when the application is launched with some parameters. In Tizen, this event is called in the <span style="font-family: Courier New,Courier,monospace">_tizen_sdl_control()</span> function.</p>
+<li><code>SDL_APP_CONTROL</code>
+<p>This event is invoked when the application is launched with some parameters. In Tizen, this event is called in the <code>_tizen_sdl_control()</code> function.</p>
-<p>The application framework calls the application's application control callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> instance containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by another application. In any case, the application is responsible for checking the <span style="font-family: Courier New,Courier,monospace">app_control</span> content and responding appropriately. The <span style="font-family: Courier New,Courier,monospace">app_control</span> content can be empty, if the application is launched from the launcher.</p>
-<p>In SDL, <span style="font-family: Courier New,Courier,monospace">SDL_APP_CONTROL</span> has been defined as a new <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> event type for the application control. After the application enters the main loop, SDL sends the <span style="font-family: Courier New,Courier,monospace">SDL_APP_CONTROL</span> event to the application. This means that the application can confirm the <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> in the event loop. The event is defined as an <span style="font-family: Courier New,Courier,monospace">SDL_UserEvent</span>, which is in the <span style="font-family: Courier New,Courier,monospace">user</span> member of the <span style="font-family: Courier New,Courier,monospace">SDL_Event</span> union.</p>
+<p>The application framework calls the application's application control callback just after the application enters the main loop. This callback is passed to the <code>app_control</code> instance containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by another application. In any case, the application is responsible for checking the <code>app_control</code> content and responding appropriately. The <code>app_control</code> content can be empty, if the application is launched from the launcher.</p>
+<p>In SDL, <code>SDL_APP_CONTROL</code> has been defined as a new <code>SDL_Event</code> event type for the application control. After the application enters the main loop, SDL sends the <code>SDL_APP_CONTROL</code> event to the application. This means that the application can confirm the <code>SDL_Event</code> in the event loop. The event is defined as an <code>SDL_UserEvent</code>, which is in the <code>user</code> member of the <code>SDL_Event</code> union.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">user</span> structure contains <span style="font-family: Courier New,Courier,monospace">data1</span> (<span style="font-family: Courier New,Courier,monospace">app_control</span>) and <span style="font-family: Courier New,Courier,monospace">data2</span> (<span style="font-family: Courier New,Courier,monospace">user_data</span>).</p>
+<p>The <code>user</code> structure contains <code>data1</code> (<code>app_control</code>) and <code>data2</code> (<code>user_data</code>).</p>
-<p>In Tizen, you must include the <
span style="font-family: Courier New,Courier,monospace"><app.h></span> header file to use the application control. For more information, see the <a href="../app_management/app_controls_n.htm">Application Controls</a> guide.</p>
+<p>In Tizen, you must include the <
code><app.h></code> header file to use the application control. For more information, see the <a href="../app_management/app_controls_n.htm">Application Controls</a> guide.</p>
<pre class="prettyprint">
#include <app.h>
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>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">SDL_APP_LOWBATTERY</span>
-<p>This event is invoked when the application is low on battery. Use it to reduce power consumption, if possible. In Tizen, this event is called in the <span style="font-family: Courier New,Courier,monospace">_tizen_app_low_battery()</span> function.</p>
-<p>Get the low battery status from the given event info by calling the <span style="font-family: Courier New,Courier,monospace">app_event_get_low_battery_status()</span> function. The <span style="font-family: Courier New,Courier,monospace">app_event_low_battery_status_e</span> is the enumeration for the battery status: <span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY_POWER_OFF</span> means that the battery charge is under 1% and <span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY_CRITICAL_LOW</span> under 5%.</p>
+<li><code>SDL_APP_LOWBATTERY</code>
+<p>This event is invoked when the application is low on battery. Use it to reduce power consumption, if possible. In Tizen, this event is called in the <code>_tizen_app_low_battery()</code> function.</p>
+<p>Get the low battery status from the given event info by calling the <code>app_event_get_low_battery_status()</code> function. The <code>app_event_low_battery_status_e</code> is the enumeration for the battery status: <code>APP_EVENT_LOW_BATTERY_POWER_OFF</code> means that the battery charge is under 1% and <code>APP_EVENT_LOW_BATTERY_CRITICAL_LOW</code> under 5%.</p>
<pre class="prettyprint">
#include <app.h>
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;
}
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">SDL_APP_LANGUAGE_CHANGED</span>
-<p>This event is invoked when the displayed language is changed by the system. In Tizen, this event is called in the <span style="font-family: Courier New,Courier,monospace">_tizen_app_lang_changed()</span> function.</p>
-<p>Get the language from the given event info by calling the <span style="font-family: Courier New,Courier,monospace">app_event_get_language()</span> function.</p>
+<li><code>SDL_APP_LANGUAGE_CHANGED</code>
+<p>This event is invoked when the displayed language is changed by the system. In Tizen, this event is called in the <code>_tizen_app_lang_changed()</code> function.</p>
+<p>Get the language from the given event info by calling the <code>app_event_get_language()</code> function.</p>
<pre class="prettyprint">
#include <app.h>
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);
}
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">SDL_ROTATEEVENT</span>
-<p>This event is invoked when the device orientation changes. In Tizen, this event is called in the <span style="font-family: Courier New,Courier,monospace">_tizen_app_orient_changed()</span> function.</p>
-<p>Tizen supports portrait and landscape screen orientations, and you must take care of how your application responds to rotation changes. Use the <span style="font-family: Courier New,Courier,monospace">SDL_SetHint()</span> function to set the orientations with <span style="font-family: Courier New,Courier,monospace">SDL_HINT_ORIENTATIONS</span>. A hint specifies a variable controlling which orientations are allowed in Tizen.</p>
+<li><code>SDL_ROTATEEVENT</code>
+<p>This event is invoked when the device orientation changes. In Tizen, this event is called in the <code>_tizen_app_orient_changed()</code> function.</p>
+<p>Tizen supports portrait and landscape screen orientations, and you must take care of how your application responds to rotation changes. Use the <code>SDL_SetHint()</code> function to set the orientations with <code>SDL_HINT_ORIENTATIONS</code>. A hint specifies a variable controlling which orientations are allowed in Tizen.</p>
<p align="center" class="Table"><strong>Table: Allowed orientations</strong></p>
<table>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">LandscapeLeft</span></td>
+ <td><code>LandscapeLeft</code></td>
<td>Top of the device on the left</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">LandscapeRight</span></td>
+ <td><code>LandscapeRight</code></td>
<td>Top of the device on the right</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Portrait</span></td>
+ <td><code>Portrait</code></td>
<td>Top of device up</td>
</tr>
</tbody>
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>
<p>Tizen native guides introduce various features for native applications. The features are supported in the native API, and you can use them in creating Tizen applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you have an application based on the Tizen 2.3, use the <a href="migration_guide_n.htm">Migration Guide</a> to make it conform to Tizen 2.4 Application Framework APIs.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ If you have an application based on the Tizen 2.3, use the <a href="migration_guide_n.htm">Migration Guide</a> to make it conform to Tizen 2.4 Application Framework APIs.
+ </div>
<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
<p>The graphics features introduce how you can improve the visual look of your application through efficient use of images. You can handle graphics using various graphic libraries and interfaces, such as Cairo and OpenGL ES. You can also improve the performance of your graphic application with hardware acceleration.</p></li>
-<li><a href="notification/notification_cover_n.htm">Notifications and Content Sharing</a> <strong>in mobile applications only</strong>
+<li><a href="notification/notification_cover_n.htm">Notifications and Content Sharing</a>
<p>The notifications and content sharing features introduce how you can inform the user of important events and allow the user to share content between applications.</p></li>
<p>The error handling features are needed when everything does not go as planned. You can handle error situations in your application code, and ensure that necessary information is stored in the system logs to allow you to troubleshoot problems.</p></li>
-<li><a href="performance/performance_cover_n.htm">Performance</a> <strong>in mobile applications only</strong>
+<li><a href="performance/performance_cover_n.htm">Performance</a>
<p>The performance features define how you can use tracepoints. You can generate traces and visualize them to help you to optimize your application performance.</p></li>
</ul>
</ul>
<h2 id="ubrk" name="ubrk">Location Boundaries with Ubrk</h2>
-<p>The Ubrk API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">wearable</a> applications) is used to <a href="#manage_ubrk">find the location of boundaries in text</a>. The <span style="font-family: Courier New,Courier,monospace">i18n_ubreak_iterator_h</span> handle maintains a current position and scans over the text returning the index of characters where the boundaries occur.</p>
+<p>The Ubrk API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">wearable</a> applications) is used to <a href="#manage_ubrk">find the location of boundaries in text</a>. The <code>i18n_ubreak_iterator_h</code> handle maintains a current position and scans over the text returning the index of characters where the boundaries occur.</p>
<p>The following boundary analyzing methods are available:</p>
<ul>
<li>Line boundary analysis determines where a text string can be broken when line-wrapping. The mechanism correctly handles punctuation and hyphenated words.</li>
<h2 id="ucalendar" name="ucalendar">Calendar Dates with Ucalendar</h2>
-<p>The Ucalendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications) is used for <a href="#dates">converting between a Udate object and a set of integer fields</a>, such as <
span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
+<p>The Ucalendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications) is used for <a href="#dates">converting between a Udate object and a set of integer fields</a>, such as <
code>I18N_UCALENDAR_YEAR</code>, <code>I18N_UCALENDAR_MONTH</code>, <code>I18N_UCALENDAR_DAY</code>, and <code>I18N_UCALENDAR_HOUR</code>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
<p>The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.</p>
<p>A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).</p>
<p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as "Tuesday, July 15, 1996" even though July 15, 1996 is actually a Monday).</p>
<ul>
-<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DATE = 1</span>.</p></li>
+<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <code>I18N_UCALENDAR_YEAR = 1970</code>, <code>I18N_UCALENDAR_MONTH = JANUARY</code>, <code>I18N_UCALENDAR_DATE = 1</code>.</p></li>
<li><strong>Inconsistent information</strong> <p>If the fields conflict, the calendar prefers the most recently set fields. For example, when determining the day, the calendar looks for one of the following field combinations listed in the following table. The most recent combination, as determined by the most recently set single field, is used.</p></li>
-</ul>
-<table>
- <caption>
- Table: Combinations of the calendar fields to determine the day
- </caption>
+</ul>
+ <p align="center" class="Table"><strong>Table: Combinations of the calendar fields to determine the day</strong></p>
+<table>
<tbody>
<tr>
<th>Combinations of the calendar fields</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></p></td>
+ <td><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</code>
+<p><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</code></p>
+<p><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</code></p>
+<p><code>I18N_UCALENDAR_DAY_OF_YEAR</code></p>
+<p><code>I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</code></p></td>
</tr>
</tbody>
</table>
<p>For the time of day:</p>
+<p align="center" class="Table"><strong>Table: Combinations of calendar fields to determine the time of the day</strong></p>
<table>
- <caption>
- Table: Combinations of calendar fields to determine the time of the day
- </caption>
<tbody>
<tr>
<th>Combinations of the calendar fields</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span>
- <p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></p></td>
+ <td><code>I18N_UCALENDAR_HOUR_OF_DAY</code>
+ <p><code>I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</code></p></td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For some non-Gregorian calendars, different fields are necessary for complete disambiguation. For example, a full specification of the historical
- Arabic astronomical calendar requires the year, month, day-of-month and day-of-week in some cases.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ For some non-Gregorian calendars, different fields are necessary for complete disambiguation. For example, a full specification of the historical Arabic astronomical calendar requires the year, month, day-of-month and day-of-week in some cases.
+ </div>
<h2 id="uchar" name="uchar">Unicode Character Database Access with Uchar</h2>
<p>The Uchar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">wearable</a> applications) provides low-level access to the Unicode Character Database.</p>
<p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.
</p>
-<p>The following table describes the details of script codes that you can get using the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_int_property_value()</span> function.
-</p>
+<p>The following table describes the details of script codes that you can get using the <code>i18n_uchar_get_int_property_value()</code> function.
+</p>
+ <p align="center" class="Table"><strong>Table: Script codes</strong></p>
<table border="1">
- <caption>
- Table: Script codes
- </caption>
<tbody>
<tr>
<th>Value</th><th>Code</th><th>English name</th><th>Value</th><th>Code</th><th>English name</th>
<p>The Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-31/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
<h2 id="udate" name="udate">Date Formats with Udate</h2>
-<p>The Udate API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>
+<p>The Udate API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<code>i18n_udate_format_h</code>), which can handle practically all normal date formatting and parsing actions.</p>
<p>The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.</p>
-<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <span style="font-family: Courier New,Courier,monospace">SHORT</span>, <span style="font-family: Courier New,Courier,monospace">MEDIUM</span>, <span style="font-family: Courier New,Courier,monospace">LONG</span>, and <span style="font-family: Courier New,Courier,monospace">FULL</span>. The exact result depends on the locale.</p>
+<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <code>SHORT</code>, <code>MEDIUM</code>, <code>LONG</code>, and <code>FULL</code>. The exact result depends on the locale.</p>
<ul>
<li>
- <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_SHORT</span> is completely numeric, such as 12/13/52 or 3:30pm
+ <code>I18N_UDATE_SHORT</code> is completely numeric, such as 12/13/52 or 3:30pm
</li>
<li>
- <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_MEDIUM</span> is longer, such as Jan 12, 1952
+ <code>I18N_UDATE_MEDIUM</code> is longer, such as Jan 12, 1952
</li>
<li>
- <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_LONG</span> is longer, such as January 12, 1952 or 3:30:32pm
+ <code>I18N_UDATE_LONG</code> is longer, such as January 12, 1952 or 3:30:32pm
</li>
<li>
- <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_FULL</span>
+ <code>I18N_UDATE_FULL</code>
is completely specified, such as Tuesday, April 12, 1952 AD or 3:30:42pm PST.
</li>
</ul>
<h3 id="pattern" name="pattern">Date and Time Patterns</h3>
-<p>The date and time formats are specified by the <
span style="font-family: Courier New,Courier,monospace">date and time pattern</span> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">Unicode Technical Standard #35, Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>
+<p>The date and time formats are specified by the <
code>date and time pattern</code> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <code>i18n_udate_format_h</code> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">Unicode Technical Standard #35, Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>
<h2 id="udatepg" name="udatepg">Date Format Patterns with Udatepg</h2>
<p>The Udatepg API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
</p>
-<p>The main method is the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function, since normally the Udatepg API is prebuilt with data from a particular locale. However, generators can be built directly from other data as well.
+<p>The main method is the <code>i18n_udatepg_get_best_pattern()</code> function, since normally the Udatepg API is prebuilt with data from a particular locale. However, generators can be built directly from other data as well.
</p>
<h2 id="uenumeration" name="uenumeration">Enumeration Management with Uenumeration</h2>
-<p>The Uenumeration API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">wearable</a> applications) enables you to <a href="#uenum">create an enumeration object</a> out of a given set of strings. The object can be created out of an array of <span style="font-family: Courier New,Courier,monospace">const char*</span> strings or an array of <span style="font-family: Courier New,Courier,monospace">i18n_uchar*</span> strings.</p>
-<p>The enumeration object enables navigation through the enumeration values, with the use of the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_next()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_unext()</span> function (depending on the type used for creating the enumeration object), and with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_reset()</span> function.</p>
-<p>You can get the number of values stored in the enumeration object with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_count()</span> function.</p>
+<p>The Uenumeration API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">wearable</a> applications) enables you to <a href="#uenum">create an enumeration object</a> out of a given set of strings. The object can be created out of an array of <code>const char*</code> strings or an array of <code>i18n_uchar*</code> strings.</p>
+<p>The enumeration object enables navigation through the enumeration values, with the use of the <code>i18n_uenumeration_next()</code> or <code>i18n_uenumeration_unext()</code> function (depending on the type used for creating the enumeration object), and with the <code>i18n_uenumeration_reset()</code> function.</p>
+<p>You can get the number of values stored in the enumeration object with the <code>i18n_uenumeration_count()</code> function.</p>
<h2 id="ulocale" name="ulocale">Locale-sensitive Operations with Ulocale</h2>
<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations <a href="#locales">use the Ulocale functions to tailor information</a> for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
</p>
<p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>
-
+
+ <p align="center" class="Table"><strong>Table: Options for creating a locale</strong></p>
<table>
- <caption>
- Table: Options for creating a locale
- </caption>
<tbody>
<tr>
<th>Options for creating a locale</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span>
- <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></p></td>
+ <td><code>newLanguage</code>
+ <p><code>newLanguage + newCountry</code></p>
+ <p><code>newLanguage + newCountry + newVariant</code></p></td>
</tr>
</tbody>
</table>
</p>
<p>The second option includes an additional <a href="http://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html" target="_blank">ISO Country Code</a>.
</p>
-<p>The third option requires additional information on the variant. The variant codes are vendor and browser-specific. For example, use <span style="font-family: Courier New,Courier,monospace">WIN</span> for Windows, <span style="font-family: Courier New,Courier,monospace">MAC</span> for Macintosh, and <span style="font-family: Courier New,Courier,monospace">POSIX</span> for POSIX. Where there are 2 variants, separate them with an underscore, and put the most important one first. For example, a Traditional Spanish collation might be referenced, with <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">Traditional_WIN</span>.
+<p>The third option requires additional information on the variant. The variant codes are vendor and browser-specific. For example, use <code>WIN</code> for Windows, <code>MAC</code> for Macintosh, and <code>POSIX</code> for POSIX. Where there are 2 variants, separate them with an underscore, and put the most important one first. For example, a Traditional Spanish collation might be referenced, with <code>ES</code>, <code>ES</code>, <code>Traditional_WIN</code>.
</p>
<p>Because a locale is just an identifier for a region, no validity check is performed when you specify a locale. If you want to see whether particular resources are available for the locale you asked for, you must query those resources.
</p>
-<p> Once you have specified a locale you can query it for information about itself. Use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> to get the ISO Language Code. You can use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> to get the name of the language suitable for display to the user.
+<p> Once you have specified a locale you can query it for information about itself. Use <code>i18n_ulocale_get_language()</code> to get the ISO Language Code. You can use <code>i18n_ulocale_get_display_name()</code> to get the name of the language suitable for display to the user.
</p>
<h2 id="unormal" name="unormal">Unicode Normalization with Unormalization</h2>
-<p> The Unicode normalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications) is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>
+<p> The Unicode normalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications) is for the standard unicode normalization. All instances of <code>i18n_unormalizer_s</code> are unmodifiable and immutable. Instances returned by <code>i18n_unormalization_get_instance()</code> are singletons that must not be deleted by the caller.</p>
<h2 id="unumber" name="unumber">Number Formats with Unumber</h2>
<p>The Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications) helps you to <a href="#numbers">format and parse numbers for any locale</a>. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
<h2 id="usearch" name="usearch">Text Search with Usearch</h2>
-<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct. This ensures that language eccentricity can be handled. For example, for the German collator, characters ß and SS are matched if case is chosen to be ignored. That is why it can be important to pass a locale when creating the usearch with the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_create_new()</span> function.</p>
+<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct. This ensures that language eccentricity can be handled. For example, for the German collator, characters ß and SS are matched if case is chosen to be ignored. That is why it can be important to pass a locale when creating the usearch with the <code>i18n_usearch_create_new()</code> function.</p>
<h2 id="uset" name="uset">Character and String Management with Uset</h2>
<p>Uset is a mutable <a href="#manage_uset">set of Unicode characters and multicharacter strings that you can manage</a>. The sets represent character classes used in regular expressions. A character specifies a subset of the Unicode code points. The legal code points are U+0000 to U+10FFFF, inclusive.</p>
<p>The set supports 2 functions:</p>
-<ul><li>The operand function allows the caller to modify the value of the set. The operand function works similarly to the boolean logic: a boolean OR is implemented by add, a boolean AND is implemented by retain, a boolean XOR is implemented by a complement taking an argument, and a boolean NOT is implemented by a complement with no argument. In terms of traditional set theory function names, add is a union, retain is an intersection, remove is an asymmetric difference, and complement with no argument is a set complement with respect to the superset range <span style="font-family: Courier New,Courier,monospace">MIN_VALUE-MAX_VALUE</span>.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. Unlike the functions that add characters or categories, and control the logic of the set, the <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> function sets all attributes of a set at once, based on a string pattern.</li></ul>
+<ul><li>The operand function allows the caller to modify the value of the set. The operand function works similarly to the boolean logic: a boolean OR is implemented by add, a boolean AND is implemented by retain, a boolean XOR is implemented by a complement taking an argument, and a boolean NOT is implemented by a complement with no argument. In terms of traditional set theory function names, add is a union, retain is an intersection, remove is an asymmetric difference, and complement with no argument is a set complement with respect to the superset range <code>MIN_VALUE-MAX_VALUE</code>.</li>
+<li>The <code>i18n_uset_apply_pattern()</code> or <code>i18n_uset_to_pattern()</code> function. Unlike the functions that add characters or categories, and control the logic of the set, the <code>i18n_uset_apply_pattern()</code> function sets all attributes of a set at once, based on a string pattern.</li></ul>
<h3 id="pattern_syntax" name="pattern_syntax">Pattern Syntax</h3>
-<p>Patterns are accepted by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern_options()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> functions and returned by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>
+<p>Patterns are accepted by the <code>i18n_uset_create_pattern()</code>, <code>i18n_uset_create_pattern_options()</code>, and <code>i18n_uset_apply_pattern()</code> functions and returned by the <code>i18n_uset_to_pattern()</code> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>
+<p align="center" class="Table"><strong>Table: Examples of simple pattern syntaxes</strong></p>
<table>
- <caption>
- Table: Examples of simple pattern syntaxes
- </caption>
<tbody>
<tr>
<th>Pattern</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[]</span></td>
+ <td><code>[]</code></td>
<td>No characters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
+ <td><code>[a]</code></td>
<td>Character 'a'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[ae]</span></td>
+ <td><code>[ae]</code></td>
<td>Characters 'a' and 'e'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[a-e]</span></td>
+ <td><code>[a-e]</code></td>
<td>Characters 'a' through 'e' inclusive, in Unicode code point order</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[\u4E01]</span></td>
+ <td><code>[\u4E01]</code></td>
<td>Character U+4E01</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[a{ab}{ac}]</span></td>
+ <td><code>[a{ab}{ac}]</code></td>
<td>Character 'a' and the multicharacter strings 'ab' and 'ac'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[\p{Lu}]</span></td>
+ <td><code>[\p{Lu}]</code></td>
<td>All characters in the general category 'uppercase letter'</td>
</tr>
</tbody>
</table>
<p>Any character can be preceded by a backslash in order to remove any special meaning. Whitespace characters are ignored, unless they are escaped.</p>
-<p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> and the Perl-like syntax <span style="font-family: Courier New,Courier,monospace">\\p{Lu}</span> are recognized.</p>
-<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a '^' immediately after the opening '['. Property patterns are inverted by modifying their delimiters, <span style="font-family: Courier New,Courier,monospace">[:^foo]</span> and <span style="font-family: Courier New,Courier,monospace">\\P{foo}</span>. In any other location, '^' has no special meaning.</p>
-<p>Ranges are indicated by placing a '-' between 2 characters, as in "a-z". This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a '-' occurs as the first character after the opening '[' or '[^', or if it occurs as the last character before the closing ']', it is taken as a literal. This means that <span style="font-family: Courier New,Courier,monospace">[a\-b]</span>, <span style="font-family: Courier New,Courier,monospace">[-ab]</span>, and <span style="font-family: Courier New,Courier,monospace">[ab-]</span> all indicate the same set of 3 characters, 'a', 'b', and '-'.</p>
-<p>Sets can be intersected using the '&' operator or the asymmetric set difference can be taken using the '-' operator. For example, <span style="font-family: Courier New,Courier,monospace">[[:L:]&[\\u0000-\\u0FFF]]</span> indicates the set of all Unicode letters with values less than 4096. Operators ('&' and '|') have equal precedence and bind left-to-right. This means that <span style="font-family: Courier New,Courier,monospace">[[:L:]-[a-z]-[\\u0100-\\u01FF]]</span> is equivalent to <span style="font-family: Courier New,Courier,monospace">[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</span>. This only really matters for difference; intersection is commutative.</p>
+<p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <code>[:Lu:]</code> and the Perl-like syntax <code>\\p{Lu}</code> are recognized.</p>
+<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a '^' immediately after the opening '['. Property patterns are inverted by modifying their delimiters, <code>[:^foo]</code> and <code>\\P{foo}</code>. In any other location, '^' has no special meaning.</p>
+<p>Ranges are indicated by placing a '-' between 2 characters, as in "a-z". This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a '-' occurs as the first character after the opening '[' or '[^', or if it occurs as the last character before the closing ']', it is taken as a literal. This means that <code>[a\-b]</code>, <code>[-ab]</code>, and <code>[ab-]</code> all indicate the same set of 3 characters, 'a', 'b', and '-'.</p>
+<p>Sets can be intersected using the '&' operator or the asymmetric set difference can be taken using the '-' operator. For example, <code>[[:L:]&[\\u0000-\\u0FFF]]</code> indicates the set of all Unicode letters with values less than 4096. Operators ('&' and '|') have equal precedence and bind left-to-right. This means that <code>[[:L:]-[a-z]-[\\u0100-\\u01FF]]</code> is equivalent to <code>[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</code>. This only really matters for difference; intersection is commutative.</p>
+
+<p align="center" class="Table"><strong>Table: Examples of set syntaxes</strong></p>
<table>
- <caption>
- Table: Examples of set syntaxes
- </caption>
<tbody>
<tr>
<th>Set</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
+ <td><code>[a]</code></td>
<td>Set containing 'a'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[a-z]</span></td>
+ <td><code>[a-z]</code></td>
<td>Set containing 'a' through 'z' and all letters in between, in Unicode order</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[^a-z]</span></td>
+ <td><code>[^a-z]</code></td>
<td>Set containing all characters but 'a' through 'z', that is, U+0000 through 'a'-1 and 'z'+1 through U+10FFFF</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[[pat1][pat2]]</span></td>
+ <td><code>[[pat1][pat2]]</code></td>
<td>Union of sets specified by pat1 and pat2</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[[[pat1]&[pat2]]</span></td>
+ <td><code>[[[pat1]&[pat2]]</code></td>
<td>Intersection of sets specified by pat1 and pat2</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[[pat1]-[pat2]]</span></td>
+ <td><code>[[pat1]-[pat2]]</code></td>
<td>Asymmetric difference of sets specified by pat1 and pat2</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\p{Lu}</span></td>
+ <td><code>[:Lu:]</code> or <code>\p{Lu}</code></td>
<td>Set of characters having the specified Unicode property, in this case Unicode uppercase letters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">[:^Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\P{Lu}</span></td>
+ <td><code>[:^Lu:]</code> or <code>\P{Lu}</code></td>
<td>Set of characters not having the given Unicode property</td>
</tr>
</tbody>
</table>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You cannot add an empty string ("") to a set.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You cannot add an empty string ("") to a set.
+ </div>
<h3 id="formal_syntax" name="formal_syntax">Formal Syntax</h3>
<p>The following table provide examples of formal syntax patterns.</p>
+ <p align="center" class="Table"><strong>Table: Formal syntax patterns</strong></p>
<table>
- <caption>
- Table: Formal syntax patterns
- </caption>
<tbody>
<tr>
<th>Pattern</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pattern :=</span></td>
+ <td><code>pattern :=</code></td>
<td>('[' '^'? item* ']') | property</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item :=</span></td>
+ <td><code>item :=</code></td>
<td>char | (char '-' char) | pattern-expr</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pattern-expr :=</span></td>
+ <td><code>pattern-expr :=</code></td>
<td>pattern | pattern-expr pattern | pattern-expr or pattern</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">op :=</span></td>
+ <td><code>op :=</code></td>
<td>'&' | '-'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">special :=</span></td>
+ <td><code>special :=</code></td>
<td>'[' | ']' | '-'</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">char :=</span></td>
+ <td><code>char :=</code></td>
<td>Any character that is not special | ('\' any character) | ('\u' hex hex hex hex)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">property :=</span></td>
+ <td><code>property :=</code></td>
<td>Unicode property set pattern</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">a := b</span></td>
+ <td><code>a := b</code></td>
<td>a can be replaced by b</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">a?</span></td>
+ <td><code>a?</code></td>
<td>0 or 1 instance of a</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">a*</span></td>
+ <td><code>a*</code></td>
<td>1 or more instances of a</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">a | b</span></td>
+ <td><code>a | b</code></td>
<td>Either a or b</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">'a'</span></td>
+ <td><code>'a'</code></td>
<td>Literal string between the quotes</td>
</tr>
</tbody>
<h2 id="ustring" name="ustring">Unicode Strings with Ustring</h2>
-<p>The Ustring API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">wearable</a> applications) allows you to <a href="#characters">handle general unicode strings</a>. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace"><string.h></span> functions, and other functions provide more Unicode-specific functionality.</p>
-<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>
+<p>The Ustring API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">wearable</a> applications) allows you to <a href="#characters">handle general unicode strings</a>. Some functions are similar in name, signature, and behavior to the ANSI C <code><string.h></code> functions, and other functions provide more Unicode-specific functionality.</p>
+<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <code>i18n_uchar</code> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <code>i18n_uchar</code> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>
<p>The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.</p>
<p>Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.</p>
-<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called "surrogates", their occurrence is rare. Almost all characters in modern use require only a single <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code unit (such as their code point values are <=0xffff).</p>
+<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called "surrogates", their occurrence is rare. Almost all characters in modern use require only a single <code>i18n_uchar</code> code unit (such as their code point values are <=0xffff).</p>
<h3 id="map" name="map">Character Set Mapping Tables</h3>
<p>The i18n API provides a character set conversion with mapping tables for a number of important codepages. The default tables are a subset of IBM's CDRA conversion table repository. ICU's <a href="http://demo.icu-project.org/icu-bin/convexp" target="_blank">Converter Explorer</a> shows aliases and codepage charts for the default tables that are built into a standard ICU distribution.</p>
<h2 id="prerequisites">Prerequisites</h2>
- <p>To use the functions and data types of the i18n API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">wearable</a> applications) and its submodules, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
+ <p>To use the functions and data types of the i18n API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">wearable</a> applications) and its submodules, include the <code><utils_i18n.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <utils_i18n.h>
</pre>
<li><a href="#substring">Finding a substring</a></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">All source and destination buffers must be different.
- </td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ All source and destination buffers must be different.
+ </div>
+
<h3 id="compare" name="compare">Comparing Ustrings</h3>
-<p>To compare 2 Ustrings for bitwise equality, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_compare()</span> function.</p>
+<p>To compare 2 Ustrings for bitwise equality, use the <code>i18n_ustring_compare()</code> function.</p>
<p>The obtained result is equal to 0 if the compared Ustrings are equal. The result is a negative value if the first Ustring is smaller bitwise than the second one, and a positive value if the first Ustring is greater than the second one.</p>
<pre class="prettyprint">
#define BUF_SIZE 64
<p>For a more complex, locale-sensitive comparison, use the Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications):</p>
<ol>
-<li>Create a Ucollator using the <
span style="font-family: Courier New,Courier,monospace">i18n_ucollator_create()</span> function. <p>Specify the locale as the first parameter and a handle to the created Ucollator as the second parameter.</p>
+<li>Create a Ucollator using the <
code>i18n_ucollator_create()</code> function. <p>Specify the locale as the first parameter and a handle to the created Ucollator as the second parameter.</p>
<pre class="prettyprint">
i18n_ucollator_h coll;
i18n_ucollator_create(I18N_ULOCALE_US, &coll);
</pre></li>
-<li>Set the Ucollator strength using the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_set_strength()</span> function.
+<li>Set the Ucollator strength using the <code>i18n_ucollator_set_strength()</code> function.
<p>The strength influences how the strings are compared. The following strength levels are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_DEFAULT_STRENGTH</span>: Default</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_PRIMARY</span>: Compares the primary differences only, such as different base letters ("a" vs. "b").</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_SECONDARY</span>: Compares primary and secondary differences, such as different accented forms of the same base letter ("a" vs. "ä").</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_TERTIARY</span>: Compares primary, secondary, and tertiary differences, such as case differences ("a" vs. "A").</li>
+<li><code>I18N_UCOLLATOR_DEFAULT_STRENGTH</code>: Default</li>
+<li><code>I18N_UCOLLATOR_PRIMARY</code>: Compares the primary differences only, such as different base letters ("a" vs. "b").</li>
+<li><code>I18N_UCOLLATOR_SECONDARY</code>: Compares primary and secondary differences, such as different accented forms of the same base letter ("a" vs. "ä").</li>
+<li><code>I18N_UCOLLATOR_TERTIARY</code>: Compares primary, secondary, and tertiary differences, such as case differences ("a" vs. "A").</li>
</ul>
<pre class="prettyprint">
<li>Compare 2 Ustrings.
<p>To compare 2 Ustrings, you have 2 options:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">i18n_ucollator_equal()</span>: Shows whether the compared Ustrings are equal.</li>
-<li><span style="font-family: Courier New,Courier,monospace">i18n_ucollator_str_collator()</span>: Shows whether the first Ustring is equal to, smaller, or greater than the second Ustring (<span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_EQUAL</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_LESS</span>, or <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_GREATER</span>).</li>
+<li><code>i18n_ucollator_equal()</code>: Shows whether the compared Ustrings are equal.</li>
+<li><code>i18n_ucollator_str_collator()</code>: Shows whether the first Ustring is equal to, smaller, or greater than the second Ustring (<code>I18N_UCOLLATOR_EQUAL</code>, <code>I18N_UCOLLATOR_LESS</code>, or <code>I18N_UCOLLATOR_GREATER</code>).</li>
</ul>
<pre class="prettyprint">
i18n_ucollator_result_e result;
i18n_ucollator_str_collator(coll, s1, -1, s2, -1, &result);
</pre></li>
-<li>When no longer needed, destroy the Ucollator using the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_destroy()</span> function:
+<li>When no longer needed, destroy the Ucollator using the <code>i18n_ucollator_destroy()</code> function:
<pre class="prettyprint">
i18n_ucollator_destroy(coll);
</pre></li></ol>
<h3 id="strings" name="strings">Converting Strings to Ustrings</h3>
<p>To convert strings to Ustrings:</p>
-<ul><li><p>To convert a byte string to a Unicode string (Ustring), use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua()</span> function:</p>
+<ul><li><p>To convert a byte string to a Unicode string (Ustring), use the <code>i18n_ustring_copy_ua()</code> function:</p>
<pre class="prettyprint">
const char *src = "Tizen";
i18n_uchar dest[BUF_SIZE];
i18n_ustring_copy_ua(dest, src);
</pre></li>
-<li><p>To convert a byte string to a Ustring while defining a maximum number of characters to be copied, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua_n()</span> function and set the character limit as the third parameter:</p>
+<li><p>To convert a byte string to a Ustring while defining a maximum number of characters to be copied, use the <code>i18n_ustring_copy_ua_n()</code> function and set the character limit as the third parameter:</p>
<pre class="prettyprint">
const char *src = "Tizen";
i18n_uchar dest[BUF_SIZE];
i18n_ustring_copy_ua_n(dest, src, BUF_SIZE);
</pre></li>
-<li><p>To convert a UTF-8 string to a UTF-16 string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_from_UTF8()</span> function.</p>
+<li><p>To convert a UTF-8 string to a UTF-16 string, use the <code>i18n_ustring_from_UTF8()</code> function.</p>
<p>The function returns the length of the converted string and an error code variable as out parameters.</p>
<pre class="prettyprint">
const char *src = "Tizen";
<p>To convert Ustrings to strings:</p>
<ul>
-<li><p>To convert a Ustring to a byte string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_au()</span> function:</p>
+<li><p>To convert a Ustring to a byte string, use the <code>i18n_ustring_copy_au()</code> function:</p>
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
i18n_ustring_copy_ua(src, "Tizen");
char dest[BUF_SIZE];
i18n_ustring_copy_au(dest, src);
</pre></li>
-<li><p>To convert a Ustring to a byte string while defining a maximum number of characters to be copied, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_au_n()</span> function and set the character limit as the third parameter:</p>
+<li><p>To convert a Ustring to a byte string while defining a maximum number of characters to be copied, use the <code>i18n_ustring_copy_au_n()</code> function and set the character limit as the third parameter:</p>
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
i18n_ustring_copy_ua(src, "Tizen");
i18n_ustring_copy_au_n(dest, src, BUF_SIZE);
</pre></li>
-<li><p>To convert a UTF-16 string to a UTF-8 string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_UTF8()</span> function.</p>
+<li><p>To convert a UTF-16 string to a UTF-8 string, use the <code>i18n_ustring_to_UTF8()</code> function.</p>
<p>The function returns the length of the converted string and an error code variable as out parameters.</p>
-<p>To get the length of a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_get_length()</span> function.</p>
+<p>To get the length of a Ustring, use the <code>i18n_ustring_get_length()</code> function.</p>
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
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 get information about the location of a specified character, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_ublock_code()</span> function.</p>
-<p>The function returns, as an out parameter, the Unicode allocation block that contains the specified character. The Unicode blocks are defined in the <
span style="font-family: Courier New,Courier,monospace">i18n_uchar_ublock_code_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">wearable</a> applications).</p>
+<p>To get information about the location of a specified character, use the <code>i18n_uchar_get_ublock_code()</code> function.</p>
+<p>The function returns, as an out parameter, the Unicode allocation block that contains the specified character. The Unicode blocks are defined in the <
code>i18n_uchar_ublock_code_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">wearable</a> applications).</p>
<pre class="prettyprint">
i18n_uchar character = 0xC131;
i18n_uchar_ublock_code_e ublock;
<h3 id="property" name="property">Getting the Property Value of a Character</h3>
-<p>To get the property value of a specified character, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_int_property_value()</span> function.</p>
-<p>The character properties are defined in the <
span style="font-family: Courier New,Courier,monospace">i18n_uchar_uproperty_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">wearable</a> applications).</p>
+<p>To get the property value of a specified character, use the <code>i18n_uchar_get_int_property_value()</code> function.</p>
+<p>The character properties are defined in the <
code>i18n_uchar_uproperty_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">wearable</a> applications).</p>
<p>The following example shows how to read the East Asian width property:</p>
<pre class="prettyprint">
<h3 id="normalize" name="normalize">Normalizing Ustrings</h3>
<p>To normalize a Ustring:</p>
<ol>
-<li>Get a Unormalizer instance using the <
span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> function of the Unormalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications).
-<p>To use the built-in normalizer, set the first parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<li>Get a Unormalizer instance using the <
code>i18n_unormalization_get_instance()</code> function of the Unormalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications).
+<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>
-<li>Normalize a Ustring or Uchar with the obtained normalizer using the <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_normalize()</span> function:
+<li>Normalize a Ustring or Uchar with the obtained normalizer using the <code>i18n_unormalization_normalize()</code> function:
<pre class="prettyprint">
i18n_uchar src = 0xACE0;
i18n_uchar dest[4];
<h3 id="search" name="search">Searching Text in a Ustring</h3>
<p>To search a substring in a Ustring:</p>
<ol>
-<li>Create a search iterator using the <
span style="font-family: Courier New,Courier,monospace">i18n_usearch_create_new()</span> function of the Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications):
+<li>Create a search iterator using the <
code>i18n_usearch_create_new()</code> function of the Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications):
<pre class="prettyprint">
i18n_uchar text[BUF_SIZE];
i18n_ustring_copy_ua(text, "TIZEN");
i18n_usearch_h usearch;
i18n_usearch_create_new(pattern, -1, text, -1, I18N_ULOCALE_US, NULL, &usearch);
</pre></li>
-<li>Get the index of the first match (the first occurrence of the found pattern) using the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_first()</span> function:
+<li>Get the index of the first match (the first occurrence of the found pattern) using the <code>i18n_usearch_first()</code> function:
<pre class="prettyprint">
int index;
i18n_usearch_first(usearch, &index);
</pre></li>
-<li>When no longer needed, destroy the search iterator using the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_destroy()</span> function:
+<li>When no longer needed, destroy the search iterator using the <code>i18n_usearch_destroy()</code> function:
<pre class="prettyprint">
i18n_usearch_destroy(usearch);
</pre></li></ol>
<h3 id="uppercase" name="uppercase">Changing the Case in a Ustring</h3>
<p>To change the case in a Ustring:</p>
<ol>
-<li>To change all characters' case in a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_upper()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_lower()</span> function:
+<li>To change all characters' case in a Ustring, use the <code>i18n_ustring_to_upper()</code> or <code>i18n_ustring_to_lower()</code> function:
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
i18n_ustring_to_lower(dest, BUF_SIZE, src, -1, I18N_ULOCALE_US, &error_code);
</pre>
</li>
-<li>To change the string case to title case, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_title_new()</span> function:
+<li>To change the string case to title case, use the <code>i18n_ustring_to_title_new()</code> function:
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
i18n_ustring_copy_ua(src, "Tizen");
</ol>
<h3 id="concatenate" name="concatenate">Concatenating Ustrings</h3>
-<p>To concatenate 2 Ustrings, use the <span style="font-family: Courier New,Courier,monospace">18n_ustring_cat()</span> or <span style="font-family: Courier New,Courier,monospace">18n_ustring_cat_n()</span> function.</p>
+<p>To concatenate 2 Ustrings, use the <code>18n_ustring_cat()</code> or <code>18n_ustring_cat_n()</code> function.</p>
<p>The functions differ in that the latter takes a third parameter to define a maximum number of characters to append to the destination string.</p>
<pre class="prettyprint">
i18n_uchar src[BUF_SIZE];
</pre>
<h3 id="substring" name="substring">Finding a Substring</h3>
-<p>To find a substring in a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_string()</span> function.</p>
-<p>The result is a pointer to the first occurrence of the substring, or <span style="font-family: Courier New,Courier,monospace">NULL</span> if the substring is not found. You can use pointer arithmetic to find the index of the character at which the first occurrence begins.</p>
+<p>To find a substring in a Ustring, use the <code>i18n_ustring_string()</code> function.</p>
+<p>The result is a pointer to the first occurrence of the substring, or <code>NULL</code> if the substring is not found. You can use pointer arithmetic to find the index of the character at which the first occurrence begins.</p>
<pre class="prettyprint">
i18n_uchar s[BUF_SIZE];
<ol>
<li><p>To manage dates and calendar, the Ucalendar (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications), Udate (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications), and Udatepg (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) APIs are used.</p>
<ul>
- <li>The Ucalendar API is used for converting between an <span style="font-family: Courier New,Courier,monospace">i18n_udate</span> object and a set of integer fields, such as <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR</span>.</li>
+ <li>The Ucalendar API is used for converting between an <code>i18n_udate</code> object and a set of integer fields, such as <code>I18N_UCALENDAR_YEAR</code>, <code>I18N_UCALENDAR_MONTH</code>, <code>I18N_UCALENDAR_DAY</code>, and <code>I18N_UCALENDAR_HOUR</code>.</li>
<li>The Udate API is used to convert dates and times from their internal representations to a textual form and back again in a language-independent manner.</li>
<li>The Udatepg API is used to generate date format patterns, such as "yy-MM-dd".</li>
</ul>
</li>
-<li>To create a Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_create()</span> function:
+<li>To create a Ucalendar, use the <code>i18n_ucalendar_create()</code> function:
<pre class="prettyprint">
i18n_uchar timezone[BUF_SIZE];
const char *timezone_name = "America/New_York";
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 <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_date_time()</span> function.
+<li>To set a date in the Ucalendar, use the <code>i18n_ucalendar_set_date_time()</code> function.
<p>In the following example, the date is set as 1 July 2014, 9:00:00.</p>
-<p>To define the month, you can use numbers (month reduced by 1, such as 0 for January and 1 for February), or to avoid mistakes, the values of the <
span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_months_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">wearable</a> applications).</p>
+<p>To define the month, you can use numbers (month reduced by 1, such as 0 for January and 1 for February), or to avoid mistakes, the values of the <
code>i18n_ucalendar_months_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">wearable</a> applications).</p>
<pre class="prettyprint">
i18n_ucalendar_set_date_time(ucalendar, 2014, I18N_UCALENDAR_JULY, 1, 9, 0, 0);
</pre>
-<p>To set a date using milliseconds from the epoch, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_milliseconds()</span> function:</p>
+<p>To set a date using milliseconds from the epoch, use the <code>i18n_ucalendar_set_milliseconds()</code> function:</p>
<pre class="prettyprint">
i18n_udate udate;
/* udate must be set */
i18n_ucalendar_set_milliseconds(ucalendar, udate);
</pre>
-<p>To add a specified period to the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_add()</span> function.</p>
-<p>Specify the date field to modify (such as year, week, or day) using the <
span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">wearable</a> applications) as the second parameter, and the amount to modify as the third parameter (use a negative value to subtract from the existing value).</p>
+<p>To add a specified period to the Ucalendar, use the <code>i18n_ucalendar_add()</code> function.</p>
+<p>Specify the date field to modify (such as year, week, or day) using the <
code>i18n_ucalendar_date_fields_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">wearable</a> applications) as the second parameter, and the amount to modify as the third parameter (use a negative value to subtract from the existing value).</p>
<pre class="prettyprint">
i18n_ucalendar_add(ucalendar, I18N_UCALENDAR_HOUR, 3);
</pre></li>
<li>To get a date from the Ucalendar, you can use various functions:
<ul>
-<li>To get a specific date field from a Ucalendar instance, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get()</span> function and define the wanted date field with the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration:
+<li>To get a specific date field from a Ucalendar instance, use the <code>i18n_ucalendar_get()</code> function and define the wanted date field with the <code>i18n_ucalendar_date_fields_e</code> enumeration:
<pre class="prettyprint">
int uday;
i18n_ucalendar_get(ucalendar, I18N_UCALENDAR_DAY_OF_YEAR, &uday);
</pre>
</li>
-<li>To get a date from a Ucalendar in milliseconds from the epoch, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_milliseconds()</span> function:
+<li>To get a date from a Ucalendar in milliseconds from the epoch, use the <code>i18n_ucalendar_get_milliseconds()</code> function:
<pre class="prettyprint">
i18n_udate date;
i18n_ucalendar_get_milliseconds(ucalendar, &date);
</pre>
</li>
-<li>To get the actual current date from the system, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_now()</span> function. The obtained date is represented as milliseconds from the epoch.
+<li>To get the actual current date from the system, use the <code>i18n_ucalendar_get_now()</code> function. The obtained date is represented as milliseconds from the epoch.
<pre class="prettyprint">
i18n_udate now;
i18n_ucalendar_get_now(&now);
</pre>
</li>
</ul>
-<p>To check whether the Ucalendar date is in daylight saving time, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_is_in_daylight_time()</span> function:</p>
+<p>To check whether the Ucalendar date is in daylight saving time, use the <code>i18n_ucalendar_is_in_daylight_time()</code> function:</p>
<pre class="prettyprint">
bool dst;
i18n_ucalendar_is_in_daylight_time(ucalendar, &dst);
<ul>
<li>Using a pattern generator:
<ol type="a">
-<li>To create a Udatepg pattern generator instance, use the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_create()</span> function and define the desired locale as the first parameter:
+<li>To create a Udatepg pattern generator instance, use the <code>i18n_udatepg_create()</code> function and define the desired locale as the first parameter:
<pre class="prettyprint">
i18n_udatepg_h udatepg;
i18n_udatepg_create(I18N_ULOCALE_UK, &udatepg);
</pre>
</li>
-<li>To generate a date best pattern with the pattern generator, use the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function.
+<li>To generate a date best pattern with the pattern generator, use the <code>i18n_udatepg_get_best_pattern()</code> function.
<p>As the second parameter, you need a draft format, which defines the fields to be displayed (for example, E for the day of the week, M for month, y for year, d for the day of the month, and D for day of the year).</p>
<pre class="prettyprint">
int pattern_len;
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>
</li>
<li>Using a date format:
<ol>
-<li>To create a date format, use the <span style="font-family: Courier New,Courier,monospace">i18n_udate_create()</span> function.
-<p>As the first and second parameter, specify the formatting style for time and date using the values of the <
span style="font-family: Courier New,Courier,monospace">i18n_udate_format_style_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">wearable</a> applications).</p>
+<li>To create a date format, use the <code>i18n_udate_create()</code> function.
+<p>As the first and second parameter, specify the formatting style for time and date using the values of the <
code>i18n_udate_format_style_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">wearable</a> applications).</p>
<pre class="prettyprint">
i18n_udate_format_h date_format;
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 <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_date()</span> function:
+<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>
</ul>
</li>
-<li>When no longer needed, destroy the Ucalendar, Udatepg, and Udate instances using the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_destroy()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_destroy()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_udate_destroy()</span> functions:
+<li>When no longer needed, destroy the Ucalendar, Udatepg, and Udate instances using the <code>i18n_ucalendar_destroy()</code>, <code>i18n_udatepg_destroy()</code>, and <code>i18n_udate_destroy()</code> functions:
<pre class="prettyprint">
i18n_ucalendar_destroy(ucalendar);
i18n_udatepg_destroy(udatepg);
<p>To manage the features of a specific geographical, political, or cultural region:</p>
<ul>
-<li>To get the language code associated with a locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function:
+<li>To get the language code associated with a locale, use the <code>i18n_ulocale_get_language()</code> function:
<pre class="prettyprint">
char language[BUF_SIZE];
int lang_len;
i18n_ulocale_get_language(I18N_ULOCALE_GERMANY, language, BUF_SIZE, &lang_len);
</pre></li>
-<li>To get the language ISO-3 code for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_iso3_language()</span> function:
+<li>To get the language ISO-3 code for the specified locale, use the <code>i18n_ulocale_get_iso3_language()</code> function:
<pre class="prettyprint">
const char *language_iso = i18n_ulocale_get_iso3_language(I18N_ULOCALE_GERMANY);
</pre>
</li>
-<li>To get the full name of the language for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_language()</span> function.
+<li>To get the full name of the language for the specified locale, use the <code>i18n_ulocale_get_display_language()</code> function.
<p>In the following example, the name of the "fr_CA" locale is obtained in German:</p>
<pre class="prettyprint">
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>
-<li>To get the line orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_line_orientation()</span> function:
+<li>To get the line orientation for the specified locale, use the <code>i18n_ulocale_get_line_orientation()</code> function:
<pre class="prettyprint">
const char *locale = I18N_ULOCALE_ENGLISH;
i18n_ulocale_layout_type_e type;
i18n_ulocale_get_line_orientation(locale, &type);
</pre></li>
-<li>To get the character orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_character_orientation()</span> function:
+<li>To get the character orientation for the specified locale, use the <code>i18n_ulocale_get_character_orientation()</code> function:
<pre class="prettyprint">
const char *locale = I18N_ULOCALE_ENGLISH;
i18n_ulocale_layout_type_e type;
i18n_ulocale_get_character_orientation(locale, &type);
</pre></li>
-<li>To get the variant code for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_variant()</span> function.
+<li>To get the variant code for the specified locale, use the <code>i18n_ulocale_get_variant()</code> function.
<p>The function returns the actual size of the variant code.</p>
<pre class="prettyprint">
const char *locale = I18N_ULOCALE_ENGLISH;
</pre>
</li>
-<li>To get a full name for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> function.
+<li>To get a full name for the specified locale, use the <code>i18n_ulocale_get_display_name()</code> function.
<p>In the following example, the name of the "fr_CA" locale is obtained in German:</p>
<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>
-<li>To get or set the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_default()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_set_default()</span> function:
+<li>To get or set the default locale, use the <code>i18n_ulocale_get_default()</code> or <code>i18n_ulocale_set_default()</code> function:
<pre class="prettyprint">
/* Get */
char *locale;
<p>To format and parse numbers for a locale:</p>
<ol>
-<li>To create a number format, use the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_create()</span> function.
-<p>Define the style as the first parameter using the <
span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_style_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">wearable</a> applications).</p>
-<p>The fourth parameter sets the locale (<span style="font-family: Courier New,Courier,monospace">NULL</span> for default). Some string shortcuts for specific locales are defined in the <span style="font-family: Courier New,Courier,monospace">utils_i18n_types.h</span> header file. For example, <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_US</span> is equal to "en_US".</p>
+<li>To create a number format, use the <code>i18n_unumber_create()</code> function.
+<p>Define the style as the first parameter using the <
code>i18n_unumber_format_style_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">wearable</a> applications).</p>
+<p>The fourth parameter sets the locale (<code>NULL</code> for default). Some string shortcuts for specific locales are defined in the <code>utils_i18n_types.h</code> header file. For example, <code>I18N_ULOCALE_US</code> is equal to "en_US".</p>
<pre class="prettyprint">
i18n_unumber_format_h num_format;
i18n_unumber_format_style_e format_style = I18N_UNUMBER_CURRENCY;
i18n_unumber_create(format_style, NULL, -1, locale, NULL, &num_format);
</pre>
</li>
-<li>To use the created number format to format a given number based on the rules of a specified locale, you can use various <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_XXX()</span> functions.
+<li>To use the created number format to format a given number based on the rules of a specified locale, you can use various <code>i18n_unumber_format_XXX()</code> functions.
<p>The following example formats a double-type number:</p>
<pre class="prettyprint">
#define BUF_SIZE 64
i18n_unumber_format_double(num_format, myNumber, myString, BUF_SIZE, NULL);
</pre>
-<p>The result set in the <span style="font-family: Courier New,Courier,monospace">myString</span> variable is equal to:</p>
+<p>The result set in the <code>myString</code> variable is equal to:</p>
<pre class="prettyprint">
$4.50
</pre>
</li>
-<li>To get a symbol associated with the created number format, use the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_get_symbol()</span> function.
-<p>The second parameter uses the values of the <
span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_symbol_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">wearable</a> applications) to define the symbol to be retrieved.</p>
-<p>The function returns the symbol used in the given locale. In the following example, it returns the currency <span style="font-family: Courier New,Courier,monospace">$</span> sign:</p>
+<li>To get a symbol associated with the created number format, use the <code>i18n_unumber_get_symbol()</code> function.
+<p>The second parameter uses the values of the <
code>i18n_unumber_format_symbol_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">wearable</a> applications) to define the symbol to be retrieved.</p>
+<p>The function returns the symbol used in the given locale. In the following example, it returns the currency <code>$</code> sign:</p>
<pre class="prettyprint">
i18n_uchar buffer[BUF_SIZE];
int buf_len;
</pre>
</li>
-<li>When no longer needed, destroy the number format with the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_destroy()</span> function:
+<li>When no longer needed, destroy the number format with the <code>i18n_unumber_destroy()</code> function:
<pre class="prettyprint">
i18n_unumber_destroy(num_format);
</pre>
<p>To manipulate or iterate through strings, you can use the Ubrk library. It helps you to treat strings as a set of characters, words, or sentences:</p>
<ol>
-<li>To create an iterator to iterate through a string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_create()</span> function.
+<li>To create an iterator to iterate through a string, use the <code>i18n_ubrk_create()</code> function.
<p>The first parameter defines the type of the iterator:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UBRK_WORD</span> for word iteration</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UBRK_CHARACTER</span> for character iteration</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UBRK_LINE</span> for line iteration</li>
-<li><span style="font-family: Courier New,Courier,monospace">I18N_UBRK_SENTENCE</span> for sentence iteration</li>
+<li><code>I18N_UBRK_WORD</code> for word iteration</li>
+<li><code>I18N_UBRK_CHARACTER</code> for character iteration</li>
+<li><code>I18N_UBRK_LINE</code> for line iteration</li>
+<li><code>I18N_UBRK_SENTENCE</code> for sentence iteration</li>
</ul>
<pre class="prettyprint">
i18n_ubreak_iterator_h boundary;
i18n_ubrk_create(I18N_UBRK_WORD, I18N_ULOCALE_US, stringToExamine, -1, &boundary);
</pre></li>
-<li>To change the position of the iterator, you can use several functions, such as <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_first()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_last()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_next()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_previous()</span>.
-<p>The following example retrieves the boundaries of the first word in the <span style="font-family: Courier New,Courier,monospace">stringToExamine</span> string. The <span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span> variables represent the boundaries of the first word, in this example 0 and 7.</p>
+<li>To change the position of the iterator, you can use several functions, such as <code>i18n_ubrk_first()</code>, <code>i18n_ubrk_last()</code>, <code>i18n_ubrk_next()</code>, and <code>i18n_ubrk_previous()</code>.
+<p>The following example retrieves the boundaries of the first word in the <code>stringToExamine</code> string. The <code>start</code> and <code>end</code> variables represent the boundaries of the first word, in this example 0 and 7.</p>
<pre class="prettyprint">
int32_t start = i18n_ubrk_first(boundary);
int32_t end = i18n_ubrk_next(boundary);
</pre>
</li>
-<li>To retrieve a string delimited with the <span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span> boundary variables, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_n()</span> function.
+<li>To retrieve a string delimited with the <code>start</code> and <code>end</code> boundary variables, use the <code>i18n_ustring_copy_n()</code> function.
<p>The second parameter defines the source string, and the third parameter defines the maximum number of characters to copy.</p>
<pre class="prettyprint">
i18n_ustring_copy_n(result, &str[start], end-start);
</pre></li>
-<li>When no longer needed, destroy the ubreak iterator with the <span style="font-family: Courier New,Courier,monospace">i18n_ubrk_destroy()</span> function. Remember to free all allocated memory with the <span style="font-family: Courier New,Courier,monospace">free()</span> function.
+<li>When no longer needed, destroy the ubreak iterator with the <code>i18n_ubrk_destroy()</code> function. Remember to free all allocated memory with the <code>free()</code> function.
<pre class="prettyprint">
i18n_ubrk_destroy(boundary);
</pre></li>
<h3 id="create_enum" name="create_enum">Creating an Enumeration</h3>
<p>To create an enumeration based on existing strings:</p>
<ol>
-<li>Define an array of strings (pointers to <span style="font-family: Courier New,Courier,monospace">char</span>):
+<li>Define an array of strings (pointers to <code>char</code>):
<pre class="prettyprint">
const char* strings[] = {"First", "Second", "Third", "Fourth"};
</pre>
</li>
-<li>Create an enumeration of the <span style="font-family: Courier New,Courier,monospace">char</span> strings:
+<li>Create an enumeration of the <code>char</code> strings:
<pre class="prettyprint">
i18n_uenumeration_h strings_enum;
i18n_uenumeration_char_strings_enumeration_create(strings, size, &strings_enum);
</pre>
-<p>In case of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> strings, use the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_uchar_strings_enumeration_create()</span> function.</p>
+<p>In case of <code>i18n_uchar</code> strings, use the <code>i18n_uenumeration_uchar_strings_enumeration_create()</code> function.</p>
</li>
<li>Get the number of elements:
<pre class="prettyprint">
int32_t count = i18n_uenumeration_count(strings_enum);
</pre>
-<p>If the enumeration was created successfully, the value is equal to the <span style="font-family: Courier New,Courier,monospace">size</span> variable used above.</p>
+<p>If the enumeration was created successfully, the value is equal to the <code>size</code> variable used above.</p>
</li>
-<li>Iterate through the <span style="font-family: Courier New,Courier,monospace">char</span> elements using the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_next()</span> function, until it returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.
-<p>The string is null-terminated, and the <span style="font-family: Courier New,Courier,monospace">len</span> variable is the length of the string.</p>
+<li>Iterate through the <code>char</code> elements using the <code>i18n_uenumeration_next()</code> function, until it returns <code>NULL</code>.
+<p>The string is null-terminated, and the <code>len</code> variable is the length of the string.</p>
<p>Do not free the returned string. The returned pointer is valid until a function is called for the enumeration.</p>
<pre class="prettyprint">
const char *element = NULL;
}
</pre>
-<p>In case of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> strings, use the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_unext()</span> function.</p>
+<p>In case of <code>i18n_uchar</code> strings, use the <code>i18n_uenumeration_unext()</code> function.</p>
</li>
-<li>When no longer needed, destroy the enumeration with the <span style="font-family: Courier New,Courier,monospace">18n_uenumeration_destroy()</span> function:
+<li>When no longer needed, destroy the enumeration with the <code>18n_uenumeration_destroy()</code> function:
<pre class="prettyprint">
18n_uenumeration_destroy(strings_enum);
</pre>
<h3 id="get_enum" name="get_enum">Obtaining an Enumeration</h3>
<p>Certain functions in the i18n module provide enumerations of values related to them. After the enumeration is obtained, you can iterate through its values.</p>
<ul>
-<li>To get an enumeration of available time zones and iterate through them, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_timezones_create()</span> function:
+<li>To get an enumeration of available time zones and iterate through them, use the <code>i18n_ucalendar_timezones_create()</code> function:
<pre class="prettyprint">
i18n_uenumeration_h timezones;
i18n_ucalendar_timezones_create(&timezones);
</pre>
</li>
<li>After creating a date pattern generator for a given locale, you can obtain an enumeration of all the pattern skeletons in a canonical form.
-<p>To get the enumeration and iterate through the skeletons, use the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_skeletons_create()</span> function:</p>
+<p>To get the enumeration and iterate through the skeletons, use the <code>i18n_udatepg_skeletons_create()</code> function:</p>
<pre class="prettyprint">
i18n_udatepg_h udatepg;
i18n_udatepg_create(I18N_ULOCALE_UK, &udatepg);
i18n_uenumeration_destroy(skeletons);
</pre>
</li>
-<li>To get an enumeration of keywords for a given locale string and iterate through the keywords, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_keywords_create()</span> function:
+<li>To get an enumeration of keywords for a given locale string and iterate through the keywords, use the <code>i18n_ulocale_keywords_create()</code> function:
<pre class="prettyprint">
const char *loc_string = "en_US@collation=PHONEBOOK;calendar=GREGORIAN;currency=USD";
<ol>
<li>To retrieve time zone information:
-<ul><li><p>To get the default time zone based on the time zone where the program is running, use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_create_default()</span> function:</p>
+<ul><li><p>To get the default time zone based on the time zone where the program is running, use the <code>i18n_timezone_create_default()</code> function:</p>
<pre class="prettyprint">
i18n_timezone_h tmz;
i18n_timezone_create_default(&tmz);
</pre></li>
-<li><p>To get the display name of the time zone, use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_get_display_name()</span> function:</p>
+<li><p>To get the display name of the time zone, use the <code>i18n_timezone_get_display_name()</code> function:</p>
<pre class="prettyprint">
char *display_name;
i18n_timezone_get_display_name(tmz, &display_name);
</pre></li>
-<li><p>To get the time zone ID, use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_get_id()</span> function:</p>
+<li><p>To get the time zone ID, use the <code>i18n_timezone_get_id()</code> function:</p>
<pre class="prettyprint">
char *timezone_id;
i18n_timezone_get_id(tmz, &timezone_id);
</pre></li>
<li>
-<p>To check whether a given time zone uses daylight savings time (DST), use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_use_daylight_time()</span> function:</p>
+<p>To check whether a given time zone uses daylight savings time (DST), use the <code>i18n_timezone_use_daylight_time()</code> function:</p>
<pre class="prettyprint">
bool dst_savings;
i18n_timezone_use_daylight_time(tmz, &dst_savings);
</pre></li>
<li>
-<p>To get the daylight savings (the amount of time to be added to the local standard time to get the local wall clock time), use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_get_dst_savings()</span> function.</p>
+<p>To get the daylight savings (the amount of time to be added to the local standard time to get the local wall clock time), use the <code>i18n_timezone_get_dst_savings()</code> function.</p>
<p>The result is returned in milliseconds (3600000 ms = 1 hour). In the following example, milliseconds are changed to minutes (1 min = 60000 ms).</p>
<pre class="prettyprint">
#define MS_TO_MIN 60000
</pre>
</li>
-<li><p>To get the raw GMT offset, use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_get_raw_offset()</span> function.</p>
+<li><p>To get the raw GMT offset, use the <code>i18n_timezone_get_raw_offset()</code> function.</p>
<p>The result is the number of milliseconds to add to GMT to get the local time, before taking DST into account, and it is returned in milliseconds. In the following example, milliseconds are changed to minutes (1 min = 60000 ms).</p>
<pre class="prettyprint">
#define MS_TO_MIN 60000
</pre>
</li>
-<li><p>To get the region code associated with the time zone ID, use the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_get_region()</span> function:</p>
+<li><p>To get the region code associated with the time zone ID, use the <code>i18n_timezone_get_region()</code> function:</p>
<pre class="prettyprint">
char region[BUF_SIZE];
int32_t region_len = -1;
i18n_timezone_get_region(timezone_id, region, &region_len, BUF_SIZE);
</pre></li></ul></li>
-<li><p>When no longer needed, destroy the time zone instance with the <span style="font-family: Courier New,Courier,monospace">i18n_timezone_destroy()</span> function:</p>
+<li><p>When no longer needed, destroy the time zone instance with the <code>i18n_timezone_destroy()</code> function:</p>
<pre class="prettyprint">
i18n_timezone_destroy(tmz);
</pre></li></ol>
<p>To manage sets:</p>
<ol>
-<li>To create a set, use various <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_XXX()</span> functions.
+<li>To create a set, use various <code>i18n_uset_create_XXX()</code> functions.
<p>The following example creates an empty set:</p>
<pre class="prettyprint">
i18n_uset_h set;
<li>To manage character sets:
<p>A character set contains characters as its elements.</p>
<ul>
-<li>Add characters from a string to the set using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_add_all_code_points()</span> function:
+<li>Add characters from a string to the set using the <code>i18n_uset_add_all_code_points()</code> function:
<pre class="prettyprint">
const char *text = "Example string";
i18n_uchar u_input_text[BUF_SIZE];
</pre>
</li>
-<li>Get the list of characters in the set using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_char_at()</span> function:
+<li>Get the list of characters in the set using the <code>i18n_uset_char_at()</code> function:
<pre class="prettyprint">
int chars_count = i18n_uset_size(set);
int i;
</pre>
</li>
-<li>Check whether the set contains a specific character using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_contains()</span> function:
+<li>Check whether the set contains a specific character using the <code>i18n_uset_contains()</code> function:
<pre class="prettyprint">
i18n_ubool contains_character = i18n_uset_contains(set, 'a');
</pre>
</li>
-<li>Check whether the set contains characters from a specific range using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_contains_range()</span> function.
+<li>Check whether the set contains characters from a specific range using the <code>i18n_uset_contains_range()</code> function.
<p>The following example uses the range "a-c".</p>
<pre class="prettyprint">
i18n_ubool contains_character = i18n_uset_contains_range(set, 'a', 'c');
</pre>
</li>
-<li>Check whether the set contains characters from another set using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_contains_all()</span> function:
+<li>Check whether the set contains characters from another set using the <code>i18n_uset_contains_all()</code> function:
<pre class="prettyprint">
i18n_uset_h compare_set = NULL;
i18n_uset_create_empty(&compare_set);
<li>To manage string sets:
<p>A string set contains strings as its elements.</p>
<ul>
-<li>Add a string to the set using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_add_string()</span> function.
+<li>Add a string to the set using the <code>i18n_uset_add_string()</code> function.
<p>The entire string is a single element.</p>
<pre class="prettyprint">
const char *text = "Example string";
</pre>
</li>
-<li>List all strings in the set using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_get_item()</span> function.
+<li>List all strings in the set using the <code>i18n_uset_get_item()</code> function.
<p>The function returns the length of a string item, or 0, if the item is a range.</p>
<pre class="prettyprint">
int strings_count = i18n_uset_get_item_count(set);
}
</pre>
</li>
-<li>Check whether the set contains a string using the <span style="font-family: Courier New,Courier,monospace">i18n_uset_contains_string()</span> function:
+<li>Check whether the set contains a string using the <code>i18n_uset_contains_string()</code> function:
<pre class="prettyprint">
const char *input_string = "Input string";
int input_string_len = strlen(input_string);
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p>The main features of the Phonenumber utils API include:</p>
<ul><li>Retrieving the location information
-<p>You can <a href="#get">get the location</a> based on the phone number, region, and language using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_location_from_number()</span> function. If the function cannot provide the location with the passed language, it uses English.</p></li>
+<p>You can <a href="#get">get the location</a> based on the phone number, region, and language using the <code>phone_number_get_location_from_number()</code> function. If the function cannot provide the location with the passed language, it uses English.</p></li>
<li>Formatting the phone number
-<p>You can <a href="#format">format the phone number string</a> based on the region using the dash ("-") and space (" ") characters using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_formatted_number()</span> function.</p></li>
+<p>You can <a href="#format">format the phone number string</a> based on the region using the dash ("-") and space (" ") characters using the <code>phone_number_get_formatted_number()</code> function.</p></li>
<li>Normalizing the phone number
-<p>You can <a href="#normalise">normalize the phone number</a> using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_normalized_number()</span> function.</p></li>
+<p>You can <a href="#normalise">normalize the phone number</a> using the <code>phone_number_get_normalized_number()</code> function.</p></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
<ol>
-<li><p>To use the functions and data types of the Phonenumber utils API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><phone_number.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Phonenumber utils API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">wearable</a> applications), include the <code><phone_number.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <phone_number.h>
</pre>
-<p>To ensure that a Phonenumber utils function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace">PHONE_NUMBER_ERROR_NONE</span>.</p>
+<p>To ensure that a Phonenumber utils function has been executed properly, make sure that the return is equal to <code>PHONE_NUMBER_ERROR_NONE</code>.</p>
</li>
-<li><p>To connect to the phonenumber utils service to access the service features, use the <span style="font-family: Courier New,Courier,monospace">phone_number_connect()</span> function:</p>
+<li><p>To connect to the phonenumber utils service to access the service features, use the <code>phone_number_connect()</code> function:</p>
<pre class="prettyprint">
int error_code;
error_code = phone_number_connect();
</pre>
-<p>When the service is no longer needed, disconnect from it using the <span style="font-family: Courier New,Courier,monospace">phone_number_disconnect()</span> function:</p>
+<p>When the service is no longer needed, disconnect from it using the <code>phone_number_disconnect()</code> function:</p>
<pre class="prettyprint">
error_code = phone_number_disconnect();
<h2 id="get" name="get">Getting the Location</h2>
-<p>To get the location from the phone number, use the <span style="font-family: Courier New,Courier,monospace">phone_number_get_location_from_number()</span> function:</p>
+<p>To get the location from the phone number, use the <code>phone_number_get_location_from_number()</code> function:</p>
<pre class="prettyprint">
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 */
<h2 id="format" name="format">Formatting the Number</h2>
-<p>To format the phone number to use region-specific separators, use the <span style="font-family: Courier New,Courier,monospace">phone_number_get_formatted_number()</span> function:</p>
+<p>To format the phone number to use region-specific separators, use the <code>phone_number_get_formatted_number()</code> function:</p>
<pre class="prettyprint">
int ret;
<h2 id="normalise" name="normalise">Normalizing the Number</h2>
-<p>To normalize the phone number, use the <span style="font-family: Courier New,Courier,monospace">phone_number_get_normalized_number()</span> function:</p>
+<p>To normalize the phone number, use the <code>phone_number_get_normalized_number()</code> function:</p>
<pre class="prettyprint">
int ret;
<div id="container"><div id="contents"><div class="content">
<h1>Resource Localization</h1>
-<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them in <span style="font-family: Courier New,Courier,monospace">.po</span> (portable object) files.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">.po</span> files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.studio/html/native_tools/po_file_editor_n.htm">PO file editor</a> provided by the Tizen Studio.
-<p>The <span style="font-family: Courier New,Courier,monospace">.po</span> file is compiled into a <span style="font-family: Courier New,Courier,monospace">.mo</span> file, and the <span style="font-family: Courier New,Courier,monospace">.mo</span> file name is defined using the project name that you define when you create the project in the Tizen Studio. The application ID is made based on the project name, and the framework finds the application <span style="font-family: Courier New,Courier,monospace">.mo</span> file based on the application ID.</p>
-<p>Be careful if you change the application ID in the Tizen manifest editor later on, because the <span style="font-family: Courier New,Courier,monospace">.mo</span> file name is not automatically changed, and problems can occur when getting the string resources.</p>
-</td>
- </tr>
- </tbody>
-</table>
+<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them in <code>.po</code> (portable object) files.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The <code>.po</code> files must be placed in the <code>res/po</code> directory of the application. The files can be edited using the <a href="../../../../org.tizen.studio/html/native_tools/po_file_editor_n.htm">PO file editor</a> provided by the Tizen Studio.
+<p>The <code>.po</code> file is compiled into a <code>.mo</code> file, and the <code>.mo</code> file name is defined using the project name that you define when you create the project in the Tizen Studio. The application ID is made based on the project name, and the framework finds the application <code>.mo</code> file based on the application ID.</p>
+<p>Be careful if you change the application ID in the Tizen manifest editor later on, because the <code>.mo</code> file name is not automatically changed, and problems can occur when getting the string resources.</p>
+ </div>
<p>The application must load the proper resource set depending on the current device locale. If no matching resource set is found for the current locale, the default resource set is used.</p>
-<p>To get the localized value of a string, use the <strong>string KEY</strong> shown in the PO file editor (the <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the <span style="font-family: Courier New,Courier,monospace;">.po</span> file), with the <span style="font-family: Courier New,Courier,monospace">_()</span> function (for example, <span style="font-family: Courier New,Courier,monospace">_(<msgid>)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>
+<p>To get the localized value of a string, use the <strong>string KEY</strong> shown in the PO file editor (the <code>msgid</code> field in the <code>.po</code> file), with the <code>_()</code> function (for example, <code>_(<msgid>)</code>). The underlying implementation calls the <code>i18n_get_text()</code> function to retrieve the localized value:</p>
<pre class="prettyprint">
char *hello_text = i18n_get_text("Hello");
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for the "Hello" string key (<span style="font-family: Courier New,Courier,monospace;">msgid</span>) for the current device locale.</p>
+<p>The <code>hello_text</code> variable is set to the localized text for the "Hello" string key (<code>msgid</code>) for the current device locale.</p>
<p>When the user changes the device language setting, the text in the application changes to the new language.</p>
<h2 id="marking" name="marking">Marking Text Parts Translatable</h2>
-<p>The most common way to use a translation in your application strings involves the <span style="font-family: Courier New,Courier,monospace;">elm_object_translatable_text_set()</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_item_translatable_text_set()</span> functions. They set the untranslated string for the "default" part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span>, and mark the string as translatable.</p>
+<p>The most common way to use a translation in your application strings involves the <code>elm_object_translatable_text_set()</code> and <code>elm_object_item_translatable_text_set()</code> functions. They set the untranslated string for the "default" part of the given <code>Evas_Object</code> or <code>Elm_Object_Item</code>, and mark the string as translatable.</p>
+
+<p>To set the text for a "non-default" part as translatable, use the <code>elm_object_translatable_part_text_set()</code> and <code>elm_object_item_translatable_part_text_set()</code> functions.</p>
-<p>To set the text for a "non-default" part as translatable, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_translatable_part_text_set()</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_item_translatable_part_text_set()</span> functions.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Always provide the untranslated string as a parameter to the above functions. The EFL triggers the translation itself and re-translates the string automatically, if the system language changes.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Always provide the untranslated string as a parameter to the above functions. The EFL triggers the translation itself and re-translates the string automatically, if the system language changes.
+ </div>
<h2 id="translating" name="translating">Translating Texts Directly</h2>
<p>The process of marking texts as translatable is not applicable in some cases. For example, it does not work if you are populating a genlist, if you need plurals in the translation, or if you want to do something else than put the translation in an elementary UI component.</p>
-<p>To retrieve the translation for a given text, use the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function. The function takes as input a string (the <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the <span style="font-family: Courier New,Courier,monospace;">.po</span> file), and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field in the <span style="font-family: Courier New,Courier,monospace;">.po</span> file).</p>
+<p>To retrieve the translation for a given text, use the <code>i18n_get_text()</code> function. The function takes as input a string (the <code>msgid</code> field in the <code>.po</code> file), and returns the translation (the corresponding <code>msgstr</code> field in the <code>.po</code> file).</p>
<pre class="prettyprint">
char *i18n_get_text(const char *msgid);
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Do not modify or free the return value of the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function. It is statically allocated.</td>
-</tr>
-</tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Do not modify or free the return value of the <code>i18n_get_text()</code> function. It is statically allocated.
+ </div>
-<p>The following example shows how you can define the text translation for a genlist item, when the "Some Text" string is defined as a <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the <span style="font-family: Courier New,Courier,monospace;">.po</span> file:</p>
+<p>The following example shows how you can define the text translation for a genlist item, when the "Some Text" string is defined as a <code>msgid</code> field in the <code>.po</code> file:</p>
<pre class="prettyprint">
#include "app_i18n.h"
</pre>
<h3>Plurals</h3>
-<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function, with the untranslated text (the <span style="font-family: Courier New,Courier,monospace;">msgid</span> field) as the first parameter, the plural form of the text as the second parameter, and the quantity as the last parameter. (In English, 1 is singular and anything else is plural.)</p>
+<p>Plurals are handled through the <code>ngettext()</code> function, with the untranslated text (the <code>msgid</code> field) as the first parameter, the plural form of the text as the second parameter, and the quantity as the last parameter. (In English, 1 is singular and anything else is plural.)</p>
-<p>For example, the <span style="font-family: Courier New,Courier,monospace;">.po</span> file for French can contain the following lines (for one plural form):</p>
+<p>For example, the <code>.po</code> file for French can contain the following lines (for one plural form):</p>
<pre class="prettyprint">
msgid "%d Comment"
msgstr[1] "%d commentaires"
</pre>
-<p>The following example shows a situation where a language has several plural forms. For example, the <span style="font-family: Courier New,Courier,monospace;">.po</span> file for Polish can contain the following lines:</p>
+<p>The following example shows a situation where a language has several plural forms. For example, the <code>.po</code> file for Polish can contain the following lines:</p>
<pre class="prettyprint">
msgid "%d Comment"
msgstr[2] "%d Komentarzy"
</pre>
-<p>The index values in the <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field are defined in system-wide settings. The ones for Polish are defined in the following example. They mean that there are 3 forms (including singular). The index is 0 (singular), if the given integer n is 1. If <span style="font-family: Courier New,Courier,monospace;">(n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 | | n % 100 >= 20)</span>, the index is 1, otherwise it is 2.</p>
+<p>The index values in the <code>msgstr</code> field are defined in system-wide settings. The ones for Polish are defined in the following example. They mean that there are 3 forms (including singular). The index is 0 (singular), if the given integer n is 1. If <code>(n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 | | n % 100 >= 20)</code>, the index is 1, otherwise it is 2.</p>
<pre class="prettyprint">
"Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10> = 2 && n%10< = 4 && (n%100<10 | | n%100> = 20) ? 1 : 2;\n"
<h3>Language Changes at Runtime</h3>
-<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a <span style="font-family: Courier New,Courier,monospace;">language,changed</span> signal (a typical smart event signal), and reset their text.</p>
+<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a <code>language,changed</code> signal (a typical smart event signal), and reset their text.</p>
-<p>To handle the framework language change event in the application, add an event handler for it, and use the <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> function in the event handler code to trigger the emission of the <span style="font-family: Courier New,Courier,monospace;">language,changed</span> signal:</p>
+<p>To handle the framework language change event in the application, add an event handler for it, and use the <code>elm_language_set()</code> function in the event handler code to trigger the emission of the <code>language,changed</code> signal:</p>
<pre class="prettyprint">
static void
<h2 id="extracting" name="extracting">Extracting Messages for Translation</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a <span style="font-family: Courier New,Courier,monospace;">.pot</span> file (a PO template), while the <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> tool maintains the existing <span style="font-family: Courier New,Courier,monospace;">.po</span> files. The typical workflow is as follows:</p>
+<p>The <code>xgettext</code> tool extracts strings to translate to a <code>.pot</code> file (a PO template), while the <code>msgmerge</code> tool maintains the existing <code>.po</code> files. The typical workflow is as follows:</p>
<ul>
-<li>Run the <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool once to generate a <span style="font-family: Courier New,Courier,monospace;">.pot</span> file.</li>
-<li>When adding a new translation language, copy the <span style="font-family: Courier New,Courier,monospace;">.pot</span> file content to the <span style="font-family: Courier New,Courier,monospace;"><locale>.po</span> file and translate that file.
-<p>New runs of the <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool update the existing <span style="font-family: Courier New,Courier,monospace;">.pot</span> file and the <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> tools updates the <span style="font-family: Courier New,Courier,monospace;">.po</span> files.</p></li>
+<li>Run the <code>xgettext</code> tool once to generate a <code>.pot</code> file.</li>
+<li>When adding a new translation language, copy the <code>.pot</code> file content to the <code><locale>.po</code> file and translate that file.
+<p>New runs of the <code>xgettext</code> tool update the existing <code>.pot</code> file and the <code>msgmerge</code> tools updates the <code>.po</code> files.</p></li>
</ul>
<p>The following examples show typical calls to the tools:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">xgettext</span>:
+<li><code>xgettext</code>:
<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>
-<p>The above call extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (optional shorthand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), uses UTF-8 as the encoding, and adds comments right before the strings to the output files.</p>
+<p>The above call extracts all strings that are used inside the <code>_()</code> function (optional shorthand for <code>i18n_get_text()</code>), uses UTF-8 as the encoding, and adds comments right before the strings to the output files.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">msgmerge</span>:
+<li><code>msgmerge</code>:
<pre class="prettyprint">
msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
</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
<p>Depending on the language, the translation has a different length on the screen. In some cases, a language has a shorter construct than another. In other cases, a language can have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>
</li>
-<li id="source">Do not commit the <span style="font-family: Courier New,Courier,monospace;">.po</span> file, if only line indicators have changed
+<li id="source">Do not commit the <code>.po</code> file, if only line indicators have changed
<p>A translation block can look like this:</p>
msgstr "Cliquez ici"
</pre>
-<p>In case you insert a new line at the top of the <span style="font-family: Courier New,Courier,monospace;">some_file.c</span> file, the line indicator changes to look like this:</p>
+<p>In case you insert a new line at the top of the <code>some_file.c</code> file, the line indicator changes to look like this:</p>
<pre class="prettyprint">
#: some_file.c:44 another_file.c:41
</pre>
-<p>Obviously, in non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to the <span style="font-family: Courier New,Courier,monospace;">.po</span> files. This hampers the readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
+<p>Obviously, in non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to the <code>.po</code> files. This hampers the readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
-<p>For source control, only commit changes to <span style="font-family: Courier New,Courier,monospace;">.po</span> files when there are actual translation changes, not because line comments have changed.</p>
+<p>For source control, only commit changes to <code>.po</code> files when there are actual translation changes, not because line comments have changed.</p>
</li>
-<li id="shorthand">Use <span style="font-family: Courier New,Courier,monospace;">_()</span> as shorthand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>
+<li id="shorthand">Use <code>_()</code> as shorthand for <code>i18n_get_text()</code>
-<p>Since the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function calls are very common, the Tizen Studio provides an abbreviation for this function. You can call it simply with <span style="font-family: Courier New,Courier,monospace;">_()</span>.</p>
+<p>Since the <code>i18n_get_text()</code> function calls are very common, the Tizen Studio provides an abbreviation for this function. You can call it simply with <code>_()</code>.</p>
</li>
-<li id="sorting">Sort properly with <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>
-<p>The <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function is a string comparison tailored for sorting data for display. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span>, but sorts the data according to the current locale settings.</p>
+<li id="sorting">Sort properly with <code>strcoll()</code>
+<p>The <code>strcoll()</code> function is a string comparison tailored for sorting data for display. It works the same way as <code>strcmp()</code>, but sorts the data according to the current locale settings.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>
+<p>Use the <code>strcoll()</code> function as the comparison function for sorting the data set you are using.</p>
</li>
<li id="translators">Help the translators in their work
-<p>The PO file-based translation system is a common one and is likely to be known to translators. To provide the necessary information to help the translators in their work, it can be enough to mention its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>). For additional information, there is extensive additional documentation as well as questions and answers available on the Internet.</p>
+<p>The PO file-based translation system is a common one and is likely to be known to translators. To provide the necessary information to help the translators in their work, it can be enough to mention its name (<code>gettext</code>). For additional information, there is extensive additional documentation as well as questions and answers available on the Internet.</p>
-<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the <span style="font-family: Courier New,Courier,monospace;">.po</span> files for the translator to see them.</p>
+<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the <code>.po</code> files for the translator to see them.</p>
</li></ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<h1>Activity Recognition</h1>
<p>The activity recognizer can monitor user activities. You can <a href="#activity">detect walking and running activity</a>. You can also recognize the stationary state and activities on a moving vehicle.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can test the activity recognition functionality only on a target device. The Emulator does not support this feature.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You can test the activity recognition functionality only on a target device. The emulator does not support this feature.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Activity Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><activity_recognition.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Activity Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">wearable</a> applications), include the <code><activity_recognition.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <activity_recognition.h>
</pre>
<p>To set and unset callback functions for the activity monitor and retrieve details from the received activity data:</p>
<ol>
-<li>Create a handle for activity monitoring using the <span style="font-family: Courier New,Courier,monospace;">activity_create()</span> function:
+<li>Create a handle for activity monitoring using the <code>activity_create()</code> function:
<pre class="prettyprint">
activity_h handle;
activity_create(&handle);
</pre>
</li>
-<li>To subscribe to notifications about specific activity state changes, invoke the <span style="font-family: Courier New,Courier,monospace;">activity_start_recognition()</span> function to register a callback function.
+<li>To subscribe to notifications about specific activity state changes, invoke the <code>activity_start_recognition()</code> function to register a callback function.
<p>When specific activity data is received, the registered callback is invoked.</p>
-<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <span style="font-family: Courier New,Courier,monospace;">activity_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>
+<p>The following example starts the activity monitor to receive notifications when the <code>ACTIVITY_WALK</code> activity is detected. Any of the <code>activity_type_e</code> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <code>ACTIVITY_WALK</code> value.</p>
<pre class="prettyprint">
activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);
</pre>
<p>A device can have various physical and virtual sensors. The following table lists the sensors supported by Tizen.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">All devices do not support all sensors, so each sensor is not necessarily available on all devices. You can <a href="#sensorlistener">check whether a sensor is supported</a>. For more information, see <a href="../device/system_n.htm">System Information</a>.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ All devices do not support all sensors, so each sensor is not necessarily available on all devices. You can <a href="#sensorlistener">check whether a sensor is supported</a>. For more information, see <a href="../device/system_n.htm">System Information</a>.
+ </div>
+
+ <p align="center" class="Table"><strong>Table: Supported sensor types</strong></p>
<table>
-<caption>Table: Supported sensor types</caption>
<tbody>
-
<tr>
<th colspan="3" align="center">Supported sensor types</th>
</tr>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sensor.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications), include the <code><sensor.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <sensor.h>
</pre>
void
example_sensor_callback(sensor_h sensor, sensor_event_s *event, void *user_data)
{
- /* If a callback function is used to listen to different sensor types, it can check the sensor type */
+ /*
+ If a callback is used to listen to different sensor types,
+ it can check the sensor type
+ */
sensor_type_e type;
sensor_get_type(sensor, &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_option_h option;
sensor_recorder_create_option(&option);
-sensor_recorder_option_set_int(option, SENSOR_RECORDER_OPTION_RETENTION_PERIOD, 30 * 24); /* 720 hours (30 days) */
+/* 720 hours (30 days) */
+sensor_recorder_option_set_int(option, SENSOR_RECORDER_OPTION_RETENTION_PERIOD,
+ 30 * 24);
</pre>
</li>
<ol>
<li>Create a query.
-<p>In the following example, you get an aggregated data record per day (since <span style="font-family: Courier New,Courier,monospace">SENSOR_RECORDER_QUERY_TIME_INTERVAL</span> is set to 24 hours) and a day starts at 7 AM (not at midnight, since <span style="font-family: Courier New,Courier,monospace">SENSOR_RECORDER_QUERY_ANCHOR_TIME</span> is set to 7 AM).</p>
+<p>In the following example, you get an aggregated data record per day (since <code>SENSOR_RECORDER_QUERY_TIME_INTERVAL</code> is set to 24 hours) and a day starts at 7 AM (not at midnight, since <code>SENSOR_RECORDER_QUERY_ANCHOR_TIME</code> is set to 7 AM).</p>
<pre class="prettyprint">
sensor_recorder_query_h query;
sensor_recorder_create_query(&query);
/* 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 <span style="font-family: Courier New,Courier,monospace">sensor_recorder_read()</span> function is asynchronous. The synchronous variant is <span style="font-family: Courier New,Courier,monospace">sensor_recorder_read_sync()</span>.</p>
+<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 <span style="font-family: Courier New,Courier,monospace">example_sensor_recorder_callback()</span> callback, each record attribute can be extracted:
+<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;
<p>The linear acceleration components which correspond to the measure of the linear motion subjected on the device can be obtained by removing the gravity components from the accelerometer data.</p>
<p>The accelerometer provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
-<p class="figure">Figure: Accelerometer vector and axes</p>
+<p align="center"><strong>Figure: Accelerometer vector and axes</strong></p>
<p align="center"><img alt="Accelerometer vector and axes" src="../../images/sensor_types_accelerometer_vector.png" /></p>
<p>The accelerometer outputs 4 values: 3 Cartesian axis values and a timestamp. The accelerometer sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is moved in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).</p>
<p>The following table lists the measurement data that the accelerometer provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the accelerometer
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the accelerometer</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6<p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6<p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6<p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
</tbody>
</table>
<p>The following table provides information about the accelerometer output for a device at rest.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Accelerometer output for a device at rest
- </caption>
+ <p align="center" class="Table"><strong>Table: Accelerometer output for a device at rest</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
<p>The geomagnetic rotation vector sensor is the output of a software/hardware-based sensor fusion solution which uses the accelerometer and magnetic sensors to compute the orientation of the device. In this sensor, the computed orientation is free of any drift, but it is inaccurate compared to a sensor fusion solution using the gyroscope sensor. The geomagnetic rotation vector sensor represents the orientation of the device as a combination of an angle and an axis in which the device has rotated through a specific angle around an axis (x, y, or z).</p>
<p>The following table lists the measurement data that the geomagnetic rotation vector sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the geomagnetic rotation vector sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the geomagnetic rotation vector sensor</strong></p>
+ <table border="1" style="width: 100%">
<tbody>
<tr>
<th>Measurement</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>Accuracy</td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor_data_accuracy_e</span></td>
+ <td><code>sensor_data_accuracy_e</code></td>
<td>-</td>
<td>int</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[3]: W</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<h2 id="gravity" name="gravity">Gravity Sensor</h2>
<p>The gravity sensor is a virtual sensor derived from the 3-axis acceleration sensor. The 3-axis gravity components provide a measure of the effect of Earth's gravity observed on the device reference axes. The gravity components measured on a device vary based on the change in the device orientation, and hence they provide a measure of the rotation subjected to the device.</p>
- <p class="figure">Figure: Gravity sensor vector and axes</p>
+ <p align="center"><strong>Figure: Gravity sensor vector and axes</strong></p>
<p align="center"><img alt="Gravity sensor vector and axes" src="../../images/sensor_types_gravity_frame.png" /></p>
<p>The gravity sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The gravity sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is rotated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).</p>
<p>The following table lists the measurement data that the gravity sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the gravity sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the gravity sensor</strong></p>
+ <table border="1" style="width: 100%">
<tbody>
<tr>
<th>Measurement</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -9.8<p>Max. value = 9.8</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -9.8<p>Max. value = 9.8</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -9.8<p>Max. value = 9.8</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<h2 id="gyro" name="gyro">Gyroscope</h2>
<p>The gyroscope detects angular velocity or angular rates of a device. The 3D gyroscope data is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift.</p>
- <p class="figure">Figure: Gyroscope vector and axes</p>
+ <p align="center"><strong>Figure: Gyroscope vector and axes</strong></p>
<p align="center"><img alt="Gyroscope vector and axes" src="../../images/sensor_types_gyro_vector.png" /></p>
<p>The following table lists the measurement data that the gyroscope provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the gyroscope
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the gyroscope</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<p>The gyroscope rotation vector sensor is the output of a software/hardware-based sensor fusion solution which uses the accelerometer and gyroscope to compute the orientation of the device. In this sensor, the pitch and roll equivalent representations are free of drift while the azimuth equivalent component is allowed to drift due to the absence of the magnetic sensor. The gyroscope rotation vector sensor represents the orientation of the device as a combination of an angle and an axis in which the device has rotated through a specific angle around an axis (x, y, or z).</p>
<p>The following table lists the measurement data that the gyroscope rotation vector sensor provides.</p>
+ <p align="center" class="Table"><strong>: Measurement data detected by the gyroscope rotation vector sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the gyroscope rotation vector sensor
- </caption>
<tbody>
<tr>
<th>Measurement</th>
<th>Type</th>
- <th>Range</th>
+ <th>Range</th>
<th>Unit</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>Accuracy</td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor_data_accuracy_e</span></td>
+ <td><code>sensor_data_accuracy_e</code></td>
<td>-</td>
<td>int</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[3]: W</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<h2 id="hrm_green" name="hrm_green">Heart Rate Monitor LED Green Sensor</h2>
<p>The Heart Rate Monitor (HRM) LED green sensor measures the amount of green light that is reflected back from a person's blood vessel.</p>
<p>The following table lists the measurement data that the HRM LED green sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the HRM LED green sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED green sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: HRM green light value</td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>int</code></td>
<td>Min. value = 0 <p>Max. value = 1081216</p></td>
<td>-</td>
</tr>
<h2 id="hrm_ir" name="hrm_ir">Heart Rate Monitor LED IR Sensor</h2>
<p>The Heart Rate Monitor (HRM) LED infrared (IR) sensor measures the amount of infrared light that is reflected back from a person's blood vessel.</p>
<p>The following table lists the measurement data that the HRM LED IR sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the HRM LED IR sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED IR sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: HRM IR light value</td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>int</code></td>
<td>Min. value = 0 <p>Max. value = 1081216</p></td>
<td>-</td>
</tr>
<h2 id="hrm_red" name="hrm_red">Heart Rate Monitor LED Red Sensor</h2>
<p>The Heart Rate Monitor (HRM) LED red sensor measures the amount of red light that is reflected back from a person's blood vessel.</p>
<p>The following table lists the measurement data that the HRM LED red sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the HRM LED red sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED red sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: HRM red light value</td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>int</code></td>
<td>Min. value = 0 <p>Max. value = 1081216</p></td>
<td>-</td>
</tr>
<h2 id="hrm" name="hrm">Heart Rate Monitor Sensor</h2>
<p>The Heart Rate Monitor (HRM) sensor measures a person's heart rate in real time.</p>
<p>The following table lists the measurement data that the HRM sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the HRM sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: Beats per minute</td>
- <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+ <td><code>int</code></td>
<td>Min. value = 0 <p>Max. value = 240</p></td>
<td>-</td>
</tr>
<h2 id="humidity" name="humidity">Humidity Sensor</h2>
<p>The humidity sensor measures the relative ambient air humidity in percentage.</p>
<p>The following table lists the measurement data that the humidity sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the humidity sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the humidity sensor
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: humidity</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>100</td>
<td>%</td>
</tr>
<p>The light sensor detects the brightness of ambient light. It can be used to measure the brightness level.</p>
<p>As an example use case, the light sensor can be used to control the brightness of the screen. In a dark environment, the light sensor detects the brightness of the environment and can be used to increase the device screen backlight brightness level. In a brighter environment, the backlight brightness level is lowered to save battery power.</p>
<p>The following table lists the measurement data that the light sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the light sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the light sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: Level</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = 0 <p>Max. value = 45875</p></td>
<td>Lux</td>
</tr>
<h2 id="lin_accelerometer" name="lin_accelerometer">Linear Acceleration Sensor</h2>
<p>The linear acceleration sensor is derived from the accelerometer by excluding the gravity value, and it measures the user-driven changes in the velocity. The linear acceleration sensor is used to detect the dynamic movement of the device and analyze the user's motion profile. The 3-axes linear acceleration components provide a measure of the combined linear motion subjected to the device in the euclidean space.</p>
<p>The linear acceleration sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
- <p class="figure">Figure: User-acceleration sensor vector and axes</p>
+ <p align="center"><strong>Figure: User-acceleration sensor vector and axes</strong></p>
<p align="center"><img alt="User-acceleration sensor vector and axes" src="../../images/sensor_types_useracceleration_vector.png" /></p>
<p>The linear acceleration sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear acceleration sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is accelerated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-). The acceleration output is shown in the same direction as the user-driven force.</p>
<p>The following table lists the measurement data that the linear acceleration sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the linear acceleration sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the linear acceleration sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6 <p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6 <p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -19.6 <p>Max. value = 19.6</p> </td>
<td>m/s<sup>2</sup></td>
</tr>
<li>Nearby, strong magnetic fields, such as magnets, electric coils, or objects which contain a ferrite element</li>
</ul>
<p>The following table lists the measurement data that the magnetic sensor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the magnetic sensor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the magnetic sensor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
</tbody>
</table>
<p>The magnetic sensor uses the 3-axis Cartesian space coordinate system, as the following figure illustrates.</p>
- <p class="figure">Figure: Magnetic field vector and axes</p>
+ <p align="center"><strong>Figure: Magnetic field vector and axes</strong></p>
<p align="center"><img alt="Magnetic field vector and axes" src="../../images/sensor_types_magnetic_vector.png" /></p>
</ul>
<p>The following table lists the measurement data that the orientation sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the orientation sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the orientation sensor
- </caption>
<tbody>
<tr>
<th>Measurement</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: Azimuth</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = 0<p>Max. value = 360</p> </td>
<td>Degrees (°)</td>
</tr>
<tr>
<td>values[1]: Pitch</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -180<p>Max. value = 180</p></td>
<td>Degrees (°)</td>
</tr>
<tr>
<td>values[2]: Roll</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -90<p>Max. value = 90</p></td>
<td>Degrees (°)</td>
</tr>
<p>The angular positions are measured using a fixed frame reference (X<sub>E</sub>, Y<sub>E</sub>, Z<sub>E</sub>).</p>
- <p class="figure">Figure: Angular positions and the fixed frame reference</p>
+ <p align="center"><strong>Figure: Angular positions and the fixed frame reference</strong></p>
<p align="center"><img alt="Angular positions and the fixed frame reference" src="../../images/sensor_types_deviceorientation_frame.png" /></p>
<p>Normally, a callback function is invoked whenever a new step is detected. However, to be power-efficient, the sensor can internally accumulate its detected events while the system sleeps. In this case, the accumulated data is reported when the system wakes up, that is, the display is switched on. In addition, even though the display is not switched on explicitly, the sensor can wake up the device to deliver its accumulated data occasionally.</p>
<p>If you want to track the user's steps continuously, do not stop the sensor listener to be sure that it keeps running. If there is no application listening to the sensor, it stops counting the steps.</p>
<p>The following table lists the measurement data that the pedometer provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the pedometer
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the pedometer</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tbody>
</table>
- <p>The pedestrian state is <span style="font-family: Courier New,Courier,monospace">SENSOR_PEDOMETER_STATE_UNKNOWN</span>, <span style="font-family: Courier New,Courier,monospace">SENSOR_PEDOMETER_STATE_STOP</span>, <span style="font-family: Courier New,Courier,monospace">SENSOR_PEDOMETER_STATE_WALK</span>, or <span style="font-family: Courier New,Courier,monospace">SENSOR_PEDOMETER_STATE_RUN</span>.</p>
+ <p>The pedestrian state is <code>SENSOR_PEDOMETER_STATE_UNKNOWN</code>, <code>SENSOR_PEDOMETER_STATE_STOP</code>, <code>SENSOR_PEDOMETER_STATE_WALK</code>, or <code>SENSOR_PEDOMETER_STATE_RUN</code>.</p>
<h2 id="pressure" name="pressure">Pressure Sensor</h2>
<p>The pressure sensor measures the atmospheric pressure in the device's surrounding environment.</p>
<p>The following table lists the measurement data that the pressure sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the pressure sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the pressure sensor
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: pressure</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = 260 <p>Max. value = 1260</p></td>
<td>hPa</td>
</tr>
<p>The proximity sensor detects the presence of nearby objects in close proximity to the sensor. It can be used to measure the distance between nearby objects and the device.</p>
<p>As an example use case, the proximity sensor can be used to lock or unlock the device screen. When the device user holds the device to their ear, the proximity sensor detects the user as an object, and automatically locks the device screen. When the user moves the device away from their ear to input data, the proximity sensor determines that there are no nearby objects, and unlocks the screen.</p>
<p>The following table lists the measurement data that the proximity sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the proximity sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the proximity sensor
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: proximity</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>-</td>
<td>-</td>
</tr>
<p>The rotation vector sensor represents the orientation of the device as a combination of an angle and an axis, in which the device has rotated through a specific angle around an axis (x, y, or z). The rotation vector is the output of a software/hardware-based sensor fusion solution, which uses the accelerometer, gyroscope, and magnetic sensor as inputs to compute the orientation of the device.</p>
<p>The following table lists the measurement data that the rotation vector sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the rotation vector</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the rotation vector
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>Accuracy</td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor_data_accuracy_e</span></td>
+ <td><code>sensor_data_accuracy_e</code></td>
<td>-</td>
<td>int</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<tr>
<td>values[3]: W</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -1 <p>Max. value = 1</p> </td>
<td>-</td>
</tr>
<p>The sleep monitor tracks the user's sleep quality. Once per minute, it reports whether the user sleeps. As this sensor usually needs to track the sleep quality over several hours, it must be power-efficient and work in a batch manner. While the system sleeps, or the display is off, the sensor keeps its detected data internally. When the sensor is unable to keep more data (its internal buffer is full), it wakes up the system and flushes all collected data. When flushing, the callback function is invoked repeatedly. The timestamp of each event can be used to figure out when the user was sleeping.</p>
<p>The following table lists the measurement data that the sleep monitor provides.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the sleep monitor
- </caption>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the sleep monitor</strong></p>
+ <table border="1" style="width: 100%">
<colgroup>
<col />
<col />
</tbody>
</table>
- <p>The sleep state is <span style="font-family: Courier New,Courier,monospace">SENSOR_SLEEP_STATE_UNKNOWN</span>, <span style="font-family: Courier New,Courier,monospace">SENSOR_SLEEP_STATE_WAKE</span>, or <span style="font-family: Courier New,Courier,monospace">SENSOR_SLEEP_STATE_SLEEP</span>.</p>
+ <p>The sleep state is <code>SENSOR_SLEEP_STATE_UNKNOWN</code>, <code>SENSOR_SLEEP_STATE_WAKE</code>, or <code>SENSOR_SLEEP_STATE_SLEEP</code>.</p>
<p>Depending on the device you are using, the available raw sensors are different and the sleep detection algorithm can also differ. In addition to the sleep state field, some specific device models can provide further data, as defined by the model manufacturer.</p>
<h2 id="temperature" name="temperature">Temperature Sensor</h2>
<p>The temperature sensor measures the ambient room temperature in the device's surrounding environment.</p>
<p>The following table lists the measurement data that the temperature sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the temperature sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the temperature sensor
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: temperature</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -30 <p>Max. value = 100</p></td>
<td>℃</td>
</tr>
<h2 id="ultraviolet" name="ultraviolet">Ultraviolet Sensor</h2>
<p>The ultraviolet (UV) sensor measures the ultraviolet index. The sensor detects and provides a measure of the UV rays being exposed to the device.</p>
<p>The following table lists the measurement data that the ultraviolet sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the ultraviolet sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the ultraviolet sensor
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: uv index</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = 0 <p>Max. value = 15</p></td>
<td>uv index</td>
</tr>
<h2 id="uncal_gyro" name="uncal_gyro">Uncalibrated Gyroscope</h2>
<p>The uncalibrated gyroscope detects angular velocity or angular rates of a device. The 3D uncalibrated gyroscope sensor is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift. The uncalibrated gyroscope data also consists of drift compensation values for each axis, which can be used to subtract the drift from the detected angular rates. The values of drift for the 3 axes are obtained from the output of a software/hardware-based sensor fusion solution.</p>
<p>The following table lists the measurement data that the uncalibrated gyroscope provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the uncalibrated gyroscope</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the uncalibrated gyroscope
- </caption>
<tbody>
<tr>
<th>Measurement</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>-</td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[3]: Drift around the X axis</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[4]: Drift around the Y axis</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<tr>
<td>values[5]: Drift around the Z axis</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
<td>Degrees/s (°/s)</td>
</tr>
<li>Nearby, strong magnetic fields, such as magnets, electric coils, or objects which contain a ferrite element</li>
</ul>
<p>The following table lists the measurement data that the uncalibrated magnetic sensor provides.</p>
+ <p align="center" class="Table"><strong>Table: Measurement data detected by the uncalibrated magnetic sensor</strong></p>
<table border="1" style="width: 100%">
- <caption>
- Table: Measurement data detected by the uncalibrated magnetic sensor
- </caption>
<tbody>
<tr>
<th>Measurement</th>
</tr>
<tr>
<td>Timestamp</td>
- <td><span style="font-family: Courier New,Courier,monospace">unsigned long long</span></td>
+ <td><code>unsigned long long</code></td>
<td>Microseconds</td>
</tr>
<tr>
<td>values[0]: X</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[1]: Y</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[2]: Z</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[3]: X-axis bias</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[4]: Y-axis bias</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
<tr>
<td>values[5]: Z-axis bias</td>
- <td><span style="font-family: Courier New,Courier,monospace">float</span></td>
+ <td><code>float</code></td>
<td>μT (micro Tesla)</td>
</tr>
</tbody>
<p>You can get notifications about the in or out state and the proximity state based on the geofence defined by the user.</p></li>
<li><a href="#info">Retrieve information about created geofences</a></li>
</ul>
-<p>The geofence manager is set to <span style="font-family: Courier New,Courier,monospace">GEOFENCE_MANAGER_ERROR_NONE</span> if it is working correctly. The device can receive alerts about the geofence when a particular geofence service is started using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_start_geofence()</span> function.</p>
+<p>The geofence manager is set to <code>GEOFENCE_MANAGER_ERROR_NONE</code> if it is working correctly. The device can receive alerts about the geofence when a particular geofence service is started using the <code>geofence_manager_start_geofence()</code> function.</p>
-<p>If the user revokes a permission to use the location information, the geofence manager state is set to <span style="font-family: Courier New,Courier,monospace">GEOFENCE_MANAGER_PERMISSION_DENIED</span> and the same error is returned back to the application invoking the geofence service.</p>
+<p>If the user revokes a permission to use the location information, the geofence manager state is set to <code>GEOFENCE_MANAGER_PERMISSION_DENIED</code> and the same error is returned back to the application invoking the geofence service.</p>
-<p>Asynchronous geofence-related alerts (in or out) and event callbacks (a fence added or removed) are implemented with callback interfaces. The alerts are received using the <
span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_UNCERTAIN</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_IN</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_OUT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga266085fcc5f8fa9af62e54efe08cd912">geofence_state_e</a> enumerator.</p>
+<p>Asynchronous geofence-related alerts (in or out) and event callbacks (a fence added or removed) are implemented with callback interfaces. The alerts are received using the <
code>GEOFENCE_STATE_UNCERTAIN</code>, <code>GEOFENCE_STATE_IN</code>, and <code>GEOFENCE_STATE_OUT</code> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga266085fcc5f8fa9af62e54efe08cd912">geofence_state_e</a> enumerator.</p>
<h2 id="definition" name ="definition">Geofence Definition</h2>
<p>The geofence definition defines the parameters of a geofence.</p>
-<p>The 3 types of available geofences are geopoint, Wi-Fi, and Bluetooth. When creating the geofence, the type can be defined using the <
span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_GEOPOINT</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_WIFI</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_BT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga15a724d2959e78b49b78b877e964f513">geofence_type_e</a> enumerator.</p>
+<p>The 3 types of available geofences are geopoint, Wi-Fi, and Bluetooth. When creating the geofence, the type can be defined using the <
code>GEOFENCE_TYPE_GEOPOINT</code>, <code>GEOFENCE_TYPE_WIFI</code>, and <code>GEOFENCE_TYPE_BT</code> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga15a724d2959e78b49b78b877e964f513">geofence_type_e</a> enumerator.</p>
<p>The geopoint geofences require a geopoint and a radius, and the Wi-Fi and Bluetooth geofences require a MAC address. Based on the defined geofence type, the geofence manager creates the fence for the particular application.</p>
<h2 id="settings" name="settings">Geofence Management through My Places</h2>
<p>Tizen provides the user a way of managing the geofence places and fences through the My places application. The following figure shows the default places and supported fences.</p>
- <p class="figure">Figure: My places</p>
+ <p align="center"><strong>Figure: My places</strong></p>
<p align="center"><img alt="My places" src="../../images/geofence_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>My places controls the adding, removing, and updating of places and fences. <strong>Home</strong>, <strong>Office</strong>, and <strong>Car</strong> are the default places, and <strong>Map</strong>, <strong>Wi-Fi</strong>, and <strong>Bluetooth</strong> are the supported fence methods. <strong>Car</strong> supports only Wi-Fi and Bluetooth for a fence method.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><geofence_manager.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager</a> API, include the <code><geofence_manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <geofence_manager.h>
</pre>
<p>To start the geofence service:</p>
<ol>
-<li><p>Create a geofence manager handle using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_create()</span> function:</p>
+<li><p>Create a geofence manager handle using the <code>geofence_manager_create()</code> function:</p>
<pre class="prettyprint">
geofence_manager_h manager;
geofence_manager_create(&manager);
int place_id = -1; /* This is for creating a place */
geofence_manager_add_place(manager, "place_name", &place_id);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- A place is used to accommodate a number of geofences and is identified by a place ID. Each place can have a name. A geofence is identified by a geofence ID.
- </td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ A place is used to accommodate a number of geofences and is identified by a place ID. Each place can have a name. A geofence is identified by a geofence ID.
+ </div>
</li>
<li>Create the geofences:
<ol type="a">
geofence_manager_add_fence(manager, fence_h, &geofence_id);
</pre></li>
-<li><p>Start the geofence service using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_start()</span> function. </p>
-<p>This call is asynchronous and only initiates the process of starting the service. Once the service is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <span style="font-family: Courier New,Courier,monospace">geofence_manager_set_geofence_state_changed_cb()</span> callback.</p>
+<li><p>Start the geofence service using the <code>geofence_manager_start()</code> function. </p>
+<p>This call is asynchronous and only initiates the process of starting the service. Once the service is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <code>geofence_manager_set_geofence_state_changed_cb()</code> callback.</p>
<pre class="prettyprint">
geofence_manager_start(manager, geofence_id);
</pre></li>
-<li><p>Using the geofence service for geopoints is power consuming, so if the service is not used, stop the status alerts using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_stop()</span> function. Call the <span style="font-family: Courier New,Courier,monospace">geofence_manager_start()</span> function again if the alerts are needed.</p>
+<li><p>Using the geofence service for geopoints is power consuming, so if the service is not used, stop the status alerts using the <code>geofence_manager_stop()</code> function. Call the <code>geofence_manager_start()</code> function again if the alerts are needed.</p>
<pre class="prettyprint">
geofence_manager_stop(manager, geofence_id);
</pre></li>
-<li><p>Destroy all used resources, such as the geofence manager handle, using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_destroy()</span> function:</p>
+<li><p>Destroy all used resources, such as the geofence manager handle, using the <code>geofence_manager_destroy()</code> function:</p>
<pre class="prettyprint">
geofence_manager_destroy(manager);
manager = NULL;
</pre>
-<p>If you destroy the handle, there is no need to call the <span style="font-family: Courier New,Courier,monospace">geofence_manager_stop()</span> function to stop the service as the service is automatically stopped. Also, you do not have to unset the previously set callbacks.</p></li></ol>
+<p>If you destroy the handle, there is no need to call the <code>geofence_manager_stop()</code> function to stop the service as the service is automatically stopped. Also, you do not have to unset the previously set callbacks.</p></li></ol>
<h2 id="status" name="status">Getting the Geofence Event State</h2>
<p>To get the state of all geofence events, use the geofence event callback. The geofence event callback is invoked whenever there is a request from the user, for example, to add a geofence or to start a geofence service.</p>
<ol>
-<li><p>Register the callback using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_set_geofence_event_cb()</span> function:</p>
+<li><p>Register the callback using the <code>geofence_manager_set_geofence_event_cb()</code> function:</p>
<pre class="prettyprint">
geofence_manager_set_geofence_event_cb(manager, geofence_event, NULL);
</pre>
user_error = error;
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- This event callback is used to let the user know whether the request is successful in the server side. This event callback is invoked only in case of an asynchronous API. In case of a synchronous API, an error is immediately returned.
- </td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ This event callback is used to let the user know whether the request is successful in the server side. This event callback is invoked only in case of an asynchronous API. In case of a synchronous API, an error is immediately returned.
+ </div>
</li></ol>
<ol>
<li>Receive event-based notifications:
<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 <span style="font-family: Courier New,Courier,monospace;">geofence_manager_set_geofence_state_changed_cb()</span> function.</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">
geofence_status_h status_h;
geofence_status_create(geofence_id, &status_h);
</pre></li>
-<li><p>To get the current state, call the <span style="font-family: Courier New,Courier,monospace;">geofence_status_get_state()</span> function:</p>
+<li><p>To get the current state, call the <code>geofence_status_get_state()</code> function:</p>
<pre class="prettyprint">
geofence_state_e state;
geofence_status_get_state(status_h, &state);
</pre></li>
-<li><p>To get the duration of the current state, call the <span style="font-family: Courier New,Courier,monospace;">geofence_status_get_duration()</span> function:</p>
+<li><p>To get the duration of the current state, call the <code>geofence_status_get_duration()</code> function:</p>
<pre class="prettyprint">
int duration;
geofence_status_get_duration(status_h, &duration);
</pre>
<p>The duration is provided in seconds.</p></li>
-<li><p>When no longer needed, destroy the status handle with the <span style="font-family: Courier New,Courier,monospace;">geofence_status_destroy()</span> function:</p>
+<li><p>When no longer needed, destroy the status handle with the <code>geofence_status_destroy()</code> function:</p>
<pre class="prettyprint">
geofence_status_destroy(status_h);
</pre>
<p>To get information about the proximity state:</p>
<ol>
<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 <span style="font-family: Courier New,Courier,monospace;">geofence_manager_set_geofence_proximity_state_changed_cb()</span> function.</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">
</li>
<li>Move to ear
<p>The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.</p>
-<p class="figure">Figure: Move-to-ear event</p>
+<p align="center"><strong>Figure: Move-to-ear event</strong></p>
<p align="center"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>
<li>No move
<p>The device is not moved for a while.</p></li>
<p>The device is picked up.</p></li>
<li>Shake
<p>The device is quickly moved back and forth.</p>
-<p class="figure">Figure: Shake event</p>
+<p align="center"><strong>Figure: Shake event</strong></p>
<p align="center"><img alt="Shake event" src="../../images/shake.png" /></p></li>
<li>Snap
<p>The device is moved along a particular axis.</p>
-<p class="figure">Figure: Axes of the device</p>
+<p align="center"><strong>Figure: Axes of the device</strong></p>
<p align="center"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>
<p>The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:</p>
<ul><li>With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.</li>
<li>With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.</li></ul>
-<p class="figure">Figure: Snap events +X, +Y, and +Z</p>
+<p align="center"><strong>Figure: Snap events +X, +Y, and +Z</strong></p>
<p align="center"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The snap motion does not operate correctly if the device is tilted improperly. For example, the device must be held straight in a portrait mode for best accuracy. Similarly, when the device is tilted 90 degrees along the Z axis from the above position (+X or -X points to the earth), the snap motion in a landscape mode works best. This means that when a user lies down holding the device, the snap motion may not work accurately.</td>
- </tr>
- </tbody>
- </table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The snap motion does not operate correctly if the device is tilted improperly. For example, the device must be held straight in a portrait mode for best accuracy. Similarly, when the device is tilted 90 degrees along the Z axis from the above position (+X or -X points to the earth), the snap motion in a landscape mode works best. This means that when a user lies down holding the device, the snap motion may not work accurately.
+ </div>
</li>
<li>Tilt
<p>The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.</p>
-<p class="figure">Figure: Tilt event</p>
+<p align="center"><strong>Figure: Tilt event</strong></p>
<p align="center"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>
<li>Turn face down
<p>The device is turned over and the screen is facing downwards.</p>
-<p class="figure">Figure: Face-down event</p>
+<p align="center"><strong>Figure: Face-down event</strong></p>
<p align="center"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>
<li>Wrist up
<p>The event occurs when wrist-up gesture is performed (in case of a watch device).</p>
-<p class="figure">Figure: Wrist-up event</p>
+<p align="center"><strong>Figure: Wrist-up event</strong></p>
<p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
</ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You can test the gesture recognition functionality only on a target device. The emulator does not support this feature.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Gesture Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><gesture_recognition.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Gesture Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">wearable</a> applications), include the <code><gesture_recognition.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <gesture_recognition.h>
</pre>
<p>To set and unset callback functions for user gestures:</p>
<ol>
-<li>Create a handle for gesture detection using the <span style="font-family: Courier New,Courier,monospace;">gesture_create()</span> function:
+<li>Create a handle for gesture detection using the <code>gesture_create()</code> function:
<pre class="prettyprint">
gesture_h handle;
gesture_create(&handle);
</pre></li>
-<li><p>To subscribe to notifications about specific gesture events, invoke the <span style="font-family: Courier New,Courier,monospace;">gesture_start_recognition()</span> function to register a callback function and start gesture detection.</p>
+<li><p>To subscribe to notifications about specific gesture events, invoke the <code>gesture_start_recognition()</code> function to register a callback function and start gesture detection.</p>
<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 <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> gesture is detected. The application can use any of the <span style="font-family: Courier New,Courier,monospace;">gesture_type_e</span> 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 <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <span style="font-family: Courier New,Courier,monospace;">GESTURE_ERROR_NOT_SUPPORTED</span> value.</p>
+<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>If the default gesture option is designated, the system tries to reduce power consumption to detect the gesture. For example, the gesture is not necessarily detected while the display is switched off. Using the <
span style="font-family: Courier New,Courier,monospace;">GESTURE_OPTION_ALWAYS_ON</span> option prevents such power-saving behaviors. For more information about the gesture options, see the <span style="font-family: Courier New,Courier,monospace;">gesture_option_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">wearable</a> applications).</p></li>
+<p>If the default gesture option is designated, the system tries to reduce power consumption to detect the gesture. For example, the gesture is not necessarily detected while the display is switched off. Using the <
code>GESTURE_OPTION_ALWAYS_ON</code> option prevents such power-saving behaviors. For more information about the gesture options, see the <code>gesture_option_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">wearable</a> applications).</p></li>
-<li><p>When the registered callback function is invoked, you can retrieve the event data using the <span style="font-family: Courier New,Courier,monospace;">gesture_get_event()</span> function:</p>
+<li><p>When the registered callback function is invoked, you can retrieve the event data using the <code>gesture_get_event()</code> function:</p>
<pre class="prettyprint">
void
</pre>
<p>If the application registered multiple gestures to a single callback function, the input parameter gesture can be used to distinguish the gesture received.</p>
-<p>Some gestures can return different types of events. For example, <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE</span> can return <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_DETECTED</span> or <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_FINISHED</span>.</p>
+<p>Some gestures can return different types of events. For example, <code>GESTURE_SHAKE</code> can return <code>GESTURE_SHAKE_DETECTED</code> or <code>GESTURE_SHAKE_FINISHED</code>.</p>
-<p>In case of <span style="font-family: Courier New,Courier,monospace;">GESTURE_TILT</span>, the <span style="font-family: Courier New,Courier,monospace;">gesture_get_tilt()</span> function can be used to extract the tilting angles.</p>
+<p>In case of <code>GESTURE_TILT</code>, the <code>gesture_get_tilt()</code> function can be used to extract the tilting angles.</p>
<pre class="prettyprint">
int x;
gesture_get_tilt(data, &x, &y);
</pre></li>
-<li><p>When gesture detection is no longer needed, unset the callback functions with the <span style="font-family: Courier New,Courier,monospace;">gesture_stop_recognition()</span> function and destroy the handle with the <span style="font-family: Courier New,Courier,monospace;">gesture_release()</span> function:</p>
+<li><p>When gesture detection is no longer needed, unset the callback functions with the <code>gesture_stop_recognition()</code> function and destroy the handle with the <code>gesture_release()</code> function:</p>
<pre class="prettyprint">
gesture_stop_recognition(handle);
<li>Register a new application.
<p>You must register a new application to create new credentials.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some regions or countries do not support the registration. If your contact details contain such a region or country, you cannot register a new application successfully.
- <p><img alt="Unsupported region or country" src="../../images/here_credential_register_app_evaluation.png" /></p></td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Some regions or countries do not support the registration. If your contact details contain such a region or country, you cannot register a new application successfully.
+ <p><img alt="Unsupported region or country" src="../../images/here_credential_register_app_evaluation.png" /></p>
+ </div>
<p>The following figure shows the Evaluation plan form, which is opened when you click <strong>Try for free</strong>. Enter the required details.</p>
</li>
<li>Use the credentials in your application.
- <p>You can use the credentials in your application with the <span style="font-family: Courier New,Courier,monospace">maps_service_set_provider_key()</span> function.</p>
- <p>The HERE Maps services provides 2 values as credentials: app ID and app code. If the app ID is <span style="font-family: Courier New,Courier,monospace">XXXX</span> and the app code is <span style="font-family: Courier New,Courier,monospace">YYYY</span>, concatenate them with the "/" separator:</p>
+ <p>You can use the credentials in your application with the <code>maps_service_set_provider_key()</code> function.</p>
+ <p>The HERE Maps services provides 2 values as credentials: app ID and app code. If the app ID is <code>XXXX</code> and the app code is <code>YYYY</code>, concatenate them with the "/" separator:</p>
<pre class="prettyprint">
maps_service_h maps = NULL;
error = maps_service_set_provider_key(maps, "XXXX/YYYY")
</pre>
-<table class="note">
-<tbody>
- <tr><th class="note">Note</th></tr>
- <tr>
- <td class="note">
- According to the HERE Maps:
+
+ <div class="note">
+ <strong>Note</strong>
+ According to the HERE Maps:
<ul>
<li>The app ID uniquely identifies your application.</li>
<li>The app code is used in the authentication process to identify a session.</li>
</ul>
- </td>
- </tr>
-</tbody>
-</table>
+ </div>
</li>
</ol>
<li><a href="#track">Track routes</a></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To test the Tizen location-based services on the Emulator, provide location data (longitude and latitude) using the Event Injector.
- <p>However, satellite data is not supported on the Emulator, so GPS status data is available only on a target device.</p></td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ To test the Tizen location-based services on the emulator, provide location data (longitude and latitude) using the Event Injector.
+ <p>However, satellite data is not supported on the emulator, so GPS status data is available only on a target device.</p>
+ </div>
<p>Asynchronous location-related updates and region monitoring notifications are implemented with callback interfaces (functions whose names end with "cb").</p>
<p>You can use the location state and updates as follows:</p>
<ul>
- <li><p>If the location manager is working correctly, the location state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_SERVICE_ENABLED</span>. The device can receive notifications about location updates and accuracy changes only in this update state.</p></li>
- <li><p>If the location manager is unable to run on the requested device due to weak radio reception, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</span>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li>
- <li><p>If the user revokes a permission for the application to use location information, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ACCESS_STATE_DENIED</span>, and the location manager stops all on-going services with the application. The application can request the device user for a permission to continue the stopped service.</p></li>
+ <li><p>If the location manager is working correctly, the location state is set to <code>LOCATIONS_SERVICE_ENABLED</code>. The device can receive notifications about location updates and accuracy changes only in this update state.</p></li>
+ <li><p>If the location manager is unable to run on the requested device due to weak radio reception, the location update state is set to <code>LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</code>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li>
+ <li><p>If the user revokes a permission for the application to use location information, the location update state is set to <code>LOCATIONS_ACCESS_STATE_DENIED</code>, and the location manager stops all on-going services with the application. The application can request the device user for a permission to continue the stopped service.</p></li>
</ul>
<h2 id="method" name="method">Location Methods</h2>
<p>The location method is used to specify the desired quality of service of the location manager. For example, a location-based weather forecast application can require location-related information just to distinguish a city or a neighborhood, while a GPS navigation application can require the highest quality level to pinpoint a map location. Selecting the appropriate quality level not only helps the location manager to run the system efficiently, but also leads to a good user experience.</p>
-<p>Using the <
span style="font-family: Courier New,Courier,monospace">location_method_e</span> structure (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications) allows your application to specify the following methods of location positioning system:</p>
+<p>Using the <
code>location_method_e</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications) allows your application to specify the following methods of location positioning system:</p>
<ul>
<li>GPS, which uses the global positioning system</li>
<li>WPS, which uses the Wi-Fi positioning system</li>
<h2 id="settings" name="settings">Location Settings</h2>
<p>Tizen provides a robust way of controlling the usage of the location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies.</p>
- <p class="figure">Figure: Location settings and indicator</p>
+ <p align="center"><strong>Figure: Location settings and indicator</strong></p>
<p align="center"><img alt="Location settings and indicator" src="../../images/location_setting_and_indicator.png" /></p>
<p>The location-related functions work differently based on whether the location settings are used.</p>
<p>The <strong>GPS</strong> setting controls the Global Positioning System usage. It uses GPS satellite signals and provides accurate positioning services, generally outdoors. The <strong>Wireless networks</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p>
<p>All location settings are initially enabled, if the device supports GPS. To disable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Either the <strong>GPS</strong> or the <strong>Wireless networks</strong> setting must be enabled to retrieve the current location of the device user.</td>
- </tr>
- </tbody>
- </table>
- <p> Once the <strong>GPS</strong> or <strong>Wireless networks</strong> setting is enabled, the user can control the usage of the location data for each application separately using the privacy setting. If the privacy setting of the application is disabled, location data is no longer available for the application.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Either the <strong>GPS</strong> or the <strong>Wireless networks</strong> setting must be enabled to retrieve the current location of the device user.
+ </div>
+ <p>Once the <strong>GPS</strong> or <strong>Wireless networks</strong> setting is enabled, the user can control the usage of the location data for each application separately using the privacy setting. If the privacy setting of the application is disabled, location data is no longer available for the application.</p>
<p>The applications whose location setting is enabled can get the current and last known location of the user.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><locations.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications), include the <code><locations.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <locations.h>
</pre>
<p>To start the location service:</p>
<ol>
-<li><p>Create a location manager handle using the <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function before you use the location service.</p>
-<p>In this example, the GPS is used as the source of the position data, so the first parameter is <span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_GPS</span>. You can use other values of the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_HYBRID</span> or <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_WPS</span>. <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_HYBRID</span> uses both <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_GPS</span> and <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_WPS</span>, but the latter is less accurate.</p>
+<li><p>Create a location manager handle using the <code>location_manager_create()</code> function before you use the location service.</p>
+<p>In this example, the GPS is used as the source of the position data, so the first parameter is <code>LOCATIONS_METHOD_GPS</code>. You can use other values of the <code>location_method_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications), such as <code>LOCATIONS_METHOD_HYBRID</code> or <code>LOCATIONS_METHOD_WPS</code>. <code>LOCATIONS_METHOD_HYBRID</code> uses both <code>LOCATIONS_METHOD_GPS</code> and <code>LOCATIONS_METHOD_WPS</code>, but the latter is less accurate.</p>
<pre class="prettyprint">
location_manager_h manager;
location_manager_create(LOCATIONS_METHOD_GPS, &manager);
</pre>
<p>Each location manager is an independent service. Multiple location managers can be created in the same application to provide different services, such as GPS and Bluetooth. Callbacks are set for a given location manager and are called only if the service is started for their manager.</p></li>
-<li><p>Start the location service using the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function. This call is asynchronous and only initiates the process of starting the location manager service. Once the manager is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <span style="font-family: Courier New,Courier,monospace">location_manager_set_service_state_changed_cb()</span> function.</p>
+<li><p>Start the location service using the <code>location_manager_start()</code> function. This call is asynchronous and only initiates the process of starting the location manager service. Once the manager is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <code>location_manager_set_service_state_changed_cb()</code> function.</p>
<pre class="prettyprint">
location_manager_start(manager);
</pre></li>
-<li><p>Using the location service is power consuming, so if the service is not used, stop updating the location using the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function. Call the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function again if the update position information is needed.</p>
+<li><p>Using the location service is power consuming, so if the service is not used, stop updating the location using the <code>location_manager_stop()</code> function. Call the <code>location_manager_start()</code> function again if the update position information is needed.</p>
<pre class="prettyprint">
location_manager_stop(manager);
</pre></li>
-<li><p>At the end of the application, destroy all used resources, such as the location manager (<span style="font-family: Courier New,Courier,monospace">location_manager_destroy()</span>):</p>
+<li><p>At the end of the application, destroy all used resources, such as the location manager (<code>location_manager_destroy()</code>):</p>
<pre class="prettyprint">
location_manager_destroy(manager);
manager = NULL;
</pre>
-<p>If you destroy the handle, there is no need to call the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function to stop the service. The service is automatically stopped. Also, you do not have to unset previously set callbacks.</p></li></ol>
+<p>If you destroy the handle, there is no need to call the <code>location_manager_stop()</code> function to stop the service. The service is automatically stopped. Also, you do not have to unset previously set callbacks.</p></li></ol>
<h2 id="last_known" name="last_known">Getting the Last Known Location</h2>
ret = location_manager_set_service_state_changed_cb(manager, __state_changed_cb, NULL);
ret = location_manager_start(manager);
</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">__state_changed_cb()</span> function is a callback, which is called when the status of the location service state changes. </p>
+ <p>The <code>__state_changed_cb()</code> function is a callback, which is called when the status of the location service state changes. </p>
<pre class="prettyprint">
static location_service_state_e service_state;
static void
}
</pre>
</li>
-<li>After starting the location manager, call the <span style="font-family: Courier New,Courier,monospace">location_manager_get_last_location()</span> function to get the last location information, including the altitude, latitude, and direction:
+<li>After starting the location manager, call the <code>location_manager_get_last_location()</code> function to get the last location information, including the altitude, latitude, and direction:
<pre class="prettyprint">
double altitude;
double latitude;
<p>The function returns the last location stored in the system. When the current location is not fixed, the last location may not be the current location, but the old location.</p>
<p>Use this function instead of repeatedly requesting current locations to spare the location manager from running costly positioning systems.</p></li>
-<li>To get the current location information, call the <span style="font-family: Courier New,Courier,monospace">location_manager_get_location()</span> function after the service is enabled:
+<li>To get the current location information, call the <code>location_manager_get_location()</code> function after the service is enabled:
<pre class="prettyprint">
static void
__state_changed_cb(location_service_state_e state, void *user_data)
<h2 id="update" name="update">Getting Location Updates</h2>
<p>You can get a notification of the position update using the position update callback. The callback is invoked periodically, receiving the device's current position with every call. You can use the callback to retrieve the device position (given as coordinates) and convert it to the corresponding address.</p>
-<ol><li><p>Register the callback using the <span style="font-family: Courier New,Courier,monospace">location_manager_set_position_updated_cb()</span> function:</p>
+<ol><li><p>Register the callback using the <code>location_manager_set_position_updated_cb()</code> function:</p>
<pre class="prettyprint">
location_manager_set_position_updated_cb(manager, position_updated, 2, NULL);
</pre>
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.</td>
- </tr>
- </tbody>
- </table> </li></ol>
+
+ <div class="note">
+ <strong>Note</strong>
+ The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.
+ </div>
+ </li></ol>
<h2 id="bound" name="bound">Using Location Bounds</h2>
location_bounds_h bounds_poly;
ret = location_bounds_create_polygon(coord_list, poly_size, &bounds_poly);
</pre>
-<p>When a circular bound is needed, use the <span style="font-family: Courier New,Courier,monospace">location_bounds_create_circle()</span> function.</p></li>
+<p>When a circular bound is needed, use the <code>location_bounds_create_circle()</code> function.</p></li>
<li>To get the generated polygon bounds, register a callback function to notify you of the polygon coordinates:
<pre class="prettyprint">
}
</pre>
</li>
-<li><p>Register a callback, which is called when you enter or exit the defined region, using the <span style="font-family: Courier New,Courier,monospace">location_bounds_set_state_changed_cb()</span> function:</p>
+<li><p>Register a callback, which is called when you enter or exit the defined region, using the <code>location_bounds_set_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
location_bounds_set_state_changed_cb(bounds_poly, bounds_state_changed_cb, NULL);
</pre>
-<p>Implement the <span style="font-family: Courier New,Courier,monospace">bounds_state_changed_cb()</span> callback separately:</p>
+<p>Implement the <code>bounds_state_changed_cb()</code> callback separately:</p>
<pre class="prettyprint">
static location_boundary_state_e bound_state;
static void
}
</pre>
</li>
-<li><p>Call the <span style="font-family: Courier New,Courier,monospace">location_manager_add_boundary()</span> function to add the bounds to a location manager:</p>
+<li><p>Call the <code>location_manager_add_boundary()</code> function to add the bounds to a location manager:</p>
<pre class="prettyprint">
location_manager_add_boundary(manager, bounds_poly);
</pre>
<h2 id="satellite" name="satellite">Getting Satellite Information</h2>
<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 <span style="font-family: Courier New,Courier,monospace">location_manager_set_satellite_updated_cb()</span> function:</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 <span style="font-family: Courier New,Courier,monospace">gps_status_foreach_satellites_in_view()</span> function in the callback. Variables that store the current satellite information are updated.
+<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.
<pre class="prettyprint">
int cur_azimuth;
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>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.</td>
- </tr>
- </tbody>
- </table> </li></ol>
+ <div class="note">
+ <strong>Note</strong>
+ The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.
+ </div>
+ </li></ol>
<h2 id="track" name="track">Tracking the Route</h2>
<ol type="a"><li>
<p>To get notifications of the position and velocity updates, register the position and velocity update callbacks. The callbacks are invoked periodically, receiving the device's current position or velocity with every call.</p>
-<ul><li><p>Register the position update callback using the <span style="font-family: Courier New,Courier,monospace;">location_manager_set_position_updated_cb()</span> function:</p>
+<ul><li><p>Register the position update callback using the <code>location_manager_set_position_updated_cb()</code> function:</p>
<pre class="prettyprint">
location_manager_set_position_updated_cb(manager, position_updated, 2, NULL);
</pre></li>
-<li><p>Register the velocity update callback using the <span style="font-family: Courier New,Courier,monospace;">location_manager_set_velocity_updated_cb()</span> function:</p>
+<li><p>Register the velocity update callback using the <code>location_manager_set_velocity_updated_cb()</code> function:</p>
<pre class="prettyprint">
location_manager_set_position_updated_cb(manager, velocity_updated, 2, NULL);
<li>Receive the current information.
<p>You can get the current information about position, velocity, or location accuracy:</p>
-<ul><li>To get information about the current position (altitude, latitude, and longitude), use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_position()</span> function:
+<ul><li>To get information about the current position (altitude, latitude, and longitude), use the <code>location_manager_get_position()</code> function:
<pre class="prettyprint">
time_t timestamp;
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 <span style="font-family: Courier New,Courier,monospace;">location_manager_get_velocity()</span> function:</p>
+<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">
double climb;
location_manager_get_velocity(manager, &climb, &direction, &speed, &timestamp);
</pre></li>
-<li><p>To get information about the current accuracy level (see the <span style="font-family: Courier New,Courier,monospace;">location_accuracy_level_e</span> enumeration in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#ga4878b9a0afa5990dd2bb500850c1828b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#ga4878b9a0afa5990dd2bb500850c1828b">wearable</a> applications), and horizontal and vertical accuracy, use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_accuracy()</span> function:</p>
+<li><p>To get information about the current accuracy level (see the <code>location_accuracy_level_e</code> enumeration in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#ga4878b9a0afa5990dd2bb500850c1828b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#ga4878b9a0afa5990dd2bb500850c1828b">wearable</a> applications), and horizontal and vertical accuracy, use the <code>location_manager_get_accuracy()</code> function:</p>
<pre class="prettyprint">
location_accuracy_level_e level;
location_manager_get_accuracy(manager, &level, &horizontal, &vertical);
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_location()</span> function to get all of the above 10 values at once:</p>
+<li><p>Use the <code>location_manager_get_location()</code> function to get all of the above 10 values at once:</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>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_position()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_velocity()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_accuracy()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_location()</span></li>
+<li><code>location_manager_get_last_position()</code></li>
+<li><code>location_manager_get_last_velocity()</code></li>
+<li><code>location_manager_get_last_accuracy()</code></li>
+<li><code>location_manager_get_last_location()</code></li>
</ul>
<p>The syntax of these functions corresponds to the functions presented above.</p></li></ul></li>
<li>Get the distance.
-<p>To get a distance (in meters) between 2 points, use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_distance()</span> function. The obtained value is a great-circle distance; the shortest distance between 2 points on the sphere.</p>
+<p>To get a distance (in meters) between 2 points, use the <code>location_manager_get_distance()</code> function. The obtained value is a great-circle distance; the shortest distance between 2 points on the sphere.</p>
<p>Provide the latitude and longitude of the starting point, the latitude and longitude of the end point, and the variable to store the obtained distance.</p>
<pre class="prettyprint">
<p>The Location Manager provides the geographical location of the device for your application. You can access the user location, monitor location updates, and track the user movements within specific bounds or along a route. You can also manage the location settings, allowing the user to determine whether your application has access to location data.</p></li>
-<li><a href="maps_n.htm">Maps and Maps Service</a> <strong>in mobile applications only</strong>
+<li><a href="maps_n.htm">Maps and Maps Service</a>
<p>You can use the map services, such as geocoder, place searching, and routing. The map service requires a map provider, form which you can retrieve the required map details. Tizen currently supports the <a href="https://developer.here.com/" target="_blank">HERE Maps provider</a>.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border">
<div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Locations/Maps" target="_blank">Maps Sample Description</a></li>
</ul>
</div>
<h1>Maps and Maps Service</h1>
<p>Map service features include geocoding, reverse geocoding, place searching, route calculation, and view widgets.</p>
- <p>This feature is supported in mobile applications only.</p>
-
<p>The main Maps Service API features are:</p>
<ul>
<li>Discovering and selecting a map provider
<p>To use the Mapzen Maps, you need to <a href="mapzen_credentials_n.htm">get the Mapzen API keys</a>.</p></li>
</ul>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider's Term of Use.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider's Term of Use.
+ </div>
<h2 id="geocode">Geocodes</h2>
<p>The following geocode request types are provided:</p>
</ul>
<p>After performing the <a href="#use_search_place">place service request</a>, you receive the place search response. You can <a href="#place">parse the place search response</a> to use its details. The response consists of structured place information, comprising, for example, of a place ID, name and URL, address, geographical location and distance from the center of the search area, place category, rating, review, and image.</p>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Depending on the map provider, some types of place information can be unavailable.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Depending on the map provider, some types of place information can be unavailable.
+ </div>
<h2 id="search_route">Route Search</h2>
<p>The following route search request types are provided:</p>
<p>After performing the <a href="#use_search_route">route service request</a>, you receive the route search response. You can <a href="#route">parse the route calculation response</a> to use its details. The response consists of structured route information, comprising, for example, of a route ID, geographical coordinates of the start and destination point, route bounding box, transportation mode, and total distance and duration.</p>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Depending on the map provider, the route can be presented as a list of geographical points or segments. The segment list can also be presented as a list of geographical points or maneuvers.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Depending on the map provider, the route can be presented as a list of geographical points or segments. The segment list can also be presented as a list of geographical points or maneuvers.
+ </div>
<h2 id="response" name="response">Map Service Responses</h2>
- <p>The asynchronous map service responses are implemented with callback interfaces (functions whose names end with <span style="font-family: Courier New,Courier,monospace;">cb</span>).</p>
+ <p>The asynchronous map service responses are implemented with callback interfaces (functions whose names end with <code>cb</code>).</p>
<p>To handle the responses, you can use the map service response states:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_ERROR_NONE</span>: The map service is working correctly.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_PERMISSION_DENIED</span>: The user has revoked a permission for the application to use the map service.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NOT_SUPPORTED</span>: The map request or feature you are trying to use is not supported in the map provider.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NETWORK_UNREACHABLE</span>, <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_SERVICE_NOT_AVAILABLE</span>, or <span style="font-family: Courier New,Courier,monospace;"> MAPS_ERROR_CONNECTION_TIME_OUT</span>: The map provider cannot access the map server for various reasons.</li>
+ <li><code>MAPS_SERVICE_ERROR_NONE</code>: The map service is working correctly.</li>
+ <li><code>MAPS_ERROR_PERMISSION_DENIED</code>: The user has revoked a permission for the application to use the map service.</li>
+ <li><code>MAPS_ERROR_NOT_SUPPORTED</code>: The map request or feature you are trying to use is not supported in the map provider.</li>
+ <li><code>MAPS_ERROR_NETWORK_UNREACHABLE</code>, <code>MAPS_ERROR_SERVICE_NOT_AVAILABLE</code>, or <code> MAPS_ERROR_CONNECTION_TIME_OUT</code>: The map provider cannot access the map server for various reasons.</li>
</ul>
<h2 id="view" name="view">Map View Widget</h2>
<p>The map view widget can <a href="#maps_event">handle events</a>. The asynchronous view event responses are implemented with callback functions based on the view event type:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_GESTURE</span>: User gesture is detected over the widget.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_ACTION</span>: Predefined action occurs.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_OBJECT</span>: Event occurs on the created object.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_READY</span>: Map view widget is ready.</li>
+ <li><code>MAPS_VIEW_EVENT_GESTURE</code>: User gesture is detected over the widget.</li>
+ <li><code>MAPS_VIEW_EVENT_ACTION</code>: Predefined action occurs.</li>
+ <li><code>MAPS_VIEW_EVENT_OBJECT</code>: Event occurs on the created object.</li>
+ <li><code>MAPS_VIEW_EVENT_READY</code>: Map view widget is ready.</li>
</ul>
- <p>Each event contains various data, and you can access the data with various <span style="font-family: Courier New,Courier,monospace;">maps_view_event_data_get_XXX()</span> functions.</p>
+ <p>Each event contains various data, and you can access the data with various <code>maps_view_event_data_get_XXX()</code> functions.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the map service functionality:</p>
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Maps Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/internet</privilege>
</privileges>
</pre>
</li>
-<li><p>To use the functions and data types of the Maps Service API, include the <span style="font-family: Courier New,Courier,monospace;"><maps_service.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Maps Service API, include the <code><maps_service.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <maps_service.h>
</pre>
</li>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html">View</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><maps_view.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the View API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__MODULE.html">wearable</a> applications), include the <code><maps_view.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <maps_view.h>
</pre>
<p>To start using the map service:</p>
<ol>
-<li>The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_foreach_provider()</span> function.
+<li>The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the <code>maps_service_foreach_provider()</code> function.
<pre class="prettyprint">
static bool
_maps_service_provider_info_cb(char* maps_provider, void* user_data)
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 */
</pre>
</li>
-<li>Before you use the Maps Service API, create a Maps Service instance using the <span style="font-family: Courier New,Courier,monospace;">maps_service_create()</span> function:
+<li>Before you use the Maps Service API, create a Maps Service instance using the <code>maps_service_create()</code> function:
<pre class="prettyprint">
maps_service_h maps = NULL;
int error = maps_service_create("Maps Provider", &maps);
</pre>
</li>
-<li>Set the security key appropriate to the selected map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_set_provider_key()</span> function:
+<li>Set the security key appropriate to the selected map provider using the <code>maps_service_set_provider_key()</code> function:
<pre class="prettyprint">
error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
</pre>
</li>
-<li>Check which services are supported by the selected map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_service_supported()</span> function:
+<li>Check which services are supported by the selected map provider using the <code>maps_service_provider_is_service_supported()</code> function:
<pre class="prettyprint">
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 <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">maps_service_e</a> enumerator.</p>
+<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>
-<li>Optionally, check which data features are available for the desired services using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function:
+<li>Optionally, check which data features are available for the desired services using the <code>maps_service_provider_is_data_supported()</code> function:
<pre class="prettyprint">
/* Check whether route path data is supported */
error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH, &supported);
/* 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>
-<p>To check the availability of other data features, follow the same approach using the keys from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">maps_service_data_e</a> enumerator.</p>
+<p>To check the availability of other data features, follow the same approach using the keys from the <code>maps_service_data_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">wearable</a> applications).</p>
</li>
-<li><p>Set general preferences, such as language and distance units, using the <span style="font-family: Courier New,Courier,monospace;">maps_service_set_preference()</span> function:</p>
+<li><p>Set general preferences, such as language and distance units, using the <code>maps_service_set_preference()</code> function:</p>
<pre class="prettyprint">
/* Create a preference set instance */
maps_preference_h preference = NULL;
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre>
-<p>Optionally, you can set the maximum amount of search results and a default country code using the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_max_results()</span> and <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_country_code()</span> functions.</p>
-<p>To set specific preferences for the map provider, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with key-value pairs, defined in the appropriate map provider documentation.</p>
+<p>Optionally, you can set the maximum amount of search results and a default country code using the <code>maps_preference_set_max_results()</code> and <code>maps_preference_set_country_code()</code> functions.</p>
+<p>To set specific preferences for the map provider, use the <code>maps_preference_set_property()</code> function with key-value pairs, defined in the appropriate map provider documentation.</p>
<p>To get the preferences currently applied in the map provider, use the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_distance_unit()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_language()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_max_results()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_country_code()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get()</span> and
- <span style="font-family: Courier New,Courier,monospace;">maps_preference_foreach_property()</span>
+ <li><code>maps_preference_get_distance_unit()</code></li>
+ <li><code>maps_preference_get_language()</code></li>
+ <li><code>maps_preference_get_max_results()</code></li>
+ <li><code>maps_preference_get_country_code()</code></li>
+ <li><code>maps_preference_get()</code> and
+ <code>maps_preference_foreach_property()</code>
<p>These 2 functions retrieve the map provider-specific preferences not defined in the Maps Service API.</p></li>
</ul>
</li>
</ol>
-<h2 id="geocode" name="geocode">Using Geocode and Reverse Geocode Services</h2>
+<h2 id="use_geocode" name="use_geocode">Using Geocode and Reverse Geocode Services</h2>
<p>To retrieve a geocode of a specified place, or the place information corresponding to given geographic coordinates, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
<p>To retrieve a geocode:</p>
<ol>
<li>Request the geocode:
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode()</span> function for a request based on a free-formed address:
+<ul><li>Use the <code>maps_service_geocode()</code> function for a request based on a free-formed address:
<pre class="prettyprint">
/* Search for geocode of the Samsung's campus "Digital City" in Suwon */
error = maps_service_geocode(maps, "Suwon, Digital City", preference,
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode_inside_area()</span> function for a request inside a specified area:
+<li>Use the <code>maps_service_geocode_inside_area()</code> function for a request inside a specified area:
<pre class="prettyprint">
maps_area_h bounds = NULL;
-/* Use maps_area_create_rectangle() or maps_area_create_circle() to create geographic bounds for geocoding */
+/*
+ Use maps_area_create_rectangle() or maps_area_create_circle()
+ to create geographic bounds for geocoding
+*/
/* 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 */
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode_by_structured_address()</span> function for a request for a place, specified as a structured address:
+<li>Use the <code>maps_service_geocode_by_structured_address()</code> function for a request for a place, specified as a structured address:
<pre class="prettyprint">
maps_address_h address = NULL;
/* Use maps_address_create() to create an instance of an address */
-/* Then use maps_address_set_XXX() to initialize the address with the desired values */
+/* 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>
</li></ul></li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_geocode_cb()</span> callback to receive the service response:
+<li>Implement the <code>__maps_service_geocode_cb()</code> callback to receive the service response:
<pre class="prettyprint">
static bool
__maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total,
<p>To retrieve a reverse geocode:</p>
<ol>
-<li>To retrieve a reverse geocode of specified geographic coordinates, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode()</span> function:
+<li>To retrieve a reverse geocode of specified geographic coordinates, use the <code>maps_service_reverse_geocode()</code> function:
<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 */
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_reverse_geocode_cb()</span> callback to receive the service response:
+<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 */
</ol>
-<h2 id="search_place" name="search_place">Using the Place Search Service</h2>
+<h2 id="use_search_place" name="use_search_place">Using the Place Search Service</h2>
<p>To search for a place with a diversity of search parameters, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
<li>To search for a place:
<ol>
<li>Search for a place:
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place()</span> function for a search within a specified distance around the center coordinates:
+<ul><li>Use the <code>maps_service_search_place()</code> function for a search within a specified distance around the center coordinates:
<pre class="prettyprint">
maps_coordinates_h position = NULL;
/* 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 */
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_area()</span> function for a search for a place within a specified geographic boundary:
+<li>Use the <code>maps_service_search_place_by_area()</code> function for a search for a place within a specified geographic boundary:
<pre class="prettyprint">
maps_area_h boundary = NULL;
-/* Create the boundary with maps_area_create_rectangle() or maps_area_create_circle() */
+/*
+ Create the boundary with maps_area_create_rectangle()
+ or maps_area_create_circle()
+*/
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 */
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_address()</span> function for a search for a place based on an address within a specified geographic boundary:
+<li>Use the <code>maps_service_search_place_by_address()</code> function for a search for a place based on an address within a specified geographic boundary:
<pre class="prettyprint">
maps_area_h boundary = NULL;
-/* Create the boundary with maps_area_create_rectangle() or maps_area_create_circle() */
+/*
+ Create the boundary with maps_area_create_rectangle()
+ 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 */
</pre>
</li></ul></li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_place_cb()</span> callback to receive the service response:
+<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 */
<li>To search for a list of places within a boundary, and get detailed information of a particular place:
<ol>
<li>Search for a place list:
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_list()</span> function for a search within a specified distance around the center coordinates:
+<ul><li>Use the <code>maps_service_search_place_list()</code> function for a search within a specified distance around the center coordinates:
<pre class="prettyprint">
maps_area_h boundary = NULL;
-/* Create the boundary with maps_area_create_rectangle() or maps_area_create_circle() */
+/*
+ Create the boundary with maps_area_create_rectangle()
+ or maps_area_create_circle()
+*/
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 */
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_place_list_cb()</span> callback to receive the place list:
+<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);
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_details_cb()</span> callback to receive the individual places within the place list:
+<li>Implement the <code>__maps_place_details_cb()</code> callback to receive the individual places within the place list:
<pre class="prettyprint">
static bool
__maps_place_details_cb(int index, maps_place_h place, void *user_data)
char *place_uri = NULL;
maps_place_get_uri(place, &place_uri);
- /* Do not release the place handle, because it is just a reference to the list data */
+ /*
+ Do not release the place handle,
+ because it is just a reference to the list data
+ */
return true;
}
</ul></li>
<li>Get the place details:
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_get_place_details()</span> function to retrieve the place details:
+<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 */
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_get_place_details_cb()</span> callback to receive the details:
+<li>Implement the <code>__maps_service_get_place_details_cb()</code> callback to receive the details:
<pre class="prettyprint">
static void
__maps_service_get_place_details_cb(maps_error_e result, int request_id,
</li>
</ul>
-<h2 id="search_route" name="search_route">Using the Routing Service</h2>
+<h2 id="use_search_route" name="use_search_route">Using the Routing Service</h2>
<p>To query a route from point A to point B, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
<p>To query a route:</p>
<ol>
<li>Query the route:
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route()</span> function for a route from one set of geographic coordinates to another:
+<ul><li>Use the <code>maps_service_search_route()</code> function for a route from one set of geographic coordinates to another:
<pre class="prettyprint">
maps_coordinates_h origin = NULL, destination = NULL;
/* 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 */
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_waypoints()</span> function for a route passing through a specified set of waypoints:
+<li>Use the <code>maps_service_search_route_waypoints()</code> function for a route passing through a specified set of waypoints:
<pre class="prettyprint">
/* Specify the number of waypoints */
const int waypoint_num = 5;
/* 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></ul></li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_route_cb()</span> callback to receive the service response:
+<li>Implement the <code>__maps_service_search_route_cb()</code> callback to receive the service response:
<pre class="prettyprint">
static bool
__maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total,
<h2 id="cancel" name="cancel">Canceling the Service Request</h2>
-<p>To cancel a geocode, place search, or routing request, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_cancel_request()</span> function:</p>
+<p>To cancel a geocode, place search, or routing request, use the <code>maps_service_cancel_request()</code> function:</p>
<pre class="prettyprint">
/* Cancel the request with a specified ID */
error = maps_service_cancel_request(maps, request_id);
<h2 id="address" name="address">Recognizing the Address Information</h2>
-<p>The result of the <a href="#geocode">reverse geocode request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode()</span>) is retrieved from the map service using the <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode_cb()</span> callback. The result is structured address data of the specified place.</p>
+<p>The result of the <a href="#geocode">reverse geocode request</a> (<code>maps_service_reverse_geocode()</code>) is retrieved from the map service using the <code>maps_service_reverse_geocode_cb()</code> callback. The result is structured address data of the specified place.</p>
<p>Parse the address information using the following functions:</p>
<pre class="prettyprint">
/* Obtain the building number */
</pre>
<p>Similarly, you can get other address features using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_district()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_city()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_state()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country_code()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_county()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_postal_code()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_freetext()</span></li>
+ <li><code>maps_address_get_district()</code></li>
+ <li><code>maps_address_get_city()</code></li>
+ <li><code>maps_address_get_state()</code></li>
+ <li><code>maps_address_get_country()</code></li>
+ <li><code>maps_address_get_country_code()</code></li>
+ <li><code>maps_address_get_county()</code></li>
+ <li><code>maps_address_get_postal_code()</code></li>
+ <li><code>maps_address_get_freetext()</code></li>
</ul>
<h2 id="place" name="place">Recognizing the Place Information</h2>
-<p>The result of the <a href="#search_place">place search request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_search_place()</span>, <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_area()</span>, or <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_address()</span>) is retrieved from the map service using multiple iterations of the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_cb()</span> callback. The result is an instance of place data.</p>
+<p>The result of the <a href="#search_place">place search request</a> (<code>maps_service_search_place()</code>, <code>maps_service_search_place_by_area()</code>, or <code>maps_service_search_place_by_address()</code>) is retrieved from the map service using multiple iterations of the <code>maps_service_search_place_cb()</code> callback. The result is an instance of place data.</p>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Different map providers are capable of providing different sets of place data features. Some map providers can extend the place data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
- <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#start">check which data features are available</a> in your map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function.</p>
- </td>
- </tr>
-</tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Different map providers are capable of providing different sets of place data features. Some map providers can extend the place data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
+
+ <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#start">check which data features are available</a> in your map provider using the <code>maps_service_provider_is_data_supported()</code> function.</p>
+ </div>
<p>To parse place data:</p>
-<ol><li><p>To get the place information features, such as place name, location, and rating, use the following functions with a <span style="font-family: Courier New,Courier,monospace;">maps_place_h</span> place handle:</p>
+<ol><li><p>To get the place information features, such as place name, location, and rating, use the following functions with a <code>maps_place_h</code> place handle:</p>
<ul>
-<li>To obtain the place name, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_name()</span> function:
+<li>To obtain the place name, use the <code>maps_place_get_name()</code> function:
<pre class="prettyprint">
/* Obtain the place name */
char *name = NULL;
</pre>
</li>
-<li>To obtain the place location, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_location()</span> function:
+<li>To obtain the place location, use the <code>maps_place_get_location()</code> function:
<pre class="prettyprint">
/* Obtain the place location */
maps_coordinates_h location = NULL;
</pre>
</li>
-<li>To obtain the place rating, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_rating()</span> function:
+<li>To obtain the place rating, use the <code>maps_place_get_rating()</code> function:
<pre class="prettyprint">
/* Obtain the place rating */
maps_place_rating_h rating = NULL;
<p>To obtain other place features, follow the same approach using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_id()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_address()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_distance()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_uri()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></li>
+ <li><code>maps_place_get_id()</code></li>
+ <li><code>maps_place_get_address()</code></li>
+ <li><code>maps_place_get_distance()</code></li>
+ <li><code>maps_place_get_uri()</code></li>
+ <li><code>maps_place_get_supplier_link()</code></li>
+ <li><code>maps_place_get_related_link()</code></li>
</ul>
</li>
<li><p>To get lists of place information features, such as categories, reviews, and attributes, use the following iterating functions:</p>
<ol type="a">
-<li>To obtain a list of place categories, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_category()</span> function:
+<li>To obtain a list of place categories, use the <code>maps_place_foreach_category()</code> function:
<pre class="prettyprint">
/* Obtain a list of place categories */
error = maps_place_foreach_category(place, __maps_place_categories_cb, user_data);
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_categories_cb()</span> callback:
+<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 */
</ol>
<p>To obtain other place feature lists, follow the same approach using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_attribute()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_contact()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_editorial()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_image()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_review()</span></li>
+ <li><code>maps_place_foreach_attribute()</code></li>
+ <li><code>maps_place_foreach_contact()</code></li>
+ <li><code>maps_place_foreach_editorial()</code></li>
+ <li><code>maps_place_foreach_image()</code></li>
+ <li><code>maps_place_foreach_review()</code></li>
</ul></li>
<li><p>To get the extra properties that some map providers provide to extend the place data features defined in the Maps Service API:</p>
<ol type="a">
-<li>To iterate through the retrieved extra properties, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_property()</span> function:
+<li>To iterate through the retrieved extra properties, use the <code>maps_place_foreach_property()</code> function:
<pre class="prettyprint">
/* Obtain the map provider-specific place data properties */
error = maps_place_foreach_property(place, __maps_place_properties_cb, user_data);
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_properties_cb()</span> callback:
+<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 */
<h2 id="route" name="route">Recognizing the Route Information</h2>
-<p>The result of the <a href="#search_route">route calculation request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_search_route()</span> or <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_waypoints()</span>) is retrieved from the map service using multiple iterations of the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_cb()</span> callback. The result is an instance of route data.</p>
+<p>The result of the <a href="#search_route">route calculation request</a> (<code>maps_service_search_route()</code> or <code>maps_service_search_route_waypoints()</code>) is retrieved from the map service using multiple iterations of the <code>maps_service_search_route_cb()</code> callback. The result is an instance of route data.</p>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Different map providers are capable of providing different sets of route data features. Some map providers can extend the route data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
+
+ <div class="note">
+ <strong>Note</strong>
+ Different map providers are capable of providing different sets of route data features. Some map providers can extend the route data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
- <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#start">check which data features are available</a> in your map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function.</p>
- </td>
- </tr>
- </tbody>
- </table>
+ <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#start">check which data features are available</a> in your map provider using the <code>maps_service_provider_is_data_supported()</code> function.</p>
+ </div>
<p>To parse route data:</p>
-<ol><li><p>To get the route information features, such as route ID, origin, destination, and total distance, use the following functions with a <span style="font-family: Courier New,Courier,monospace;">maps_route_h</span> place handle:</p>
+<ol><li><p>To get the route information features, such as route ID, origin, destination, and total distance, use the following functions with a <code>maps_route_h</code> place handle:</p>
<ul>
-<li>To obtain the route ID, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_route_id()</span> function:
+<li>To obtain the route ID, use the <code>maps_route_get_route_id()</code> function:
<pre class="prettyprint">
/* Obtain the route ID */
char *id = NULL;
</pre>
</li>
-<li>To obtain the route origin and destination, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_origin()</span> and <span style="font-family: Courier New,Courier,monospace;">maps_route_get_destination()</span> functions:
+<li>To obtain the route origin and destination, use the <code>maps_route_get_origin()</code> and <code>maps_route_get_destination()</code> functions:
<pre class="prettyprint">
/* Obtain the route origin and destination */
maps_coordinates_h origin = NULL, destination = NULL;
</pre>
</li>
-<li>To obtain the route total distance, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_total_distance()</span> function:
+<li>To obtain the route total distance, use the <code>maps_route_get_total_distance()</code> function:
<pre class="prettyprint">
/* Obtain the total route distance */
double total_distance = .0;
</ul>
<p>To obtain other route features, follow the same approach using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_bounding_box()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_transport_mode()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_total_duration()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_distance_unit()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></li>
+ <li><code>maps_route_get_bounding_box()</code></li>
+ <li><code>maps_route_get_transport_mode()</code></li>
+ <li><code>maps_route_get_total_duration()</code></li>
+ <li><code>maps_route_get_distance_unit()</code></li>
+ <li><code>maps_place_get_supplier_link()</code></li>
+ <li><code>maps_place_get_related_link()</code></li>
</ul></li>
<li>
<p>To get lists of route information features, such as path or list of segments, use the following iterating functions:</p>
<ul>
-<li>To obtain the list of geographic points defining the route, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_path()</span> function:
+<li>To obtain the list of geographic points defining the route, use the <code>maps_route_foreach_path()</code> function:
<pre class="prettyprint">
error = maps_route_foreach_path(route, __maps_route_path_cb, user_data);
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre>
-<p>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_path_cb()</span> callback:</p>
+<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 */
</pre>
</li>
-<li>To obtain the list of route segments, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_segment()</span> function:
+<li>To obtain the list of route segments, use the <code>maps_route_foreach_segment()</code> function:
<pre class="prettyprint">
error = maps_route_foreach_segment(route, __maps_route_segment_cb, user_data);
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre>
-<p>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_segment_cb()</span> callback:</p>
+<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><p>To get the extra properties that some map providers provide to extend the route data features defined in the Maps Service API:</p>
<ol type="a">
-<li>To iterate through the retrieved extra properties, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_property()</span> function:
+<li>To iterate through the retrieved extra properties, use the <code>maps_route_foreach_property()</code> function:
<pre class="prettyprint">
/* Obtain the map provider-specific route data properties */
error = maps_route_foreach_property(route, __maps_route_properties_cb, user_data);
</pre>
</li>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_properties_cb()</span> callback:
+<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 */
<h2 id="preference" name="preference">Customizing the Service Requests</h2>
-<p>All Maps Service API requests can be customized with additional preferences. Preparing and sending the <span style="font-family: Courier New,Courier,monospace;">preference</span> parameter with the service request allows the map provider to generate more accurate results.</p>
+<p>All Maps Service API requests can be customized with additional preferences. Preparing and sending the <code>preference</code> parameter with the service request allows the map provider to generate more accurate results.</p>
<p>To customize the service request:</p>
<ul>
- <li>To prepare preferences for the place search service, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with the following keys:
+ <li>To prepare preferences for the place search service, use the <code>maps_preference_set_property()</code> function with the following keys:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_TYPE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_SORT_BY</span></li>
+ <li><code>MAPS_PLACE_FILTER_TYPE</code></li>
+ <li><code>MAPS_PLACE_FILTER_SORT_BY</code></li>
</ul>
<p>The example from <a href="#search_place">Using the Place Search Service</a> can be modified as follows to include the customized preferences:</p>
<pre class="prettyprint">
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 */
<li>To prepare preferences for the routing service, use the following functions:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_optimization()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_transport_mode()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature_weight()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature()</span></li>
+ <li><code>maps_preference_set_route_optimization()</code></li>
+ <li><code>maps_preference_set_route_transport_mode()</code></li>
+ <li><code>maps_preference_set_route_feature_weight()</code></li>
+ <li><code>maps_preference_set_route_feature()</code></li>
</ul>
- <p>You can also use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with the following keys:</p>
+ <p>You can also use the <code>maps_preference_set_property()</code> function with the following keys:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_CIRCLE_AREA_TO_AVOID</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_RECT_AREA_TO_AVOID</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_BOUNDING_BOX</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_RETRIEVAL</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_GEOMETRY</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_RETRIEVAL</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_REALTIME_TRAFFIC</span></li>
+ <li><code>MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID</code></li>
+ <li><code>MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID</code></li>
+ <li><code>MAPS_ROUTE_CIRCLE_AREA_TO_AVOID</code></li>
+ <li><code>MAPS_ROUTE_RECT_AREA_TO_AVOID</code></li>
+ <li><code>MAPS_ROUTE_GEOMETRY_BOUNDING_BOX</code></li>
+ <li><code>MAPS_ROUTE_GEOMETRY_RETRIEVAL</code></li>
+ <li><code>MAPS_ROUTE_INSTRUCTION_GEOMETRY</code></li>
+ <li><code>MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX</code></li>
+ <li><code>MAPS_ROUTE_INSTRUCTION_RETRIEVAL</code></li>
+ <li><code>MAPS_ROUTE_REALTIME_TRAFFIC</code></li>
</ul>
<p>The example from <a href="#search_route">Using the Routing Service</a> can be modified as follows to include the customized preferences:</p>
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>
</li>
</ul>
-<p>If your map provider requires any specific preferences, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with key-value pairs defined in the appropriate map provider documentation.</p>
+<p>If your map provider requires any specific preferences, use the <code>maps_preference_set_property()</code> function with key-value pairs defined in the appropriate map provider documentation.</p>
<h2 id="maps_view" name="maps_view">Using the Map View</h2>
<p>To use the map view:</p>
<ol>
-<li>Before you use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html">View</a> API, create a map view instance using the <span style="font-family: Courier New,Courier,monospace;">maps_view_create()</span> function:
+<li>Before you use the View API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__MODULE.html">wearable</a> applications), create a map view instance using the <code>maps_view_create()</code> function:
<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)
</li>
<li>Set the map view properties:
-<ul><li>Set the map view type with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_type()</span> function.
-<p>For other available types, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html#ga379898d515d81cf500a814571524f106">_maps_view_type_e</a> enumerator.</p>
+<ul><li>Set the map view type with the <code>maps_view_set_type()</code> function.
+<p>For other available types, see the <code>_maps_view_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__MODULE.html#ga379898d515d81cf500a814571524f106">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__MODULE.html#ga379898d515d81cf500a814571524f106">wearable</a> applications).</p>
<pre class="prettyprint">
error = maps_view_set_type(maps_view, MAPS_VIEW_TYPE_NORMAL);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the 3D building of the map view with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_buildings_enabled()</span> function:
+<li>Set the 3D building of the map view with the <code>maps_view_set_buildings_enabled()</code> function:
<pre class="prettyprint">
error = maps_view_set_buildings_enabled(maps_view, true);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the map view traffic information with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_traffic_enabled()</span> function:
+<li>Set the map view traffic information with the <code>maps_view_set_traffic_enabled()</code> function:
<pre class="prettyprint">
error = maps_view_set_traffic_enabled(maps_view, true);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the map view scalebar with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_scalebar_enabled()</span> function:
+<li>Set the map view scalebar with the <code>maps_view_set_scalebar_enabled()</code> function:
<pre class="prettyprint">
error = maps_view_set_scalebar_enabled(maps_view, true);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the map view language with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_language()</span> function:
+<li>Set the map view language with the <code>maps_view_set_language()</code> function:
<pre class="prettyprint">
error = maps_view_set_language(maps_view, "eng");
if (error != MAPS_ERROR_NONE)
</li></ul></li>
<li>Set the map view location and size:
-<p>Set the map view location with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_screen_location()</span> function:</p>
+<p>Set the map view location with the <code>maps_view_set_screen_location()</code> function:</p>
<pre class="prettyprint">
error = maps_view_set_screen_location(maps_view, 0, 100, 500, 1000);
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre>
-<p>You can also set the location with the <span style="font-family: Courier New,Courier,monospace;">maps_view_move()</span> and <span style="font-family: Courier New,Courier,monospace;">maps_view_resize()</span> functions:</p>
+<p>You can also set the location with the <code>maps_view_move()</code> and <code>maps_view_resize()</code> functions:</p>
<pre class="prettyprint">
error = maps_view_move(0, 100);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the map view visibility with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_visibility()</span> function:
+<li>Set the map view visibility with the <code>maps_view_set_visibility()</code> function:
<pre class="prettyprint">
error = maps_view_set_visibility(maps_view, true);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>Set the map view center with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_center()</span> function:
+<li>Set the map view center with the <code>maps_view_set_center()</code> function:
<pre class="prettyprint">
maps_coordinates_h maps_coord = NULL;
</pre>
</li>
-<li>Set the map view zoom level with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_zoom_level()</span> function:
+<li>Set the map view zoom level with the <code>maps_view_set_zoom_level()</code> function:
<pre class="prettyprint">
error = maps_view_set_zoom_level(maps_view, 12);
if (error != MAPS_ERROR_NONE)
</pre>
</li>
-<li>When no longer needed, destroy the map view instance with the <span style="font-family: Courier New,Courier,monospace;">maps_view_destroy()</span> function:
+<li>When no longer needed, destroy the map view instance with the <code>maps_view_destroy()</code> function:
<pre class="prettyprint">
maps_view_destroy(maps_view);
</pre>
<h2 id="maps_object" name="maps_object">Creating Map View Objects</h2>
<p>You can create polyline, polygon, and marker objects for the map view.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Before you use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__OBJECT__MODULE.html">View Object</a> API, create a map view object instance.</td>
- </tr>
- </tbody>
- </table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Before you use the View Object API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__OBJECT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__OBJECT__MODULE.html">wearable</a> applications), create a map view object instance.
+ </div>
<p>To create a map view object:</p>
/* Error handling */
</pre></li>
-<li>To create a marker with the <span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_MARKER_PIN</span> type:
+<li>To create a marker with the <code>MAPS_VIEW_MARKER_PIN</code> type:
<pre class="prettyprint">
maps_view_object_h object = NULL;
maps_coordinates_h coord = NULL;
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>
-<p>You can also create the <span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_MARKER_STICKER</span> type marker.</p>
+<p>You can also create the <code>MAPS_VIEW_MARKER_STICKER</code> type marker.</p>
</li>
</ul>
</li>
-<li>Add the object instance to the map view with the <span style="font-family: Courier New,Courier,monospace;">maps_view_add_object()</span> function:
+<li>Add the object instance to the map view with the <code>maps_view_add_object()</code> function:
<pre class="prettyprint">
error = maps_view_add_object(maps_view, object);
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre></li>
-<li>When no longer needed, remove the instance with the <span style="font-family: Courier New,Courier,monospace;">maps_view_remove_object()</span> function:
+<li>When no longer needed, remove the instance with the <code>maps_view_remove_object()</code> function:
<pre class="prettyprint">
maps_view_remove_object(maps_view, object);
</pre></li>
<h2 id="maps_event" name="maps_event">Managing Map View Events</h2>
<p>To handle map view events:</p>
-<ol><li>Register an event callback with the <span style="font-family: Courier New,Courier,monospace;">maps_view_set_event_cb()</span> function.
+<ol><li>Register an event callback with the <code>maps_view_set_event_cb()</code> function.
<p>In the second parameter, define the type of the event you want to receive:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_GESTURE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_ACTION</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_OBJECT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MAPS_VIEW_EVENT_READY</span></li>
+<li><code>MAPS_VIEW_EVENT_GESTURE</code></li>
+<li><code>MAPS_VIEW_EVENT_ACTION</code></li>
+<li><code>MAPS_VIEW_EVENT_OBJECT</code></li>
+<li><code>MAPS_VIEW_EVENT_READY</code></li>
</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 */
+ /* Handle the obtained event */
}
</pre></li>
-<li>Within the callback, access the event data with various <span style="font-family: Courier New,Courier,monospace;">maps_view_event_data_get_XXX()</span> functions of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__EVENT__DATA__MODULE.html">View Event Data</a> API.
+<li>Within the callback, access the event data with various <code>maps_view_event_data_get_XXX()</code> functions of the View Event Data API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__EVENT__DATA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__EVENT__DATA__MODULE.html">wearable</a> applications).
</li>
-<li>When no longer needed, unset the callback with the <span style="font-family: Courier New,Courier,monospace;">maps_view_unset_event_cb()</span> function:
+<li>When no longer needed, unset the callback with the <code>maps_view_unset_event_cb()</code> function:
<pre class="prettyprint">
error = maps_view_unset_event_cb(maps_view, MAPS_VIEW_EVENT_GESTURE);
if (error != MAPS_ERROR_NONE)
<h1>Getting a Mapzen API Key</h1>
<p>Mapzen products help you put a map anywhere, search and route the planet, and try a world of open data. They are built from open-source tools that are packaged into a Web service and hosted on the Mapzen servers. If you want to use Mapzen services, you must create a Mapzen developer account and a valid API key, and keep your requests to the service within certain rate limits.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Mapzen products are available for any use, including commercial purposes. You must follow the <a href="https://mapzen.com/rights/" target="_blank">attribution requirements</a> for the data source, and also provide acknowledgment to Mapzen if you are using these Web services.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Mapzen products are available for any use, including commercial purposes. You must follow the <a href="https://mapzen.com/rights/" target="_blank">attribution requirements</a> for the data source, and also provide acknowledgment to Mapzen if you are using these Web services.
+ </div>
<p>Mapzen developer account authentication is made through <a href="https://github.com" target="_blank">GitHub</a>, which is a Web site that enables people to collaborate on a project. You need a GitHub account to create a Mapzen developer account, as there is currently no other form of authentication.</p>
<li>Optionally, give the key a name so you can remember the purpose of the project.</li>
</ol>
-<p>To use the Mapzen API key in your application, set it with the <span style="font-family: Courier New,Courier,monospace">maps_service_set_provider_key()</span> function:</p>
+<p>To use the Mapzen API key in your application, set it with the <code>maps_service_set_provider_key()</code> function:</p>
<pre class="prettyprint">
maps_service_h maps = NULL;
<p>All the projects used to build the Mapzen-hosted services are open source. If you want to try Mapzen products, start with the hosted services to see if they fit your work flow needs. If you later decide that you need additional customizations or higher capacity, consider installing the open-source code used to build Mapzen services on your own servers.</p>
-<p>If you find a problem, need higher limits, or have enhancement suggestions for Mapzen products, contact <a href="mailto:hello@mapzen.com" target="_top">hello@mapzen.com.</a>.</p>
+<p>If you find a problem, need higher limits, or have enhancement suggestions for Mapzen products, contact <a href="mailto:hello@mapzen.com" target="_top">hello@mapzen.com</a>.</p>
<p>The service limitations when using a Mapzen API key:</p>
<li>Tizen 2.4 and Higher for Mobile</li>
<li>Tizen 2.3.1 and Higher for Wearable</li>
</ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL API for Wearable Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Wearable Native</a></li>
- </ul>
</div></div>
</div>
<p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device's internal camera and keep images on your target device.</p>
- <p class="figure">Figure: Camera image examples</p>
+ <p align="center"><strong>Figure: Camera image examples</strong></p>
<p align="center"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
<p>The main features of the Camera API include:</p>
<li>Configuring the camera and its callbacks
<p>You can <a href="#configuring_callback">configure the camera</a> and set the camera and auto-focus callbacks.</p></li>
<li>Setting the display for the camera preview
-<p>You can preview images in real time with the <span style="font-family: Courier New,Courier,monospace">StartPreview()</span> function. The feature provides:</p>
+<p>You can preview images in real time with the <code>StartPreview()</code> function. The feature provides:</p>
<ul>
<li>Support for several pixel formats, such as NV12, NV12T, NV16, NV21, YUYV, UYVY, and YUV420P</li>
<li>Preview at the frame rate</li>
<li>Scene mode, HDR, theater</li>
<li>Image quality</li>
</ul>
- <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span>, <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_format()</span>, or other <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_xxx()</span> functions.</p>
+ <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <code>camera_foreach_supported_preview_resolution()</code>, <code>camera_foreach_supported_preview_format()</code>, or other <code>camera_foreach_supported_xxx()</code> functions.</p>
- <p>Since devices can have multiple camera sensors with different capabilities, create a <span style="font-family: Courier New,Courier,monospace">Camera</span> with a proper <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Simultaneous use of multiple camera sensors is not allowed. <p>The target device often supports more functionalities than the Emulator.</p> <p>The behavior of the shutter sound can differ according to the legislation of each country.</p></td>
- </tr>
- </tbody>
- </table>
+ <p>Since devices can have multiple camera sensors with different capabilities, create a <code>Camera</code> with a proper <code>camera_device_e</code> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Simultaneous use of multiple camera sensors is not allowed.
+ <p>The target device often supports more functionalities than the emulator.</p>
+ <p>The behavior of the shutter sound can differ according to the legislation of each country.</p>
+ </div>
</li>
<li>Releasing resources
<p>When you have finished working with the camera, you can <a href="#release">release the resources</a>.</p></li>
</ul>
<p>The following figure illustrates the camera state changes in the normal mode:</p>
- <p class="figure">Figure: Camera states in the normal mode</p>
+ <p align="center"><strong>Figure: Camera states in the normal mode</strong></p>
<p align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<ol>
<li>
-<p>To use the functions and data types of the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><camera.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications), include the <code><camera.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <camera.h>
</pre>
</li>
<li>
-<p>Create a structure for storing the global data related to the camera handle. In this example, the <span style="font-family: Courier New,Courier,monospace">camdata</span> structure is used to store the <span style="font-family: Courier New,Courier,monospace">g_camera</span> variable, which is the camera handle.</p>
+<p>Create a structure for storing the global data related to the camera handle. In this example, the <code>camdata</code> structure is used to store the <code>g_camera</code> variable, which is the camera handle.</p>
<pre class="prettyprint">
struct _camdata {
</pre>
</li>
<li>
-<p>Create 2 auxiliary variables for controlling whether taking photos (<span style="font-family: Courier New,Courier,monospace">g_enable_shot</span>) and auto-focusing (<span style="font-family: Courier New,Courier,monospace">g_enable_focus</span>) are allowed. These variables are used in the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace">_camera_focus_cb()</span> callbacks.</p>
+<p>Create 2 auxiliary variables for controlling whether taking photos (<code>g_enable_shot</code>) and auto-focusing (<code>g_enable_focus</code>) are allowed. These variables are used in the <code>_camera_preview_cb()</code> and <code>_camera_focus_cb()</code> callbacks.</p>
<pre class="prettyprint">
static bool g_enable_shot = false;
static bool g_enable_focus = true;
</pre>
</li>
<li>
-<p>Create the camera handle using the <span style="font-family: Courier New,Courier,monospace">camera_create()</span> function:</p>
+<p>Create the camera handle using the <code>camera_create()</code> function:</p>
<pre class="prettyprint">
int error_code = 0;
else
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">CAMERA_DEVICE_CAMERA0</span> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and secondary (1) camera. These values are defined in the <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications).</p>
+<p>The <
code>CAMERA_DEVICE_CAMERA0</code> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and secondary (1) camera. These values are defined in the <code>camera_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications).</p>
</li>
<li>
-<p>Check the current state of the camera using the <span style="font-family: Courier New,Courier,monospace">camera_get_state()</span> function:</p>
+<p>Check the current state of the camera using the <code>camera_get_state()</code> function:</p>
<pre class="prettyprint">
camera_state_e state;
/* Check the camera state after creating the camera */
error_code = camera_get_state(cam_data.g_camera, &state);
</pre>
-<p>The returned state is one of the values defined in the <span style="font-family: Courier New,Courier,monospace">camera_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">wearable</a> applications). If the state is not <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>, re-initialize the camera by recreating the handle.</p>
+<p>The returned state is one of the values defined in the <code>camera_state_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">wearable</a> applications). If the state is not <code>CAMERA_STATE_CREATED</code>, re-initialize the camera by recreating the handle.</p>
</li>
</ol>
<li>
-<p>Set the image quality using the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_image_quality()</span> function:</p>
+<p>Set the image quality using the <code>camera_attr_set_image_quality()</code> function:</p>
<pre class="prettyprint">
error_code = camera_attr_set_image_quality(cam_data.g_camera, 100);
<li>
-<p>Set the display for showing preview images by using the <span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function with 1 of the camera display types (<span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_EVAS</span> or <span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_OVERLAY</span>). These values are defined in the <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">wearable</a> applications).</p>
+<p>Set the display for showing preview images by using the <code>camera_set_display()</code> function with 1 of the camera display types (<code>CAMERA_DISPLAY_TYPE_EVAS</code> or <code>CAMERA_DISPLAY_TYPE_OVERLAY</code>). These values are defined in the <code>camera_display_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">wearable</a> applications).</p>
+
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Depending on the device, the application must set the display preferences using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Depending on the device, the application must set the display preferences using the <code>elm_config_accel_preference_set()</code> function.
+ </div>
-<p>The following example code sets the display according to the <span style="font-family: Courier New,Courier,monospace">display_type</span> parameter, whose type is <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span>. The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function must be called before previewing and thus the camera state must be <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>.</p>
+<p>The following example code sets the display according to the <code>display_type</code> parameter, whose type is <code>camera_display_type_e</code>. The <code>create_base_gui()</code> function must be called before previewing and thus the camera state must be <code>CAMERA_STATE_CREATED</code>.</p>
<pre class="prettyprint">
int error_code = CAMERA_ERROR_NONE;
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);
<li>
-<p>Set the camera preview resolution using the <span style="font-family: Courier New,Courier,monospace">camera_set_preview_resolution()</span> function. You must call this function before previewing.</p>
+<p>Set the camera preview resolution using the <code>camera_set_preview_resolution()</code> function. You must call this function before previewing.</p>
-<p>To find out which resolutions can be set for the camera preview on a specific device, use the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span> function. The foreach function invokes a callback for each supported preview resolution, and, as all foreach functions, stops when the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>To find out which resolutions can be set for the camera preview on a specific device, use the <code>camera_foreach_supported_preview_resolution()</code> function. The foreach function invokes a callback for each supported preview resolution, and, as all foreach functions, stops when the callback returns <code>false</code>.</p>
<p>The following example code sets the camera preview resolution to the first found supported resolution:</p>
}
/* 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>
<li>
-<p>Set the capture format using the <span style="font-family: Courier New,Courier,monospace">camera_set_capture_format()</span> function:</p>
+<p>Set the capture format using the <code>camera_set_capture_format()</code> function:</p>
<pre class="prettyprint">
error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JPEG);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">camera_pixel_format_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">wearable</a> applications) defines the available capture formats.</p>
+<p>The <
code>camera_pixel_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">wearable</a> applications) defines the available capture formats.</p>
</li>
<li id="callbacks_preview" name="callbacks_preview">
-<p>To receive notifications about newly previewed frames, register a callback using the <span style="font-family: Courier New,Courier,monospace">camera_set_preview_cb()</span> function. The callback is invoked once per frame during a preview.</p>
+<p>To receive notifications about newly previewed frames, register a callback using the <code>camera_set_preview_cb()</code> function. The callback is invoked once per frame during a preview.</p>
<pre class="prettyprint">
error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
</pre>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> callback, which starts auto-focusing using the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function:</p>
+<p>The following example code implements the <code>_camera_preview_cb()</code> callback, which starts auto-focusing using the <code>camera_start_focusing()</code> function:</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function takes as parameters the camera handle and a Boolean flag defining whether the camera must continuously maintain focus. The function is initially called with the continuous mode set to <span style="font-family: Courier New,Courier,monospace">true</span>. If the function call returns <span style="font-family: Courier New,Courier,monospace">CAMERA_ERROR_NOT_SUPPORTED</span>, the function is relaunched with the continuous mode set to <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>The <code>camera_start_focusing()</code> function takes as parameters the camera handle and a Boolean flag defining whether the camera must continuously maintain focus. The function is initially called with the continuous mode set to <code>true</code>. If the function call returns <code>CAMERA_ERROR_NOT_SUPPORTED</code>, the function is relaunched with the continuous mode set to <code>false</code>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace">true</span> at the application startup. When the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> callback is invoked for the first time, that is, for the first frame of the preview, the camera starts auto-focusing and the flag is set to <span style="font-family: Courier New,Courier,monospace">false</span>. Subsequent calls to the callback (for the remaining frames of the preview) do not provoke any action, since the <span style="font-family: Courier New,Courier,monospace">if</span> block that checks the <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag and runs the auto-focusing is skipped. This prevents the auto-focusing process from restarting after the first previewed frame.</p>
+<p>The <code>g_enable_focus</code> flag is set to <code>true</code> at the application startup. When the <code>_camera_preview_cb()</code> callback is invoked for the first time, that is, for the first frame of the preview, the camera starts auto-focusing and the flag is set to <code>false</code>. Subsequent calls to the callback (for the remaining frames of the preview) do not provoke any action, since the <code>if</code> block that checks the <code>g_enable_focus</code> flag and runs the auto-focusing is skipped. This prevents the auto-focusing process from restarting after the first previewed frame.</p>
</li>
<li id="callbacks_focus" name="callbacks_focus">
-<p>To receive notifications about auto-focus state changes, register a callback using the <span style="font-family: Courier New,Courier,monospace">camera_set_focus_changed_cb()</span> function. The callback is invoked every time the auto-focus state changes.</p>
+<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 <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_RELEASED</span>. After the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function is called, the camera starts auto-focusing and the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_ONGOING</span>. If the auto-focusing finishes successfully, the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FOCUSED</span>. If the auto-focusing fails, the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FAILED</span>.</p>
+<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>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_focus_cb()</span> callback, which starts capturing focused frames using the <span style="font-family: Courier New,Courier,monospace">camera_start_capture()</span> function:</p>
+<p>The following example code implements the <code>_camera_focus_cb()</code> callback, which starts capturing focused frames using the <code>camera_start_capture()</code> function:</p>
<pre class="prettyprint">
static void
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;
}
}
</pre>
-<p>If the camera is in the <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FOCUSED</span> state and the <span style="font-family: Courier New,Courier,monospace">g_enable_shot</span> flag is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the callback starts the capturing process. The <span style="font-family: Courier New,Courier,monospace">g_enable_shot</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> to prevent the capturing process from restarting after the first captured frame.</p>
+<p>If the camera is in the <code>CAMERA_FOCUS_STATE_FOCUSED</code> state and the <code>g_enable_shot</code> flag is set to <code>true</code>, the callback starts the capturing process. The <code>g_enable_shot</code> flag is set to <code>false</code> to prevent the capturing process from restarting after the first captured frame.</p>
</li>
</ul>
<li>
-<p>To determine the active camera, check the <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> enumerator:</p>
+<p>To determine the active camera, check the <code>camera_device_e</code> enumerator:</p>
<pre class="prettyprint">
typedef
<li>
-<p>To determine the current camera angle, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_lens_orientation()</span> function:</p>
+<p>To determine the current camera angle, use the <code>camera_attr_get_lens_orientation()</code> function:</p>
<pre class="prettyprint">
int angle = 0;
error_code = camera_attr_get_lens_orientation(cam_data.g_camera, &angle);
</pre>
-<p>The returned value of the <span style="font-family: Courier New,Courier,monospace">angle</span> variable is in degrees.</p>
+<p>The returned value of the <code>angle</code> variable is in degrees.</p>
</li>
<p>The display rotation setting is preset to a default value for each camera.</p>
-<p>Before changing the display rotation value, retrieve the default value using the <span style="font-family: Courier New,Courier,monospace">camera_get_display_rotation()</span> function:</p>
+<p>Before changing the display rotation value, retrieve the default value using the <code>camera_get_display_rotation()</code> function:</p>
<pre class="prettyprint">
camera_rotation_e rotation = 0;
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 */
<p>The display flip setting is preset to a default value for each camera. For example, to support the mirror mode, the secondary (front) camera is set as flipped by default.</p>
-<p>Before changing the display flip value, retrieve the default value using the <span style="font-family: Courier New,Courier,monospace">camera_get_display_flip()</span> function:</p>
+<p>Before changing the display flip value, retrieve the default value using the <code>camera_get_display_flip()</code> function:</p>
<pre class="prettyprint">
camera_flip_e flip = 0;
<p>Calculate and set a new display flip value based on the direction the camera is facing and the current camera orientation:</p>
<pre class="prettyprint">
-/* If the camera is facing in the same direction as the display, apply flip to the front camera because of the mirror effect */
+/*
+ If the camera is facing in the same direction as the display,
+ apply flip to the front camera because of the mirror effect
+*/
int lens_orientation = 0;
int error_code = 0;
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In case of an overlay surface, when the device orientation changes, the displayed camera preview does not rotate automatically. If you want to rotate the display according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace">camera_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace">app_device_orientation_cb()</span> callback used by the application.
- <p>In case of an Evas surface, the Evas object for the camera display is rotated by the window manager used by the application, not by the <span style="font-family: Courier New,Courier,monospace">camera_set_display_rotation()</span> function.</p></td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ In case of an overlay surface, when the device orientation changes, the displayed camera preview does not rotate automatically. If you want to rotate the display according to the device orientation, use the <code>camera_set_display_rotation()</code> function within the <code>app_device_orientation_cb()</code> callback used by the application.
+ <p>In case of an Evas surface, the Evas object for the camera display is rotated by the window manager used by the application, not by the <code>camera_set_display_rotation()</code> function.</p>
+ </div>
<h2 id="photo" name="photo">Taking a Photo</h2>
<li>
-<p><a href="#configuring_callback">After configuring the camera</a>, start the camera preview using the <span style="font-family: Courier New,Courier,monospace">camera_start_preview()</span> function:</p>
+<p><a href="#configuring_callback">After configuring the camera</a>, start the camera preview using the <code>camera_start_preview()</code> function:</p>
<pre class="prettyprint">
error_code = camera_start_preview(cam_data.g_camera);
<li>
-<p>The camera preview callback calls the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function, which starts the auto-focusing process.</p>
+<p>The camera preview callback calls the <code>camera_start_focusing()</code> function, which starts the auto-focusing process.</p>
</li>
<li>
-<p>The camera auto-focus callback calls the <span style="font-family: Courier New,Courier,monospace">camera_start_capture()</span> function, which starts the capturing process.</p>
+<p>The camera auto-focus callback calls the <code>camera_start_capture()</code> function, which starts the capturing process.</p>
</li>
<li>
-<p>To handle the capturing process, the application calls the <span style="font-family: Courier New,Courier,monospace">camera_capturing_cb()</span> callback.</p>
+<p>To handle the capturing process, the application calls the <code>camera_capturing_cb()</code> callback.</p>
</li>
<li>
-<p>Implement the <span style="font-family: Courier New,Courier,monospace">camera_capturing_cb()</span> callback.</p>
+<p>Implement the <code>camera_capturing_cb()</code> callback.</p>
-<p>This callback is invoked once for each captured frame, and is used to get information about the captured image. The image is <a href="#configuring_callback">saved in the format</a> set by the <span style="font-family: Courier New,Courier,monospace">camera_set_capture_format()</span> function.</p>
+<p>This callback is invoked once for each captured frame, and is used to get information about the captured image. The image is <a href="#configuring_callback">saved in the format</a> set by the <code>camera_set_capture_format()</code> function.</p>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_capturing_cb()</span> callback, which saves the captured frame as a JPEG image:</p>
+<p>The following example code implements the <code>_camera_capturing_cb()</code> callback, which saves the captured frame as a JPEG image:</p>
<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+");
<li>
-<p>To receive a notification when the image has been captured, implement the <span style="font-family: Courier New,Courier,monospace">camera_capture_completed_cb()</span> callback.</p>
+<p>To receive a notification when the image has been captured, implement the <code>camera_capture_completed_cb()</code> callback.</p>
-<p>This callback is invoked after the <span style="font-family: Courier New,Courier,monospace">camera_capturing_cb()</span> callback completes, and is used for notification and for restarting the camera preview.</p>
+<p>This callback is invoked after the <code>camera_capturing_cb()</code> callback completes, and is used for notification and for restarting the camera preview.</p>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_completed_cb()</span> callback, which waits 0.025 seconds before restarting the camera preview with auto-focusing:</p>
+<p>The following example code implements the <code>_camera_completed_cb()</code> callback, which waits 0.025 seconds before restarting the camera preview with auto-focusing:</p>
<pre class="prettyprint">
static void
<p>Camera zoom attribute:</p>
-<p>Set the zoom level using the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_zoom()</span> function. Retrieve the range of available zoom level values using the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_zoom_range()</span> function. The following example code retrieves the available zoom level range and sets the zoom level to minimum:</p>
+<p>Set the zoom level using the <code>camera_attr_set_zoom()</code> function. Retrieve the range of available zoom level values using the <code>camera_attr_get_zoom_range()</code> function. The following example code retrieves the available zoom level range and sets the zoom level to minimum:</p>
<pre class="prettyprint">
int min;
<p>Camera brightness attribute:</p>
-<p>Retrieve the range of available brightness level values using the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_brightness_range()</span> function, and the current brightness level using the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_brightness()</span> function:</p>
+<p>Retrieve the range of available brightness level values using the <code>camera_attr_get_brightness_range()</code> function, and the current brightness level using the <code>camera_attr_get_brightness()</code> function:</p>
<pre class="prettyprint">
int min;
error_code = camera_attr_get_brightness(cam_data.g_camera, &g_bright_level);
</pre>
-<p>Set a new brightness level using the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_brightness()</span> function:</p>
+<p>Set a new brightness level using the <code>camera_attr_set_brightness()</code> function:</p>
<pre class="prettyprint">
if (g_bright_level >= LEVEL_UPPER_BOUND) {
<li>
-<p>If auto-focus is switched on, switch if off using the <span style="font-family: Courier New,Courier,monospace">camera_cancel_focusing()</span> function:</p>
+<p>If auto-focus is switched on, switch if off using the <code>camera_cancel_focusing()</code> function:</p>
<pre class="prettyprint">
error_code = camera_cancel_focusing(cam_data.g_camera);
<li>
-<p>Stop the camera preview using the <span style="font-family: Courier New,Courier,monospace">camera_stop_preview()</span> function:</p>
+<p>Stop the camera preview using the <code>camera_stop_preview()</code> function:</p>
<pre class="prettyprint">
error_code = camera_stop_preview(cam_data.g_camera);
<li>
-<p>Deregister the camera preview and auto-focus callbacks using the <span style="font-family: Courier New,Courier,monospace">camera_unset_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace">camera_unset_focus_changed_cb()</span> functions:</p>
+<p>Deregister the camera preview and auto-focus callbacks using the <code>camera_unset_preview_cb()</code> and <code>camera_unset_focus_changed_cb()</code> functions:</p>
<pre class="prettyprint">
/* Deregister the camera preview callback */
<li>
-<p>Destroy the camera handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">camera_destroy()</span> function:</p>
+<p>Destroy the camera handle and release all its resources using the <code>camera_destroy()</code> function:</p>
<pre class="prettyprint">
error_code = camera_destroy(cam_data.g_camera);
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Face Detection, Recognition, and Tracking</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#prerequisites">Prerequisites</a></li>
+ <li><a href="#detect">Detecting Faces</a></li>
+ <li><a href="#recognize">Recognizing Faces</a></li>
+ <li><a href="#track">Tracking Faces</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__FACE__MODULE.html">Media Vision Face API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__FACE__MODULE.html">Media Vision Face API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Face Detection, Recognition, and Tracking</h1>
+
+<p>You can perceive and understand a face, or track a face in your application.</p>
+
+<p>The main features of Media Vision Face API include:</p>
+
+<ul>
+<li>Detecting faces
+<p>You can decode an image file and <a href="#detect">detect faces</a> on it.</p>
+</li>
+<li>Recognizing faces
+<p>You can <a href="#recognize">recognize faces</a> in an image with a set of example faces.</p>
+</li>
+<li>Tracking faces
+<p>You can <a href="#track">track faces</a> using the camera preview images, starting from a specific location in the image.</p>
+</li>
+</ul>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the media vision face functionality:</p>
+<ol>
+<li>
+<p>To use the functions and data types of the Media Vision Face API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__FACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__FACE__MODULE.html">wearable</a> applications), include the <code><mv_face.h></code> header file in your application.</p>
+<p>In addition, you must include the <code><image_util.h></code> header file to handle the image decoding tasks, or the <code><camera.h></code> header file to provide preview images.</p>
+<pre class="prettyprint">
+#include <mv_face.h>
+
+/* Image decoding for face detection and recognition */
+#include <image_util.h>
+/* Preview images for face tracking */
+#include <camera.h>
+</pre>
+</li>
+<li>
+<p>Create a structure to store the global data:</p>
+<ul><li>For face detection, use the following <code>facedata_s</code> structure:
+<pre class="prettyprint">
+struct _facedata_s {
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_config;
+};
+typedef struct _facedata_s facedata_s;
+static facedata_s facedata;
+</pre>
+</li>
+<li>For face recognition, use the following <code>facedata_s</code> structure:
+<pre class="prettyprint">
+struct _facedata_s {
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_config;
+ mv_face_recognition_model g_face_recog_model;
+};
+typedef struct _facedata_s facedata_s;
+static facedata_s facedata;
+</pre>
+</li>
+<li>For face tracking, use the following <code>facedata_s</code> structure:
+<pre class="prettyprint">
+struct _facedata_s {
+ /* Variable for camera display */
+ Evas_Object *win;
+ Evas_Object *rect;
+ Evas *evas;
+
+ int preview_width;
+ int preview_height;
+
+ camera_h g_camera;
+
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_config;
+
+ mv_quadrangle_s face_roi;
+ mv_face_tracking_model_h g_face_track_model;
+};
+typedef struct _facedata_s facedata_s;
+static facedata_s facedata;
+</pre>
+</li>
+</ul>
+</li>
+</ol>
+
+<h2 id="detect" name="detect">Detecting Faces</h2>
+
+<p>To detect faces:</p>
+
+<ol>
+<li>Create a source handle using the <code>mv_create_source()</code> function with the <code>mv_source_h</code> member of the detection data structure as the out parameter:
+
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+<p>The source stores the face to be detected and all related data. You manage the source through the source handle.</p>
+</li>
+<li>Decode the image file from which the face is to be detected, and fill the <code>g_source</code> handle with the decoded raw data.
+<p>In the following example, the face of the NASA astronaut is to be detected (the image file can be downloaded from <a href="https://commons.wikimedia.org/wiki/File%3ANASA_Astronaut_Group_18.jpg" target="_blank">NASA-AstronautGroup18</a> and it is saved to <code><OwnDataPath>/NasaAstronaut.jpg</code> where <code><OwnDataPath></code> refers to your own data path).</p>
+<pre class="prettyprint">
+/* For details, see the Image Util API Reference */
+unsigned char *dataBuffer = NULL;
+unsigned int bufferSize = 0;
+int width = 0;
+int height = 0;
+
+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);
+
+/* Fill the dataBuffer to g_source */
+error_code = mv_source_fill_by_buffer(facedata.g_source, dataBuffer, 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);
+
+free(dataBuffer);
+dataBuffer = NULL;
+</pre>
+</li>
+<li>Create the media vision engine using the <code>mv_create_engine_config()</code> function. The function creates the <code>g_engine_config</code> engine configuration handle and configures it with default attributes.
+
+<pre class="prettyprint">
+error_code = mv_create_engine_config(&facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+
+<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");
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>When the source and engine configuration handles are ready, use the <code>mv_face_detect()</code> function to detect faces:
+<pre class="prettyprint">
+error_code = mv_face_detect(facedata.g_source, facedata.g_engine_config,
+ _on_face_detected_cb, NULL);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>The <code>mv_face_detect()</code> function invokes the <code>_on_face_detected_cb()</code> callback.
+<p>The following callback example prints the number of detected faces with their location.</p>
+<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)
+{
+ 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",
+ index, face_locations[index].x, face_locations[index].y,
+ face_locations[index].width, face_locations[index].height);
+ }
+ }
+}
+</pre>
+</li>
+<li>After the face detection is complete, destroy the source and engine configuration handles using the <code>mv_destroy_source()</code> and <code>mv_destroy_engine_config()</code> functions:
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_destroy_engine_config(facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+</ol>
+
+<h2 id="recognize" name="recognize">Recognizing Faces</h2>
+
+<p>To recognize faces:</p>
+
+<ol>
+<li>Create the source and engine configuration handles:
+
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_create_engine_config(&facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>Create a <code>g_face_recog_model</code> media vision face recognition model handle using the <code>mv_face_recognition_model_create()</code> function. The handle must be created before any recognition is attempted.
+
+<pre class="prettyprint">
+error_code = mv_face_recognition_model_create(&facedata.g_face_recog_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Add face examples to the face recognition model handle.
+<p>Make sure that the face examples are of the same person but captured at different angles. The following example assumes that 10 face samples (<code>face_sample_1.jpg</code> - <code>face_sample_10.jpg</code> in the <code><OwnDataPath></code> folder) are used and that the face area in each example covers approximately 95~100% of the image. The label of the face is set to '1'.</p>
+
+<pre class="prettyprint">
+int example_index = 0;
+int face_label =1;
+
+char filePath[1024];
+unsigned char *dataBuffer = NULL;
+unsigned int bufferSize = 0;
+int width = 0;
+int height = 0;
+
+for (example_index = 1; example_index <= 10; ++example_index) {
+ /* Decode image and fill the image data to g_source handle */
+ snprintf(filePath, 1024, "%s/face_sample_%d.jpg", mydir, example_index);
+ error_code = image_util_decode_jpeg(filePath, IMAGE_UTIL_COLORSPACE_RGB888,
+ &dataBuffer, &width, &height, &bufferSize);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+ roi.x = roi.y = 0;
+ roi.width = width;
+ roi.height = height;
+ error_code = mv_source_clear(facedata.g_source);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ 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);
+ 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_recognition_model_add(facedata.g_source,
+ 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);
+}
+</pre>
+</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);
+
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>When the face recognition model handle is ready, use the <code>mv_face_recognize()</code> function to recognize the face.
+
+<p>The following example assumes that there is a <code>whos_face.jpg</code> face image in the <code>OwnDataPath</code> folder, and this image is different from the samples. In addition, the <code>whos_face.jpg</code> image includes a face which fits to the image resolution. Thus, in this example, a <code>NULL</code> parameter is given as the <code>face_location</code> parameter of the <code>mv_face_recognize()</code> function. Normally, define the parameter with the correct input image face location.</p>
+
+<pre class="prettyprint">
+/* Decode the image and fill the image data to g_source handle */
+snprintf(filePath, 1024, "%s/whos_face.jpg", mydir);
+error_code = image_util_decode_jpeg(filePath, IMAGE_UTIL_COLORSPACE_RGB888,
+ &dataBuffer, &width, &height, &bufferSize);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+
+error_code = mv_source_clear(facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ 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);
+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);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>The <code>mv_face_recognize()</code> function invokes the <code>_on_face_recognized_cb()</code> callback.
+<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,
+ mv_engine_config_h engine_config, mv_rectangle_s *face_location,
+ const int *face_label, double confidence, void *user_data)
+{
+ if (face_label) {
+ dlog_print(DLOG_INFO, LOG_TAG,
+ "face label [%d] with confidence [%.2f]\n",
+ *face_label, confidence);
+ }
+}
+</pre>
+</li>
+<li>After the face recognition is complete, destroy the source, engine configuration, and face recognition model handles using the <code>mv_destroy_source()</code>, <code>mv_destroy_engine_config()</code>, and <code>mv_face_recognition_model_destroy()</code> functions:
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_destroy_engine_config(facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_face_recognition_model_destroy(facedata.g_face_recog_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+</ol>
+
+<h2 id="track" name="track">Tracking Faces</h2>
+
+<p>To track faces:</p>
+
+<ol><li>Initialize the camera, required handles, and the initial tracking location:
+<ol type="a">
+<li>Initialize the camera, set the preview callback, and start the preview.
+<p>The preview callback is used to get the preview image in which the face is tracked. For more information on starting the camera, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p>
+
+<pre class="prettyprint">
+/* Create the camera handle */
+int error_code = 0;
+error_code = camera_create(CAMERA_DEVICE_CAMERA0, &facedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ 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);
+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,
+ &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);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+/* Start the camera preview */
+error_code = camera_start_preview(facedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Create the source and engine configuration handles:
+
+<pre class="prettyprint">
+error_code = mv_create_source(&facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_create_engine_config(&facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>Define the camera preview callback.
+<p>The callback allows you to receive preview images as media packet handles. In the callback, first fill the <code>g_source</code> handle with the media packet using the <code>mv_source_fill_by_media_packet()</code> function.</p>
+
+<pre class="prettyprint">
+static void
+_camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
+{
+ if (pkt == NULL)
+ return;
+
+ error_code = mv_source_fill_by_media_packet(facedata.g_source, pkt);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
+
+ if (pkt) {
+ error_code = media_packet_destroy(pkt);
+ pkt = NULL;
+ }
+}
+</pre>
+</li>
+<li>Set the initial tracking location.
+<p>In the following example, the <code>mv_face_detect()</code> function is used to detect the face and provide its initial location.</p>
+<p>Save the detected face location in the <code>_on_face_detected_cb()</code> callback function. Note that the <code>g_source</code> handle must be kept while detecting, and updated with new preview images while tracking.</p>
+
+<pre class="prettyprint">
+error_code = mv_face_detect(facedata.g_source, facedata.g_engine_config,
+ _on_face_detected_cb, NULL);
+
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+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)
+{
+ if (number_of_faces > 0) {
+ /*
+ Track the face of index '0'.
+ Convert mv_rectangle_s to mv_quadrangle_s
+ */
+ 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].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;
+ }
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Manage face tracking:
+<ol type="a"><li>Create the <code>g_face_track_model</code> media vision face tracking model handle:
+<pre class="prettyprint">
+error_code = mv_face_tracking_model_create(&facedata.g_face_track_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</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,
+ facedata.g_source, &facedata.face_roi);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>Use the <code>mv_face_track()</code> function to track the face.
+<div class="note">
+ <strong>Note</strong>
+ Control the <code>g_source</code> handle carefully. Do not update it to the next preview image while the <code>mv_face_track()</code> function processes the <code>g_source</code> handle with the current preview image.
+</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);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>The <code>mv_face_track()</code> function invokes the <code>_on_face_tracked_cb()</code> callback.
+<p>The following callback example prints the current location of the tracked face.</p>
+<pre class="prettyprint">
+static void
+_on_face_tracked_cb(mv_source_h source, mv_face_tracking_model_h tracking_model,
+ 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",
+ location->points[0].x, location->point[0].y,
+ location->points[1].x, location->point[1].y,
+ location->points[2].x, location->point[2].y,
+ location->points[3].x, location->point[3].y)
+}
+</pre>
+</li></ol></li>
+<li>
+
+<p>After the face tracking is complete, stop the camera preview, unset the preview callback, and destroy the camera handle:</p>
+
+<pre class="prettyprint">
+error_code = camera_stop_preview(facedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = camera_unset_media_packet_preview_cb(facedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = camera_destroy(facedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+<p>For more information, see <a href="camera_n.htm#release">Releasing Resources</a> in the Camera guide.</p>
+
+</li>
+<li>Destroy the source, engine configuration, and face tracking model handles using the <code>mv_destroy_source()</code>, <code>mv_destroy_engine_config()</code>, and <code>mv_face_tracking_model_destroy()</code> functions:
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(facedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_destroy_engine_config(facedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_face_tracking_model_destroy(facedata.g_face_track_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Barcode Detection</title>
+ <title>Barcode Detection and Generation</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#prepare">Preparing the Barcode Engines</a></li>
- <li><a href="#generate">Generating Barcodes</a></li>
<li><a href="#detect">Detecting Barcodes</a></li>
+ <li><a href="#generate">Generating Barcodes</a></li>
<li><a href="#spec">Barcode Specifications</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision API for Mobile Native</a></li>
- </ul>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html">Media Vision BarCode API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html">Media Vision BarCode API for Wearable Native</a></li>
+ </ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Barcode Detection</h1>
+<h1>Barcode Detection and Generation</h1>
<p>You can perceive and understand an image or extract information from images in your application.</p>
- <p>This feature is supported in mobile applications only.</p>
-
-<p>The main features of Media Vision API include:</p>
+<p>The main features of Media Vision BarCode API include:</p>
<ul>
<li>Handling images
-<p>You can handle images by creating a source handle and filling it from an image buffer or media packet. <a href="#prepare">Create the source handle</a> with the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function, and fill it with the <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_buffer()</span> or <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_media_packet()</span> function.</p>
+<p>You can handle images by creating a source handle and filling it from an image buffer or media packet. <a href="#prepare">Create the source handle</a> with the <code>mv_create_source()</code> function, and fill it with the <code>mv_source_fill_by_buffer()</code> or <code>mv_source_fill_by_media_packet()</code> function.</p>
</li>
<li>Detecting barcodes
<p>You can <a href="#detect">detect barcodes</a> in an image or from camera preview streams, and then decrypt them to display messages to the user.</p>
<li>Generate barcode with an input message (supports only 1D barcodes)</li>
</ul>
<p>You must also define the following <a href="#spec">barcode specifications</a>:</p>
-
+
<ul>
<li><a href="#barcode">Barcode type</a></li>
<li><a href="#qrcode">QR code specification</a> (if the QA code barcode type is used)</li>
<li>BMP</li>
<li>PNG</li>
</ul>
- </li>
+ </li>
</ul>
</li>
</ul>
-
-
-
<h2 id="prerequisites">Prerequisites</h2>
-<p>To enable your application to use the media vision functionality:</p>
+<p>To enable your application to use the media vision barcode functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><mv_barcode.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Vision BarCode API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html">wearable</a> applications), include the <code><mv_barcode.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <mv_barcode.h>
</pre>
</li>
<li>
-<p>To handle camera preview images in barcode detection, include the <span style="font-family: Courier New,Courier,monospace;"><camera.h></span> header file in your application:</p>
+<p>To handle camera preview images in barcode detection, include the <code><camera.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <camera.h>
</pre>
</ol>
<h2 id="prepare">Preparing the Barcode Engines</h2>
-<p>To initialize the barcode generation and detection engines for use:</p>
+<p>To initialize the barcode detection and generation engines for use:</p>
<ol>
<li>
-<p>For barcode generation:</p>
-
-<ol type="a">
-
-<li>
-
-<p>Create a structure for storing the data required for barcode generation engine configuration:</p>
-
-<pre class="prettyprint">
-struct _bargendata_s {
- /* Barcode information variables */
- mv_barcode_type_e type;
- mv_barcode_qr_ecc_e ecc;
- mv_barcode_qr_mode_e mode;
- int version;
-
- size_t width;
- size_t height;
-
- mv_barcode_image_format_e image_format;
-
- /* Media source handle */
- mv_source_h g_source;
- /* Barcode generation engine handle */
- mv_engine_config_h g_engine_cfg;
-};
-typedef struct _bargendata_s bargendata_s;
-
-static bargendata_s bargendata;
-</pre>
-
-</li>
-
-<li>
-
-<p>Configure the barcode generation engine using the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures the engine with default attribute values.</p>
-
-<pre class="prettyprint">
-int error_code = 0;
-
-error_code = mv_create_engine_config(&bargendata.g_engine_cfg);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-</pre>
-
-<p>For example, to define whether the barcode is generated with text, use the <span style="font-family: Courier New,Courier,monospace;">mv_engine_config_set_int_attribute()</span> function with the <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT</span> attribute. The possible values for the attribute are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#gaff049431f2259d00cfd0fdc7ee721858">mv_barcode_generate_attr_text_e</a> enumeration. The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT_INVISIBLE</span>.</p>
-
-</li>
-
-</ol>
-
-</li>
-
-<li>
-
<p>For barcode detection:</p>
<ol type="a">
<li>
-<p>Create a source handle using the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function with the <span style="font-family: Courier New,Courier,monospace;">mv_source_h</span> member of the detection data structure as the out parameter:</p>
+<p>Create a source handle using the <code>mv_create_source()</code> function with the <code>mv_source_h</code> member of the detection data structure as the out parameter:</p>
<pre class="prettyprint">
int error_code = 0;
<li>
-<p>Configure the barcode detection engine using the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures the engine with default attribute values.</p>
+<p>Create the barcode detection engine using the <code>mv_create_engine_config()</code> function. The function creates the <code>g_engine_cfg</code> engine configuration handle and configures it with default attributes.</p>
<pre class="prettyprint">
int error_code = 0;
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>For example, to define the detection target, use the <span style="font-family: Courier New,Courier,monospace;">mv_engine_config_set_int_attribute()</span> function with the <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET</span> attribute. The possible values are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mv_barcode_detect_attr_target_e</a> enumeration. The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET_ALL</span>.</p>
+<p>For example, to define the detection target, use the <code>mv_engine_config_set_int_attribute()</code> function with the <code>MV_BARCODE_DETECT_ATTR_TARGET</code> attribute. The possible values are defined in the <code>mv_barcode_detect_attr_target_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <code>MV_BARCODE_DETECT_ATTR_TARGET_ALL</code>.</p>
</li>
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>For more information about the <
span style="font-family: Courier New,Courier,monospace;">camera_set_display()</span> function, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p>
+<p>For more information about the <
code>camera_set_display()</code> function, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p>
</li>
</ol>
</li>
-
-</ol>
-
-<h2 id="generate" name="generate">Generating Barcodes</h2>
-
-<p>To generate a barcode:</p>
-
-<ol>
-
-<li>
-
-<p>Set the barcode type. In case of the QR type, also set the error correction level, encoding mode, and version.</p>
-
-<pre class="prettyprint">
-bargendata.type = MV_BARCODE_QR;
-bargendata.ecc = MV_BARCODE_QR_ECC_LOW;
-bargendata.mode = MV_BARCODE_QR_MODE_BYTE;
-bargendata.version = 20;
-</pre>
-
-</li>
-
<li>
-<p>To generate the barcode into memory:</p>
+<p>For barcode generation:</p>
<ol type="a">
<li>
-<p>Create a source handle using the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function with the <span style="font-family: Courier New,Courier,monospace;">mv_source_h</span> member of the generation data structure as the out parameter:</p>
+<p>Create a structure for storing the data required for barcode generation engine configuration:</p>
<pre class="prettyprint">
-int error_code = 0;
-
-error_code = mv_create_source(&bargendata.g_source);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
-</pre>
-
-<p>The source handle is used to save the generated barcode and related data into the source, and to access the barcode and related data from the source.</p>
-
-</li>
+struct _bargendata_s {
+ /* Barcode information variables */
+ mv_barcode_type_e type;
+ mv_barcode_qr_ecc_e ecc;
+ mv_barcode_qr_mode_e mode;
+ int version;
-<li>
+ size_t width;
+ size_t height;
-<p>Generate the barcode using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_generate_source()</span> function:</p>
+ mv_barcode_image_format_e image_format;
-<pre class="prettyprint">
-error_code = mv_barcode_generate_source(bargendata.g_engine_cfg,
- "MediaVision-Tutorial-QRcode",
- bargendata.type, bargendata.mode,
- bargendata.ecc, bargendata.version,
- bargendata.g_source);
+ /* Media source handle */
+ mv_source_h g_source;
+ /* Barcode generation engine handle */
+ mv_engine_config_h g_engine_cfg;
+};
+typedef struct _bargendata_s bargendata_s;
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+static bargendata_s bargendata;
</pre>
</li>
<li>
-<p>Retrieve the width, height, color space, and memory address of the barcode using the <span style="font-family: Courier New,Courier,monospace;">mv_source_get_width()</span>, <span style="font-family: Courier New,Courier,monospace;">mv_source_get_height()</span>, <span style="font-family: Courier New,Courier,monospace;">mv_source_get_colorspace()</span>, and <span style="font-family: Courier New,Courier,monospace;">mv_source_get_buffer()</span> functions:</p>
+<p>Create the barcode generation engine using the <code>mv_create_engine_config()</code> function. The function creates the <code>g_engine_cfg</code> engine configuration handle and configures it with default attributes.</p>
<pre class="prettyprint">
-mv_colorspace_e image_colorspace = MEDIA_VISION_COLORSPACE_INVALID;
-unsigned int image_width = 0;
-unsigned int height_height = 0;
-unsigned char *image_buffer_ptr = NULL;
-unsigned int image_buffer_size = 0;
-
-error_code = mv_source_get_width(bargendata.g_source, &image_width);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-
-error_code = mv_source_get_height(bargendata.g_source, &image_height);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-
-error_code = mv_source_get_colorspace(bargendata.g_source, &image_colorspace);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-
-error_code = mv_source_get_buffer(bargendata.g_source, &image_buffer_ptr,
- &image_buffer_size);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-</pre>
-
-</li>
-
-<li>
-
-<p>After the barcode generation is complete, destroy the source handle using the <span style="font-family: Courier New,Courier,monospace;">mv_destroy_source()</span> function:</p>
+int error_code = 0;
-<pre class="prettyprint">
-error_code = mv_destroy_source(bargendata.g_source);
+error_code = mv_create_engine_config(&bargendata.g_engine_cfg);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-</li>
-
-</ol>
-
-</li>
-
-<li>
-
-<p>To generate the barcode into a file:</p>
-
-<ol type="a">
-
-<li>
-
-<p>Define the file format and image resolution:</p>
-
-<pre class="prettyprint">
-bargendata.width = 800;
-bargendata.height = 800;
-
-bargendata.image_format = MV_BARCODE_IMAGE_FORMAT_PNG;
-</pre>
-
-</li>
-
-<li>
-
-<p>Generate the barcode using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_generate_image()</span> function.</p>
-
-<p>The following example code saves the generated file in the <span style="font-family: Courier New,Courier,monospace;">/opt/usr/media</span> directory with the file name <span style="font-family: Courier New,Courier,monospace;">mv_barcode_qrcode.png</span>:</p>
-
-<pre class="prettyprint">
-error_code = mv_barcode_generate_image(bargendata.g_engine_cfg,
- "MediaVision-Tutorial-QRcode",
- bargendata.width, bargendata.height,
- bargendata.type, bargendata.mode,
- bargendata.ecc, bargendata.version,
- "/opt/usr/media/mv_barcode_qrcode.png",
- bargendata.image_format);
-
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-</pre>
+<p>For example, to define whether the barcode is generated with text, use the <code>mv_engine_config_set_int_attribute()</code> function with the <code>MV_BARCODE_GENERATE_ATTR_TEXT</code> attribute. The possible values for the attribute are defined in the <code>mv_barcode_generate_attr_text_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#gaff049431f2259d00cfd0fdc7ee721858">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#gaff049431f2259d00cfd0fdc7ee721858">wearable</a> applications). The default value is <code>MV_BARCODE_GENERATE_ATTR_TEXT_INVISIBLE</code>.</p>
</li>
</li>
-<li>
-
-<p>Destroy the barcode generation engine handle using the <span style="font-family: Courier New,Courier,monospace;">mv_destroy_engine_config()</span> function:</p>
-
-<pre class="prettyprint">
-error_code = mv_destroy_engine_config(bargendata.g_engine_cfg);
-if (error_code != MEDIA_VISION_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-</pre>
-
-</li>
-
</ol>
<h2 id="detect" name="detect">Detecting Barcodes</h2>
<li>
-<p>Implement the <span style="font-family: Courier New,Courier,monospace;">_camera_media_packet_preview_cb()</span> callback. This callback is invoked by the <span style="font-family: Courier New,Courier,monospace;">camera_start_preview()</span> function after each captured preview image and returns a handle for the media packet containing the image.</p>
+<p>Implement the <code>_camera_media_packet_preview_cb()</code> callback. This callback is invoked by the <code>camera_start_preview()</code> function after each captured preview image and returns a handle for the media packet containing the image.</p>
</li>
<li>
-<p>In the callback, fill the source with the media packet using the <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_media_packet()</span> function. This function takes as parameters the source handle and the media packet handle.</p>
+<p>In the callback, fill the source with the media packet using the <code>mv_source_fill_by_media_packet()</code> function. This function takes as parameters the source handle and the media packet handle.</p>
<p>The image is now stored in the source, and you can access the image through the source handle.</p>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace;">_camera_media_packet_preview_cb()</span> callback, detect barcodes in the image using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect()</span> function:</p>
+<p>In the <code>_camera_media_packet_preview_cb()</code> callback, detect barcodes in the image using the <code>mv_barcode_detect()</code> function:</p>
<pre class="prettyprint">
error_code = mv_barcode_detect(bardetdata.g_source, bardetdata.g_engine_cfg,
<li>
-<p>Implement a callback that is invoked by the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect()</span> function after it has finished processing the image for barcodes.</p>
+<p>Implement a callback that is invoked by the <code>mv_barcode_detect()</code> function after it has finished processing the image for barcodes.</p>
-<p>Use the callback to handle the detection results, and to clear the source for the next image. To clear the source, use the <span style="font-family: Courier New,Courier,monospace;">mv_source_clear()</span> function.</p>
+<p>Use the callback to handle the detection results, and to clear the source for the next image. To clear the source, use the <code>mv_source_clear()</code> function.</p>
<p>The following example code implements a callback that prints the number of detected barcodes and their messages, if the number is greater than zero. The code also clears the source of the image data.</p>
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>After the barcode detection is complete, stop the camera preview, unset the camera preview callback function, and destroy the camera handle:</p>
<pre class="prettyprint">
-error_code = camera_unset_media_packet_preview_cb(bardetdata.g_camera);
+error_code = camera_stop_preview(bardetdata.g_camera);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
-error_code = camera_stop_preview(bardetdata.g_camera);
+error_code = camera_unset_media_packet_preview_cb(bardetdata.g_camera);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
<li>
-<p>Destroy the source and barcode detection engine handles using the <span style="font-family: Courier New,Courier,monospace;">mv_destroy_source()</span> and <span style="font-family: Courier New,Courier,monospace;">mv_destroy_engine_config()</span> functions:</p>
+<p>Destroy the source and barcode detection engine handles using the <code>mv_destroy_source()</code> and <code>mv_destroy_engine_config()</code> functions:</p>
<pre class="prettyprint">
+error_code = mv_destroy_source(bardetdata.g_source)
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
error_code = mv_destroy_engine_config(bardetdata.g_engine_cfg);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+</li>
+
+</ol>
+
+<h2 id="generate" name="generate">Generating Barcodes</h2>
+
+<p>To generate a barcode:</p>
+
+<ol>
+
+<li>
+
+<p>Set the barcode type. In case of the QR type, also set the error correction level, encoding mode, and version.</p>
+
+<pre class="prettyprint">
+bargendata.type = MV_BARCODE_QR;
+bargendata.ecc = MV_BARCODE_QR_ECC_LOW;
+bargendata.mode = MV_BARCODE_QR_MODE_BYTE;
+bargendata.version = 20;
+</pre>
+
+</li>
+
+<li>
+
+<p>To generate the barcode into memory:</p>
+
+<ol type="a">
+
+<li>
+
+<p>Create a source handle using the <code>mv_create_source()</code> function with the <code>mv_source_h</code> member of the generation data structure as the out parameter:</p>
+
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&bargendata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+
+<p>The source handle is used to save the generated barcode and related data into the source, and to access the barcode and related data from the source.</p>
+
+</li>
+
+<li>
+
+<p>Generate the barcode using the <code>mv_barcode_generate_source()</code> function:</p>
+
+<pre class="prettyprint">
+error_code = mv_barcode_generate_source(bargendata.g_engine_cfg,
+ "MediaVision-Tutorial-QRcode",
+ bargendata.type, bargendata.mode,
+ bargendata.ecc, bargendata.version,
+ bargendata.g_source);
+
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+</li>
+
+<li>
+
+<p>Retrieve the width, height, color space, and memory address of the barcode using the <code>mv_source_get_width()</code>, <code>mv_source_get_height()</code>, <code>mv_source_get_colorspace()</code>, and <code>mv_source_get_buffer()</code> functions:</p>
+
+<pre class="prettyprint">
+mv_colorspace_e image_colorspace = MEDIA_VISION_COLORSPACE_INVALID;
+unsigned int image_width = 0;
+unsigned int height_height = 0;
+unsigned char *image_buffer_ptr = NULL;
+unsigned int image_buffer_size = 0;
+
+error_code = mv_source_get_width(bargendata.g_source, &image_width);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_source_get_height(bargendata.g_source, &image_height);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_source_get_colorspace(bargendata.g_source, &image_colorspace);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_source_get_buffer(bargendata.g_source, &image_buffer_ptr,
+ &image_buffer_size);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+</li>
+
+<li>
+
+<p>After the barcode generation is complete, destroy the source handle using the <code>mv_destroy_source()</code> function:</p>
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(bargendata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+</li>
+
+</ol>
+
+</li>
+
+<li>
+
+<p>To generate the barcode into a file:</p>
+
+<ol type="a">
+
+<li>
+
+<p>Define the file format and image resolution:</p>
+
+<pre class="prettyprint">
+bargendata.width = 800;
+bargendata.height = 800;
+
+bargendata.image_format = MV_BARCODE_IMAGE_FORMAT_PNG;
+</pre>
+
+</li>
+
+<li>
+
+<p>Generate the barcode using the <code>mv_barcode_generate_image()</code> function.</p>
+
+<p>The following example code saves the generated file in the <code>/opt/usr/media</code> directory with the file name <code>mv_barcode_qrcode.png</code>:</p>
+
+<pre class="prettyprint">
+error_code = mv_barcode_generate_image(bargendata.g_engine_cfg,
+ "MediaVision-Tutorial-QRcode",
+ bargendata.width, bargendata.height,
+ bargendata.type, bargendata.mode,
+ bargendata.ecc, bargendata.version,
+ "/opt/usr/media/mv_barcode_qrcode.png",
+ bargendata.image_format);
-error_code = mv_destroy_source(bardetdata.g_source)
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
</ol>
+</li>
+
+<li>
+
+<p>Destroy the barcode generation engine handle using the <code>mv_destroy_engine_config()</code> function:</p>
+
+<pre class="prettyprint">
+error_code = mv_destroy_engine_config(bargendata.g_engine_cfg);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+</li>
+
+</ol>
<h2 id="spec">Barcode Specifications</h2>
<p>The following tables provide more information about the barcode generation specifications.</p>
-
-<table border="1" id="barcode">
- <caption>
- Table: Supported barcode types
- </caption>
- <tbody>
- <tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">1D or 2D</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Type</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Example</th>
- </tr>
- <tr>
+ <p align="center" class="Table"><strong>Table: Supported barcode types</strong></p>
+<table border="1" id="barcode">
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">1D or 2D</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Type</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Example</th>
+ </tr>
+ <tr>
<td rowspan="7">1-D</td>
<td>UPC-A</td>
<td>Universal product code with numeric 12-digit</td>
<td><p align="center"><img alt="UPC-A" src="../../images/mediavision_upc_a.png" /></p> </td>
</tr>
- <tr>
+ <tr>
<td>UPC-E</td>
<td>Universal product code with numeric 6-digit</td>
<td><p align="center"><img alt="UPC-E" src="../../images/mediavision_upc_e.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>EAN-8</td>
<td>International article number with numeric 8-digit</td>
<td><p align="center"><img alt="EAN-8" src="../../images/mediavision_ean_8.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>EAN-13</td>
<td>International article number with numeric 13-digit</td>
<td><p align="center"><img alt="EAN-13" src="../../images/mediavision_ean_13.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>CODE-128</td>
<td>Code 128; supports alphanumeric or numeric-only</td>
<td><p align="center"><img alt="CODE-128" src="../../images/mediavision_code_128.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>CODE-39</td>
<td>Code 39; supports 34 characters consisting of uppercase letters (A to Z), numeric digits (0 to 9), and special characters(-, ., $, /, %, space)</td>
<td><p align="center"><img alt="CODE-39" src="../../images/mediavision_code_39.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>INTERLEAVED 2 of 5</td>
<td>Interleaved 2 of 5 with numeric digits</td>
<td><p align="center"><img alt="UPC-A" src="../../images/mediavision_interleaved_2_5.png" /></p></td>
</tr>
- <tr>
+ <tr>
<td>2-D</td>
<td>QR code</td>
<td>Quick Response code</td>
<td><p align="center"><img alt="UPC-A" src="../../images/mediavision_qr.png" /></p></td>
</tr>
- </tbody>
- </table>
-
- <table border="1" id="qrcode">
- <caption>
- Table: Supported QR code specifications
- </caption>
- <tbody>
- <tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Specification</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Support type</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
- </tr>
- <tr>
+ </tbody>
+ </table>
+
+ <p align="center" class="Table"><strong>Table: Supported QR code specifications</strong></p>
+ <table border="1" id="qrcode">
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Specification</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Support type</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
<td rowspan="4">Error Correction Code (ECC) Level</td>
<td>ECC Low</td>
<td>Recovery up to 7% damage</td>
</tr>
- <tr>
+ <tr>
<td>ECC Medium</td>
<td>Recovery up to 15% damage</td>
</tr>
- <tr>
+ <tr>
<td>ECC Quartile</td>
<td>Recovery up 25% damage</td>
</tr>
- <tr>
+ <tr>
<td>ECC High</td>
<td>Recovery up to 30% damage</td>
</tr>
<td>Numeric</td>
<td>Numeric digits ('0', '1', ..., '9')</td>
</tr>
- <tr>
+ <tr>
<td>Alphanumeric</td>
<td>Alphanumeric characters: numeric (0, 1, ..., 9), characters (A, B, ..., Z), and punctuation (' ', $, %, *, +, -, '.', /, ':')</td>
</tr>
- <tr>
+ <tr>
<td>Byte 8-bit</td>
<td>Raw 8-bit bytes</td>
</tr>
- <tr>
+ <tr>
<td>UTF-8</td>
<td>Universal character set and Transformation Format 8-bit, encoding characters</td>
</tr>
- </tbody>
- </table>
-
+ </tbody>
+ </table>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<ol>
<li>
-<p>To use the functions and data types of the Image Util API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><image_util.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Image Util API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">wearable</a> applications), include the <code><image_util.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <image_util.h>
</pre>
-<p>To ensure that an Image Util function has been executed properly, make sure that the return value is equal to <span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ERROR_NONE</span>.</p>
+<p>To ensure that an Image Util function has been executed properly, make sure that the return value is equal to <code>IMAGE_UTIL_ERROR_NONE</code>.</p>
</li>
<li>
<p>Declare the required variables:</p>
</pre>
</li>
<li>
-<p>To find out which JPEG color spaces are supported on the device, use the <span style="font-family: Courier New,Courier,monospace">image_util_foreach_supported_jpeg_colorspace()</span> function:</p>
+<p>To find out which JPEG color spaces are supported on the device, use the <code>image_util_foreach_supported_jpeg_colorspace()</code> function:</p>
<pre class="prettyprint">
-int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_colorspace_cb callback,
- void * user_data);
+int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_colorspace_cb
+ callback, void * user_data);
</pre>
-<p>The possible color spaces are defined in the <
span style="font-family: Courier New,Courier,monospace">image_util_colorspace_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">wearable</a> applications).</p>
+<p>The possible color spaces are defined in the <
code>image_util_colorspace_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">wearable</a> applications).</p>
<p>For more information about the YUV color space, see <a href="http://www.fourcc.org/yuv.php" target="blank">http://www.fourcc.org/yuv.php</a>.</p>
</li>
<li>
-<p>To support the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function, which is used for all image transformations, set the source image and create a handle for it (to be used as the second parameter):</p>
+<p>To support the <code>image_util_transform_run()</code> function, which is used for all image transformations, set the source image and create a handle for it (to be used as the second parameter):</p>
<pre class="prettyprint">
ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &img_source,
&width, &height, &size_decode);
<li>
-<p>Create a transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_create()</span> function:</p>
+<p>Create a transformation handle using the <code>image_util_transform_create()</code> function:</p>
<pre class="prettyprint">
transformation_h handle;
<li>
-<p>Optionally, enable hardware acceleration using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+<p>Optionally, enable hardware acceleration using the <code>image_util_transform_set_hardware_acceleration()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_hardware_acceleration(handle, true);
<li>
-<p>Set the target color space using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_colorspace()</span> function:</p>
+<p>Set the target color space using the <code>image_util_transform_set_colorspace()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_colorspace(handle, colorspace);
<li>
-<p>Execute the transformation using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function:</p>
+<p>Execute the transformation using the <code>image_util_transform_run()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_run(handle, src,
user_data);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><ul><li>Here, the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function only converts the color space. The function does not change the image width or height, or any other image property.</li>
+ <div class="note">
+ <strong>Note</strong>
+ <ul><li>Here, the <code>image_util_transform_run()</code> function only converts the color space. The function does not change the image width or height, or any other image property.</li>
<li>Because of the restrictions of the image processing library, not all color space combinations are supported for conversion. For example, the NV12 format is commonly used in hardware chips, but it is not supported by the library.</li>
- <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul></td>
- </tr>
- </tbody>
-</table>
+ <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul>
+ </div>
</li>
<li>
-<p>Handle the transformation results in the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb()</span> callback, which is invoked after the transformation is complete.</p>
+<p>Handle the transformation results in the <code>image_util_transform_completed_cb()</code> callback, which is invoked after the transformation is complete.</p>
</li>
<li>
-<p>After the transformation is complete, destroy the transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+<p>After the transformation is complete, destroy the transformation handle using the <code>image_util_transform_destroy()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_destroy(handle);
<li>
-<p>Create a transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_create()</span> function:</p>
+<p>Create a transformation handle using the <code>image_util_transform_create()</code> function:</p>
<pre class="prettyprint">
transformation_h handle;
<li>
-<p>Optionally, enable hardware acceleration using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+<p>Optionally, enable hardware acceleration using the <code>image_util_transform_set_hardware_acceleration()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_hardware_acceleration(handle, true);
<li>
-<p>Set the target resolution using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_resolution()</span> function:</p>
+<p>Set the target resolution using the <code>image_util_transform_set_resolution()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_resolution(handle, width, height);
<li>
-<p>Execute the transformation using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function:</p>
+<p>Execute the transformation using the <code>image_util_transform_run()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_run(handle, src,
user_data);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><ul><li>The image format has no effect on the transformation.</li>
+
+ <div class="note">
+ <strong>Note</strong>
+ <ul><li>The image format has no effect on the transformation.</li>
<li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to RGB images.</li>
- <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul></td>
- </tr>
- </tbody>
-</table>
+ <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul>
+ </div>
</li>
<li>
-<p>Handle the transformation results in the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb()</span> callback, which is invoked after the transformation is complete.</p>
+<p>Handle the transformation results in the <code>image_util_transform_completed_cb()</code> callback, which is invoked after the transformation is complete.</p>
</li>
<li>
-<p>After the transformation is complete, destroy the transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+<p>After the transformation is complete, destroy the transformation handle using the <code>image_util_transform_destroy()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_destroy(handle);
<li>
-<p>Create a transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_create()</span> function:</p>
+<p>Create a transformation handle using the <code>image_util_transform_create()</code> function:</p>
<pre class="prettyprint">
transformation_h handle;
<li>
-<p>Optionally, enable hardware acceleration using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+<p>Optionally, enable hardware acceleration using the <code>image_util_transform_set_hardware_acceleration()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_hardware_acceleration(handle, true);
<li>
-<p>Set the amount of rotation using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_rotation()</span> function:</p>
+<p>Set the amount of rotation using the <code>image_util_transform_set_rotation()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_rotation(handle, rotation);
</pre>
-<p>The possible values for the <
span style="font-family: Courier New,Courier,monospace">rotation</span> parameter are defined in the <span style="font-family: Courier New,Courier,monospace">image_util_rotation_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__TRANSFORM__MODULE.html#gad0682da8519f229944c9c5617b7a1107">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__TRANSFORM__MODULE.html#gad0682da8519f229944c9c5617b7a1107">wearable</a> applications).</p>
+<p>The possible values for the <
code>rotation</code> parameter are defined in the <code>image_util_rotation_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__TRANSFORM__MODULE.html#gad0682da8519f229944c9c5617b7a1107">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__TRANSFORM__MODULE.html#gad0682da8519f229944c9c5617b7a1107">wearable</a> applications).</p>
</li>
<li>
-<p>Execute the transformation using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function:</p>
+<p>Execute the transformation using the <code>image_util_transform_run()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_run(handle, src,
user_data);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><ul><li>The image format has no effect on the transformation.</li>
+ <div class="note">
+ <strong>Note</strong>
+ <ul><li>The image format has no effect on the transformation.</li>
<li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to RGB images.</li>
- <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul></td>
- </tr>
- </tbody>
-</table>
+ <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul>
+ </div>
</li>
<li>
-<p>Handle the transformation results in the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb()</span> callback, which is invoked after the transformation is complete.</p>
+<p>Handle the transformation results in the <code>image_util_transform_completed_cb()</code> callback, which is invoked after the transformation is complete.</p>
</li>
<li>
-<p>After the transformation is complete, destroy the transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+<p>After the transformation is complete, destroy the transformation handle using the <code>image_util_transform_destroy()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_destroy(handle);
<li>
-<p>Create a transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_create()</span> function:</p>
+<p>Create a transformation handle using the <code>image_util_transform_create()</code> function:</p>
<pre class="prettyprint">
transformation_h handle;
<li>
-<p>Optionally, enable hardware acceleration using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+<p>Optionally, enable hardware acceleration using the <code>image_util_transform_set_hardware_acceleration()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_hardware_acceleration(handle, true);
<li>
-<p>Set the crop area using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_crop_area()</span> function:</p>
+<p>Set the crop area using the <code>image_util_transform_set_crop_area()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_set_crop_area(handle, start_x, start_y, end_x, end_y);
<li>
-<p>Execute the transformation using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function:</p>
+<p>Execute the transformation using the <code>image_util_transform_run()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_run(handle, src,
user_data);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><ul><li>Because of a YUV restriction, and because the crop start position can be set arbitrarily, the cropped image width and height must be even.</li>
- <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul></td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ <ul><li>Because of a YUV restriction, and because the crop start position can be set arbitrarily, the cropped image width and height must be even.</li>
+ <li>If hardware acceleration is enabled, you can execute 2 more image transformations using the same transformation handle.</li></ul>
+ </div>
</li>
<li>
-<p>Handle the transformation results in the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb()</span> callback, which is invoked after the transformation is complete.</p>
+<p>Handle the transformation results in the <code>image_util_transform_completed_cb()</code> callback, which is invoked after the transformation is complete.</p>
</li>
<li>
-<p>After the transformation is complete, destroy the transformation handle using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+<p>After the transformation is complete, destroy the transformation handle using the <code>image_util_transform_destroy()</code> function:</p>
<pre class="prettyprint">
ret = image_util_transform_destroy(handle);
<li>
-<p>To decode the image from a file, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg()</span> function. Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
+<p>To decode the image from a file, use the <code>image_util_decode_jpeg()</code> function. Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
<pre class="prettyprint">
ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &img_source,
<li>
-<p>To decode the image from memory, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg_from_memory()</span> function. Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
+<p>To decode the image from memory, use the <code>image_util_decode_jpeg_from_memory()</code> function. Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
<pre class="prettyprint">
ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace,
<ul>
-<li>To encode the image to a JPEG file, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg()</span> function:
+<li>To encode the image to a JPEG file, use the <code>image_util_encode_jpeg()</code> function:
<pre class="prettyprint">
ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height,
<li>
-<p>To encode the image to memory in the JPEG format, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg_to_memory()</span> function:</p>
+<p>To encode the image to memory in the JPEG format, use the <code>image_util_encode_jpeg_to_memory()</code> function:</p>
<pre class="prettyprint">
ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height,
<h2 id="color_format">Supported Colorspace Formats</h2>
<p>The following tables define the supported colorspace formats.</p>
+ <p align="center" class="Table"><strong>Table: RGB pixel formats</strong></p>
<table>
- <caption>
- Table: RGB pixel formats
- </caption>
<tbody>
<tr>
<th>Label</th>
</tbody>
</table>
- <table>
- <caption>
- Table: Packed YUV formats
- </caption>
+ <p align="center" class="Table"><strong>Table: Packed YUV formats</strong></p>
+ <table>
<tbody>
<tr>
<th>Label</th>
</tbody>
</table>
- <table>
- <caption>
- Table: Planar YUV formats
- </caption>
+ <p align="center" class="Table"><strong>Table: Planar YUV formats</strong></p>
+ <table>
<tbody>
<tr>
<th>Label</th>
<p>The following table shows the effect on the image quality and file sizes when using different compression ratios.</p>
+ <p align="center" class="Table"><strong>Table: Quality and size comparison</strong></p>
<table>
- <caption>
- Table: Quality and size comparison
- </caption>
<tbody>
<tr>
<th>Image</th>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Image Recognition and Tracking</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#prerequisites">Prerequisites</a></li>
+ <li><a href="#recognize">Recognizing Images</a></li>
+ <li><a href="#track">Tracking Images</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference//group__CAPI__MEDIA__VISION__IMAGE__MODULE.html">Media Vision Image API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference//group__CAPI__MEDIA__VISION__IMAGE__MODULE.html">Media Vision Image API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Image Recognition and Tracking</h1>
+
+<p>You can extract features of an image object and recognize it from specific images. You can also track the image object in your application.</p>
+
+<p>The main features of Media Vision Image API include:</p>
+
+<ul>
+<li>Recognizing images
+<p>You can <a href="#recognize">recognize image objects</a> in specific images, and extract image object features.</p>
+</li>
+<li>Tracking images
+<p>You can <a href="#track">track image objects</a> using the camera preview images and a specific image tracking model.</p>
+</li>
+</ul>
+
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the media vision image functionality:</p>
+<ol>
+<li>
+<p>To use the functions and data types of the Media Vision Image API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__IMAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__IMAGE__MODULE.html">wearable</a> applications), include the <code><mv_image.h></code> header file in your application.</p>
+<p>In addition, you must include the <code><image_util.h></code> header file to handle the image decoding tasks, or the <code><camera.h></code> header file to provide preview images.</p>
+<pre class="prettyprint">
+#include <mv_image.h>
+
+/* Image decoding for image recognition */
+#include <image_util.h>
+/* Preview images for image tracking */
+#include <camera.h>
+</pre>
+</li>
+<li>
+<p>Create a structure to store the global data:</p>
+<ul>
+<li>For image recognition, use the following <code>imagedata_s</code> structure:
+<pre class="prettyprint">
+struct _imagedata_s {
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_config;
+ mv_image_object h g_image_object;
+};
+typedef struct _imagedata_s imagedata_s;
+static imagedata_s imagedata;
+</pre>
+</li>
+<li>For image tracking, use the following <code>imagedata_s</code> structure:
+<pre class="prettyprint">
+struct _imagedata_s {
+ /* Variable for camera display */
+ Evas_Object *win;
+ Evas_Object *rect;
+ Evas *evas;
+
+ int preview_width;
+ int preview_height;
+
+ camera_h g_camera;
+
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_config;
+
+ mv_image_object_h g_image_object
+ mv_image_tracking_model_h g_image_track_model;
+};
+typedef struct _imagedata_s imagedata_s;
+static imagedata_s imagedata;
+</pre>
+</li>
+</ul>
+</li>
+</ol>
+
+<h2 id="recognize" name="recognize">Recognizing Images</h2>
+
+<p>To recognize images:</p>
+
+<ol>
+<li>Create the source and engine configuration handles:
+
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&imagedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_create_engine_config(&imagedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>Decode the image file and fill the <code>g_source</code> handle with the decoded raw data.
+<p>In the following example, the <code>sample.jpg</code> is the target image to be recognized and it is in the <code><OwnDataPath></code> folder, where <code><OwnDataPath></code> refers to your own data path.</p>
+
+<pre class="prettyprint">
+/* For details, see the Image Util API Reference */
+unsigned char *dataBuffer = NULL;
+unsigned int bufferSize = 0;
+int width = 0;
+int height = 0;
+
+error_code = image_util_decode_jpeg("/mydir/sample.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);
+
+/* Fill the dataBuffer to g_source */
+error_code = mv_source_fill_by_buffer(imagedata.g_source, dataBuffer, 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);
+
+free(dataBuffer);
+dataBuffer = NULL;
+</pre>
+</li>
+<li>To recognize the <code>sample.jpg</code> image from others, create a <code>g_image_object</code> media vision image object handle and set a label.
+<p>In the following example, the image object label is set to '1'.</p>
+
+<pre class="prettyprint">
+error_code = mv_image_object_create(&imagedata.g_image_object);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_object_set_label(&imagedata.g_image_object, 1);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<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 recognized is the whole of the input image file. Give a correct ROI value, if the image object to be recognized 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,
+ imagedata.g_source, NULL);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Use the <code>mv_image_recognize()</code> function to recognize the image object.
+<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,
+ &dataBuffer, &width, &height, &bufferSize);
+if (error_code != IMAGE_UTIL_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_source_clear(imagedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+/* Fill the dataBuffer to g_source */
+error_code = mv_source_fill_by_buffer(imagedata.g_source, dataBuffer, 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);
+
+free(dataBuffer);
+dataBuffer = NULL;
+
+error_code = mv_image_recognize(imagedata.g_source, &imagedata.g_image_object, 1,
+ 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>
+</li>
+<li>The <code>mv_image_recognize()</code> function invokes the <code>_on_image_recognized_cb()</code> callback.
+<p>The following callback example prints the recognized image object label with its location.</p>
+<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,
+ unsigned int number_of_objects, void *user_data)
+{
+ int object_num = 0;
+ for (object_num = 0; object_num < number_of_object; ++object_num) {
+ 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);
+ }
+ }
+}
+</pre>
+</li>
+<li>After the image recognition is complete, destroy the source, engine configuration, and image object handles using the <code>mv_destroy_source()</code>, <code>mv_destroy_engine_config()</code>, and <code>mv_image_object_destroy()</code> functions:
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(imagedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_destroy_engine_config(imagedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_object_destroy(imagedata.g_image_object);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+</ol>
+
+<h2 id="track" name="track">Tracking Images</h2>
+
+<p>To track images:</p>
+
+<ol><li>Initialize the camera and required handles:
+<ol type="a">
+<li>Initialize the camera, set the preview callback, and start the preview.
+<p>The preview callback is used to get the preview image in which the image object is tracked. For more information on starting the camera, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p>
+
+<pre class="prettyprint">
+/* Create the camera handle */
+int error_code = 0;
+error_code = camera_create(CAMERA_DEVICE_CAMERA0, &imagedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ 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);
+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,
+ &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);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+/* Start the camera preview */
+error_code = camera_start_preview(imagedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Create the source and engine configuration handles:
+
+<pre class="prettyprint">
+error_code = mv_create_source(&imagedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_create_engine_config(&imagedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>To track an image, create a <code>g_image_object</code> media vision image object handle and set a label.
+<p>In the following example, the image to be tracked is <code>sample.jpg</code> and the image object label is set to '1'.</p>
+
+<pre class="prettyprint">
+error_code = mv_image_object_create(&imagedata.g_image_object);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_object_set_label(&imagedata.g_image_object, 1);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<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,
+ imagedata.g_source, NULL);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Create a <code>g_image_track_model</code> media vision image tracking model handle and set the target image object to be tracked:
+
+<pre class="prettyprint">
+error_code = mv_image_tracking_model_create(&imagedata.g_image_track_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_tracking_model_set_target(imagedata.g_image_object,
+ imagedata.g_image_track_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+<li>Define the camera preview callback.
+<p>The callback allows you to receive preview images as media packet handles. In the callback, to track the image object, first fill the <code>g_source</code> handle with the media packet using the <code>mv_source_fill_by_media_packet()</code> function.</p>
+
+<pre class="prettyprint">
+static void
+_camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
+{
+ if (pkt == NULL)
+ return;
+
+ error_code = mv_source_fill_by_media_packet(imagedata.g_source, pkt);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
+
+ if (pkt) {
+ error_code = media_packet_destroy(pkt);
+ pkt = NULL;
+ }
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Manage image tracking:
+<ol type="a">
+<li>Use the <code>mv_image_track()</code> function to track the target image object in the preview images:
+
+<pre class="prettyprint">
+error_code = mv_image_track(imagedata.g_source, imagedata.g_image_track_model,
+ imagedata.g_engine_config, _on_image_tracked_cb, NULL);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+</pre>
+</li>
+<li>The <code>mv_image_track()</code> function invokes the <code>_on_image_tracked_cb()</code> callback.
+<p>The following callback example prints the location of the target image object.</p>
+<pre class="prettyprint">
+static void
+_on_image_tracked_cb(mv_source_h source, mv_image_object_h image_object,
+ mv_engine_config_h engine_config, mv_quadrangle_s *location,
+ void *user_data)
+{
+ if (location) {
+ 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,
+ location->points[3].x, location->points[3].y);
+ }
+}
+</pre>
+</li></ol></li>
+<li>
+
+<p>After the image tracking is complete, stop the camera preview, unset the preview callback, and destroy the camera handle:</p>
+
+<pre class="prettyprint">
+error_code = camera_stop_preview(imagedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = camera_unset_media_packet_preview_cb(imagedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = camera_destroy(imagedata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+
+<p>For more information, see <a href="camera_n.htm#release">Releasing Resources</a> in the Camera guide.</p>
+
+</li>
+<li>Destroy the source, engine configuration, image object, and image tracking model handles using the <code>mv_destroy_source()</code>, <code>mv_destroy_engine_config()</code>, <code>mv_image_object_destroy()</code>, and <code>mv_image_tracking_model_destroy()</code> functions:
+
+<pre class="prettyprint">
+error_code = mv_destroy_source(imagedata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_destroy_engine_config(imagedata.g_engine_config);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_object_destroy(imagedata.g_image_object);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+error_code = mv_image_tracking_model_destroy(imagedata.g_image_track_model);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<p>You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.</p>
- <p class="figure">Figure: Media content of the device</p>
+ <p align="center"><strong>Figure: Media content of the device</strong></p>
<p align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>
<p>The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:</p>
<ul><li>SD card insertion and removal: Media files are updated only in the SD card.</li>
<li>Rebooting the device: Media files are updated in the internal memory and SD card in the device.</li></ul>
-<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <
span style="font-family: Courier New,Courier,monospace">storage_get_directory()</span> function. For more information, see 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).</p>
+<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <
code>storage_get_directory()</code> function. For more information, see 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).</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To obtain information from the media database, you must first <a href="#prerequisites">connect to it</a>. When the connection is no longer needed, remember to disconnect from the media database.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ To obtain information from the media database, you must first <a href="#prerequisites">connect to it</a>. When the connection is no longer needed, remember to disconnect from the media database.
+ </div>
<p>The main media content features include:</p>
<ul>
<p>To enable your application to use the media content functionality:</p>
<ol>
<li>
-<p>To use the Media Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Media Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<!--To insert content-->
</privileges>
</pre>
</li>
-<li><p>Media Content functions use a SQLite database to save the metadata of the media files on the user device, along with the tags and bookmarks that the user sets. To use the functions and data types of the Media Content API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<li><p>Media Content functions use a SQLite database to save the metadata of the media files on the user device, along with the tags and bookmarks that the user sets. To use the functions and data types of the Media Content API, include the <code><media_content.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
#include <glib.h>
</pre>
-<p>The example application used in the use cases also requires the <span style="font-family: Courier New,Courier,monospace"><glib.h></span> header file.</p>
+<p>The example application used in the use cases also requires the <code><glib.h></code> header file.</p>
</li>
<li>Connect to the database:
<pre class="prettyprint">
<p>To retrieve a list of folders where the media files are stored:</p>
<ol>
-<li>Define a callback function for the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function, called for each available media folder. Use the callback to create a list of folders.
+<li>Define a callback function for the <code>media_folder_foreach_folder_from_db()</code> function, called for each available media folder. Use the callback to create a list of folders.
<pre class="prettyprint">
bool
gallery_folder_list_cb(media_folder_h folder, void *user_data)
return true;
}
</pre></li>
-<li>To find the folders, call the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function with the defined callback. After the callback has created the folder list, you can access the folder details with various <span style="font-family: Courier New,Courier,monospace">media_folder_get_XXX()</span> functions.
+<li>To find the folders, call the <code>media_folder_foreach_folder_from_db()</code> function with the defined callback. After the callback has created the folder list, you can access the folder details with various <code>media_folder_get_XXX()</code> functions.
<pre class="prettyprint">
int i;
int count;
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 {
<p>To retrieve a list of media items:</p>
<ol>
-<li>Define a callback function for the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function, called for each available media item. Use the callback to create a list of media items.
+<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of media items.
<pre class="prettyprint">
bool
gallery_media_item_cb(media_info_h media, void *user_data)
return true;
}
</pre></li>
-<li>To find the items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties. For a detailed list of condition fields (such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_TYPE</span>) and their values (such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_TYPE_IMAGE</span> and <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_TYPE_VIDEO</span>), see the <span style="font-family: Courier New,Courier,monospace;">media_content_type.h</span> header file.
+<li>To find the items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties. For a detailed list of condition fields (such as <code>MEDIA_TYPE</code>) and their values (such as <code>MEDIA_CONTENT_TYPE_IMAGE</code> and <code>MEDIA_CONTENT_TYPE_VIDEO</code>), see the <code>media_content_type.h</code> header file.
<p>The following example filters media items so that only image and video files are included in the result. The filter is case-insensitive, and the results are sorted in a descending order based on the item display name. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>. </p>
<pre class="prettyprint">
#define BUFLEN 200
return ret;
}
</pre></li>
-<li>To find the media items, use the <span style="font-family: Courier New,Courier,monospace;">media_info_foreach_media_from_db()</span> function with the defined callback. The function is synchronous, and it blocks until the callback has been called for all items or the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>.
-<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<li>To find the media items, use the <code>media_info_foreach_media_from_db()</code> function with the defined callback. The function is synchronous, and it blocks until the callback has been called for all items or the callback returns <code>false</code>.
+<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &all_item_list);
</pre></li>
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);
media_filter_destroy(filter);
</pre>
</li>
-<li>To find the albums, use the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> function.
-<p>To find only a subset of the albums, use a filter. If you want to find all albums, set the filter parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<li>To find the albums, use the <code>media_album_foreach_album_from_db()</code> function.
+<p>To find only a subset of the albums, use a filter. If you want to find all albums, set the filter parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
/* Find all albums */
media_album_foreach_album_from_db(NULL, media_album_list_cb, NULL);
media_album_foreach_album_from_db(filter, media_album_list_cb, NULL);
</pre>
-<p>You can also use the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_count_from_db()</span> function to get the number of albums available.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> function requires a callback, which is called for every found album. The function is synchronous, and it blocks until the callback has been called for all albums or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>. For information on how to implement the callback, see <a href="#read_album">Reading Album Information</a>.</p>
+<p>You can also use the <code>media_album_get_album_count_from_db()</code> function to get the number of albums available.</p>
+<p>The <
code>media_album_foreach_album_from_db()</code> function requires a callback, which is called for every found album. The function is synchronous, and it blocks until the callback has been called for all albums or the callback returns <code>false</code>. For information on how to implement the callback, see <a href="#read_album">Reading Album Information</a>.</p>
</li>
<li>Destroy the filter:
<pre class="prettyprint">
<h2 id="read_album" name="read_album">Reading Album Information</h2>
-<p>To read album information, define a callback for the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> function and retrieve the basic album information (album ID, name, artist name, and number of media items in the album) in the callback:</p>
+<p>To read album information, define a callback for the <code>media_album_foreach_album_from_db()</code> function and retrieve the basic album information (album ID, name, artist name, and number of media items in the album) in the callback:</p>
<ol>
<li>Read the album details within the callback:
<pre class="prettyprint">
media_album_list_cb(media_album_h album, void *user_data)
{
</pre>
-<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace">false</span>).</p>
+<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p>
</li>
-<li>Once you have the album handle (<span style="font-family: Courier New,Courier,monospace">media_album_h</span>), you can read the album information:
+<li>Once you have the album handle (<code>media_album_h</code>), you can read the album information:
<ul>
<li>
-Use the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_id()</span>, <span style="font-family: Courier New,Courier,monospace">media_album_get_name()</span>, and <span style="font-family: Courier New,Courier,monospace">media_album_get_artist()</span> functions to read the album ID, name, and artist:
+Use the <code>media_album_get_album_id()</code>, <code>media_album_get_name()</code>, and <code>media_album_get_artist()</code> functions to read the album ID, name, and artist:
<pre class="prettyprint">
media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
}
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Free the <span style="font-family: Courier New,Courier,monospace">name</span> and <span style="font-family: Courier New,Courier,monospace">artist</span> variables after use.</td>
-</tr>
-</tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Free the <code>name</code> and <code>artist</code> variables after use.
+ </div>
</li>
<li>
-Get the media item count in the album with the <span style="font-family: Courier New,Courier,monospace">media_album_get_media_count_from_db()</span> function.
+Get the media item count in the album with the <code>media_album_get_media_count_from_db()</code> function.
-<p>The second parameter is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all media is counted.</p>
+<p>The second parameter is the filter. If it is set to <code>NULL</code>, all media is counted.</p>
<pre class="prettyprint">
/* Get media count in the album */
<ol><li>Request album content.
-<ol type="a"><li><p>Before you can read the album content information, acquire the album ID. If you have the album handle (<span style="font-family: Courier New,Courier,monospace">media_album_h</span>), you can call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_id()</span> function:</p>
+<ol type="a"><li><p>Before you can read the album content information, acquire the album ID. If you have the album handle (<code>media_album_h</code>), you can call the <code>media_album_get_album_id()</code> function:</p>
<pre class="prettyprint">
int id = -1;
media_album_get_album_id(album, &id);
</pre>
-<p>To obtain the handle, call the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> function. The handle is provided in the callback.</p></li>
+<p>To obtain the handle, call the <code>media_album_foreach_album_from_db()</code> function. The handle is provided in the callback.</p></li>
-<li><p>Request the album content and media item count with the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_media_from_db()</span> and <span style="font-family: Courier New,Courier,monospace">media_album_get_media_count_from_db()</span> functions using the album ID as the first parameter.</p>
+<li><p>Request the album content and media item count with the <code>media_album_foreach_media_from_db()</code> and <code>media_album_get_media_count_from_db()</code> functions using the album ID as the first parameter.</p>
-<p>The following call finds all the media items in the album (<span style="font-family: Courier New,Courier,monospace">NULL</span> filter). The <span style="font-family: Courier New,Courier,monospace">album_contents_info_cb()</span> callback is called for each item.</p>
+<p>The following call finds all the media items in the album (<code>NULL</code> filter). The <code>album_contents_info_cb()</code> callback is called for each item.</p>
<pre class="prettyprint">
media_album_foreach_media_from_db(id, NULL, album_contents_info_cb, NULL);
</pre>
-<p>This function is synchronous. The call blocks until the callback has been called for all the albums or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p></li></ol></li>
+<p>This function is synchronous. The call blocks until the callback has been called for all the albums or the callback returns <code>false</code>.</p></li></ol></li>
<li id="receive" name="receive">Receive and handle the album content.
-<p>Define the callback which you set in the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_media_from_db()</span> function.</p>
+<p>Define the callback which you set in the <code>media_album_foreach_media_from_db()</code> function.</p>
<p>The following example prints the title, MIME type, and size of the media item for which it was called.</p>
<pre class="prettyprint">
bool
return true;
}</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Free the <span style="font-family: Courier New,Courier,monospace">title</span> and <span style="font-family: Courier New,Courier,monospace">mime_type</span> variables after use.</td>
-</tr>
-</tbody>
-</table></li></ol>
+
+ <div class="note">
+ <strong>Note</strong>
+ Free the <code>title</code> and <code>mime_type</code> variables after use.
+ </div>
+ </li></ol>
<h2 id="inserting" name="inserting">Inserting Bookmarks</h2>
-<p>To set a bookmark for a video file at a given timestamp, use the <span style="font-family: Courier New,Courier,monospace">media_bookmark_insert_to_db()</span> function:</p>
+<p>To set a bookmark for a video file at a given timestamp, use the <code>media_bookmark_insert_to_db()</code> function:</p>
<pre class="prettyprint">
char* thumbnail_path = "path/to/image/file";
/* 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 <span style="font-family: Courier New,Courier,monospace">media_info_foreach_bookmark_from_db()</span> function.</p>
+<li><p>To find the bookmarks set for a media item, use the <code>media_info_foreach_bookmark_from_db()</code> function.</p>
-<p>To find only a subset of the bookmarks, use a filter. If you want to find all bookmarks set for a media item, set the filter parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To find only a subset of the bookmarks, use a filter. If you want to find all bookmarks set for a media item, set the filter parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
/* Find all items */
media_info_foreach_bookmark_from_db(media_id, NULL, get_bookmarks_cb, NULL);
media_info_foreach_bookmark_from_db(media_id, filter, get_bookmarks_cb, NULL);
</pre>
-<p>Obtain the media ID (first parameter) by calling the <span style="font-family: Courier New,Courier,monospace">*_get_media_id()</span> functions. The handles that these functions require can be obtained from various sources. For example, <span style="font-family: Courier New,Courier,monospace">media_info_h</span> (needed for <span style="font-family: Courier New,Courier,monospace">media_info_get_media_id()</span>) is provided after calling the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> or <span style="font-family: Courier New,Courier,monospace">media_info_insert_to_db()</span> function.</p>
+<p>Obtain the media ID (first parameter) by calling the <code>*_get_media_id()</code> functions. The handles that these functions require can be obtained from various sources. For example, <code>media_info_h</code> (needed for <code>media_info_get_media_id()</code>) is provided after calling the <code>media_info_foreach_media_from_db()</code> or <code>media_info_insert_to_db()</code> function.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">media_info_foreach_bookmark_from_db()</span> function requires a callback, which is called for every found bookmark. The function is synchronous, and it blocks until the callback has been called for all bookmarks in the media item or the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>. For information on how to implement the callback, see <a href="#reading">Reading Bookmark Information</a>.</p></li>
+<p>The <
code>media_info_foreach_bookmark_from_db()</code> function requires a callback, which is called for every found bookmark. The function is synchronous, and it blocks until the callback has been called for all bookmarks in the media item or the callback returns <code>false</code>. For information on how to implement the callback, see <a href="#reading">Reading Bookmark Information</a>.</p></li>
<h2 id="reading" name="reading">Reading Bookmark Information</h2>
-<p>To read bookmark information, define a callback for the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_bookmark_from_db()</span> function and retrieve the basic bookmark information (thumbnail path and marked time) in the callback:</p>
+<p>To read bookmark information, define a callback for the <code>media_info_foreach_bookmark_from_db()</code> function and retrieve the basic bookmark information (thumbnail path and marked time) in the callback:</p>
<ol>
<li>Read the bookmark details within the callback:
<pre class="prettyprint">
get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
{
</pre>
-<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace;">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace;">false</span>).</p>
+<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p>
</li>
-<li>Once you have the bookmark handle (<span style="font-family: Courier New,Courier,monospace;">media_bookmark_h</span>), you can read the bookmark information:
+<li>Once you have the bookmark handle (<code>media_bookmark_h</code>), you can read the bookmark information:
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">media_bookmark_get_thumbnail_path()</span> function to get the thumbnail path of the bookmark:
+<li>Use the <code>media_bookmark_get_thumbnail_path()</code> function to get the thumbnail path of the bookmark:
<pre class="prettyprint">
char *thumb = NULL;
free(thumb);
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Free the thumbnail path after use.</td>
-</tr>
-</tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Free the thumbnail path after use.
+ </div>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">media_bookmark_get_marked_time()</span> function to get the marked time of the bookmark:
+<li>Use the <code>media_bookmark_get_marked_time()</code> function to get the marked time of the bookmark:
<pre class="prettyprint">
time_t time;
<p>To use a filter to find media items that satisfy certain criteria or to modify the search results in a specific way:</p>
<ol>
-<li><p>Create a filter using the <span style="font-family: Courier New,Courier,monospace">media_filter_create()</span> function:</p>
+<li><p>Create a filter using the <code>media_filter_create()</code> function:</p>
<pre class="prettyprint">
filter_h filter = NULL;
</pre>
</li>
-<li><p>Set a condition using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_condition()</span> function.</p>
+<li><p>Set a condition using the <code>media_filter_set_condition()</code> function.</p>
<p>The following example sets a condition which finds albums with the artist named "Tizen" with a case-insensitive search:</p>
<pre class="prettyprint">
<p>The function parameters are:</p>
<ul><li>Filter handle</li>
<li>Condition string used for filtering the search results
-<p>Queries made with the Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">wearable</a> applications) are passed to a SQL database. A part of each query is a <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause that determines which properties correspond to certain conditions. The condition string defines the <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause and must match the following pattern:</p>
+<p>Queries made with the Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">wearable</a> applications) are passed to a SQL database. A part of each query is a <code>WHERE</code> clause that determines which properties correspond to certain conditions. The condition string defines the <code>WHERE</code> clause and must match the following pattern:</p>
<pre class="prettyprint">
/* Basic pattern */
<property> <relation> <value>
=, >, >=, <, <=, IN, NOT IN, LIKE
</pre>
-<p>Conditions can be joined by <span style="font-family: Courier New,Courier,monospace">OR</span> and <span style="font-family: Courier New,Courier,monospace">AND</span> to form more complex conditions.</p>
+<p>Conditions can be joined by <code>OR</code> and <code>AND</code> to form more complex conditions.</p>
-<p>Condition properties are defined by a series of <span style="font-family: Courier New,Courier,monospace">#define</span> directives. Each Content API submodule contains definitions for properties used in the submodule API.</p></li>
+<p>Condition properties are defined by a series of <code>#define</code> directives. Each Content API submodule contains definitions for properties used in the submodule API.</p></li>
<li>Collation type determining how the strings are compared
-<p>The <
span style="font-family: Courier New,Courier,monospace">media_content_collation_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications) defines the available collation types.</p></li></ul>
+<p>The <
code>media_content_collation_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications) defines the available collation types.</p></li></ul>
-<p>To read the condition of an existing filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_condition()</span> function:</p>
+<p>To read the condition of an existing filter, use the <code>media_filter_get_condition()</code> function:</p>
<pre class="prettyprint">
char *check_condition = NULL;
</pre>
</li>
-<li><p>Set a sorting order using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_order()</span> function.</p>
+<li><p>Set a sorting order using the <code>media_filter_set_order()</code> function.</p>
<p>The following example sorts the results in an ascending order based on the artist name. The sorting is case-sensitive.</p>
<pre class="prettyprint">
-media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, MEDIA_CONTENT_COLLATE_DEFAULT);
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST,
+ MEDIA_CONTENT_COLLATE_DEFAULT);
</pre>
-<p>The second and fourth parameters determine the order and collation types, and the available types are defined in the enumerators <
span style="font-family: Courier New,Courier,monospace">media_content_order_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">media_content_collation_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications).</p>
+<p>The second and fourth parameters determine the order and collation types, and the available types are defined in the enumerators <
code>media_content_order_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">wearable</a> applications) and <code>media_content_collation_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications).</p>
-<p>To read the order settings of an existing filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_order()</span> function:</p>
+<p>To read the order settings of an existing filter, use the <code>media_filter_get_order()</code> function:</p>
<pre class="prettyprint">
media_content_order_e check_order_type = MEDIA_CONTENT_ORDER_ASC;
char *check_order_keyword = NULL;
media_content_collation_e check_order_collate_type = MEDIA_CONTENT_COLLATE_DEFAULT;
-media_filter_get_order(filter, &check_order_type, &check_order_keyword, &check_order_collate_type);
+media_filter_get_order(filter, &check_order_type, &check_order_keyword,
+ &check_order_collate_type);
</pre>
</li>
-<li>Set an offset using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_offset()</span> function.
+<li>Set an offset using the <code>media_filter_set_offset()</code> function.
<p>The offset allows you to limit the results to a specific subset. For example, if you sort the items by size in an ascending order and set the offset to 10, the 10 smallest items are not included in the results.</p>
<p>The following example sets an offset that returns results starting from the beginning (offset 0), and returns a maximum of 5 results:</p>
media_filter_set_offset(filter, 0, 5);
</pre>
-<p>To read the offset settings of an existing filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_offset()</span> function:</p>
+<p>To read the offset settings of an existing filter, use the <code>media_filter_get_offset()</code> function:</p>
<pre class="prettyprint">
int check_offset = 0;
<li>
<p>When the filter is ready and its properties defined, you can use it in various media foreach functions to find different media items.</p>
-<p>For example, to iterate through all media info in the media database, use the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function:</p>
+<p>For example, to iterate through all media info in the media database, use the <code>media_info_foreach_media_from_db()</code> function:</p>
<pre class="prettyprint">
media_info_foreach_media_from_db(filter, media_cb, NULL);
</pre>
snprintf(buf, BUFLEN, "%s = %d", FOLDER_STORAGE_TYPE, MEDIA_CONTENT_STORAGE_INTERNAL);
media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
-media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, FOLDER_MODIFIED_TIME, MEDIA_CONTENT_COLLATE_DEFAULT);
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, FOLDER_MODIFIED_TIME,
+ MEDIA_CONTENT_COLLATE_DEFAULT);
media_folder_foreach_folder_from_db(filter, folder_cb, NULL);
</pre>
</li>
<li>
-<p>To find the folders, use the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function.</p>
-<p>To find only a subset of the folders, use a filter. If you want to find all folders, set the filter parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>To find the folders, use the <code>media_folder_foreach_folder_from_db()</code> function.</p>
+<p>To find only a subset of the folders, use a filter. If you want to find all folders, set the filter parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
/* Find all items */
/* Find filtered items */
media_folder_foreach_folder_from_db(filter, folder_cb, NULL);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function requires a callback, which is called for every found folder. The function is synchronous, and it blocks until the callback is called for all available folders or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>. For more information on how to implement the callback, see <a href="#read_folder">Reading Folder Information</a>.</p>
+<p>The <
code>media_folder_foreach_folder_from_db()</code> function requires a callback, which is called for every found folder. The function is synchronous, and it blocks until the callback is called for all available folders or the callback returns <code>false</code>. For more information on how to implement the callback, see <a href="#read_folder">Reading Folder Information</a>.</p>
</li>
<li>Destroy the filter:
<pre class="prettyprint">
<h2 id="read_folder" name="read_folder">Reading Folder Information</h2>
-<p>To read media folder information, define a callback for the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function and retrieve the basic folder information (folder ID, name, path, storage type, last modified time, and number of media items in the folder) in the callback:</p>
+<p>To read media folder information, define a callback for the <code>media_folder_foreach_folder_from_db()</code> function and retrieve the basic folder information (folder ID, name, path, storage type, last modified time, and number of media items in the folder) in the callback:</p>
<ol>
<li>
{
</pre>
-<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace">false</span>).</p>
+<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p>
</li>
<li>
-<p>Once you have the folder handle (<span style="font-family: Courier New,Courier,monospace">media_folder_h</span>), you can read the folder information:</p>
+<p>Once you have the folder handle (<code>media_folder_h</code>), you can read the folder information:</p>
-<ul><li><p>Use the <span style="font-family: Courier New,Courier,monospace">media_folder_get_folder_id()</span>, <span style="font-family: Courier New,Courier,monospace">media_folder_get_name()</span>, and <span style="font-family: Courier New,Courier,monospace">media_folder_get_path()</span> functions to read the folder ID, name, and path:</p>
+<ul><li><p>Use the <code>media_folder_get_folder_id()</code>, <code>media_folder_get_name()</code>, and <code>media_folder_get_path()</code> functions to read the folder ID, name, and path:</p>
<pre class="prettyprint">
char *folder_id = NULL;
}
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Free the <span style="font-family: Courier New,Courier,monospace">name</span> and <span style="font-family: Courier New,Courier,monospace">path</span> variables at the end. The <span style="font-family: Courier New,Courier,monospace">folder_id</span> variable is freed later, since it is still needed.</td>
-</tr>
-</tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Free the <code>name</code> and <code>path</code> variables at the end. The <code>folder_id</code> variable is freed later, since it is still needed.
+ </div>
</li>
-<li><p>Read the folder storage type using the <span style="font-family: Courier New,Courier,monospace">media_folder_get_storage_type()</span> function:</p>
+<li><p>Read the folder storage type using the <code>media_folder_get_storage_type()</code> function:</p>
<pre class="prettyprint">
media_content_storage_e storage_type = MEDIA_CONTENT_STORAGE_INTERNAL;
dlog_print(DLOG_DEBUG, LOG_TAG, "Modified time: %s", ctime(&time));
</pre></li>
-<li>Get the media item count in the folder with the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function. <p>The second parameter is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all media is counted.</p>
+<li>Get the media item count in the folder with the <code>media_folder_get_media_count_from_db()</code> function. <p>The second parameter is the filter. If it is set to <code>NULL</code>, all media is counted.</p>
if (MEDIA_CONTENT_ERROR_NONE != ret)
/* Error handling */
else
- dlog_print(DLOG_DEBUG, LOG_TAG, "Number of media contents: %d\n", item_count);
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "Number of media contents: %d\n", item_count);
free(folder_id);
return true;
}</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Free the <span style="font-family: Courier New,Courier,monospace">folder_id</span> value after it is used for the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function.</td>
-</tr>
-</tbody>
-</table></li></ul>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Free the <code>folder_id</code> value after it is used for the <code>media_folder_get_media_count_from_db()</code> function.
+ </div></li></ul>
</li>
</ol>
<ol>
<li>Request folder content.
-<p>To find all media items from the folder with the given ID, use the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_media_from_db()</span> function.</p>
+<p>To find all media items from the folder with the given ID, use the <code>media_folder_foreach_media_from_db()</code> function.</p>
<pre class="prettyprint">
media_folder_foreach_media_from_db(folder_id, NULL, media_cb, NULL);
</pre>
-<p>This function is synchronous. The call blocks until the callback has been called for all the items or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>This function is synchronous. The call blocks until the callback has been called for all the items or the callback returns <code>false</code>.</p>
</li>
<li>Receive and handle folder content.
-<p>Define the callback which you set in the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_media_from_db()</span> function.</p>
+<p>Define the callback which you set in the <code>media_folder_foreach_media_from_db()</code> function.</p>
<p>The following example prints the title of the media item for which it was called.</p>
<p>To access media item information:</p>
<ol>
-<li>Define a callback function for the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function, called for each available media item. Use the callback to create a list of items.
+<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of items.
<pre class="prettyprint">
bool
gallery_media_item_cb(media_info_h media, void *user_data)
</pre>
</li>
<li>
-<p>To find the media items, use the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function with the defined callback. The function is synchronous, and it blocks until the callback has been called for all items or the callback returns false.</p>
-<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>After the callback has created the item list, you can access the item details with various <span style="font-family: Courier New,Courier,monospace">media_info_get_XXX()</span> functions. Note that media information is based on the media information handle, and to obtain the information (metadata), you must first retrieve the handle. The available metadata varies depending on the media type, such as image, video, or audio.</p>
+<p>To find the media items, use the <code>media_info_foreach_media_from_db()</code> function with the defined callback. The function is synchronous, and it blocks until the callback has been called for all items or the callback returns false.</p>
+<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <code>NULL</code>.</p>
+<p>After the callback has created the item list, you can access the item details with various <code>media_info_get_XXX()</code> functions. Note that media information is based on the media information handle, and to obtain the information (metadata), you must first retrieve the handle. The available metadata varies depending on the media type, such as image, video, or audio.</p>
<pre class="prettyprint">
ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &all_item_list);
if (ret != MEDIA_CONTENT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG, "media_info_foreach_media_from_db failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "media_info_foreach_media_from_db failed: %d", ret);
media_filter_destroy(filter);
return ret;
image_meta_get_burst_id(image_handle, &burst_id);
dlog_print(DLOG_DEBUG, LOG_TAG, "This is an image");
- dlog_print(DLOG_DEBUG, LOG_TAG, "Width: %d, Height: %d, Orientation: %d, Date taken: %s",
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "Width: %d, Height: %d, Orientation: %d, Date taken: %s",
width, height, orientation, datetaken);
}
dlog_print(DLOG_DEBUG, LOG_TAG, "This is a video");
dlog_print(DLOG_DEBUG, LOG_TAG,
- "Title: %s, Album: %s, Artist: %s, Album_artist: %s \n Duration: %d, Played time: %d",
+ "Title: %s, Album: %s, Artist: %s, Album_artist: %s \n
+ Duration: %d, Played time: %d",
title, album, artist, album_artist, duration, time_played);
}
<ol>
<li><p>To add information in the database, use one of the following options:</p>
-<ul><li><p><span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function:</p>
+<ul><li><p><code>media_info_insert_to_db()</code> function:</p>
<pre class="prettyprint">
int ret = MEDIA_CONTENT_ERROR_NONE;
char *image_file = "Default.jpg";
return ret;
}
</pre>
-<p>After using the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function, destroy the received <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> using the <span style="font-family: Courier New,Courier,monospace;">media_info_destroy()</span> function.</p></li>
+<p>After using the <code>media_info_insert_to_db()</code> function, destroy the received <code>media_info_h</code> using the <code>media_info_destroy()</code> function.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function:
+<li><code>media_content_scan_file()</code> function:
<pre class="prettyprint">
int ret = MEDIA_CONTENT_ERROR_NONE;
char *image_file = "Default.jpg";
</pre>
</li></ul>
-<p>The difference between the 2 options is that the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function automatically gets the <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> handle of the media file after inserting the file in the database, whereas the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function only inserts the file.</p>
+<p>The difference between the 2 options is that the <code>media_info_insert_to_db()</code> function automatically gets the <code>media_info_h</code> handle of the media file after inserting the file in the database, whereas the <code>media_content_scan_file()</code> function only inserts the file.</p>
-<p>Basically, the media database does not allow duplicate paths. If you try to insert the same data, the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function returns an error. However, the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function returns no error, and allows you to get the <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> handle.</p></li>
+<p>Basically, the media database does not allow duplicate paths. If you try to insert the same data, the <code>media_content_scan_file()</code> function returns an error. However, the <code>media_info_insert_to_db()</code> function returns no error, and allows you to get the <code>media_info_h</code> handle.</p></li>
</ol>
}
</pre></li>
-<li>Insert (scan) a folder to the database using the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_folder()</span> function.
-<p>Since the second parameter is set to <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, the subfolders are scanned and inserted too.</p>
+<li>Insert (scan) a folder to the database using the <code>media_content_scan_folder()</code> function.
+<p>Since the second parameter is set to <code>TRUE</code>, the subfolders are scanned and inserted too.</p>
<pre class="prettyprint">
int ret = MEDIA_CONTENT_ERROR_NONE;
char *dir_path = NULL;
<p>To create and insert a playlist to the database:</p>
<ol><li>Insert a playlist record to the database.
-<p>To operate on the database, it has to contain records. Add a new playlist to the database using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_insert_to_db()</span> function. It returns a handle to the newly created record.</p>
+<p>To operate on the database, it has to contain records. Add a new playlist to the database using the <code>media_playlist_insert_to_db()</code> function. It returns a handle to the newly created record.</p>
<pre class="prettyprint">
media_playlist_h playlist = NULL;
GList *media_id_list = NULL; /* This requires glib.h inclusion */
/* Create the playlist */
media_playlist_insert_to_db("playlist_for_tutorial", &playlist);
</pre>
-<p>You can modify the playlist name later on using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_set_name()</span> function.</p>
+<p>You can modify the playlist name later on using the <code>media_playlist_set_name()</code> function.</p>
</li>
-<li><p>Define a callback function for the <span style="font-family: Courier New,Courier,monospace;">media_info_foreach_media_from_db()</span> function, called for each available media item. Use the callback to cast the user data to a proper type and copy the media ID to a list:</p>
+<li><p>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to cast the user data to a proper type and copy the media ID to a list:</p>
<pre class="prettyprint">
bool
}
</pre></li>
-<li><p>To be able to fill a playlist with data, <a href="#insert">insert existing media in the database</a> using the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function. You can also check the media database size using the <span style="font-family: Courier New,Courier,monospace;">media_info_get_media_count_from_db()</span> function and allocate the required amount of space.</p>
+<li><p>To be able to fill a playlist with data, <a href="#insert">insert existing media in the database</a> using the <code>media_content_scan_file()</code> function. You can also check the media database size using the <code>media_info_get_media_count_from_db()</code> function and allocate the required amount of space.</p>
<pre class="prettyprint">
/* path must be set to an audio file */
media_content_scan_file(path);
media_info_get_media_count_from_db(NULL, &media_count);
</pre>
</li>
-<li><p>To find the media items to be added to the playlist, call the <span style="font-family: Courier New,Courier,monospace;">media_info_foreach_media_from_db()</span> function with the defined callback. After the callback has created the media ID list, you can add the media items to the playlist with the <span style="font-family: Courier New,Courier,monospace;">media_playlist_add_media()</span> function.</p>
+<li><p>To find the media items to be added to the playlist, call the <code>media_info_foreach_media_from_db()</code> function with the defined callback. After the callback has created the media ID list, you can add the media items to the playlist with the <code>media_playlist_add_media()</code> function.</p>
<pre class="prettyprint">
media_info_foreach_media_from_db(NULL, _media_info_cb, &media_id_list);
<p>For information about creating a filter, see <a href="#filter">Setting up the Filter</a>.</p>
</li>
<li>
-<p>To find the playlists, use the <span style="font-family: Courier New,Courier,monospace;">media_playlist_foreach_playlist_from_db()</span> function.</p>
+<p>To find the playlists, use the <code>media_playlist_foreach_playlist_from_db()</code> function.</p>
-<p>To find only a subset of the playlists, use a filter. If you want to find all playlists, set the filter parameter to <span style="font-family: Courier New,Courier,monospace;">NULL</span>.
+<p>To find only a subset of the playlists, use a filter. If you want to find all playlists, set the filter parameter to <code>NULL</code>.
</p>
<pre class="prettyprint">
/* Find all playlists */
media_playlist_foreach_playlist_from_db(filter, playlist_list_cb, NULL);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">media_playlist_foreach_playlist_from_db()</span> function requires a callback, which is called for every found playlist. The function is synchronous, and it blocks until the callback has been called for all playlists or the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>. For information on how to implement the callback, see <a href="#read_playlist">Reading Playlist Information</a>.</p>
+<p>The <
code>media_playlist_foreach_playlist_from_db()</code> function requires a callback, which is called for every found playlist. The function is synchronous, and it blocks until the callback has been called for all playlists or the callback returns <code>false</code>. For information on how to implement the callback, see <a href="#read_playlist">Reading Playlist Information</a>.</p>
</li>
<li>Destroy the filter:
<pre class="prettyprint">
<h2 id="read_playlist" name="read_playlist">Reading Playlist Information</h2>
-<p>To read playlist information, define a callback for the <span style="font-family: Courier New,Courier,monospace;">media_playlist_foreach_playlist_from_db()</span> function and retrieve the basic playlist information (name, ID, and records included in the playlist) in the callback:</p>
+<p>To read playlist information, define a callback for the <code>media_playlist_foreach_playlist_from_db()</code> function and retrieve the basic playlist information (name, ID, and records included in the playlist) in the callback:</p>
<ol>
<li><p>Read the playlist details within the callback:</p>
int playlist_id = 0;
int count = 0;
</pre>
-<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace;">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace;">false</span>).</p></li>
+<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p></li>
-<li>Once you have the playlist handle (<span style="font-family: Courier New,Courier,monospace;">media_playlist_h</span>), you can read the playlist information:
+<li>Once you have the playlist handle (<code>media_playlist_h</code>), you can read the playlist information:
<ol type="a">
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">media_playlist_get_name()</span> and <span style="font-family: Courier New,Courier,monospace;">media_playlist_get_playlist_id()</span> functions to read the playlist name and ID:</p>
+<li><p>Use the <code>media_playlist_get_name()</code> and <code>media_playlist_get_playlist_id()</code> functions to read the playlist name and ID:</p>
<pre class="prettyprint">
media_playlist_get_name(playlist, &name);
media_filter_set_offset(audio_fltr, 0, 10);
- media_playlist_foreach_media_from_db(playlist_id, audio_fltr, audio_list_cb, NULL);
+ media_playlist_foreach_media_from_db(playlist_id, audio_fltr,
+ audio_list_cb, NULL);
media_filter_destroy(audio_fltr);
media_filter_destroy(temp_filter);
</pre></li>
<li><p>The search results are returned in a callback that is triggered for each record matching the filter. To get the media info, use the following functions in the callback:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">media_info_get_audio()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_media_id()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_size()</span></li></ul>
+<ul><li><code>media_info_get_audio()</code></li>
+<li><code>media_info_get_media_id()</code></li>
+<li><code>media_info_get_size()</code></li></ul>
<pre class="prettyprint">
static bool
<p>To add a tag to the database, and a file to the tag:</p>
<ol>
<li>Add the tag.
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">media_tag_insert_to_db()</span> function to add the tag. The result is a handle to the new tag.</p>
+<p>Use the <code>media_tag_insert_to_db()</code> function to add the tag. The result is a handle to the new tag.</p>
<pre class="prettyprint">
media_tag_h tag = NULL;
const char *tag_name = "Tag name";
<p>To access information first about the tags and then about the media items related to specific tags:</p>
<ol>
-<li>Define callback functions for the <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> and <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_media_from_db()</span> functions, called for each available tag and each available media item for a specific tag. Use the callbacks to create a list of tags and media items.
+<li>Define callback functions for the <code>media_tag_foreach_tag_from_db()</code> and <code>media_tag_foreach_media_from_db()</code> functions, called for each available tag and each available media item for a specific tag. Use the callbacks to create a list of tags and media items.
<pre class="prettyprint">
/* glib library is used, so include glib.h */
return true;
}
</pre></li>
-<li>To find the tags and related media items, use the <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> and <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_media_from_db()</span> functions with the defined callbacks. The functions are synchronous, and they block until the callbacks have been called for all items or the callbacks return <span style="font-family: Courier New,Courier,monospace;">false</span>.
-<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<li>To find the tags and related media items, use the <code>media_tag_foreach_tag_from_db()</code> and <code>media_tag_foreach_media_from_db()</code> functions with the defined callbacks. The functions are synchronous, and they block until the callbacks have been called for all items or the callbacks return <code>false</code>.
+<p>To find only a subset of the items, use a filter. If you want to find all items, set the filter parameter to <code>NULL</code>.</p>
-<p>After the callbacks have created the lists, you can access the tag details with various <span style="font-family: Courier New,Courier,monospace;">media_tag_get_XXX()</span> functions, and the media item details with various <span style="font-family: Courier New,Courier,monospace;">media_info_get_XXX()</span> functions.</p>
+<p>After the callbacks have created the lists, you can access the tag details with various <code>media_tag_get_XXX()</code> functions, and the media item details with various <code>media_info_get_XXX()</code> functions.</p>
<pre class="prettyprint">
media_tag_h tag_handle = NULL;
GList *tag_list = NULL;
media_tag_get_tag_id(tag_handle, &tag_id);
media_tag_get_name(tag_handle, &tag_name);
- ret = media_tag_foreach_media_from_db(tag_id, NULL, gallery_media_item_cb, &media_list_in_tag);
+ ret = media_tag_foreach_media_from_db(tag_id, NULL, gallery_media_item_cb,
+ &media_list_in_tag);
if (ret != MEDIA_CONTENT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG, "media_tag_foreach_media_from_db() failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "media_tag_foreach_media_from_db() failed: %d", ret);
return ret;
} else {
- dlog_print(DLOG_DEBUG, LOG_TAG, "media_tag_foreach_media_from_db() successful");
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "media_tag_foreach_media_from_db() successful");
int j = 0;
media_info_h tag_media_handle;
char *media_id = NULL;
ret = media_info_get_media_type(tag_media_handle, &media_type);
- dlog_print(DLOG_DEBUG, LOG_TAG, "[%s] media_id [%d]: %s", tag_name, j, media_id);
- dlog_print(DLOG_DEBUG, LOG_TAG, "[%s] media_type [%d]: %d", tag_name, j, media_type);
- dlog_print(DLOG_DEBUG, LOG_TAG, "[%s] media_name [%d]: %s", tag_name, j, media_name);
- dlog_print(DLOG_DEBUG, LOG_TAG, "[%s] media_path [%d]: %s", tag_name, j, media_path);
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "[%s] media_id [%d]: %s", tag_name, j, media_id);
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "[%s] media_type [%d]: %d", tag_name, j, media_type);
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "[%s] media_name [%d]: %s", tag_name, j, media_name);
+ dlog_print(DLOG_DEBUG, LOG_TAG,
+ "[%s] media_path [%d]: %s", tag_name, j, media_path);
free(media_name);
free(media_path);
<p>To delete a tag:</p>
<ol>
<li>Retrieve the tag ID to delete the tag.
-<p>In this use case, the ID is obtained by calling the <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> function, gathering a tag list in the function callback, iterating through the tag list to find the needed tag handle, and getting the tag ID with the handle using the <span style="font-family: Courier New,Courier,monospace;">media_tag_get_tag_id()</span> function.</p>
+<p>In this use case, the ID is obtained by calling the <code>media_tag_foreach_tag_from_db()</code> function, gathering a tag list in the function callback, iterating through the tag list to find the needed tag handle, and getting the tag ID with the handle using the <code>media_tag_get_tag_id()</code> function.</p>
<p>The callback is identical to the one used in the <a href="#tag_list">Retrieving Tag Information</a> use case.</p>
<pre class="prettyprint">
GList *tag_list = NULL;
ret = media_tag_get_tag_id(tag_handle, &tag_id);
</pre>
</li>
-<li>Delete the tag with the <span style="font-family: Courier New,Courier,monospace;">media_tag_delete_from_db()</span> function.
+<li>Delete the tag with the <code>media_tag_delete_from_db()</code> function.
<pre class="prettyprint">
ret = media_tag_delete_from_db(tag_id);
</pre>
<p>To access information about the storages:</p>
<ol>
-<li>Define a callback function for the <span style="font-family: Courier New,Courier,monospace;">media_storage_foreach_storage_from_db()</span> function, called for each available storage. Use the callback to create a list of storages.
+<li>Define a callback function for the <code>media_storage_foreach_storage_from_db()</code> function, called for each available storage. Use the callback to create a list of storages.
<pre class="prettyprint">
void
storage_cb(media_storage_h storage, void *user_data)
*list = g_list_append(*list, new_media);
}
</pre></li>
-<li>To find the storages, call the <span style="font-family: Courier New,Courier,monospace;">media_storage_foreach_storage_from_db()</span> function with the defined callback. After the callback has created the storage list, you can access the storage details with various <span style="font-family: Courier New,Courier,monospace;">media_storage_get_XXX()</span> functions.
+<li>To find the storages, call the <code>media_storage_foreach_storage_from_db()</code> function with the defined callback. After the callback has created the storage list, you can access the storage details with various <code>media_storage_get_XXX()</code> functions.
<pre class="prettyprint">
char *id = NULL;
char *name = NULL;
ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &storage_list);
if (ret != MEDIA_CONTENT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG, "media_storage_foreach_storage_from_db failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG,
+ "media_storage_foreach_storage_from_db failed: %d", ret);
return ret;
} else {
<h2 id="find_groups" name="find_groups">Finding Media Item Groups</h2>
- <p>A group is a collection of media items which have the same value of a given property. For example, if the property is the artist, there are as many groups as there are artists, and each group consists of items by the same artist. The possible groups are determined by the <span style="font-family: Courier New,Courier,monospace;">media_group_e</span> enumerator values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_ARTIST</span> and <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_MIME_TYPE</span>.</p>
+ <p>A group is a collection of media items which have the same value of a given property. For example, if the property is the artist, there are as many groups as there are artists, and each group consists of items by the same artist. The possible groups are determined by the <code>media_group_e</code> enumerator values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">wearable</a> applications), such as <code>MEDIA_CONTENT_GROUP_ARTIST</code> and <code>MEDIA_CONTENT_GROUP_MIME_TYPE</code>.</p>
<p>To find media item groups and filter the results:</p>
<li>To group media files based on the MIME type:
<ol type="a"><li>
-<p>To find the number of MIME type-related groups, use the <span style="font-family: Courier New,Courier,monospace;">media_group_get_group_count_from_db()</span> function:</p>
+<p>To find the number of MIME type-related groups, use the <code>media_group_get_group_count_from_db()</code> function:</p>
<pre class="prettyprint">
media_group_e group = MEDIA_CONTENT_GROUP_MIME_TYPE;
dlog_print(DLOG_DEBUG, LOG_TAG, "Group count: %d\n", count);
</pre>
-<p>Since the filter (first parameter) is set to <span style="font-family: Courier New,Courier,monospace;">NULL</span>, no filtering is performed and all groups are counted.</p></li>
+<p>Since the filter (first parameter) is set to <code>NULL</code>, no filtering is performed and all groups are counted.</p></li>
-<li><p>To find the media item groups, use the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_group_from_db()</span> function.</p>
+<li><p>To find the media item groups, use the <code>media_group_foreach_group_from_db()</code> function.</p>
-<p>To find only a subset of the groups, use a filter. If you want to find all groups, set the filter parameter to <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<p>To find only a subset of the groups, use a filter. If you want to find all groups, set the filter parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
/* Find all media group items */
media_group_foreach_group_from_db(NULL, group, group_cb, (void *)group);
media_group_foreach_group_from_db(filter, group, group_cb, (void *)group);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">media_group_foreach_group_from_db()</span> function requires a callback, which is called for every found media item group. The function is synchronous, and it blocks until the callback is called for all media item groups or the callback returns <span style="font-family: Courier New,Courier,monospace;">false</span>. For information on how to implement the callback, see <a href="#read_group">Reading Media Item Group Information</a>.</p>
+<p>The <
code>media_group_foreach_group_from_db()</code> function requires a callback, which is called for every found media item group. The function is synchronous, and it blocks until the callback is called for all media item groups or the callback returns <code>false</code>. For information on how to implement the callback, see <a href="#read_group">Reading Media Item Group Information</a>.</p>
</li>
</ol></li>
<li>Destroy the filter:
<h2 id="read_group" name="read_group">Reading Media Item Group Information</h2>
-<p>To read media item group information, define a callback for the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_group_from_db()</span> function and retrieve the basic group information (group items and number of items in the group) in the callback:</p>
+<p>To read media item group information, define a callback for the <code>media_group_foreach_group_from_db()</code> function and retrieve the basic group information (group items and number of items in the group) in the callback:</p>
<ol>
<li>Read the media item group details within the callback:
<pre class="prettyprint">
group_cb(const char *name, void *user_data)
{
</pre>
-<p>The group name is passed as the <span style="font-family: Courier New,Courier,monospace;">name</span> parameter. In this case, names are set to various found MIME types, such as <span style="font-family: Courier New,Courier,monospace;">image/png</span> and <span style="font-family: Courier New,Courier,monospace;">audio/mpeg</span>.</p>
-<p>The callback return value determines whether the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace;">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace;">false</span>).</p>
+<p>The group name is passed as the <code>name</code> parameter. In this case, names are set to various found MIME types, such as <code>image/png</code> and <code>audio/mpeg</code>.</p>
+<p>The callback return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p>
</li>
-<li>Once you have the group name and identifier (passed in <span style="font-family: Courier New,Courier,monospace;">user_data</span>), you can read the group information:
+<li>Once you have the group name and identifier (passed in <code>user_data</code>), you can read the group information:
<ul>
<li>
-<p>Get the number of items in the group using the <span style="font-family: Courier New,Courier,monospace;">media_group_get_media_count_from_db()</span> function.</p>
-<p>The third parameter is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace;">NULL</span>, all items in the group are counted.</p>
+<p>Get the number of items in the group using the <code>media_group_get_media_count_from_db()</code> function.</p>
+<p>The third parameter is the filter. If it is set to <code>NULL</code>, all items in the group are counted.</p>
<pre class="prettyprint">
media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
media_group_e group = (media_group_e) user_data;
dlog_print(DLOG_DEBUG, LOG_TAG, "Media count in group: %d\n", count);
</pre></li>
<li>
-<p>Get all items in the group using the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. Define a callback (<span style="font-family: Courier New,Courier,monospace;">media_cb()</span>) for the function to be triggered for each found item.</p>
+<p>Get all items in the group using the <code>media_group_foreach_media_from_db()</code> function. Define a callback (<code>media_cb()</code>) for the function to be triggered for each found item.</p>
<pre class="prettyprint">
media_group_foreach_media_from_db(name, group, NULL, media_cb, NULL);
</pre></li></ul></li></ol>
<h2 id="media_info" name="media_info">Media Information</h2>
-<p>You can get the media data from the media database using the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function.</p>
+<p>You can get the media data from the media database using the <code>media_info_foreach_media_from_db()</code> function.</p>
<p>After that, you can get the general information of media and specific information of each media type.</p>
<p>The following tables list the information available about the media files.</p>
+<p align="center" class="Table"><strong>Table: General information</strong></p>
<table>
- <caption>
- Table: General information
- </caption>
<tbody>
<tr>
<th>Metadata name</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
+ <td><code>Media ID</code></td>
<td>ID of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">File path</span></td>
+ <td><code>File path</code></td>
<td>Path of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Display name</span></td>
+ <td><code>Display name</code></td>
<td>Display name of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media type</span></td>
+ <td><code>Media type</code></td>
<td>The media type of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Mime type</span></td>
+ <td><code>Mime type</code></td>
<td>Mime type of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Size</span></td>
+ <td><code>Size</code></td>
<td>File size of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Added time</span></td>
+ <td><code>Added time</code></td>
<td>The time the media content was added in the database</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Modified time</span></td>
+ <td><code>Modified time</code></td>
<td>The last modification time of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Timeline</span></td>
+ <td><code>Timeline</code></td>
<td>The time the media content was created
<p>You can use this value to sort the content.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Thumbnail path</span></td>
+ <td><code>Thumbnail path</code></td>
<td>Path of the stored thumbnail image of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Description</span></td>
+ <td><code>Description</code></td>
<td>Description of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Longitude</span></td>
+ <td><code>Longitude</code></td>
<td>Longitude of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Latitude</span></td>
+ <td><code>Latitude</code></td>
<td>Latitude of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Altitude</span></td>
+ <td><code>Altitude</code></td>
<td>Altitude of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Weather</span></td>
+ <td><code>Weather</code></td>
<td>Weather information of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Rating</span></td>
+ <td><code>Rating</code></td>
<td>Rating of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Favorite</span></td>
+ <td><code>Favorite</code></td>
<td>Favorite of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Author</span></td>
+ <td><code>Author</code></td>
<td>The author of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Provider</span></td>
+ <td><code>Provider</code></td>
<td>Provider of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Content name</span></td>
+ <td><code>Content name</code></td>
<td>Content name of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Title</span></td>
+ <td><code>Title</code></td>
<td>Title of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Category</span></td>
+ <td><code>Category</code></td>
<td>Category of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Location tag</span></td>
+ <td><code>Location tag</code></td>
<td>Location tag of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Age rating</span></td>
+ <td><code>Age rating</code></td>
<td>Age rating of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Keyword</span></td>
+ <td><code>Keyword</code></td>
<td>Keyword of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Is DRM</span></td>
+ <td><code>Is DRM</code></td>
<td>Check flag for DRM content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Storage type</span></td>
+ <td><code>Storage type</code></td>
<td>Storage type of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Played count</span></td>
+ <td><code>Played count</code></td>
<td>Played count of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Played time</span></td>
+ <td><code>Played time</code></td>
<td>Last played time of the media content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Played position</span></td>
+ <td><code>Played position</code></td>
<td>Last played position of the media content</td>
</tr>
</tbody>
</table>
-<p>For metadata of an audio file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_audio()</span> function with the media handle.</p>
+<p>For metadata of an audio file, call the <code>media_info_get_audio()</code> function with the media handle.</p>
+<p align="center" class="Table"><strong>Table: Audio metadata (only for audio files)</strong></p>
<table>
- <caption>
- Table: Audio metadata (only for audio files)
- </caption>
<tbody>
<tr>
<th>Metadata name</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
+ <td><code>Media ID</code></td>
<td>Media ID of the audio content
<p>This value is same as the media ID in general information.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Album</span></td>
+ <td><code>Album</code></td>
<td>Album information of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td>
+ <td><code>Artist</code></td>
<td>Artist of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Album Artist</span></td>
+ <td><code>Album Artist</code></td>
<td>Album artist of the audio content
<p>The artist and album artist can be the same.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td>
+ <td><code>Genre</code></td>
<td>Genre of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td>
+ <td><code>Composer</code></td>
<td>Composer of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Year</span></td>
+ <td><code>Year</code></td>
<td>The year the audio content was created</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td>
+ <td><code>Recorded date</code></td>
<td>The date the audio content was recorded</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td>
+ <td><code>Copyright</code></td>
<td>Copyright information of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td>
+ <td><code>Track number</code></td>
<td>Track number of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td>
+ <td><code>Bit rate</code></td>
<td>Bit rate of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Bit per sample</span></td>
+ <td><code>Bit per sample</code></td>
<td>Bit per sample of the audio content
<p>The bit per sample is the same as the sample format. The sample format is the number of digits in the digital representation of each sample.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Sample rate</span></td>
+ <td><code>Sample rate</code></td>
<td>Sample rate of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Channel</span></td>
+ <td><code>Channel</code></td>
<td>Channel information of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td>
+ <td><code>Duration</code></td>
<td>Duration of the audio content</td>
</tr>
</tbody>
</table>
-<p>For metadata of an image file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_image()</span> function with the media handle.</p>
+<p>For metadata of an image file, call the <code>media_info_get_image()</code> function with the media handle.</p>
+<p align="center" class="Table"><strong>Table: Image metadata (only for image files)</strong></p>
<table>
- <caption>
- Table: Image metadata (only for image files)
- </caption>
<tbody>
<tr>
<th>Metadata name</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
+ <td><code>Media ID</code></td>
<td>Media ID of the image
<p>This value is the same as the media ID in the general information.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Width</span></td>
+ <td><code>Width</code></td>
<td>Width of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Height</span></td>
+ <td><code>Height</code></td>
<td>Height of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Exposure time</span></td>
+ <td><code>Exposure time</code></td>
<td>Exposure time of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">F-number</span></td>
+ <td><code>F-number</code></td>
<td>F-number of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ISO</span></td>
+ <td><code>ISO</code></td>
<td>ISO information of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Model</span></td>
+ <td><code>Model</code></td>
<td>Model name of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Orientation</span></td>
+ <td><code>Orientation</code></td>
<td>Orientation information of the image</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Date taken</span></td>
+ <td><code>Date taken</code></td>
<td>The time the image was created
<p>You can get this information from the EXIF tag. If there is no EXIF tag for the image, set the created time in the file system.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Is burstshot</span></td>
+ <td><code>Is burstshot</code></td>
<td>Check flag for a burst shot of the image
<p>The burst shot is a continuous shooting mode.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Burstshot ID</span></td>
+ <td><code>Burstshot ID</code></td>
<td>ID of a burst shot image
<p>Assign the same ID to the burst shooting mode.</p></td>
</tr>
</tbody>
</table>
-<p>For metadata of a video file, call <span style="font-family: Courier New,Courier,monospace">withmedia_info_get_video()</span> function with the media handle.</p>
-
+<p>For metadata of a video file, call <code>withmedia_info_get_video()</code> function with the media handle.</p>
+ <p align="center" class="Table"><strong>Table: Video metadata (only for video files)</strong></p>
<table>
- <caption>
- Table: Video metadata (only for video files)
- </caption>
<tbody>
<tr>
<th>Metadata name</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
+ <td><code>Media ID</code></td>
<td>The media ID of the video content
<p>This value is same with media ID of general information.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Album</span></td>
+ <td><code>Album</code></td>
<td>Album of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td>
+ <td><code>Artist</code></td>
<td>Artist of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Album artist</span></td>
+ <td><code>Album artist</code></td>
<td>Album artist of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td>
+ <td><code>Genre</code></td>
<td>Genre of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td>
+ <td><code>Composer</code></td>
<td>Media composer of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Year</span></td>
+ <td><code>Year</code></td>
<td>The year the video content was created</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td>
+ <td><code>Recorded date</code></td>
<td>The date the video content was recorded</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td>
+ <td><code>Copyright</code></td>
<td>Copyright of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td>
+ <td><code>Track number</code></td>
<td>Track number of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td>
+ <td><code>Bit rate</code></td>
<td>Bit rate of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td>
+ <td><code>Duration</code></td>
<td>Duration of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Width</span></td>
+ <td><code>Width</code></td>
<td>Width of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Height</span></td>
+ <td><code>Height</code></td>
<td>Height of the video content</td>
</tr>
</tbody>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Media-controller_client" target="_blank">Media-controller Client Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Media-controller_server" target="_blank">Media-controller Server Sample Description</a></li>
</ul>
<h1>Media Controller</h1>
<p>Tizen enables you to communicate between the media controller server and the media controller client. You can send commands from the client to the server, and the client can request updated metadata and playback information from the server.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>The main features of the Media Controller API include:</p>
<ul>
<li>Updating and retrieving information
<p>You can <a href="#send_media">send a command</a> to the server from the client side, and then process the command on the server side.</p>
<p>The client can request information from the server, and receive it through a callback.</p>
<p>The following tables define the various information the client can receive.</p>
- <table>
- <caption>
- Table: Media controller server state attributes
- </caption>
+ <p align="center" class="Table"><strong>Table: Media controller server state attributes</strong></p>
+ <table>
<tbody>
<tr>
<th>Attribute</th>
<td colspan="2"><strong>Server states</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_SERVER_ACTIVATE</span></td>
+ <td><code>MC_SERVER_ACTIVATE</code></td>
<td>Requested media controller server is active</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_SERVER_DEACTIVATE</span></td>
+ <td><code>MC_SERVER_DEACTIVATE</code></td>
<td>Requested media controller server is not active</td>
</tr>
<tr>
<td colspan="2"><strong>Playback states</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_NONE</span></td>
+ <td><code>MC_PLAYBACK_STATE_NONE</code></td>
<td>No history of media playback</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_PLAYING</span></td>
+ <td><code>MC_PLAYBACK_STATE_PLAYING</code></td>
<td>Playback state of playing</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_PAUSED</span></td>
+ <td><code>MC_PLAYBACK_STATE_PAUSED</code></td>
<td>Playback state of paused</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_STOPPED</span></td>
+ <td><code>MC_PLAYBACK_STATE_STOPPED</code></td>
<td>Playback state of stopped</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_NEXT_FILE</span></td>
+ <td><code>MC_PLAYBACK_STATE_NEXT_FILE</code></td>
<td>Playback state of next file</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_PREV_FILE</span></td>
+ <td><code>MC_PLAYBACK_STATE_PREV_FILE</code></td>
<td>Playback state of previous file</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_FAST_FORWARD</span></td>
+ <td><code>MC_PLAYBACK_STATE_FAST_FORWARD</code></td>
<td>Playback state of fast forward</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_PLAYBACK_STATE_REWIND</span></td>
+ <td><code>MC_PLAYBACK_STATE_REWIND</code></td>
<td>Playback state of rewind</td>
</tr>
<tr>
<td colspan="2"><strong>Shuffle mode states</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_SHUFFLE_MODE_ON</span></td>
+ <td><code>MC_SHUFFLE_MODE_ON</code></td>
<td>Shuffle mode is on</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_SHUFFLE_MODE_OFF</span></td>
+ <td><code>MC_SHUFFLE_MODE_OFF</code></td>
<td>Shuffle mode is off</td>
</tr>
<tr>
<td colspan="2"><strong>Repeat mode states</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_REPEAT_MODE_ON</span></td>
+ <td><code>MC_REPEAT_MODE_ON</code></td>
<td>Repeat mode is on</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_REPEAT_MODE_OFF</span></td>
+ <td><code>MC_REPEAT_MODE_OFF</code></td>
<td>Repeat mode is off</td>
</tr>
</tbody>
</table>
- <table>
- <caption>
- Table: Media controller server metadata attributes
- </caption>
+ <p align="center" class="Table"><strong>Table: Media controller server metadata attributes</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_TITLE</span></td>
+ <td><code>MC_META_MEDIA_TITLE</code></td>
<td>Title of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_ARTIST</span></td>
+ <td><code>MC_META_MEDIA_ARTIST</code></td>
<td>Artist of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_ALBUM</span></td>
+ <td><code>MC_META_MEDIA_ALBUM</code></td>
<td>Album name of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_AUTHOR</span></td>
+ <td><code>MC_META_MEDIA_AUTHOR</code></td>
<td>Author of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_GENRE</span></td>
+ <td><code>MC_META_MEDIA_GENRE</code></td>
<td>Genre of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_DURATION</span></td>
+ <td><code>MC_META_MEDIA_DURATION</code></td>
<td>Duration of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_DATE</span></td>
+ <td><code>MC_META_MEDIA_DATE</code></td>
<td>Date of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_COPYRIGHT</span></td>
+ <td><code>MC_META_MEDIA_COPYRIGHT</code></td>
<td>Copyright of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_DESCRIPTION</span></td>
+ <td><code>MC_META_MEDIA_DESCRIPTION</code></td>
<td>Description of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_TRACK_NUM</span></td>
+ <td><code>MC_META_MEDIA_TRACK_NUM</code></td>
<td>Track number of the latest content in the media controller server</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">MC_META_MEDIA_PICTURE</span></td>
+ <td><code>MC_META_MEDIA_PICTURE</code></td>
<td>Album art of the latest content in the media controller server</td>
</tr>
</tbody>
<li>To use the media controller server:
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__SERVER__MODULE.html">Media Controller Server</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><media_controller_server.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Controller Server API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__SERVER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTROLLER__SERVER__MODULE.html">wearable</a> applications), include the <code><media_controller_server.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_controller_server.h>
</pre>
<p>To use the media controller client:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__CLIENT__MODULE.html">Media Controller Client</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><media_controller_client.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Controller Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTROLLER__CLIENT__MODULE.html">wearable</a> applications), include the <code><media_controller_client.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_controller_client.h>
<li>
-<p>Create the media controller server handle using the <span style="font-family: Courier New,Courier,monospace;">mc_server_create()</span> function:</p>
+<p>Create the media controller server handle using the <code>mc_server_create()</code> function:</p>
<pre class="prettyprint">
ret = mc_server_create(&g_server_h);
<li>
-<p>Set the metadata or playback information to be updated using the corresponding <span style="font-family: Courier New,Courier,monospace;">mc_server_set_XXX()</span> function, and then update the metadata or playback information using the corresponding <span style="font-family: Courier New,Courier,monospace;">mc_server_update_XXX()</span> function.</p>
+<p>Set the metadata or playback information to be updated using the corresponding <code>mc_server_set_XXX()</code> function, and then update the metadata or playback information using the corresponding <code>mc_server_update_XXX()</code> function.</p>
-<p>For example, to update the playback state information, set the information to be updated using the <span style="font-family: Courier New,Courier,monospace;">mc_server_set_playback_state()</span> function, and then update the information using the <span style="font-family: Courier New,Courier,monospace;">mc_server_update_playback_info()</span> function:</p>
+<p>For example, to update the playback state information, set the information to be updated using the <code>mc_server_set_playback_state()</code> function, and then update the information using the <code>mc_server_update_playback_info()</code> function:</p>
<pre class="prettyprint">
ret = mc_server_set_playback_state(g_mc_server, MC_PLAYBACK_STATE_PLAYING);
<li>
-<p>When no longer needed, destroy the media controller server handle using the <span style="font-family: Courier New,Courier,monospace;">mc_server_destroy()</span> function:</p>
+<p>When no longer needed, destroy the media controller server handle using the <code>mc_server_destroy()</code> function:</p>
<pre class="prettyprint">
mc_server_destroy(g_server_h);
<li>
-<p>Create the media controller client handle using the <span style="font-family: Courier New,Courier,monospace;">mc_client_create()</span> function:</p>
+<p>Create the media controller client handle using the <code>mc_client_create()</code> function:</p>
<pre class="prettyprint">
ret = mc_client_create(&g_client_h);
<li>
-<p>Retrieve the server name using the <span style="font-family: Courier New,Courier,monospace;">mc_client_get_latest_server_info()</span> function:</p>
+<p>Retrieve the server name using the <code>mc_client_get_latest_server_info()</code> function:</p>
<pre class="prettyprint">
char *server_name = NULL;
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>
<li>
-<p>Retrieve the metadata or playback information from the server using the corresponding <span style="font-family: Courier New,Courier,monospace;">mc_client_get_server_XXX()</span> function. Use the server name retrieved in the previous step to identify the server.</p>
+<p>Retrieve the metadata or playback information from the server using the corresponding <code>mc_client_get_server_XXX()</code> function. Use the server name retrieved in the previous step to identify the server.</p>
-<p>For example, to retrieve the playback information from the server, use the <span style="font-family: Courier New,Courier,monospace;">mc_client_get_server_playback_info()</span> function:</p>
+<p>For example, to retrieve the playback information from the server, use the <code>mc_client_get_server_playback_info()</code> function:</p>
<pre class="prettyprint">
mc_playback_h playback = NULL;
dlog_print(DLOG_DEBUG, LOG_TAG, "Playback State: %d\n", playback_state);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">mc_client_get_playback_state()</span> function retrieves the playback state from the playback information returned by the <span style="font-family: Courier New,Courier,monospace;">mc_client_get_server_playback_info()</span> function.</p>
+<p>The <code>mc_client_get_playback_state()</code> function retrieves the playback state from the playback information returned by the <code>mc_client_get_server_playback_info()</code> function.</p>
</li>
<li>
-<p>When no longer needed, destroy the media controller client handle using the <span style="font-family: Courier New,Courier,monospace;">mc_client_destroy()</span> function:</p>
+<p>When no longer needed, destroy the media controller client handle using the <code>mc_client_destroy()</code> function:</p>
<pre class="prettyprint">
mc_client_destroy(g_client_h);
<li>
-<p>Create the media controller client handle using the <span style="font-family: Courier New,Courier,monospace;">mc_client_create()</span> function:</p>
+<p>Create the media controller client handle using the <code>mc_client_create()</code> function:</p>
<pre class="prettyprint">
ret = mc_client_create(&g_client_h);
<li>
-<p>Retrieve the server name using the <span style="font-family: Courier New,Courier,monospace;">mc_client_get_latest_server_info()</span> function:</p>
+<p>Retrieve the server name using the <code>mc_client_get_latest_server_info()</code> function:</p>
<pre class="prettyprint">
char *server_name = NULL;
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>
<li>
-<p>Send the command to the server using the corresponding <span style="font-family: Courier New,Courier,monospace;">mc_client_send_XXX()</span> function. Use the server name retrieved in the previous step to identify the server.</p>
+<p>Send the command to the server using the corresponding <code>mc_client_send_XXX()</code> function. Use the server name retrieved in the previous step to identify the server.</p>
-<p>For example, to send a playback state change command to the server, use the <span style="font-family: Courier New,Courier,monospace;">mc_client_send_playback_state_command()</span> function with the new state defined in the third parameter:</p>
+<p>For example, to send a playback state change command to the server, use the <code>mc_client_send_playback_state_command()</code> function with the new state defined in the third parameter:</p>
<pre class="prettyprint">
mc_playback_h playback = NULL;
ret = mc_client_send_playback_state_command(g_client_h, server_name, playback_state);
</pre>
-<p>If you want to define your own commands to send to the server, use the <span style="font-family: Courier New,Courier,monospace;">mc_client_send_custom_command()</span> function.</p>
+<p>If you want to define your own commands to send to the server, use the <code>mc_client_send_custom_command()</code> function.</p>
</li>
<li>
-<p>When no longer needed, destroy the media controller client handle using the <span style="font-family: Courier New,Courier,monospace;">mc_client_destroy()</span> function:</p>
+<p>When no longer needed, destroy the media controller client handle using the <code>mc_client_destroy()</code> function:</p>
<pre class="prettyprint">
mc_client_destroy(g_client_h);
<li>
-<p>Create the media controller server handle using the <span style="font-family: Courier New,Courier,monospace;">mc_server_create()</span> function:</p>
+<p>Create the media controller server handle using the <code>mc_server_create()</code> function:</p>
<pre class="prettyprint">
ret = mc_server_create(&g_server_h);
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>
<li>
-<p>To register a callback for playback state change commands, use the <span style="font-family: Courier New,Courier,monospace;">mc_server_set_playback_state_command_received_cb()</span> function.</p>
+<p>To register a callback for playback state change commands, use the <code>mc_server_set_playback_state_command_received_cb()</code> function.</p>
</li>
<li>
-<p>To register a callback for a custom command, use the <span style="font-family: Courier New,Courier,monospace;">mc_server_set_custom_command_received_cb()</span> function.</p>
+<p>To register a callback for a custom command, use the <code>mc_server_set_custom_command_received_cb()</code> function.</p>
</li>
<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>
<li>
-<p>When no longer needed, destroy the media controller server handle using the <span style="font-family: Courier New,Courier,monospace;">mc_server_destroy()</span> function:</p>
+<p>When no longer needed, destroy the media controller server handle using the <code>mc_server_destroy()</code> function:</p>
<pre class="prettyprint">
mc_server_destroy(g_server_h);
<li><a href="#packet">Filling the Media Packet with Data</a></li>
<li><a href="#management">Running the Media Codec</a></li>
</ul></li>
- <li>VIdeo transcoding
+ <li>Video transcoding
<ul class="toc">
<li><a href="#prepare">Preparing the Video Utilities</a></li>
<li><a href="#manage">Managing Transcoding</a></li>
<ul>
<li>Media codecs
<p>You can prepare the <a href="#codecs">media codecs</a>, fill the media packet with data, and run the media codec.</p></li>
-<li>Video transcoding
+<li>Video transcoding <strong>in mobile applications only</strong>
<p>You can prepare the video utilities, manage and monitor <a href="#video">video transcoding</a>, and set parameters.</p></li>
</ul>
<p>To use codecs:</p>
-<ol><li><p><a href="#prepare">Create a handle for the codec instance</a> with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_create()</span> function. After a successful handle creation, your system can use the codec. </p></li>
+<ol><li><p><a href="#prepare">Create a handle for the codec instance</a> with the <code>mediacodec_create()</code> function. After a successful handle creation, your system can use the codec. </p></li>
-<li><p>Set the codec configuration with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_codec()</span>, and <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_venc_info()</span> functions. </p>
-<p>You can also prepare for the available ready state with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_prepare()</span> function.</p></li>
+<li><p>Set the codec configuration with the <code>mediacodec_set_codec()</code>, and <code>mediacodec_set_vdec_info()</code> or <code>mediacodec_set_venc_info()</code> functions. </p>
+<p>You can also prepare for the available ready state with the <code>mediacodec_prepare()</code> function.</p></li>
-<li><p>Decode and encode with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace;">mediacodec_get_output()</span> functions.</p></li></ol>
+<li><p>Decode and encode with the <code>mediacodec_process_input()</code> and <code>mediacodec_get_output()</code> functions.</p></li></ol>
-<p>A single <span style="font-family: Courier New,Courier,monospace;">MediaCodec</span> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on "raw" data, so strip off any file headers (such as ID3 tags).</p>
+<p>A single <code>MediaCodec</code> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on "raw" data, so strip off any file headers (such as ID3 tags).</p>
<p>The following figures illustrate the general media state changes.</p>
- <p class="figure">Figure: Media state changes</p>
+ <p align="center"><strong>Figure: Media state changes</strong></p>
<p align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p>
<p>After you have initialized the codecs, you can:</p>
<ol><li><a href="#packet">Fill the media packet with data</a>.</li>
<li><a href="#management">Run the media codec</a>.</li></ol>
-<h2 id="video">Video Transcoding</h2>
+<h2 id="video">Video Transcoding in Mobile Applications</h2>
<p>Tizen offers the following video transcoding features:</p>
<li>Trim
<p>A trim chapter is available in the video editor.</p></li></ul>
-<p>This feature is supported in mobile applications only.</p>
-
<p>With the Video Util API you can:</p>
<ul><li><a href="#prepare">Set up the video utilities</a></li>
<li><a href="#manage">Manage and monitor</a> the transcoding process</li>
<p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
- <p class="figure">Figure: Transcoder</p>
+ <p align="center"><strong>Figure: Transcoder</strong></p>
<p align="center"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
<p>The following table lists the supported audio and video codecs (decoder).</p>
+ <p align="center" class="Table"><strong>Table: Decoders</strong></p>
<table border="1">
- <caption>Table: Decoders</caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>
<p>The following table lists the supported audio and video codecs (encoder).</p>
+ <p align="center" class="Table"><strong>Table: Encoders</strong></p>
<table border="1">
- <caption>Table: Encoders</caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>
<p>To enable your application to use the media conversion functionalities:</p>
<ol>
<li>
-<p>To use the functions and data types of the Media Codec API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_codec.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Codec API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">wearable</a> applications), include the <code><media_codec.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_codec.h>
</pre>
</li>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a> API, include the <span style="font-family: Courier New,Courier,monospace"><video_util.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a> API, include the <code><video_util.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <video_util.h>
</pre>
<ol>
<li>
-<p>Create a handle for the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_create()</span> function:</p>
+<p>Create a handle for the media codec using the <code>mediacodec_create()</code> function:</p>
<pre class="prettyprint">
mediacodec_h *mediacodec;
<li>
-<p>Set the codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_codec()</span> function:</p>
+<p>Set the codec using the <code>mediacodec_set_codec()</code> function:</p>
<pre class="prettyprint">
ret = mediacodec_set_codec(mediacodec, (mediacodec_codec_type_e)codecid, flag);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">mediacodec_codec_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">mediacodec_support_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">wearable</a> applications) enumerations define the media codec type and support type (second and third parameters).</p>
+<p>The <
code>mediacodec_codec_type_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">wearable</a> applications) and <code>mediacodec_support_type_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">wearable</a> applications) enumerations define the media codec type and support type (second and third parameters).</p>
</li>
<li>
-<p>To receive notifications when the input buffers are used, register a callback using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_input_buffer_used_cb()</span> function. The callback is invoked when the input buffers are queued to the codec.</p>
+<p>To receive notifications when the input buffers are used, register a callback using the <code>mediacodec_set_input_buffer_used_cb()</code> function. The callback is invoked when the input buffers are queued to the codec.</p>
<pre class="prettyprint">
ret = mediacodec_set_input_buffer_used_cb(mediacodec, _input_buffer_used_cb, NULL);
</pre>
-<p>If a <span style="font-family: Courier New,Courier,monospace">media_packet</span> is used, it must be destroyed when the callback is invoked:</p>
+<p>If a <code>media_packet</code> is used, it must be destroyed when the callback is invoked:</p>
<pre class="prettyprint">
static void
<li>
-<p>To receive notifications when the output buffers are dequeued, register a callback using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_output_buffer_available_cb()</span> function. The callback is invoked when the output buffers are dequeued.</p>
+<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 <span style="font-family: Courier New,Courier,monospace">media_packet</span> is dequeued from the codec, this callback is invoked.</p>
+<p>If the <code>media_packet</code> is dequeued from the codec, this callback is invoked.</p>
-<p>Retrieve the output packet using the <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> function inside the callback:</p>
+<p>Retrieve the output packet using the <code>mediacodec_get_output()</code> function inside the callback:</p>
<pre class="prettyprint">
static void
<h2 name="packet" id="packet">Filling the Media Packet with Data</h2>
-<p>After the <span style="font-family: Courier New,Courier,monospace">media_packet</span> is allocated with corresponding codec MIME types, fill it with data:</p>
+<p>After the <code>media_packet</code> is allocated with corresponding codec MIME types, fill it with data:</p>
<ol>
<li>
-<p>Retrieve the data pointer from the <span style="font-family: Courier New,Courier,monospace">media_packet</span>, and set the buffer size on the preallocated packet:</p>
+<p>Retrieve the data pointer from the <code>media_packet</code>, and set the buffer size on the preallocated packet:</p>
<pre class="prettyprint">
unsigned char nal[48] = {0x00, 0x00, 0x00, 0x01, 0x67, 0x4D, 0x40, 0x33,
<h2 name="management" id="management">Running the Media Codec</h2>
-<p>After <a href="#prepare">preparing the medic codec</a> and <a href="#packet">filling the <span style="font-family: Courier New,Courier,monospace">media_packet</span> with data</a>, run the media codec in the following loop:</p>
+<p>After <a href="#prepare">preparing the medic codec</a> and <a href="#packet">filling the <code>media_packet</code> with data</a>, run the media codec in the following loop:</p>
<ol>
<li>
-<p>Prepare the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_prepare()</span> function:</p>
+<p>Prepare the media codec using the <code>mediacodec_prepare()</code> function:</p>
<pre class="prettyprint">
ret = mediacodec_prepare(mediacodec);
<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">media_packet</span> flags using the <span style="font-family: Courier New,Courier,monospace">media_packet_set_flags()</span> function:</p>
+<p>Set the <code>media_packet</code> flags using the <code>media_packet_set_flags()</code> function:</p>
<ul>
<li>
-<p>If the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains codec data, such as SPS or PPS in case of H.264, set the codec config flag:</p>
+<p>If the <code>media_packet</code> contains codec data, such as SPS or PPS in case of H.264, set the codec config flag:</p>
<pre class="prettyprint">
ret = media_packet_set_flags(pkt, MEDIA_PACKET_CODEC_CONFIG);
<li>
-<p>If the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains the end of the stream, set the end-of-stream (eos) flag:</p>
+<p>If the <code>media_packet</code> contains the end of the stream, set the end-of-stream (eos) flag:</p>
<pre class="prettyprint">
ret = media_packet_set_flags(pkt, MEDIA_PACKET_END_OF_STREAM);
</pre>
-<p>The eos callback is invoked if the eos packet is decoded or encoded and the eos callback is registered with the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_eos_cb()</span> function.</p>
+<p>The eos callback is invoked if the eos packet is decoded or encoded and the eos callback is registered with the <code>mediacodec_set_eos_cb()</code> function.</p>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You must set the flags before calling the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span> function.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ You must set the flags before calling the <code>mediacodec_process_input()</code> function.
+ </div>
</li>
<li>
-<p>Start the media codec loop using the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> functions:</p>
+<p>Start the media codec loop using the <code>mediacodec_process_input()</code> and <code>mediacodec_get_output()</code> functions:</p>
<pre class="prettyprint">
media_packet_h in_buf = NULL;
<li>
-<p>After calling the <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> function, check the frame using the <span style="font-family: Courier New,Courier,monospace">media_packet</span>.</p>
+<p>After calling the <code>mediacodec_get_output()</code> function, check the frame using the <code>media_packet</code>.</p>
-<p>To check whether the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains key frame or codec data:</p>
+<p>To check whether the <code>media_packet</code> contains key frame or codec data:</p>
<pre class="prettyprint">
bool keyframe;
<li>
-<p>After the loop is over and you have finished working with the media codec, reset the codec and destroy the codec handle using the <span style="font-family: Courier New,Courier,monospace">mediacodec_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_destroy()</span> functions:</p>
+<p>After the loop is over and you have finished working with the media codec, reset the codec and destroy the codec handle using the <code>mediacodec_unprepare()</code> and <code>mediacodec_destroy()</code> functions:</p>
<pre class="prettyprint">
ret = mediacodec_unprepare(mediacodec);
ret = mediacodec_destroy(mediacodec);
</pre>
-<p>The media codec state changes to <span style="font-family: Courier New,Courier,monospace">MEDIACODEC_STATE_NONE</span>.</p>
+<p>The media codec state changes to <code>MEDIACODEC_STATE_NONE</code>.</p>
</li>
</li>
<li>
-<p>If the video util handle is successfully created, set the input file path using the <span style="font-family: Courier New,Courier,monospace">video_util_set_file_path()</span> function:</p>
+<p>If the video util handle is successfully created, set the input file path using the <code>video_util_set_file_path()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_file_path(video_h, *path);
</pre>
</li>
<li>
-<p>Set the file format using the <span style="font-family: Courier New,Courier,monospace">video_util_set_file_format()</span> function:</p>
+<p>Set the file format using the <code>video_util_set_file_format()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_file_format(video_h, VIDEO_UTIL_FILE_FORMAT_3GP);
</pre>
</li>
<li>
-<p>Set the audio codec using the <span style="font-family: Courier New,Courier,monospace">video_util_set_audio_codec()</span> function:</p>
+<p>Set the audio codec using the <code>video_util_set_audio_codec()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_audio_codec(video_h, VIDEO_UTIL_AUDIO_CODEC_AAC);
</pre>
</li>
<li>
-<p>Set the video codec using the <span style="font-family: Courier New,Courier,monospace">video_util_set_video_codec()</span> function:</p>
+<p>Set the video codec using the <code>video_util_set_video_codec()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_video_codec(video_h, VIDEO_UTIL_VIDEO_CODEC_MPEG4);
</pre>
</li>
<li>
-<p>Enable or disable the accurate seek mode using the <span style="font-family: Courier New,Courier,monospace">video_util_set_accurate_mode()</span> function.</p>
-<p>If you enable this mode, you can get an accurate frame for a given duration in the <span style="font-family: Courier New,Courier,monospace">video_util_start_transcoding()</span> function.</p>
+<p>Enable or disable the accurate seek mode using the <code>video_util_set_accurate_mode()</code> function.</p>
+<p>If you enable this mode, you can get an accurate frame for a given duration in the <code>video_util_start_transcoding()</code> function.</p>
<pre class="prettyprint">
ret = video_util_set_accurate_mode(video_h, 0);
</pre>
</li>
<li>
-<p>Set the video resolution using the <span style="font-family: Courier New,Courier,monospace">video_util_set_resolution()</span> function:</p>
+<p>Set the video resolution using the <code>video_util_set_resolution()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_resolution(video_h, 176, 144);
</pre>
</li>
<li>
-<p>Set the video frame rate using the <span style="font-family: Courier New,Courier,monospace">video_util_set_fps()</span> function:</p>
+<p>Set the video frame rate using the <code>video_util_set_fps()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_fps(video_h, 10);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the video util handle using the <span style="font-family: Courier New,Courier,monospace">video_util_destroy()</span> function:</p>
+<p>When no longer needed, destroy the video util handle using the <code>video_util_destroy()</code> function:</p>
<pre class="prettyprint">
ret = video_util_destroy(video_h);
</pre>
<ol>
<li>
-<p>Start the transcoding using the <span style="font-family: Courier New,Courier,monospace">video_util_start_transcoding()</span> function:</p>
+<p>Start the transcoding using the <code>video_util_start_transcoding()</code> function:</p>
<pre class="prettyprint">
ret = video_util_start_transcoding(video_h);
</pre>
<p>Monitor and manage the transcoding:</p>
<ul>
<li>
-<p>To retrieve the current transcoding progress, use the <span style="font-family: Courier New,Courier,monospace">video_util_get_progress_transcoding()</span> function. The function returns the current transcoding position (second parameter) and the duration of the transcoding (third parameter).</p>
+<p>To retrieve the current transcoding progress, use the <code>video_util_get_progress_transcoding()</code> function. The function returns the current transcoding position (second parameter) and the duration of the transcoding (third parameter).</p>
<pre class="prettyprint">
unsigned long current_position;
unsigned long duration;
</pre>
</li>
<li>
-<p>To cancel the transcoding process, use the <span style="font-family: Courier New,Courier,monospace">video_util_cancel_transcoding()</span> function. You must call this function before the transcoding complete callback is invoked.</p>
+<p>To cancel the transcoding process, use the <code>video_util_cancel_transcoding()</code> function. You must call this function before the transcoding complete callback is invoked.</p>
<pre class="prettyprint">
ret = video_util_cancel_transcoding(video_h);
</pre>
</li>
<li>
-<p>After the transcoding complete callback is invoked, destroy the video util handle using the <span style="font-family: Courier New,Courier,monospace">video_util_destroy()</span> function:</p>
+<p>After the transcoding complete callback is invoked, destroy the video util handle using the <code>video_util_destroy()</code> function:</p>
<pre class="prettyprint">
ret = video_util_destroy(video_h);
</pre>
<p>The function destroys the handle of a completed transcoding. If the function is called during the transcoding process, the function also cancels the transcoding.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you do not call the destroy function after the transcoding is complete, you cannot start a new transcoding process, and a memory crash can occur.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ If you do not call the destroy function after the transcoding is complete, you cannot start a new transcoding process, and a memory crash can occur.
+ </div>
+
</li>
</ol>
<p>Check the supported file formats:</p>
<ol type="a">
<li>
-<p>Check the supported file formats using the <span style="font-family: Courier New,Courier,monospace">video_util_foreach_supported_file_format()</span> function:</p>
+<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;
</ol>
</li>
<li>
-<p>Set the file format using the <span style="font-family: Courier New,Courier,monospace">video_util_set_file_format()</span> function:</p>
+<p>Set the file format using the <code>video_util_set_file_format()</code> function:</p>
<pre class="prettyprint">
ret = video_util_set_file_format(video_h, VIDEO_UTIL_FILE_FORMAT_3GP);
</pre>
<p>Check the supported audio and video codecs:</p>
<ol type="a">
<li>
-<p>Check the supported audio and video codecs using the <span style="font-family: Courier New,Courier,monospace">video_util_foreach_supported_audio_codec()</span> and <span style="font-family: Courier New,Courier,monospace">video_util_foreach_supported_video_codec()</span> functions:</p>
+<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;
<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#ga48da7f77144a99f5733a90d62805c435">video_util_audio_codec_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#gabadbb5a64155f42fe180bedac40f289e">video_util_video_codec_e</a> enumerations define the available audio and video codecs.</p>
</li>
</ol>
-<p>To check the support for a specified codec, such as <span style="font-family: Courier New,Courier,monospace;">VIDEO_UTIL_VIDEO_CODEC_MPEG4</span>:</p>
+<p>To check the support for a specified codec, such as <code>VIDEO_UTIL_VIDEO_CODEC_MPEG4</code>:</p>
<pre class="prettyprint">
static bool
video_util_video_supported(video_util_video_codec_e codec, void *user_data)
}
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>Set the audio and video codecs using the <span style="font-family: Courier New,Courier,monospace">video_util_set_audio_codec()</span> and <span style="font-family: Courier New,Courier,monospace">video_util_set_video_codec()</span> functions:</p>
+<p>Set the audio and video codecs using the <code>video_util_set_audio_codec()</code> and <code>video_util_set_video_codec()</code> functions:</p>
<pre class="prettyprint">
error_code = video_util_set_audio_codec(handle, VIDEO_UTIL_AUDIO_CODEC_AAC);
</li></ol></li>
<li>
-<p>Set the video resolution using the <span style="font-family: Courier New,Courier,monospace">video_util_set_resolution()</span> function:</p>
+<p>Set the video resolution using the <code>video_util_set_resolution()</code> function:</p>
<pre class="prettyprint">
int error_code = video_util_set_resolution(handle, 640, 480);
</pre>
</li>
<li>
-<p>Set the video frame rate using the <span style="font-family: Courier New,Courier,monospace">video_util_set_fps()</span> function:</p>
+<p>Set the video frame rate using the <code>video_util_set_fps()</code> function:</p>
<pre class="prettyprint">
int error_code = video_util_set_fps(handle, 25);
</pre>
<li><p><a href="#prepare">Prepare the video utilities.</a></p></li>
<li>
-<p>Start the transcoding using the <span style="font-family: Courier New,Courier,monospace;">video_util_start_transcoding()</span> function:</p>
+<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>
<li>
-<p>Retrieve the current transcoding progress using the <span style="font-family: Courier New,Courier,monospace;">video_util_get_progress_transcoding()</span> function within the transcoding progress callback:</p>
+<p>Retrieve the current transcoding progress using the <code>video_util_get_progress_transcoding()</code> function within the transcoding progress callback:</p>
<pre class="prettyprint">
error_code = video_util_get_progress_transcoding(handle, *current_position, *duration);
</pre>
<p>You can use the following media and camera features in your native applications:</p>
<ul>
-<li><a href="media_content_n.htm">Media Content and Metadata</a>
+<li><a href="media_content_metadata_n.htm">Media Content and Metadata</a>
<p>You can manage and search various media content in the device, such as media files, bookmarks, albums, and playlists. You can also access the MIME type information, and extract and edit the metadata of the media files.</p></li>
<p>You can view and process bitmap images in the JPEG format. The processing includes decoding, encoding, converting, and compressing images.</p></li>
-<li><a href="thumbnail_images_n.htm">Thumbnail Images</a> <strong>in mobile applications only</strong>
+<li><a href="thumbnail_images_n.htm">Thumbnail Images</a>
<p>You can create a thumbnail from an input media file. The thumbnail can be a video or image, but not an audio file. You can also customize the size of the thumbnail.</p></li>
-<li><a href="image_barcode_n.htm">Barcode Detection</a> <strong>in mobile applications only</strong>
+<li><a href="media_vision_n.htm">Visual Detection and Recognition</a>
-<p>You can perceive and understand an image or extract information from images in your application. You can encrypt a message by generating a barcode from it, and you can also detect barcodes in an image or from a camera preview stream.</p></li>
+<p>You can detect or generate various barcodes. You can also track how faces or image objects move in consecutive camera preview images as well as perceive faces or objects in still images.</p></li>
<li><a href="audio_n.htm">Audio Management</a>
<p>You can play and record uncompressed audio data both synchronously and asynchronously. You can record audio data from a microphone type input device to a file.</p></li>
-<li><a href="media_controller_n.htm">Media Controller</a> <strong>in mobile applications only</strong>
+<li><a href="media_controller_n.htm">Media Controller</a>
<p>You can communicate between the media controller server and client. The client can send requests to the server to modify the media, and the server can respond to the requests by modifying the media directly as requested. For the media controller feature to work, you must create both the client and server applications.</p></li>
<p>The main features of the Media Tool API include:</p>
<ul>
<li><p>Creating the media format handle</p>
- <p>You can <a href="#format">set and get video or audio information</a> using the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p></li>
+ <p>You can <a href="#format">set and get video or audio information</a> using the <code>media_format_h</code> handle.</p></li>
<li><p>Creating the media packet handle</p>
- <p>You can <a href="#packet">set and get metadata</a> using the created <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle. Some <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> metadata are NOT filled after creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>
+ <p>You can <a href="#packet">set and get metadata</a> using the created <code>media_packet_h</code> handle. Some <code>media_packet_h</code> metadata are NOT filled after creating the <code>media_packet_h</code> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>
</li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle has a specific design for increasing and decreasing its <a href="#reference">reference count</a>.</p>
+<p>The <code>media_format_h</code> handle is created by the caller, who can set and get the video or audio information. The <code>media_format_h</code> handle creates the <code>media_packet_h</code> handle and allocates the buffer. The caller can set and get the metadata with the <code>media_packet_h</code> handle.</p>
+<p>The <
code>media_format_h</code> handle has a specific design for increasing and decreasing its <a href="#reference">reference count</a>.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the media tool functionality:</p>
<ul>
<li>
-<p>To use the media format handle of the Media Tool API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_format.h></span> header file in your application:</p>
+<p>To use the media format handle of the Media Tool API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">wearable</a> applications), include the <code><media_format.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_format.h>
</pre>
</li>
<li>
-<p>To use the media packet handle of the Media Tool API, include the <span style="font-family: Courier New,Courier,monospace"><media_packet.h></span> header file in your application:</p>
+<p>To use the media packet handle of the Media Tool API, include the <code><media_packet.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_packet.h>
</pre>
<ol>
<li>
-<p>Define a <span style="font-family: Courier New,Courier,monospace">media_format_h</span> variable for the media format handle, and pass the variable to the <span style="font-family: Courier New,Courier,monospace">media_format_create()</span> function, which returns the handle.</p>
+<p>Define a <code>media_format_h</code> variable for the media format handle, and pass the variable to the <code>media_format_create()</code> function, which returns the handle.</p>
<p>To set the video information when creating the handle:</p>
}
</pre>
-<p>To set the audio information, replace the <span style="font-family: Courier New,Courier,monospace">media_format_set_video_XXX()</span> functions with the relevant <span style="font-family: Courier New,Courier,monospace">media_format_set_audio_XXX()</span> functions in the above example code.</p>
+<p>To set the audio information, replace the <code>media_format_set_video_XXX()</code> functions with the relevant <code>media_format_set_audio_XXX()</code> functions in the above example code.</p>
</li>
<li>
-<p>To retrieve the video format information, use the <span style="font-family: Courier New,Courier,monospace">media_format_get_video_info()</span> function:</p>
+<p>To retrieve the video format information, use the <code>media_format_get_video_info()</code> function:</p>
<pre class="prettyprint">
media_format_h fmt;
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...");
</pre>
-<p>To retrieve the audio format information, use the <span style="font-family: Courier New,Courier,monospace">media_format_get_audio_info()</span> function.</p>
+<p>To retrieve the audio format information, use the <code>media_format_get_audio_info()</code> function.</p>
</li>
<li>
-<p>Define a <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> variable for the media packet handle, and pass the variable to the appropriate <span style="font-family: Courier New,Courier,monospace">media_packet_create_XXX()</span> function (as the last parameter) with an existing media format handle (as the first parameter).</p>
+<p>Define a <code>media_packet_h</code> variable for the media packet handle, and pass the variable to the appropriate <code>media_packet_create_XXX()</code> function (as the last parameter) with an existing media format handle (as the first parameter).</p>
-<p>After creating the media packet handle, call the <span style="font-family: Courier New,Courier,monospace">media_format_unref()</span> function for the media format handle. Because all functions that create a media packet handle increase the reference count of the media format handle, you must decrease the count.</p>
+<p>After creating the media packet handle, call the <code>media_format_unref()</code> function for the media format handle. Because all functions that create a media packet handle increase the reference count of the media format handle, you must decrease the count.</p>
-<p>To reuse the media packet handle even after the <span style="font-family: Courier New,Courier,monospace">media_packet_destroy()</span> function is called, define a callback (the third last parameter of the <span style="font-family: Courier New,Courier,monospace">media_packet_create_XXX()</span> function), which is called when the handle is destroyed. Set the callback to return <span style="font-family: Courier New,Courier,monospace">MEDIA_PACKET_REUSE</span>.</p>
+<p>To reuse the media packet handle even after the <code>media_packet_destroy()</code> function is called, define a callback (the third last parameter of the <code>media_packet_create_XXX()</code> function), which is called when the handle is destroyed. Set the callback to return <code>MEDIA_PACKET_REUSE</code>.</p>
<p>The following example codes show the different ways you create the media packet handle:</p>
<li>
-<p>To create the handle and allocate a buffer into the heap or TBM surface, use the <span style="font-family: Courier New,Courier,monospace">media_packet_create_alloc()</span> function:</p>
+<p>To create the handle and allocate a buffer into the heap or TBM surface, use the <code>media_packet_create_alloc()</code> function:</p>
<pre class="prettyprint">
{
media_format_set_video_avg_bps(format, 10000000);
media_format_set_video_max_bps(format, 15000000);
- /* MEDIA_FORMAT_H264_HP data type is MEDIA_FORMAT_ENCODED and the buffer is allocated into the heap */
- /* If the data type is MEDIA_FORMAT_RAW, the buffer is allocated into the TBM surface */
+ /*
+ MEDIA_FORMAT_H264_HP data type is MEDIA_FORMAT_ENCODED and the buffer
+ is allocated into the heap
+ If the data type is MEDIA_FORMAT_RAW,
+ the buffer is allocated into the TBM surface
+ */
media_packet_create_alloc(fmt, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
<li>
-<p>To create only the handle, use the <span style="font-family: Courier New,Courier,monospace">media_packet_create()</span> function:</p>
+<p>To create only the handle, use the <code>media_packet_create()</code> function:</p>
<pre class="prettyprint">
{
<li>
-<p>To create the handle and store the TBM surface data, use the <span style="font-family: Courier New,Courier,monospace">media_packet_create_from_tbm_surface()</span> function:</p>
+<p>To create the handle and store the TBM surface data, use the <code>media_packet_create_from_tbm_surface()</code> function:</p>
<pre class="prettyprint">
{
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);
}
<li>
-<p>To create the handle with an already allocated external buffer, use the <span style="font-family: Courier New,Courier,monospace">media_packet_create_from_external_memory()</span> function:</p>
+<p>To create the handle with an already allocated external buffer, use the <code>media_packet_create_from_external_memory()</code> function:</p>
<pre class="prettyprint">
{
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);
}
<h2 id="reference" name="reference">Reference Count Design</h2>
-<p>The following table describes the reference count design of the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p>
-
+<p>The following table describes the reference count design of the <code>media_format_h</code> handle.</p>
+
+ <p align="center" class="Table"><strong>Table: Media format handle reference count design</strong></p>
<table border="1">
- <caption>
- Table: Media format handle reference count design
- </caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Function</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_h fmt1, fmt2, tmp;</span><br/>
-<span style="font-family: Courier New,Courier,monospace;">media_packet_h pkt1, pkt2;</span><br/>
-<span style="font-family: Courier New,Courier,monospace;">media_format_create(&fmt1);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
- <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
- <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle and set the <span style="font-family: Courier New,Courier,monospace;">media_format_video_mime()</span> or <span style="font-family: Courier New,Courier,monospace;">media_format_audio_mime()</span> function.</p></td>
+ <td><code>media_format_h fmt1, fmt2, tmp;</code><br/>
+<code>media_packet_h pkt1, pkt2;</code><br/>
+<code>media_format_create(&fmt1);</code></td>
+ <td><code>fmt1</code>: 1</td>
+ <td>Define the <code>media_format_h</code> and <code>media_packet_h</code> handles.
+ <p>Create the <code>fmt1</code> handle and set the <code>media_format_video_mime()</code> or <code>media_format_audio_mime()</code> function.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_create(&pkt1, fmt1);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
- <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function, because the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function increases the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> reference count.</td>
+ <td><code>media_packet_create(&pkt1, fmt1);</code></td>
+ <td><code>fmt1</code>: 2</td>
+ <td>After the <code>media_packet_create()</code> function, you must use the <code>media_format_unref()</code> function, because the <code>media_packet_create()</code> function increases the <code>media_format_h</code> reference count.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt1);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
- <td>If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is currently owned by the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> only.</td>
+ <td><code>media_format_unref(fmt1);</code></td>
+ <td><code>fmt1</code>: 1</td>
+ <td>If the <code>ref_count</code> is 1, the <code>fmt1</code> is currently owned by the <code>pkt1</code> only.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_copy(pkt1, &pkt2);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
- <td>Copy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> metadata to <span style="font-family: Courier New,Courier,monospace;">pkt2</span>, except the allocated buffer and buffer size. <span style="font-family: Courier New,Courier,monospace;">pkt2</span> refers to <span style="font-family: Courier New,Courier,monospace;">fmt1</span>, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased.</td>
+ <td><code>media_packet_copy(pkt1, &pkt2);</code></td>
+ <td><code>fmt1</code>: 2</td>
+ <td>Copy the <code>pkt1</code> metadata to <code>pkt2</code>, except the allocated buffer and buffer size. <code>pkt2</code> refers to <code>fmt1</code>, and <code>fmt1</code> <code>ref_count</code> is increased.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &tmp);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased by the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format()</span> function.</td>
+ <td><code>media_packet_get_format(pkt1, &tmp);</code></td>
+ <td><code>fmt1</code>: 3</td>
+ <td><code>fmt1</code> <code>ref_count</code> is increased by the <code>media_packet_get_format()</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(tmp, ...);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
- <td>If you try to modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data (call the <span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime()</span> function) for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (=<span style="font-family: Courier New,Courier,monospace;">tmp</span>), the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified.
- <p>To modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</p></td>
+ <td><code>media_format_set_video_mime(tmp, ...);</code></td>
+ <td><code>fmt1</code>: 3</td>
+ <td>If you try to modify the <code>fmt1</code> data (call the <code>media_format_set_video_mime()</code> function) for <code>fmt1</code> (=<code>tmp</code>), the <code>ref_count</code> is bigger than 1, and <code>fmt1</code> cannot be modified.
+ <p>To modify the <code>fmt1</code> data, call the <code>media_format_make_writable()</code> function.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_make_writable(tmp, &fmt2);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
- <td>If called, the <span style="font-family: Courier New,Courier,monospace;">tmp</span> (<span style="font-family: Courier New,Courier,monospace;">fmt1</span>) <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. Creates the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> handle and copies the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data to <span style="font-family: Courier New,Courier,monospace;">fmt2</span>.</td>
+ <td><code>media_format_make_writable(tmp, &fmt2);</code></td>
+ <td><code>fmt1</code>: 2<br/>
+ <code>fmt2</code>: 1</td>
+ <td>If called, the <code>tmp</code> (<code>fmt1</code>) <code>ref_count</code> is decreased. Creates the <code>fmt2</code> handle and copies the <code>fmt1</code> data to <code>fmt2</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(fmt2, ...);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, which means that you can modify the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> data.</td>
+ <td><code>media_format_set_video_mime(fmt2, ...);</code></td>
+ <td><code>fmt1</code>: 2<br/>
+ <code>fmt2</code>: 1</td>
+ <td><code>fmt2</code> <code>ref_count</code> is 1, which means that you can modify the <code>fmt2</code> data.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2
+ <td><code>media_packet_set_format(pkt2, fmt2);</code></td>
+ <td><code>fmt1</code>: 2
<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
- <td>Set the modified <span style="font-family: Courier New,Courier,monospace;">fmt2</span> to the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle. You must call the <span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2)</span> function.</td>
+ <code>fmt2</code>: 2</td>
+ <td>Set the modified <code>fmt2</code> to the <code>pkt2</code> handle. You must call the <code>media_format_unref(fmt2)</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(tmp);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1
+ <td><code>media_format_unref(tmp);</code></td>
+ <td><code>fmt1</code>: 1
<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
- <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &tmp)</span> function call.</td>
+ <code>fmt2</code>: 2</td>
+ <td>You must call this function because of the <code>media_packet_get_format(pkt1, &tmp)</code> function call.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
- <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2)</span> function call.</td>
+ <td><code>media_format_unref(fmt2);</code></td>
+ <td><code>fmt1</code>: 1<br/>
+ <code>fmt2</code>: 1</td>
+ <td>You must call this function because of the <code>media_packet_set_format(pkt2, fmt2)</code> function call.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt1);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1 > finalize<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
- <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is freed.</td>
+ <td><code>media_packet_destroy(pkt1);</code></td>
+ <td><code>fmt1</code>: 1 > finalize<br/>
+ <code>fmt2</code>: 1</td>
+ <td>If you destroy the <code>pkt1</code> handle, the <code>fmt1</code> <code>ref_count</code> is decreased. If the <code>ref_count</code> becomes 0, <code>fmt1</code> is freed.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt2);</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1 > finalize<br/>
- <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 0 > finalize</td>
- <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt2</span> is freed.</td>
+ <td><code>media_packet_destroy(pkt2);</code></td>
+ <td><code>fmt1</code>: 1 > finalize<br/>
+ <code>fmt2</code>: 0 > finalize</td>
+ <td>If you destroy the <code>pkt2</code> handle, the <code>fmt2</code> <code>ref_count</code> is decreased. If the <code>ref_count</code> becomes 0, <code>fmt2</code> is freed.</td>
</tr>
</tbody>
</table>
<div id="container"><div id="contents"><div class="content">
<h1>Media Key Events</h1>
- <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <
span style="font-family: Courier New, Courier, monospace">media_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p>
+ <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <
code>media_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p>
<p>The main features of the Media key API include:</p>
<ul>
<li>Registering a callback
- <p>You can <a href="#register">register a callback</a> for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_reserve()</span> function. The first parameter of the function defines the <span style="font-family: Courier New,Courier,monospace">media_key_event_cb</span> type callback, which you can implement to perform any actions you need. </p>
+ <p>You can <a href="#register">register a callback</a> for media key events using the <code>media_key_reserve()</code> function. The first parameter of the function defines the <code>media_key_event_cb</code> type callback, which you can implement to perform any actions you need. </p>
</li>
<li>Deregistering a callback
- <p>You can deregister a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_release()</span> function.</p> </li></ul>
+ <p>You can deregister a callback for media key events using the <code>media_key_release()</code> function.</p> </li></ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Media key API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_key.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media key API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">wearable</a> applications), include the <code><media_key.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <media_key.h>
</pre>
</pre>
</li>
-<li>Register the defined callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_reserve()</span> function:
+<li>Register the defined callback with the <code>media_key_reserve()</code> function:
<pre class="prettyprint">
void
</pre>
</li>
<li>
-<p>When you no longer need to monitor the media key events, deregister the callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_release()</span> function:</p>
+<p>When you no longer need to monitor the media key events, deregister the callback with the <code>media_key_release()</code> function:</p>
<pre class="prettyprint">
r = media_key_release();
<p>Before you start, remember to <a href="#prerequisites">prepare your application to use the media muxer functionality</a>.</p>
<p>The following figure illustrates the general media muxer state changes.</p>
-<p class="figure">Figure: Media muxer state changes</p>
+<p align="center"><strong>Figure: Media muxer state changes</strong></p>
<p align="center"><img src="../../images/muxer.png" alt="Media muxer state changes" /></p>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">All file types and container formats are not guaranteed to support the Media Muxer API.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ All file types and container formats are not guaranteed to support the Media Muxer API.
+ </div>
<h2 id="demuxer">Media Demuxer</h2>
<p>A media demuxer instance can be used to parse 1 multiplexed stream. The multiplexed stream can contain single or multiple elementary streams of various types, such as audio, video, or text. A single instance of the media demuxer can <a href="#manage_demux">extract 1, more, or all of these elementary streams</a>.</p>
<p>The following figure illustrates the general media demuxer state changes.</p>
-<p class="figure">Figure: Media demuxer state changes</p>
+<p align="center"><strong>Figure: Media demuxer state changes</strong></p>
<p align="center"><img src="../../images/demuxer.png" alt="Media demuxer state changes" /></p>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">All file types and container formats are not guaranteed to support the Media Demuxer API.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ All file types and container formats are not guaranteed to support the Media Demuxer API.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the media muxing functionality:</p>
<ul>
<li>
-<p>To use the functions and data types of the Media Muxer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIAMUXER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIAMUXER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><mediamuxer.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Muxer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIAMUXER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIAMUXER__MODULE.html">wearable</a> applications), include the <code><mediamuxer.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <mediamuxer.h>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Media Demuxer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><mediademuxer.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Demuxer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">wearable</a> applications), include the <code><mediademuxer.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <mediademuxer.h>
#include <media_format.h>
#include <media_packet.h>
</pre>
-<p>You also need the <span style="font-family: Courier New,Courier,monospace"><media_format.h></span> and <span style="font-family: Courier New,Courier,monospace"><media_packet.h></span> header files to identify and manage individual tracks within the media file.</p>
+<p>You also need the <code><media_format.h></code> and <code><media_packet.h></code> header files to identify and manage individual tracks within the media file.</p>
</li>
</ul>
<p>To prepare the media muxer:</p>
<ol>
-<li>Define a handle for the media muxer and pass it to the <span style="font-family: Courier New,Courier,monospace">mediamuxer_create()</span> function. The same handle must be passed to the rest of the media muxer functions.
+<li>Define a handle for the media muxer and pass it to the <code>mediamuxer_create()</code> function. The same handle must be passed to the rest of the media muxer functions.
<pre class="prettyprint">
mediamuxer_h *muxer;
ret = mediamuxer_create(&muxer);
</pre>
</li>
-<li>If the handle is created normally, set the output file path by passing the absolute uri path to the <span style="font-family: Courier New,Courier,monospace">mediamuxer_set_data_sink()</span> function:
+<li>If the handle is created normally, set the output file path by passing the absolute uri path to the <code>mediamuxer_set_data_sink()</code> function:
<pre class="prettyprint">
char *path = "/home/media/myfile.mp4"
mediamuxer_output_format_e format = MEDIAMUXER_CONTAINER_FORMAT_MP4;
</li>
<li>Add the necessary media tracks to the media muxer. The following function shows adding a video elementary track to be muxed.
-<p>A successful <span style="font-family: Courier New,Courier,monospace">mediamuxer_add_track()</span> function call returns a <span style="font-family: Courier New,Courier,monospace">track_index</span>. Whenever you have to deal with the track, the corresponding <span style="font-family: Courier New,Courier,monospace">track_index</span> must be used. Mapping a <span style="font-family: Courier New,Courier,monospace">track_index</span> to the corresponding media track is your responsibility.</p>
+<p>A successful <code>mediamuxer_add_track()</code> function call returns a <code>track_index</code>. Whenever you have to deal with the track, the corresponding <code>track_index</code> must be used. Mapping a <code>track_index</code> to the corresponding media track is your responsibility.</p>
<pre class="prettyprint">
int
test_mediamuxer_add_track_video()
</li>
<li>After a successful muxer start, call a write sample until all the samples of the respective track are written.
-<p>The write sample is a specific track. It is your responsibility to use the appropriate <
span style="font-family: Courier New,Courier,monospace">track_index</span> to choose the correct track, and to add the corresponding data to the muxer through the write sample. Repeat the same for the rest of the tracks. Before calling this function, create a valid handle for the <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> handle to get the input samples. For more information, see <a href="media_handle_n.htm">Media Handle Management</a>.</p>
+<p>The write sample is a specific track. It is your responsibility to use the appropriate <
code>track_index</code> to choose the correct track, and to add the corresponding data to the muxer through the write sample. Repeat the same for the rest of the tracks. Before calling this function, create a valid handle for the <code>media_packet_h</code> handle to get the input samples. For more information, see <a href="media_handle_n.htm">Media Handle Management</a>.</p>
<pre class="prettyprint">
if (mediamuxer_write_sample(muxer, track_index, in_buf) != MEDIAMUXER_ERROR_NONE)
printf("mediamuxer_write_sample API for track %d failed\n", track_index);
</pre>
</li>
-<li>Once the EOS (End Of Stream) of a particular track is reached, call <span style="font-family: Courier New,Courier,monospace">mediamuxer_close_track()</span> function to finalize the track:
+<li>Once the EOS (End Of Stream) of a particular track is reached, call <code>mediamuxer_close_track()</code> function to finalize the track:
<pre class="prettyprint">
if (mediamuxer_close_track(muxer, track_index) != MEDIAMUXER_ERROR_NONE)
printf("mediamuxer_close_track API failed\n");
<h2 id="manage_mux" name="manage_mux">Managing the Media Muxer</h2>
-<p>To manage the media muxer, the <span style="font-family: Courier New,Courier,monospace">mediamuxer_write_sample()</span> function is called in a loop until the EOS is reached. You can use multi-threading, writing samples corresponding to different tracks in different threads.</p>
+<p>To manage the media muxer, the <code>mediamuxer_write_sample()</code> function is called in a loop until the EOS is reached. You can use multi-threading, writing samples corresponding to different tracks in different threads.</p>
<ol>
-<li>You can create individual threads to manage each track simultaneously, but it is not mandatory. The following sample code explains how to call the <span style="font-family: Courier New,Courier,monospace">mediamuxer_write_sample()</span> function for a video track in a unique thread:
+<li>You can create individual threads to manage each track simultaneously, but it is not mandatory. The following sample code explains how to call the <code>mediamuxer_write_sample()</code> function for a video track in a unique thread:
<pre class="prettyprint">
int
test_mediamuxer_write_sample()
int track_index_vid = 1; /* track_index = 1 for video */
media_packet_h vid_pkt;
while (!is_eos) {
- /* Read encoded video data */
- /* Get the proper video media packet from, for example, mediacodec/mediademuxer */
+ /*
+ Read encoded video data
+ Get the proper video media packet from,
+ for example, mediacodec/mediademuxer
+ */
user_func_get_media_packet(&vid_pkt, &is_eos);
if (!is_eos) {
mediamuxer_write_sample(myMuxer, track_index_vid, vid_pkt);
</pre>
</li>
-<li>After you have finished work with the media muxer handle, reset the media muxer and destroy the handle by using the <span style="font-family: Courier New,Courier,monospace">mediamuxer_stop()</span> and <span style="font-family: Courier New,Courier,monospace">mediamuxer_destroy()</span> functions.
-<p>The media muxer state changes to <span style="font-family: Courier New,Courier,monospace">MEDIAMUXER_STATE_NONE</span>.</p>
+<li>After you have finished work with the media muxer handle, reset the media muxer and destroy the handle by using the <code>mediamuxer_stop()</code> and <code>mediamuxer_destroy()</code> functions.
+<p>The media muxer state changes to <code>MEDIAMUXER_STATE_NONE</code>.</p>
<pre class="prettyprint">
ret = mediamuxer_stop(muxer);
if (ret != MEDIAMUXER_ERROR_NONE)
<p>To prepare the media demuxer:</p>
<ol>
-<li>Define a handle for the media demuxer and pass it to the <span style="font-family: Courier New,Courier,monospace">mediademuxer_create()</span> function. The same handle must be passed to the rest of the media demuxer functions.
+<li>Define a handle for the media demuxer and pass it to the <code>mediademuxer_create()</code> function. The same handle must be passed to the rest of the media demuxer functions.
<pre class="prettyprint">
mediademuxer_h *demuxer;
ret = mediademuxer_create(&demuxer);
</pre>
</li>
-<li>If the handle is created normally, set the input data source by passing the path to the <span style="font-family: Courier New,Courier,monospace">mediademuxer_set_data_source()</span> function:
+<li>If the handle is created normally, set the input data source by passing the path to the <code>mediademuxer_set_data_source()</code> function:
<pre class="prettyprint">
if (mediademuxer_set_data_source(demuxer, path)!= MEDIADEMUXER_ERROR_NONE)
printf("mediademuxer_set_data_source API failed\n");
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">mediademuxer_prepare()</span> function to move the media demuxer into the ready state:
+<li>Call the <code>mediademuxer_prepare()</code> function to move the media demuxer into the ready state:
<pre class="prettyprint">
if (mediademuxer_prepare(demuxer) != MEDIADEMUXER_ERROR_NONE)
printf("mediademuxer_prepare API failed\n");
</pre>
</li>
-<li>Once the total track counts are known, the media format for each track must be identified. Before calling the <span style="font-family: Courier New,Courier,monospace">media_format_create()</span> function, you must define and create a valid <span style="font-family: Courier New,Courier,monospace">media_format_h</span> handle (the <span style="font-family: Courier New,Courier,monospace">format</span> parameter in the given function).
+<li>Once the total track counts are known, the media format for each track must be identified. Before calling the <code>media_format_create()</code> function, you must define and create a valid <code>media_format_h</code> handle (the <code>format</code> parameter in the given function).
<p>The following example retrieves the media format for each track:</p>
<pre class="prettyprint">
media_format_h *g_media_format = NULL;
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 {
</pre>
</li>
-<li>After you have finished work with the media demuxer, reset the media demuxer and destroy the handle by using the <span style="font-family: Courier New,Courier,monospace">mediademuxer_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">mediademuxer_destroy()</span> functions.
-<p>The media demuxer state changes to <span style="font-family: Courier New,Courier,monospace">MEDIADEMUXER_STATE_NONE</span>.</p>
+<li>After you have finished work with the media demuxer, reset the media demuxer and destroy the handle by using the <code>mediademuxer_unprepare()</code> and <code>mediademuxer_destroy()</code> functions.
+<p>The media demuxer state changes to <code>MEDIADEMUXER_STATE_NONE</code>.</p>
<pre class="prettyprint">
ret = mediademuxer_unprepare(demuxer);
if (ret != MEDIADEMUXER_ERROR_NONE)
<p>You can use multiple instances of the player to play several audio data streams concurrently. This means that your application can <a href="#play">play multiple uncompressed audio files</a> at the same time.</p>
<p>The following figure illustrates the general player state changes.</p>
- <p class="figure">Figure: Player state changes</p>
+ <p align="center"><strong>Figure: Player state changes</strong></p>
<p align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p>
- <p>The <span style="font-family: Courier New,Courier,monospace;">player_interrupted_cb()</span> callback is called when an application is interrupted by another application. The player is paused or moved to the IDLE state according to the audio session manager (ASM) policy. You must check the state of the current instance and take appropriate action. If the player is changed to the PAUSED state due to an interruption, the callback can be called at the end of the interruption with the <span style="font-family: Courier New,Courier,monospace;">PLAYER_INTERRUPTED_COMPLETED</span> error code. For example, if the application is interrupted by a call, alarm, or notification, the completed message is posted. However, no messages are posted if the interruption has other causes. Make sure you handle the application accordingly when audio switching occurs between various applications.</p>
+ <p>The <code>player_interrupted_cb()</code> callback is called when an application is interrupted by another application. The player is paused or moved to the IDLE state according to the audio session manager (ASM) policy. You must check the state of the current instance and take appropriate action. If the player is changed to the PAUSED state due to an interruption, the callback can be called at the end of the interruption with the <code>PLAYER_INTERRUPTED_COMPLETED</code> error code. For example, if the application is interrupted by a call, alarm, or notification, the completed message is posted. However, no messages are posted if the interruption has other causes. Make sure you handle the application accordingly when audio switching occurs between various applications.</p>
<p>The following figure illustrates what happens when the player gets interrupted by the system.</p>
- <p class="figure">Figure: Player states when interrupted by system</p>
+ <p align="center"><strong>Figure: Player states when interrupted by system</strong></p>
<p align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p>
<h2 id="video" name="video">Video Player</h2>
<li>Get the overlay region or Evas object from the Graphics module.
<p>You can display video on a UI layer with the Evas object as well as on an overlay layer.</p></li>
<li>Create the player instance.</li>
- <li>Set the surface type and display handle to the player using the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function.</li>
+ <li>Set the surface type and display handle to the player using the <code>player_set_display()</code> function.</li>
</ol>
<p>The supported video formats include WMV, ASF, MP4, 3GP, AVI, MKV, and OGG. The available formats depend on the target device.</p>
<p>In case of a video interruption, the state can be READY due to the resource restriction in the system.</p>
<p>The following figure illustrates what happens when the player gets interrupted by the system.</p>
-<p class="figure">Figure: Player states when interrupted by system</p>
+<p align="center"><strong>Figure: Player states when interrupted by system</strong></p>
<p align="center"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
<p>The Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications) provides the following features:</p>
<ul><li>Operating general controls for the <a href="#audio">audio</a> and <a href="#video">video</a> content, such as play, pause, resume, and stop
-<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement a listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <span style="font-family: Courier New,Courier,monospace;">player_completed_cb()</span> function is called. If an error occurs in the player engine, you are notified if you have registered the <span style="font-family: Courier New,Courier,monospace;">player_error_cb()</span> callback.</p></li>
+<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement a listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <code>player_completed_cb()</code> function is called. If an error occurs in the player engine, you are notified if you have registered the <code>player_error_cb()</code> callback.</p></li>
<li>Modifying playback properties
<p>When the player state is changed to READY, you can modify various playback properties, such as volume, sound type, latency mode, mute mode, and looping mode.</p></li>
<li>Moving the audio and video content based on time</li>
<h2 id="stream" name="stream">Playback Streams</h2>
- <p>You can set specific URLs for streaming media playback by using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function.</p>
+ <p>You can set specific URLs for streaming media playback by using the <code>player_set_uri()</code> function.</p>
<p>Both Hypertext Transfer Protocol (HTTP) and Real Time Streaming Protocol (RTSP) protocols support streaming media playback. The HTTP request header supports the playback of both complete and download-in-progress media files. The index table (atoms) must be moved in front of the file for progressive download.</p>
- <p>In case of HTTP streaming, buffering can happen when the player is prepared. You can get the status using the <span style="font-family: Courier New,Courier,monospace;">player_set_buffering_cb()</span> function.</p>
+ <p>In case of HTTP streaming, buffering can happen when the player is prepared. You can get the status using the <code>player_set_buffering_cb()</code> function.</p>
<p>The following table lists the streaming protocol features supported by the player.</p>
+ <p align="center" class="Table"><strong>Table: Supported streaming protocol features</strong></p>
<table>
- <caption>
- Table: Supported streaming protocol features
- </caption>
<tbody>
<tr>
<th>Streaming protocol</th>
<p>Multiple instances of the WAV player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files, such as WAV, at the same time.</p>
<p>The following figure illustrates the general WAV player state changes.</p>
- <p class="figure">Figure: WAV player state changes</p>
+ <p align="center"><strong>Figure: WAV player state changes</strong></p>
<p align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p>
<h2 id="tone">Tone Player</h2>
<p>You can generate tones in 2 ways: </p>
<ul>
<li><p>Specify the frequency values. You can specify either 1 or 2 frequencies.</p></li>
- <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <
span style="font-family: Courier New,Courier,monospace;">tone_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications).</p></li>
+ <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <
code>tone_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications).</p></li>
</ul>
<p>You can <a href="#play_tone">start and stop playing a tone</a>, and <a href="#duration">play a tone for a specified duration</a>.</p>
<p>The following figures illustrate the general tone player state changes.</p>
- <p class="figure">Figure: Tone player states</p>
+ <p align="center"><strong>Figure: Tone player states</strong></p>
<p align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the playback functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><player.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <code><player.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <player.h>
#include <Elementary.h>
#include <glib.h>
</pre>
-<p>In this guide, you also need the <span style="font-family: Courier New,Courier,monospace"><Elementary.h></span> and <span style="font-family: Courier New,Courier,monospace"><glib.h></span> header files to set the display and use the Glib library functions.</p>
+<p>In this guide, you also need the <code><Elementary.h></code> and <code><glib.h></code> header files to set the display and use the Glib library functions.</p>
</li>
<li>
-<p>Retrieve the default internal storage paths for audio and video files, and define the specific paths for the audio and video files to play. To access and use internal storage, include the <span style="font-family: Courier New,Courier,monospace;">storage.h</span> header file in your application.</p>
+<p>Retrieve the default internal storage paths for audio and video files, and define the specific paths for the audio and video files to play. To access and use internal storage, include the <code>storage.h</code> header file in your application.</p>
<pre class="prettyprint">
#define MP3_SAMPLE "SampleAudio.mp3";
#define MP4_SAMPLE "SampleVideo.mp4";
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);
</pre>
</li>
<li>
-<p>To use the functions and data types of the WAV Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><wav_player.h></span> header file in your application:</p>
+<p>To use the functions and data types of the WAV Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">wearable</a> applications), include the <code><wav_player.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <wav_player.h>
#include <stdio.h>
#include <sound_manager.h>
</pre>
-<p>In this guide, you also need the <
span style="font-family: Courier New,Courier,monospace"><stdio.h></span> and <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header files to use standard file input and output functions and the Sound Manager API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications).</p>
+<p>In this guide, you also need the <
code><stdio.h></code> and <code><sound_manager.h></code> header files to use standard file input and output functions and the Sound Manager API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications).</p>
</li>
</ol>
<ol>
<li id="init_handle" name="init_handle">
-<p>Define a variable for the player handle, and create the handle by passing the variable to the <span style="font-family: Courier New,Courier,monospace;">player_create()</span> function. You need the handle for defining which file to play and with what playback settings. The following example code also creates buttons for the UI to control the playback.</p>
+<p>Define a variable for the player handle, and create the handle by passing the variable to the <code>player_create()</code> function. You need the handle for defining which file to play and with what playback settings. The following example code also creates buttons for the UI to control the playback.</p>
<pre class="prettyprint">
struct appdata {
player_h player;
<ul>
<li>
-<p>To receive notifications about playback interruptions, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_interrupted_cb()</span> function:</p>
+<p>To receive notifications about playback interruptions, register a callback function using the <code>player_set_interrupted_cb()</code> function:</p>
<pre class="prettyprint">
static void
_player_interrupted_cb(player_interrupted_coded_e code, void *data)
dlog_print(DLOG_ERROR, LOG_TAG, "failed to create");
}
</pre>
-<p>The playback is interrupted and the callback triggered when, for example, another multimedia application is run. The player state automatically changes to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span> or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> according to the session policy. To get the current state, use the <span style="font-family: Courier New,Courier,monospace;">player_get_state()</span> function.</p>
+<p>The playback is interrupted and the callback triggered when, for example, another multimedia application is run. The player state automatically changes to <code>PLAYER_STATE_PAUSED</code> or <code>PLAYER_STATE_IDLE</code> according to the session policy. To get the current state, use the <code>player_get_state()</code> function.</p>
</li>
<li>
-<p>To receive a notification when the playback ends, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_completed_cb()</span> function:</p>
+<p>To receive a notification when the playback ends, register a callback function using the <code>player_set_completed_cb()</code> function:</p>
<pre class="prettyprint">
static void
_player_completed_cb(void *data)
static void
init_base_player(appdata_s *ad)
{
- /* Set a completed callback if the application wants to know when the playback ends */
+ /* Set a completed callback for when the playback ends */
error_code = player_set_completed_cb(g_player, _player_completed_cb, ad);
if (error_code != PLAYER_ERROR_NONE)
</li>
<li>
-<p>To receive notifications about player errors during playback, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_error_cb()</span> function:</p>
+<p>To receive notifications about player errors during playback, register a callback function using the <code>player_set_error_cb()</code> function:</p>
<pre class="prettyprint">
static void
_player_error_cb(int error_code, void *user_data)
dlog_print(DLOG_ERROR, LOG_TAG, "failed to set error cb");
}
</pre>
-<p>The player error callback is triggered when the player stops working due to an error. You can use the callback to try to recover from the error. For example, try to change the player state to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> by calling the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function. Then remove all other callbacks and reset the player by calling the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function. At the end, the player is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state, so you can release the resources allocated to the player.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function from the called context, as this can cause the <span style="font-family: Courier New,Courier,monospace;">PLAYER_ERROR_INVALID_OPERATION</span> error.</td>
- </tr>
- </tbody>
-</table>
+<p>The player error callback is triggered when the player stops working due to an error. You can use the callback to try to recover from the error. For example, try to change the player state to <code>PLAYER_STATE_READY</code> by calling the <code>player_stop()</code> function. Then remove all other callbacks and reset the player by calling the <code>player_unprepare()</code> function. At the end, the player is in the <code>PLAYER_STATE_IDLE</code> state, so you can release the resources allocated to the player.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not call the <code>player_destroy()</code> function from the called context, as this can cause the <code>PLAYER_ERROR_INVALID_OPERATION</code> error.
+ </div>
</li>
</ul>
<ol>
<li>
-<p>After creating the player handle, specify the audio file to play using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
+<p>After creating the player handle, specify the audio file to play using the <code>player_set_uri()</code> function:</p>
<pre class="prettyprint">
error_code = player_set_uri(ad->player, audio_path);
</pre>
</li>
<li>
-<p>Prepare the player for playback using the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function:</p>
+<p>Prepare the player for playback using the <code>player_prepare()</code> function:</p>
<pre class="prettyprint">
error_code = player_prepare(ad->player);
</pre>
-<p>The function changes the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>, which is required to start playback.</p>
+<p>The function changes the player state from <code>PLAYER_STATE_IDLE</code> to <code>PLAYER_STATE_READY</code>, which is required to start playback.</p>
</li>
<li>
-<p>Start playing the audio file using the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+<p>Start playing the audio file using the <code>player_start()</code> function:</p>
<pre class="prettyprint">
error_code = player_start(ad->player);
</pre>
-<p>The function changes the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>. The audio file plays until you call the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> or <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function.</p>
+<p>The function changes the player state from <code>PLAYER_STATE_READY</code> to <code>PLAYER_STATE_PLAYING</code>. The audio file plays until you call the <code>player_stop()</code> or <code>player_pause()</code> function.</p>
</li>
</ol>
<ol>
<li>
-<p>After creating the player handle, specify the video file to play using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
+<p>After creating the player handle, specify the video file to play using the <code>player_set_uri()</code> function:</p>
<pre class="prettyprint">
error_code = player_set_uri(ad->player, video_path);
</pre>
<li id="play_video_display" name="play_video_display">
<p>Set the display on which the video is played.</p>
-<p>To retrieve the correct display handle, use the <
span style="font-family: Courier New,Courier,monospace;">GET_DISPLAY()</span> function. To set the display, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function with the player handle, display type (a <span style="font-family: Courier New,Courier,monospace;">player_display_type_e</span> 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>
+<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 <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function has been successfully executed, the player is connected to the display.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In case of an overlay surface, when the device orientation changes, the displayed video does not rotate automatically. If you want to change the video orientation according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace;">app_device_orientation_cb()</span> callback function used by the application. In case of an Evas surface, the Evas object for the video is rotated by the window manager used by the application, not by the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function.</td>
- </tr>
- </tbody>
-</table>
+<p>After the <code>player_set_display()</code> function has been successfully executed, the player is connected to the display.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ In case of an overlay surface, when the device orientation changes, the displayed video does not rotate automatically. If you want to change the video orientation according to the device orientation, use the <code>player_set_display_rotation()</code> function within the <code>app_device_orientation_cb()</code> callback function used by the application. In case of an Evas surface, the Evas object for the video is rotated by the window manager used by the application, not by the <code>player_set_display_rotation()</code> function.
+ </div>
</li>
<li id="play_video_prepare" name="play_video_prepare">
-<p>Prepare the player for playback using the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function:</p>
+<p>Prepare the player for playback using the <code>player_prepare()</code> function:</p>
<pre class="prettyprint">
error_code = player_prepare(ad->player);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function works synchronously, so it can block the application execution. To prepare the player asynchronously instead, use the <span style="font-family: Courier New,Courier,monospace;">player_prepare_async()</span> function:</p>
+<p>The <code>player_prepare()</code> function works synchronously, so it can block the application execution. To prepare the player asynchronously instead, use the <code>player_prepare_async()</code> function:</p>
<pre class="prettyprint">
error_code = player_prepare_async(ad->player, _prepared_cb, ad);
</pre>
-<p>Both functions change the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>, which is required to start playback.</p>
+<p>Both functions change the player state from <code>PLAYER_STATE_IDLE</code> to <code>PLAYER_STATE_READY</code>, which is required to start playback.</p>
</li>
<li id="play_video_play" name="play_video_play">
<p>Play the video file:</p>
<ol type="a">
<li>
-<p>Ensure that the player state has changed to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>. To check the state, use the <span style="font-family: Courier New,Courier,monospace;">player_get_state()</span> function in a waiting loop:</p>
+<p>Ensure that the player state has changed to <code>PLAYER_STATE_READY</code>. To check the state, use the <code>player_get_state()</code> function in a waiting loop:</p>
<pre class="prettyprint">
player_state_e state;
do {
</pre>
</li>
<li>
-<p>Start playing the video file using the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+<p>Start playing the video file using the <code>player_start()</code> function:</p>
<pre class="prettyprint">
if (error_code == PLAYER_ERROR_NONE)
error_code = player_start(g_player);
</pre>
-<p>If you used the <span style="font-family: Courier New,Courier,monospace;">player_prepare_async()</span> function to prepare the player, use the following callback function to handle the playback:</p>
+<p>If you used the <code>player_prepare_async()</code> function to prepare the player, use the following callback function to handle the playback:</p>
<pre class="prettyprint">
static void
_prepared_cb(void *data)
error_code = player_start(ad->player);
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function changes the player state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>. The video file plays until you call the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> or <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function.</p>
+<p>The <code>player_start()</code> function changes the player state from <code>PLAYER_STATE_READY</code> to <code>PLAYER_STATE_PLAYING</code>. The video file plays until you call the <code>player_stop()</code> or <code>player_pause()</code> function.</p>
</li>
</ol>
</li>
<ol>
<li>
-<p>Stop the player using the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function:</p>
+<p>Stop the player using the <code>player_stop()</code> function:</p>
<pre class="prettyprint">
error_code = player_stop(player);
dlog_print(DLOG_ERROR, LOG_TAG, "player_stop() = %d", error_code);
</li>
<li>
-<p>Reset the player using the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function:</p>
+<p>Reset the player using the <code>player_unprepare()</code> function:</p>
<pre class="prettyprint">
error_code = player_unprepare(player);
dlog_print(DLOG_ERROR, LOG_TAG, "player_unprepare() = %d", error_code);
</pre>
-<p>After the player is reset, it is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state.</p>
+<p>After the player is reset, it is in the <code>PLAYER_STATE_IDLE</code> state.</p>
</li>
<li>
-<p>Destroy the player handle using the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function:</p>
+<p>Destroy the player handle using the <code>player_destroy()</code> function:</p>
<pre class="prettyprint">
error_code = player_destroy(player);
dlog_print(DLOG_ERROR, LOG_TAG, "player_destroy = %d", error_code);
<ol>
<li>
<p>Define the variables for player handlers, player states, file paths, playback time, and return value.</p>
-<p>In this guide, you also need the <span style="font-family: Courier New,Courier,monospace"><stdio.h></span> and <span style="font-family: Courier New,Courier,monospace"><unistd.h></span> header files to use standard file input and output functions and system calls.</p>
+<p>In this guide, you also need the <code><stdio.h></code> and <code><unistd.h></code> header files to use standard file input and output functions and system calls.</p>
<pre class="prettyprint">
#include <stdio.h>
#include <unistd.h>
</pre>
</li>
<li>
-<p>Create a player handle for each file using the <span style="font-family: Courier New,Courier,monospace">player_create()</span> function:</p>
+<p>Create a player handle for each file using the <code>player_create()</code> function:</p>
<pre class="prettyprint">
ret = player_create(&player_1);
</li>
<li>
-<p>Specify the files to play using the <span style="font-family: Courier New,Courier,monospace">player_set_uri()</span> function:</p>
+<p>Specify the files to play using the <code>player_set_uri()</code> function:</p>
<pre class="prettyprint">
ret = player_set_uri(player_1, path_1);
</li>
<li>
-<p>Prepare the players for playback using the <span style="font-family: Courier New,Courier,monospace">player_prepare()</span> function:</p>
+<p>Prepare the players for playback using the <code>player_prepare()</code> function:</p>
<pre class="prettyprint">
ret = player_prepare(player_1);
ret = player_prepare(player_3);
</pre>
-<p>The function changes the player states from <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_READY</span>, which is required to start playback.</p>
+<p>The function changes the player states from <code>PLAYER_STATE_IDLE</code> to <code>PLAYER_STATE_READY</code>, which is required to start playback.</p>
</li>
<li>
<p>Play the files:</p>
<ol type="a">
<li>
-<p>Ensure that the player states have changed to <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_READY</span>. To check the states, use the <span style="font-family: Courier New,Courier,monospace">player_get_state()</span> function in a waiting loop:</p>
+<p>Ensure that the player states have changed to <code>PLAYER_STATE_READY</code>. To check the states, use the <code>player_get_state()</code> function in a waiting loop:</p>
<pre class="prettyprint">
/* Wait to prepare player_1 */
ret = player_get_state(player_1, &state_1);
</pre>
</li>
<li>
-<p>Start playing the files using the <span style="font-family: Courier New,Courier,monospace">player_start()</span> function:</p>
+<p>Start playing the files using the <code>player_start()</code> function:</p>
<pre class="prettyprint">
ret = player_start(player_1);
</li>
<li>
-<p>After the playback has ended or been stopped, reset the players and destroy the player handles using the <span style="font-family: Courier New,Courier,monospace">player_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">player_destroy()</span> functions:</p>
+<p>After the playback has ended or been stopped, reset the players and destroy the player handles using the <code>player_unprepare()</code> and <code>player_destroy()</code> functions:</p>
<pre class="prettyprint">
ret = player_unprepare(player_1);
ret = player_destroy(player_1);
<p>Make the display visible:</p>
<ol type="a">
<li>
-<p>Check whether the display is already visible using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_visible()</span> function:</p>
+<p>Check whether the display is already visible using the <code>player_is_display_visible()</code> function:</p>
<pre class="prettyprint">
bool is_visible;
</pre>
</li>
<li>
-<p>If the display is not visible, make it visible using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_visible()</span> function with the second parameter set to <span style="font-family: Courier New,Courier,monospace;">true</span>:</p>
+<p>If the display is not visible, make it visible using the <code>player_set_display_visible()</code> function with the second parameter set to <code>true</code>:</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>
</li>
<li>
-<p>Set the display mode using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_mode()</span> function:</p>
+<p>Set the display mode using the <code>player_set_display_mode()</code> function:</p>
<pre class="prettyprint">
error_code = player_set_display_mode(player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
</pre>
-<p>The available display modes are defined in the <
span style="font-family: Courier New,Courier,monospace;">player_display_mode_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications).</p>
+<p>The available display modes are defined in the <
code>player_display_mode_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications).</p>
</li>
<li>
-<p>Set the display rotation using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function:</p>
+<p>Set the display rotation using the <code>player_set_display_rotation()</code> function:</p>
<pre class="prettyprint">
error_code = player_set_display_rotation(player, PLAYER_DISPLAY_ROTATION_90);
dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
</pre>
-<p>The available display rotations are defined in the <
span style="font-family: Courier New,Courier,monospace;">player_display_rotation_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
+<p>The available display rotations are defined in the <
code>player_display_rotation_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
</li>
</ul>
<li>
<p><a href="#init_handle">Create the player handle</a>, <a href="#play_video">prepare and start the player</a>, and <a href="#set_parameters">set the display parameters</a>.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To retrieve the stream information, the player state must be either <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span> or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ To retrieve the stream information, the player state must be either <code>PLAYER_STATE_PLAYING</code> or <code>PLAYER_STATE_PAUSED</code>.
+ </div>
</li>
<li>
<ul>
<li>
<p>Video display size</p>
-<p>Retrieve the width and height of the video display using the <span style="font-family: Courier New,Courier,monospace;">player_get_video_size()</span> function:</p>
+<p>Retrieve the width and height of the video display using the <code>player_get_video_size()</code> function:</p>
<pre class="prettyprint">
int width;
int height;
</li>
<li>
<p>Duration</p>
-<p>Retrieve the total media running time (in milliseconds) using the <span style="font-family: Courier New,Courier,monospace;">player_get_duration()</span> function:</p>
+<p>Retrieve the total media running time (in milliseconds) using the <code>player_get_duration()</code> function:</p>
<pre class="prettyprint">
int duration;
</li>
<li>
<p>Audio stream details</p>
-<p>Retrieve the audio stream details using the <span style="font-family: Courier New,Courier,monospace;">player_get_audio_stream_info()</span> function. The function returns the audio sample rate (in Hz), number of audio channels (1 for mono or 2 for stereo), and audio bit rate (in Hz).</p>
+<p>Retrieve the audio stream details using the <code>player_get_audio_stream_info()</code> function. The function returns the audio sample rate (in Hz), number of audio channels (1 for mono or 2 for stereo), and audio bit rate (in Hz).</p>
<pre class="prettyprint">
int sample_rate;
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>
<li>
<p>Video stream details</p>
-<p>Retrieve the video stream details using the <span style="font-family: Courier New,Courier,monospace;">player_get_video_stream_info()</span> function. The function returns the number of frames per second and the video bit rate (in Hz).</p>
+<p>Retrieve the video stream details using the <code>player_get_video_stream_info()</code> function. The function returns the number of frames per second and the video bit rate (in Hz).</p>
<pre class="prettyprint">
int fps;
int bit_rate;
</li>
<li>
<p>Audio and video codec names</p>
-<p>Retrieve the audio and video codec names using the <span style="font-family: Courier New,Courier,monospace;">player_get_codec_info()</span> function:</p>
+<p>Retrieve the audio and video codec names using the <code>player_get_codec_info()</code> function:</p>
<pre class="prettyprint">
char *audio_codec;
char *video_codec;
</li>
<li>
<p>Content metadata</p>
-<p>Retrieve information about the album, artist, author, genre, title, and year using the <
span style="font-family: Courier New,Courier,monospace;">player_get_content_info()</span> function. The available metadata attributes are defined in the <span style="font-family: Courier New,Courier,monospace;">player_content_info_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__STREAM__INFO__MODULE.html#ga2d25f300270965c3ea302b7a7e845f12">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__STREAM__INFO__MODULE.html#ga2d25f300270965c3ea302b7a7e845f12">wearable</a> applications).</p>
+<p>Retrieve information about the album, artist, author, genre, title, and year using the <
code>player_get_content_info()</code> function. The available metadata attributes are defined in the <code>player_content_info_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__STREAM__INFO__MODULE.html#ga2d25f300270965c3ea302b7a7e845f12">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__STREAM__INFO__MODULE.html#ga2d25f300270965c3ea302b7a7e845f12">wearable</a> applications).</p>
<pre class="prettyprint">
char *album;
error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_YEAR, &year);
dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info year = %d", year);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The values must be released using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The values must be released using the <code>free()</code> function.
+ </div>
</li>
<li>
<p>Album artwork</p>
-<p>Retrieve the album artwork using the <span style="font-family: Courier New,Courier,monospace;">player_get_album_art()</span> function. The function returns the encoded artwork image and size.</p>
+<p>Retrieve the album artwork using the <code>player_get_album_art()</code> function. The function returns the encoded artwork image and size.</p>
<pre class="prettyprint">
void *album_art;
int size;
<li><p><a href="#init_handle">Create the player handle.</a></p></li>
<li>
-<p>Set the subtitle path using the <span style="font-family: Courier New,Courier,monospace;">player_set_subtitle_path()</span> function:</p>
+<p>Set the subtitle path using the <code>player_set_subtitle_path()</code> function:</p>
<pre class="prettyprint">
#define SUBTITLE "subtitles_test_file.srt"
dlog_print(DLOG_ERROR, LOG_TAG, "player_set_subtitle_path() = %d", error_code);
free(path);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can set the subtitle path when the player state is <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span>, <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>, <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>, or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ You can set the subtitle path when the player state is <code>PLAYER_STATE_IDLE</code>, <code>PLAYER_STATE_READY</code>, <code>PLAYER_STATE_PLAYING</code>, or <code>PLAYER_STATE_PAUSED</code>.
+ </div>
</li>
</ol>
<ol>
<li>
-<p>To start the WAV player, use the <span style="font-family: Courier New,Courier,monospace">wav_player_start()</span> function.</p>
+<p>To start the WAV player, use the <code>wav_player_start()</code> function.</p>
<p>The third parameter defines a callback that is invoked when the player finishes playback. Implement the callback and handle any post-playback actions in it.</p>
<p>The final parameter returns the WAV player ID, which you need to stop the player.</p>
<pre class="prettyprint">
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>
</li>
<li>
-<p>To stop the WAV player, use the <span style="font-family: Courier New,Courier,monospace">wav_player_stop()</span> function with the ID of the WAV player:</p>
+<p>To stop the WAV player, use the <code>wav_player_stop()</code> function with the ID of the WAV player:</p>
<pre class="prettyprint">
void
my_stop()
<ol>
<li>
-<p>To start playback, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">tone_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">wearable</a> applications) enumerators define the available values for the tone type (first parameter) and sound type (second parameter).</p>
+<p>To start playback, use the <code>tone_player_start()</code> function.</p>
+<p>The <
code>tone_type_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications) and <code>sound_type_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">wearable</a> applications) enumerators define the available values for the tone type (first parameter) and sound type (second parameter).</p>
<pre class="prettyprint">
tone_player_start(TONE_TYPE_DEFAULT, SOUND_TYPE_MEDIA, -1, &tone_player_id);
</pre>
-<p>The player ID is assigned and returned if the function succeeds. The ID of the tone player that starts first is 0, the ID of the second one is 1, and so on. If you set the player ID parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>, the ID is not returned.</p>
+<p>The player ID is assigned and returned if the function succeeds. The ID of the tone player that starts first is 0, the ID of the second one is 1, and so on. If you set the player ID parameter to <code>NULL</code>, the ID is not returned.</p>
</li>
<li>
-<p>To stop playback, use the <span style="font-family: Courier New,Courier,monospace">tone_player_stop()</span> function with the ID of the player you want to stop:</p>
+<p>To stop playback, use the <code>tone_player_stop()</code> function with the ID of the player you want to stop:</p>
<pre class="prettyprint">
tone_player_stop(tone_player_id);
</pre>
<h2 id="duration" name="duration">Playing a Tone for a Specified Duration</h2>
-<p>To play a tone for a specified duration, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function with the duration (third parameter) set to the number of milliseconds you want playback to last:</p>
+<p>To play a tone for a specified duration, use the <code>tone_player_start()</code> function with the duration (third parameter) set to the number of milliseconds you want playback to last:</p>
<pre class="prettyprint">
tone_player_start(TONE_TYPE_SUP_CONGESTION, SOUND_TYPE_CALL, 1000, &tone_player_id);
</pre>
-<p>When you set the duration to a specified time, playback stops automatically after that time. You can also stop playback manually using the <span style="font-family: Courier New,Courier,monospace">tone_player_stop()</span> function.</p>
+<p>When you set the duration to a specified time, playback stops automatically after that time. You can also stop playback manually using the <code>tone_player_stop()</code> function.</p>
<p>The following file formats are supported:</p>
<ul>
- <li>Video: <span style="font-family: Courier New,Courier,monospace">mp4</span> and <span style="font-family: Courier New,Courier,monospace">3gp</span></li>
- <li>Audio: <span style="font-family: Courier New,Courier,monospace">m4a</span> and <span style="font-family: Courier New,Courier,monospace">amr</span></li>
+ <li>Video: <code>mp4</code> and <code>3gp</code></li>
+ <li>Audio: <code>m4a</code> and <code>amr</code></li>
</ul>
<p>Valid input sources consist of internal and external microphones and a camera. The used input audio or video source depends on the currently connected audio path and camera module of the device. The recorder APIs in the video recorder serve as the interface with the hardware. Input is processed through that handle.</p>
- <p>During testing, you can use the Emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p>
+ <p>During testing, you can use the emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p>
<p>The following figure illustrates the general recorder state changes.</p>
- <p class="figure">Figure: Recorder states</p>
+ <p align="center"><strong>Figure: Recorder states</strong></p>
<p align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">While running applications on the Emulator, audio-video synchronization errors can occur due to the computer performance.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ While running applications on the emulator, audio-video synchronization errors can occur due to the computer performance.
+ </div>
+
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Recorder (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications) and Camera (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications) APIs, include the <span style="font-family: Courier New,Courier,monospace;"><camera.h></span> and <span style="font-family: Courier New,Courier,monospace;"><recorder.h></span> header files in your application:</p>
+<p>To use the functions and data types of the Recorder (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications) and Camera (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications) APIs, include the <code><camera.h></code> and <code><recorder.h></code> header files in your application:</p>
<pre class="prettyprint">
#include <recorder.h>
#include <camera.h>
#include <stdio.h>
#include <unistd.h>
</pre>
-<p>In this guide, you also need the <span style="font-family: Courier New,Courier,monospace;"><stdio.h></span> and <span style="font-family: Courier New,Courier,monospace;"><unistd.h></span> header files to use standard file input and output functions and system calls.</p>
+<p>In this guide, you also need the <code><stdio.h></code> and <code><unistd.h></code> header files to use standard file input and output functions and system calls.</p>
<h2 id="prepare_audio" name="prepare_audio">Preparing the Audio Recorder</h2>
<ol>
<li>
-<p>To create a handle for the audio recorder, use the <span style="font-family: Courier New,Courier,monospace">recorder_create_audiorecorder()</span> function:</p>
+<p>To create a handle for the audio recorder, use the <code>recorder_create_audiorecorder()</code> function:</p>
<pre class="prettyprint">
static recorder_h g_recorder;
else
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>The function sets the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>.</p>
+<p>The function sets the audio recorder state to <code>RECORDER_STATE_CREATED</code>.</p>
</li>
<li>
<p>To receive a notification whenever the audio recorder state changes:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">recorder_set_state_changed_cb()</span> function:</p>
+<p>Register a callback using the <code>recorder_set_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_set_state_changed_cb(g_recorder, _state_changed_cb, NULL);
</pre>
<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>
<p>To set various audio recording attributes:</p>
<ul>
<li>
-<p>Set the audio codec for encoding the audio stream using the <span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span> function:</p>
+<p>Set the audio codec for encoding the audio stream using the <code>recorder_set_audio_encoder()</code> function:</p>
<pre class="prettyprint">
#define FILENAME_PREFIX "AUDIO"
struct tm localtime = {0};
/* Set the audio sample rate */
error_code = recorder_attr_set_audio_samplerate(rec_data.recorder, 44100);
</pre>
-<p>The possible audio codec values are defined in the <span style="font-family: Courier New,Courier,monospace">recorder_audio_codec_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">wearable</a> applications).</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the Emulator, set the sample rate to 44100 and use a stereo channel with the AAC codec, and set the sample rate below 8000 and use a mono channel with the AMR codec.</td>
- </tr>
- </tbody>
-</table>
+<p>The possible audio codec values are defined in the <code>recorder_audio_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">wearable</a> applications).</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ In the emulator, set the sample rate to 44100 and use a stereo channel with the AAC codec, and set the sample rate below 8000 and use a mono channel with the AMR codec.
+ </div>
</li>
<li>
-<p>Based on the audio codec, set the correct file format using the <span style="font-family: Courier New,Courier,monospace">recorder_set_file_format()</span> function. For example, if you set the codec to AAC, set the file format to 3GP.</p>
+<p>Based on the audio codec, set the correct file format using the <code>recorder_set_file_format()</code> function. For example, if you set the codec to AAC, set the file format to 3GP.</p>
<pre class="prettyprint">
/* Set the file format according to the audio encoder */
error_code = recorder_set_file_format(g_recorder, RECORDER_FILE_FORMAT_3GP);
</pre>
-<p>The possible file format values are defined in the <
span style="font-family: Courier New,Courier,monospace">recorder_file_format_e</span> 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>
+<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>
<li>
-<p>Based on the file format, define the correct file name, and set it using the <span style="font-family: Courier New,Courier,monospace">recorder_set_filename()</span> function. The function takes as a parameter the full path and name of the file to which the recorded audio data is to be stored.</p>
+<p>Based on the file format, define the correct file name, and set it using the <code>recorder_set_filename()</code> function. The function takes as a parameter the full path and name of the file to which the recorded audio data is to be stored.</p>
<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 */
/* Set the audio sample rate */
error_code = recorder_attr_set_audio_samplerate(g_recorder, 44100);
</pre>
-<p>The possible audio device values are defined in the <
span style="font-family: Courier New,Courier,monospace">recorder_audio_device_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">wearable</a> applications).</p>
+<p>The possible audio device values are defined in the <
code>recorder_audio_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga0e73accfbca1b992c29a2128acebbbf3">wearable</a> applications).</p>
</li>
</ul>
<p>For more information on available attributes, see the Attributes API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__ATTRIBUTES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__ATTRIBUTES__MODULE.html">wearable</a> applications).</p>
<p>To receive a notification when the audio recorder reaches the recording limit:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">recorder_set_recording_limit_reached_cb()</span> function:</p>
+<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);
}
<ol>
<li>
-<p>Prepare the audio recorder using the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span> function:</p>
+<p>Prepare the audio recorder using the <code>recorder_prepare()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_prepare(g_recorder);
</pre>
-<p>The function sets the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>.</p>
+<p>The function sets the audio recorder state to <code>RECORDER_STATE_READY</code>.</p>
</li>
<li>
-<p>Start recording audio using the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function. If the target file path and name have been set to an existing file, the existing file is replaced with a new file.</p>
+<p>Start recording audio using the <code>recorder_start()</code> function. If the target file path and name have been set to an existing file, the existing file is replaced with a new file.</p>
<pre class="prettyprint">
error_code = recorder_start(g_recorder);
</pre>
-<p>The function sets the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span>.</p>
+<p>The function sets the audio recorder state to <code>RECORDER_STATE_RECORDING</code>.</p>
</li>
<li>
<p>To pause and resume recording:</p>
<ol type="a">
<li>
-<p>Check the audio recorder state using the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function:</p>
+<p>Check the audio recorder state using the <code>recorder_get_state()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_get_state(g_recorder, &state);
</pre>
-<p>If the state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span>, you can pause recording.</p>
+<p>If the state is <code>RECORDER_STATE_RECORDING</code>, you can pause recording.</p>
</li>
<li>
-<p>Pause recording using the <span style="font-family: Courier New,Courier,monospace">recorder_pause()</span> function:</p>
+<p>Pause recording using the <code>recorder_pause()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_pause(g_recorder);
</pre>
-<p>The function sets the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>.</p>
+<p>The function sets the audio recorder state to <code>RECORDER_STATE_PAUSED</code>.</p>
</li>
-<li><p>Resume recording using the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function.</p></li>
+<li><p>Resume recording using the <code>recorder_start()</code> function.</p></li>
</ol>
</li>
<li>
<p>To stop recording:</p>
<ol type="a">
-<li><p>Check the audio recorder state using the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function. If the state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>, you can stop recording.</p></li>
+<li><p>Check the audio recorder state using the <code>recorder_get_state()</code> function. If the state is <code>RECORDER_STATE_RECORDING</code> or <code>RECORDER_STATE_PAUSED</code>, you can stop recording.</p></li>
<li>
<p>To stop recording:</p>
-<ul><li>To discard the recording, use the <span style="font-family: Courier New,Courier,monospace">recorder_cancel()</span> function.</li>
-<li>To save the recorded data, use the <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> function.</li></ul>
+<ul><li>To discard the recording, use the <code>recorder_cancel()</code> function.</li>
+<li>To save the recorded data, use the <code>recorder_commit()</code> function.</li></ul>
-<p>Both functions set the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>.</p>
+<p>Both functions set the audio recorder state to <code>RECORDER_STATE_READY</code>.</p>
<p>The following example code first checks the audio recorder state, and then stops the recorder and saves the recorded data to a file:</p>
<pre class="prettyprint">
/* Check the audio recorder state */
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);
<p>After you have finished recording, release all resources allocated to the audio recorder:</p>
<ol type="a">
<li>
-<p>Deregister the recording limit callback using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_recording_limit_reached_cb()</span> function:</p>
+<p>Deregister the recording limit callback using the <code>recorder_unset_recording_limit_reached_cb()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_unset_recording_limit_reached_cb(g_recorder);
</pre>
</li>
<li>
-<p>Reset the audio recorder using the <span style="font-family: Courier New,Courier,monospace">recorder_unprepare()</span> function.</p>
+<p>Reset the audio recorder using the <code>recorder_unprepare()</code> function.</p>
<pre class="prettyprint">
error_code = recorder_unprepare(g_recorder);
</pre>
-<p>The function changes the audio recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>.</p>
+<p>The function changes the audio recorder state from <code>RECORDER_STATE_READY</code> to <code>RECORDER_STATE_CREATED</code>.</p>
</li>
<li>
-<p>Deregister the state change callback using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_state_changed_cb()</span> function:</p>
+<p>Deregister the state change callback using the <code>recorder_unset_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_unset_state_changed_cb(g_recorder);
</pre>
</li>
<li>
-<p>Release the audio recorder resources using the <span style="font-family: Courier New,Courier,monospace">recorder_destroy()</span> function:</p>
+<p>Release the audio recorder resources using the <code>recorder_destroy()</code> function:</p>
<pre class="prettyprint">
error_code = recorder_destroy(g_recorder);
</pre>
-<p>The function sets the audio recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_NONE</span>.</p>
+<p>The function sets the audio recorder state to <code>RECORDER_STATE_NONE</code>.</p>
</li>
</ol>
</li>
</li>
<li>
-<p>Create the camera handle using the <span style="font-family: Courier New,Courier,monospace">camera_create()</span> function. The function takes as parameters the camera handle and the hardware camera to access.</p>
+<p>Create the camera handle using the <code>camera_create()</code> function. The function takes as parameters the camera handle and the hardware camera to access.</p>
<pre class="prettyprint">
int error_code = 0;
else
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>The function sets the camera state to <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>. To query the state, use the <span style="font-family: Courier New,Courier,monospace">camera_get_state()</span> function.</p>
+<p>The function sets the camera state to <code>CAMERA_STATE_CREATED</code>. To query the state, use the <code>camera_get_state()</code> function.</p>
</li>
-<li><p>Set the display for the camera preview using the <
span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function. For more information, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p></li>
+<li><p>Set the display for the camera preview using the <
code>camera_set_display()</code> function. For more information, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p></li>
</ol>
<ol>
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace;">recorder_set_recording_limit_reached_cb()</span> function:</p>
+<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);
}
</li>
<li>
-<p>To test whether the callback works properly, use the <span style="font-family: Courier New,Courier,monospace;">sleep()</span> function to reach the recording limit:</p>
+<p>To test whether the callback works properly, use the <code>sleep()</code> function to reach the recording limit:</p>
<pre class="prettyprint">
ret = recorder_start(rec_data.recorder);
<ol>
<li>
-<p>To create the video recorder handle, use the <span style="font-family: Courier New,Courier,monospace">recorder_create_videorecorder()</span> function. The function takes as parameters the camera handle and the video recorder handle.</p>
+<p>To create the video recorder handle, use the <code>recorder_create_videorecorder()</code> function. The function takes as parameters the camera handle and the video recorder handle.</p>
<pre class="prettyprint">
/* Create the video recorder handle */
error_code = recorder_create_videorecorder(rec_data.camera, &rec_data.recorder);
else
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
-<p>The function sets the video recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>. To query the state, use the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function.</p>
+<p>The function sets the video recorder state to <code>RECORDER_STATE_CREATED</code>. To query the state, use the <code>recorder_get_state()</code> function.</p>
</li>
<li>
<p>To receive a notification whenever the video recorder state changes:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">recorder_set_state_changed_cb()</span> function:</p>
+<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>
<ol type="a">
<li>
<p>Check which video codecs the device supports.</p>
-<p>To check the codecs, use the <span style="font-family: Courier New,Courier,monospace">recorder_foreach_supported_video_encoder()</span> function. The function takes as its second parameter a callback that is invoked once for each codec supported by the video recorder (defined in the first parameter).</p>
-<p>While the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the loop continues to the next supported codec, if any. The loop ends when the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>To check the codecs, use the <code>recorder_foreach_supported_video_encoder()</code> function. The function takes as its second parameter a callback that is invoked once for each codec supported by the video recorder (defined in the first parameter).</p>
+<p>While the callback returns <code>true</code>, the loop continues to the next supported codec, if any. The loop ends when the callback returns <code>false</code>.</p>
<p>In the following example code, the callback loop ends after finding the first supported codec:</p>
<pre class="prettyprint">
recorder_video_codec_e supported_codec;
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 <
span style="font-family: Courier New,Courier,monospace">recorder_video_codec_e</span> 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>
+<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>
<li>
-<p>Set the video codec using the <span style="font-family: Courier New,Courier,monospace">recorder_set_video_encoder()</span> function:</p>
+<p>Set the video codec using the <code>recorder_set_video_encoder()</code> function:</p>
<pre class="prettyprint">
/* Set the video encoder for the video recorder */
error_code = recorder_set_video_encoder(rec_data.recorder, supported_codec);
</ol>
</li>
<li>
-<p>To set the video encoder bitrate, use the <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_video_encoder_bitrate()</span> function:</p>
+<p>To set the video encoder bitrate, use the <code>recorder_attr_set_video_encoder_bitrate()</code> function:</p>
<pre class="prettyprint">
/* Set the video encoder bitrate */
error_code = recorder_attr_set_video_encoder_bitrate(rec_data.recorder, g_bitrate);
<ol type="a">
<li>
<p>Check which file formats the device supports.</p>
-<p>To check the formats, use the <span style="font-family: Courier New,Courier,monospace">recorder_foreach_supported_file_format()</span> function. The function takes as its second parameter a callback that is invoked once for each format supported by the video recorder (defined in the first parameter).</p>
+<p>To check the formats, use the <code>recorder_foreach_supported_file_format()</code> function. The function takes as its second parameter a callback that is invoked once for each format supported by the video recorder (defined in the first parameter).</p>
</li>
<li>
-<p>Set the file format using the <span style="font-family: Courier New,Courier,monospace">recorder_set_file_format()</span> function. Make sure the file format matches the video codec.</p>
+<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 <
span style="font-family: Courier New,Courier,monospace">recorder_file_format_e</span> 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>
+<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>
</ol>
</li>
<li>
-<p>To set the file name, use the <span style="font-family: Courier New,Courier,monospace">recorder_set_filename()</span> function. The function takes as a parameter the full path and name of the file to which the recorded video data is to be stored. Make sure the file extension matches the file format.</p>
+<p>To set the file name, use the <code>recorder_set_filename()</code> function. The function takes as a parameter the full path and name of the file to which the recorded video data is to be stored. Make sure the file extension matches the file format.</p>
<pre class="prettyprint">
struct tm localtime = {0};
time_t rawtime = time(NULL);
/* 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 */
error_code = recorder_set_filename(rec_data.recorder, filename);
</pre>
</li>
-<li><p>To set the audio encoder, audio encoder bitrate, and audio sample rate, use the <
span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_encoder_bitrate()</span>, and <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_samplerate()</span> functions, <a href="#init_audio_att">as with the audio encoder</a>.</p></li>
+<li><p>To set the audio encoder, audio encoder bitrate, and audio sample rate, use the <
code>recorder_set_audio_encoder()</code>, <code>recorder_attr_set_audio_encoder_bitrate()</code>, and <code>recorder_attr_set_audio_samplerate()</code> functions, <a href="#init_audio_att">as with the audio encoder</a>.</p></li>
</ul>
<p>For more information on available attributes, see the Attributes API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__ATTRIBUTES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__ATTRIBUTES__MODULE.html">wearable</a> applications).</p>
</li>
<ol>
<li>
-<p>Prepare the video recorder using the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span> function:</p>
+<p>Prepare the video recorder using the <code>recorder_prepare()</code> function:</p>
<pre class="prettyprint">
/* Prepare the recorder */
error_code = recorder_prepare(rec_data.recorder);
</pre>
-<p>The function changes the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>.</p>
+<p>The function changes the video recorder state from <code>RECORDER_STATE_CREATED</code> to <code>RECORDER_STATE_READY</code>.</p>
</li>
<li>
-<p>Start recording using the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function. If the target file path and name have been set to an existing file, the existing file is replaced with a new file.</p>
+<p>Start recording using the <code>recorder_start()</code> function. If the target file path and name have been set to an existing file, the existing file is replaced with a new file.</p>
<pre class="prettyprint">
/* Start the recorder */
error_code = recorder_start(rec_data.recorder);
</pre>
-<p>The function changes the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span>.</p>
+<p>The function changes the video recorder state from <code>RECORDER_STATE_READY</code> to <code>RECORDER_STATE_RECORDING</code>.</p>
</li>
<li>
<p>To pause and resume recording:</p>
<ol type="a">
<li>
-<p>Pause recording using the <span style="font-family: Courier New,Courier,monospace">recorder_pause()</span> function:</p>
+<p>Pause recording using the <code>recorder_pause()</code> function:</p>
<pre class="prettyprint">
/* Pause the recorder */
error_code = recorder_pause(rec_data.recorder);
</pre>
-<p>The function changes the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>.</p>
+<p>The function changes the video recorder state from <code>RECORDER_STATE_RECORDING</code> to <code>RECORDER_STATE_PAUSED</code>.</p>
</li>
-<li><p>Resume recording using the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function.</p></li>
+<li><p>Resume recording using the <code>recorder_start()</code> function.</p></li>
</ol>
</li>
<p>To stop recording:</p>
<ul>
<li>
-<p>To stop recording without saving the recorded data, use the <span style="font-family: Courier New,Courier,monospace">recorder_cancel()</span> function. No data is saved to the target file.</p>
+<p>To stop recording without saving the recorded data, use the <code>recorder_cancel()</code> function. No data is saved to the target file.</p>
<pre class="prettyprint">
/* Stop the recorder without saving the recorded data */
error_code = recorder_cancel(rec_data.recorder);
</li>
<li>
-<p>To stop recording and save the recorded data, use the <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> function. The data is saved to the target file.</p>
+<p>To stop recording and save the recorded data, use the <code>recorder_commit()</code> function. The data is saved to the target file.</p>
<pre class="prettyprint">
/* Stop the recorder and save the recorded data to a file */
error_code = recorder_commit(rec_data.recorder);
</pre>
</li>
</ul>
-<p>Both functions change the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>.</p>
+<p>Both functions change the video recorder state from <code>RECORDER_STATE_RECORDING</code> or <code>RECORDER_STATE_PAUSED</code> to <code>RECORDER_STATE_READY</code>.</p>
</li>
<li>
<p>After you have finished recording, release all resources allocated to the video recorder:</p>
<ol type="a">
<li>
-<p>Deregister the recording limit callback using the <span style="font-family: Courier New,Courier,monospace;">recorder_unset_recording_limit_reached_cb()</span> function:</p>
+<p>Deregister the recording limit callback using the <code>recorder_unset_recording_limit_reached_cb()</code> function:</p>
<pre class="prettyprint">
/* Deregister the recording limit callback */
ret = recorder_unset_recording_limit_reached_cb(rec_data.recorder);
</pre>
</li>
<li>
-<p>Reset the video recorder using the <span style="font-family: Courier New,Courier,monospace">recorder_unprepare()</span> function:</p>
+<p>Reset the video recorder using the <code>recorder_unprepare()</code> function:</p>
<pre class="prettyprint">
/* Unprepare the recorder */
error_code = recorder_unprepare(rec_data->recorder);
</pre>
-<p>The function changes the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>.</p>
+<p>The function changes the video recorder state from <code>RECORDER_STATE_READY</code> to <code>RECORDER_STATE_CREATED</code>.</p>
</li>
<li>
-<p>Deregister the state change callback using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_state_changed_cb()</span> function:</p>
+<p>Deregister the state change callback using the <code>recorder_unset_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
/* Deregister the state change callback */
error_code = recorder_unset_state_changed_cb(rec_data.recorder);
</pre>
</li>
<li>
-<p>Release the video recorder resources using the <span style="font-family: Courier New,Courier,monospace">recorder_destroy()</span> function:</p>
+<p>Release the video recorder resources using the <code>recorder_destroy()</code> function:</p>
<pre class="prettyprint">
/* Destroy the recorder handle */
error_code = recorder_destroy(rec_data.recorder);
</pre>
-<p>The function changes the video recorder state from <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span> to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_NONE</span>.</p>
+<p>The function changes the video recorder state from <code>RECORDER_STATE_CREATED</code> to <code>RECORDER_STATE_NONE</code>.</p>
</li>
</ol>
</li>
<p>Tizen enables you to use media streamer functionalities, such as playing video content and streaming video and audio over an IP. Media streaming allows you to stream content in 1 or both directions.</p>
-<p class="figure">Figure: Video call</p>
-<p align="center"><img alt="Video call" src="../../images/media_streamer_phone.png" /></p>
+<p align="center"><strong>Figure: Video call</strong></p>
+<p align="center"><img alt="Video call" width="450" src="../../images/media_streamer_phone.png" /></p>
<p>The media streamer is an object that manages media data flow in a kind of pipeline. The Media Streamer API provides various types of media processing pipelines using a simple GStreamer wrapper (Tizen uses GStreamer as a fundamental multimedia framework). To use the media streamer, familiarize yourself with how the GStreamer works. For more information, see <a href="http://gstreamer.freedesktop.org/" target="_blank">http://gstreamer.freedesktop.org/</a>.</p>
<ul>
<li>
<p>Playing a local video file</p>
-<p class="figure">Figure: Playing a local video file</p>
+<p align="center"><strong>Figure: Playing a local video file</strong></p>
<p align="center"><img alt="Playing a local video file" src="../../images/media_streamer_local_video.png" /></p>
</li>
<li>
<p>Playing a local video file with internal or external subtitles</p>
-<p class="figure">Figure: Playing a local video file with subtitles</p>
+<p align="center"><strong>Figure: Playing a local video file with subtitles</strong></p>
<p align="center"><img alt="Playing a local video file with subtitles" src="../../images/media_streamer_local_video_subtitles.png" /></p>
</li>
<li>
<p>Streaming a video file with or without internal subtitles through the IP protocol from the server part to the client part</p>
-<p class="figure">Figure: Streaming a file through IP in the broadcast mode</p>
+<p align="center"><strong>Figure: Streaming a file through IP in the broadcast mode</strong></p>
<p align="center"><img alt="Streaming a file through IP in the broadcast mode" src="../../images/media_streamer_stream_broadcast.png" /></p>
</li>
<li>
<p>Streaming video and audio content through the IP protocol from 1 device (server part) to another device (client part) in 1 way (broadcast mode) or both ways (VOIP mode)</p>
-<p class="figure">Figure: Streaming video and audio content through IP in the broadcast or VOIP mode</p>
+<p align="center"><strong>Figure: Streaming video and audio content through IP in the broadcast or VOIP mode</strong></p>
<p align="center"><img alt="Streaming video and audio content through IP in the broadcast or VOIP mode" src="../../images/media_streamer_stream_broadcast_or_voip.png" /></p>
</li>
</ul>
<h2 id="create" name="create">Media Streamer</h2>
-<p>The media streamer is created using the <span style="font-family: Courier New,Courier,monospace">media_streamer_create()</span>, <span style="font-family: Courier New,Courier,monospace">media_streamer_node_create_src()</span>, and <span style="font-family: Courier New,Courier,monospace">media_streamer_node_create_sink()</span> functions.</p>
+<p>The media streamer is created using the <code>media_streamer_create()</code>, <code>media_streamer_node_create_src()</code>, and <code>media_streamer_node_create_sink()</code> functions.</p>
<p>The following types are examples of the source nodes according to their functionalities:</p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_NODE_SRC_TYPE_FILE</span></p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_NODE_SRC_TYPE_CAMERA</span></p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_NODE_SRC_TYPE_AUDIO_CAPTURE</span></p></li>
+<li><p><code>MEDIA_STREAMER_NODE_SRC_TYPE_FILE</code></p></li>
+<li><p><code>MEDIA_STREAMER_NODE_SRC_TYPE_CAMERA</code></p></li>
+<li><p><code>MEDIA_STREAMER_NODE_SRC_TYPE_AUDIO_CAPTURE</code></p></li>
</ul>
<p>In the same concept, the following types are examples of the sink nodes:</p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_NODE_SINK_TYPE_OVERLAY</span></p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_NODE_SINK_TYPE_AUDIO</span></p></li>
+<li><p><code>MEDIA_STREAMER_NODE_SINK_TYPE_OVERLAY</code></p></li>
+<li><p><code>MEDIA_STREAMER_NODE_SINK_TYPE_AUDIO</code></p></li>
</ul>
<p>The media streamer RTP node is also created in case of a streaming scenario which is responsible for transmitting and receiving data through an IP.</p>
-<p>After the nodes are created, they are uploaded into the media streamer pipeline where, in connection with other topology nodes, they construct a logic chain to be launched according to the chosen scenario. The <span style="font-family: Courier New,Courier,monospace">media_streamer_node_add()</span> function is used to add a node to the media streamer.</p>
+<p>After the nodes are created, they are uploaded into the media streamer pipeline where, in connection with other topology nodes, they construct a logic chain to be launched according to the chosen scenario. The <code>media_streamer_node_add()</code> function is used to add a node to the media streamer.</p>
<h2 id="plugin" name="plugin">Media Streamer Modes</h2>
<ul>
<li>
<p>In the manual mode, a user takes responsibility on creating and linking the appropriate encoding or decoding chain of nodes to launch the media streamer for the chosen scenario.</p>
-<p>The media streamer nodes are plugged in the manual mode using the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_create()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_node_add()</span> functions.</p>
-<p>Link the media streamer nodes with the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_link()</span> function.</p>
-<p>The function attributes include <span style="font-family: Courier New,Courier,monospace">src_pad_name</span> and <span style="font-family: Courier New,Courier,monospace">sink_pad_name</span>, which can be <span style="font-family: Courier New,Courier,monospace">src</span> or <span style="font-family: Courier New,Courier,monospace">sink</span>, an income or outcome pads of the previous and the following nodes to be linked accordingly.</p>
+<p>The media streamer nodes are plugged in the manual mode using the <code>media_streamer_node_create()</code> and <code>media_streamer_node_add()</code> functions.</p>
+<p>Link the media streamer nodes with the <code>media_streamer_node_link()</code> function.</p>
+<p>The function attributes include <code>src_pad_name</code> and <code>sink_pad_name</code>, which can be <code>src</code> or <code>sink</code>, an income or outcome pads of the previous and the following nodes to be linked accordingly.</p>
</li>
<li><p>In the autoplug mode, the video encoding and decoding chain of the media streamer is automatically constructed from the previously created source and sink nodes.</p></li>
</ul>
<h3>Setting Parameters</h3>
-<p>A parameter is set onto the media streamer node using the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_set_param()</span> function. The function sets a possible parameter for the given node with the appropriate value. The possible parameter can be found in the <span style="font-family: Courier New,Courier,monospace">media_streamer.h</span> header file. The parameter can be, for example, <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_CAMERA_ID</span>, <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_ROTATE</span>, or <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_PORT</span>. You can also set a parameter list using a <span style="font-family: Courier New,Courier,monospace">bundle</span> structure.</p>
+<p>A parameter is set onto the media streamer node using the <code>media_streamer_node_set_param()</code> function. The function sets a possible parameter for the given node with the appropriate value. The possible parameter can be found in the <code>media_streamer.h</code> header file. The parameter can be, for example, <code>MEDIA_STREAMER_PARAM_CAMERA_ID</code>, <code>MEDIA_STREAMER_PARAM_ROTATE</code>, or <code>MEDIA_STREAMER_PARAM_PORT</code>. You can also set a parameter list using a <code>bundle</code> structure.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_node_set_pad_format()</span> function sets the media format onto the media streamer node pad. The pad of the media streamer node can be <span style="font-family: Courier New,Courier,monospace">sink</span> or <span style="font-family: Courier New,Courier,monospace">src</span>, which are income or outcome pads of the node. The following are examples of the format:</p>
+<p>The <code>media_streamer_node_set_pad_format()</code> function sets the media format onto the media streamer node pad. The pad of the media streamer node can be <code>sink</code> or <code>src</code>, which are income or outcome pads of the node. The following are examples of the format:</p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_RAW</span></p></li>
+<li><p><code>MEDIA_FORMAT_RAW</code></p></li>
<li>
-<p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_ENCODED</span></p>
+<p><code>MEDIA_FORMAT_ENCODED</code></p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_H263</span></p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_YV12</span></p></li>
+<li><p><code>MEDIA_FORMAT_H263</code></p></li>
+<li><p><code>MEDIA_FORMAT_YV12</code></p></li>
</ul>
</li>
</ul>
<p>You can use the following media streamer callbacks when setting parameters:</p>
<ul>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_set_error_cb()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_unset_error_cb()</span> functions register and unregister an error callback function to be invoked when an error occurs.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_set_state_change_cb()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_unset_state_change_cb()</span> functions register and unregister a callback to be invoked after the media streamer state changes.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_src_set_buffer_status_cb()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_src_unset_buffer_status_cb()</span> functions register and unregister a callback function to be invoked when a buffer underrun or overflow occurs.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_sink_set_data_ready_cb()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_sink_unset_data_ready_cb()</span> functions register and unregister a callback function to be invoked when the custom sink is ready for data processing.</p></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_sink_set_eos_cb()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_sink_unset_eos_cb()</span> functions register and unregister a callback function to be invoked when the custom sink detects the end-of-stream.</p></li>
+<li><p>The <code>media_streamer_set_error_cb()</code> and <code>media_streamer_unset_error_cb()</code> functions register and unregister an error callback function to be invoked when an error occurs.</p></li>
+<li><p>The <code>media_streamer_set_state_change_cb()</code> and <code>media_streamer_unset_state_change_cb()</code> functions register and unregister a callback to be invoked after the media streamer state changes.</p></li>
+<li><p>The <code>media_streamer_src_set_buffer_status_cb()</code> and <code>media_streamer_src_unset_buffer_status_cb()</code> functions register and unregister a callback function to be invoked when a buffer underrun or overflow occurs.</p></li>
+<li><p>The <code>media_streamer_sink_set_data_ready_cb()</code> and <code>media_streamer_sink_unset_data_ready_cb()</code> functions register and unregister a callback function to be invoked when the custom sink is ready for data processing.</p></li>
+<li><p>The <code>media_streamer_sink_set_eos_cb()</code> and <code>media_streamer_sink_unset_eos_cb()</code> functions register and unregister a callback function to be invoked when the custom sink detects the end-of-stream.</p></li>
</ul>
<h3>Getting Parameters</h3>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_get_param()</span> function to get a parameter from the media streamer node. The function gets a parameter possible for the given node with the appropriate value. The possible parameters returned can be found in the <span style="font-family: Courier New,Courier,monospace">media_streamer.h</span> header file. They can be, for example, <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_CAMERA_ID</span>, <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_ROTATE</span>, or <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_PARAM_PORT</span>.</p>
+<p>Use the <code>media_streamer_node_get_param()</code> function to get a parameter from the media streamer node. The function gets a parameter possible for the given node with the appropriate value. The possible parameters returned can be found in the <code>media_streamer.h</code> header file. They can be, for example, <code>MEDIA_STREAMER_PARAM_CAMERA_ID</code>, <code>MEDIA_STREAMER_PARAM_ROTATE</code>, or <code>MEDIA_STREAMER_PARAM_PORT</code>.</p>
-<p>You can also use the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_get_params()</span> function to get the list of parameters from the created media streamer node in the <span style="font-family: Courier New,Courier,monospace">bundle</span> structure format.</p>
+<p>You can also use the <code>media_streamer_node_get_params()</code> function to get the list of parameters from the created media streamer node in the <code>bundle</code> structure format.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_node_get_pad_format()</span> function gets the media format from the media streamer node pad. The pad of the media streamer node can be <span style="font-family: Courier New,Courier,monospace">sink</span> or <span style="font-family: Courier New,Courier,monospace">src</span>, which are income or outcome pads of the node. The following are examples of the format:</p>
+<p>The <code>media_streamer_node_get_pad_format()</code> function gets the media format from the media streamer node pad. The pad of the media streamer node can be <code>sink</code> or <code>src</code>, which are income or outcome pads of the node. The following are examples of the format:</p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_RAW</span></p></li>
+<li><p><code>MEDIA_FORMAT_RAW</code></p></li>
<li>
-<p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_ENCODED</span></p>
+<p><code>MEDIA_FORMAT_ENCODED</code></p>
<ul>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_H263</span></p></li>
-<li><p><span style="font-family: Courier New,Courier,monospace">MEDIA_FORMAT_YV12</span></p></li>
+<li><p><code>MEDIA_FORMAT_H263</code></p></li>
+<li><p><code>MEDIA_FORMAT_YV12</code></p></li>
</ul>
</li>
</ul>
-<p>To get the name from the media streamer node pad, use the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_get_pad_name()</span> function. The <span style="font-family: Courier New,Courier,monospace">src_pad_num</span> parameter defines the number of <span style="font-family: Courier New,Courier,monospace">src</span> pads in the previous node, and the <span style="font-family: Courier New,Courier,monospace">sink_pad_num</span> parameter defines the number of <span style="font-family: Courier New,Courier,monospace">sink</span> pads in the following node.</p>
+<p>To get the name from the media streamer node pad, use the <code>media_streamer_node_get_pad_name()</code> function. The <code>src_pad_num</code> parameter defines the number of <code>src</code> pads in the previous node, and the <code>sink_pad_num</code> parameter defines the number of <code>sink</code> pads in the following node.</p>
-<p>You can get the media streamer state using the <span style="font-family: Courier New,Courier,monospace">media_streamer_get_state()</span> function. The states of the media streamer node can be found in the <span style="font-family: Courier New,Courier,monospace">media_streamer.h</span> header file. The state can be, for example, <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span>.</p>
+<p>You can get the media streamer state using the <code>media_streamer_get_state()</code> function. The states of the media streamer node can be found in the <code>media_streamer.h</code> header file. The state can be, for example, <code>MEDIA_STREAMER_STATE_READY</code>.</p>
<h2 id="play" name="play">File Playing with Media Streamer</h2>
-<p>Before playing the media streamer, it must be prepared and the state of the media streamer nodes must be set to the <
span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span> state in <a href="#prepare_server">server</a> and <a href="#client_prepare">client</a> parts.</p>
+<p>Before playing the media streamer, it must be prepared and the state of the media streamer nodes must be set to the <
code>MEDIA_STREAMER_STATE_READY</code> state in <a href="#prepare_server">server</a> and <a href="#client_prepare">client</a> parts.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_prepare()</span> function prepares the media streamer. With this function, the encoding chain of the media streamer nodes becomes fully constructed, if the autoplug mode is chosen within the streaming scenario.</p>
+<p>The <code>media_streamer_prepare()</code> function prepares the media streamer. With this function, the encoding chain of the media streamer nodes becomes fully constructed, if the autoplug mode is chosen within the streaming scenario.</p>
-<p>To play or stream files with the media streamer, use the <span style="font-family: Courier New,Courier,monospace">media_streamer_play()</span> function in <a href="#playing_server">server</a> and <a href="#client_play">client</a> parts. The media streamer state changes to <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_PLAYING</span>. With this function, the decoding chain of the media streamer nodes becomes fully constructed, if the autoplug mode is chosen within the streaming or playing scenario. The media streamer starts playing or streaming content, and the appropriate content appears on the sink nodes.</p>
+<p>To play or stream files with the media streamer, use the <code>media_streamer_play()</code> function in <a href="#playing_server">server</a> and <a href="#client_play">client</a> parts. The media streamer state changes to <code>MEDIA_STREAMER_STATE_PLAYING</code>. With this function, the decoding chain of the media streamer nodes becomes fully constructed, if the autoplug mode is chosen within the streaming or playing scenario. The media streamer starts playing or streaming content, and the appropriate content appears on the sink nodes.</p>
<p>You can control the playing status of the media streamer:</p>
<ul>
<li>
<p>Pause</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_pause()</span> function sets the media streamer state to <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_PAUSED</span> in the playing mode or at the server part in the streaming mode. Playing or streaming of the content pauses, and this can be seen on the sink nodes.</p>
+<p>The <code>media_streamer_pause()</code> function sets the media streamer state to <code>MEDIA_STREAMER_STATE_PAUSED</code> in the playing mode or at the server part in the streaming mode. Playing or streaming of the content pauses, and this can be seen on the sink nodes.</p>
</li>
<li>
<p>Stop</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_stop()</span> function sets the media streamer state to <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_PAUSED</span> in the playing mode or at the server part in the streaming mode. The position of the content is set to the 0sec position. Playing or streaming of the content stops, and this can be seen on the sink nodes.</p>
+<p>The <code>media_streamer_stop()</code> function sets the media streamer state to <code>MEDIA_STREAMER_STATE_PAUSED</code> in the playing mode or at the server part in the streaming mode. The position of the content is set to the 0sec position. Playing or streaming of the content stops, and this can be seen on the sink nodes.</p>
</li>
<li>
<p>Seek</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_set_play_position()</span> function seeks the content at the appropriate playing position set in milliseconds in the playing mode or at the server part in the video file streaming mode. Playing or streaming of the content seeks to the appropriate position, and this can be seen on the sink nodes.</p>
+<p>The <code>media_streamer_set_play_position()</code> function seeks the content at the appropriate playing position set in milliseconds in the playing mode or at the server part in the video file streaming mode. Playing or streaming of the content seeks to the appropriate position, and this can be seen on the sink nodes.</p>
</li>
<li>
<p>Get info</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">media_streamer_get_play_position()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_get_duration()</span> functions get the media streamer playing position and duration of the content in milliseconds in the playing mode or at the server part in the video file streaming mode.</p>
+<p>The <code>media_streamer_get_play_position()</code> and <code>media_streamer_get_duration()</code> functions get the media streamer playing position and duration of the content in milliseconds in the playing mode or at the server part in the video file streaming mode.</p>
</li>
</ul>
<h2 id="destroy" name="destroy">Media Streamer Removal</h2>
-<p>Before destroying the media streamer, it must be unprepared using the <span style="font-family: Courier New,Courier,monospace">media_streamer_unprepare()</span> function, and the state of the media streamer nodes must be set to <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_IDLE</span>.</p>
+<p>Before destroying the media streamer, it must be unprepared using the <code>media_streamer_unprepare()</code> function, and the state of the media streamer nodes must be set to <code>MEDIA_STREAMER_STATE_IDLE</code>.</p>
-<p>With the <span style="font-family: Courier New,Courier,monospace">media_streamer_unprepare()</span> function, the media streamer nodes within the encoding and decoding chains become disconnected, if the autoplug mode is chosen in the streaming or playing scenario. Any intermediate topology nodes between the source and sink nodes that have been automatically created are removed.</p>
+<p>With the <code>media_streamer_unprepare()</code> function, the media streamer nodes within the encoding and decoding chains become disconnected, if the autoplug mode is chosen in the streaming or playing scenario. Any intermediate topology nodes between the source and sink nodes that have been automatically created are removed.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">media_streamer_node_remove()</span> and <span style="font-family: Courier New,Courier,monospace">media_streamer_node_destroy()</span> functions to remove and destroy a media streamer node created in the manual mode.</p>
+<p>Use the <code>media_streamer_node_remove()</code> and <code>media_streamer_node_destroy()</code> functions to remove and destroy a media streamer node created in the manual mode.</p>
-<p>To destroy the media streamer, use the <span style="font-family: Courier New,Courier,monospace">media_streamer_destroy()</span> function. The media streamer nodes that have not been removed manually from the media streamer are removed automatically.</p>
+<p>To destroy the media streamer, use the <code>media_streamer_destroy()</code> function. The media streamer nodes that have not been removed manually from the media streamer are removed automatically.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>The use cases in this guide demonstrate how you can use the media streamer functionality to stream video content in the form of Videotestsrc in the broadcast manual mode.</p>
-<p>To launch streaming, you must create a server part media streamer on the 1st device and a client part media streamer on the 2<sup>nd</sup> device. While creating the server part, you must indicate the IP address of the client part in the <span style="font-family: Courier New,Courier,monospace">127.0.0.1</span> format to stream to.</p>
+<p>To launch streaming, you must create a server part media streamer on the 1st device and a client part media streamer on the 2<sup>nd</sup> device. While creating the server part, you must indicate the IP address of the client part in the <code>127.0.0.1</code> format to stream to.</p>
-<p class="figure">Figure: Topology scheme of the media streamer Videotestsrc streaming scenario</p>
+<p align="center"><strong>Figure: Topology scheme of the media streamer Videotestsrc streaming scenario</strong></p>
<p align="center"><img src="../../images/media_streamer_scenario.png" alt="Media streamer scenario" /></p>
<h2 id="create_server">Creating the Server Part</h2>
<p>To create the server part:</p>
<ol>
-<li>Create the media streamer handle and call the <span style="font-family: Courier New,Courier,monospace">media_streamer_create()</span> function:
+<li>Create the media streamer handle and call the <code>media_streamer_create()</code> function:
<pre class="prettyprint">
media_streamer_h ms_streamer;
int media_streamer_create(&ms_streamer);
<li>Create a source node of the video data stream to transfer to the client part.
<p>For example, the Videotest node is a checkerboard pattern of colors at the edge of the YCbCr gamut and nearby colors that are out of gamut.</p>
<ol type="a">
-<li>Create the <span style="font-family: Courier New,Courier,monospace">Videotestsrc</span> source node:
+<li>Create the <code>Videotestsrc</code> source node:
<pre class="prettyprint">
media_streamer_node_h video_src = NULL;
media_streamer_node_create_src(MEDIA_STREAMER_NODE_SRC_TYPE_VIDEO_TEST, &video_src);
</pre>
</li>
-<li>Add the <span style="font-family: Courier New,Courier,monospace">Videotestsrc</span> source node to the media streamer:
+<li>Add the <code>Videotestsrc</code> source node to the media streamer:
<pre class="prettyprint">
media_streamer_node_add(ms_streamer, video_src);
</pre>
<li>To transfer data over an IP connection, create the final sending node on the server part and the first receiving node on the client part. The creation of the client part is described in <a href="#create_client">Creating the Client Part</a>.
<p>The Real Time Protocol (RTP) node is universal and unique at the same time, and capable of performing enormous work on the RTP packets for their truthful and confident transmission, such as RTP packet validation, maintenance of the SSRC participant database, scheduling of RR/SR RTCP packets, and parsing codec streams transmitted in the same RTP session.</p>
<ol type="a">
-<li>Create the <span style="font-family: Courier New,Courier,monospace">rtp_bin</span> RTP node:
+<li>Create the <code>rtp_bin</code> RTP node:
<pre class="prettyprint">
media_streamer_node_h rtp_bin = NULL;
media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &rtp_bin);
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);
</pre>
</li>
<li>Create the video encoder node.
-<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 <span style="font-family: Courier New,Courier,monospace">.ini</span> file.</p>
+<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:
<h2 id="prepare_server">Preparing the Server Part</h2>
-<p>To prepare the server part of the media streamer, transfer the nodes from the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_IDLE</span> state to the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span> state.</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">media_streamer_prepare()</span> function to change the state:</p>
+<p>To prepare the server part of the media streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_IDLE</code> state to the <code>MEDIA_STREAMER_STATE_READY</code> state.</p>
+<p>Call the <code>media_streamer_prepare()</code> function to change the state:</p>
<pre class="prettyprint">
int media_streamer_prepare(ms_streamer);
</pre>
<h2 id="playing_server">Playing the Server Part</h2>
-<p>To play the server part of the Media Streamer, transfer the nodes from the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span> state to the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_PLAYING</span> state.</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">media_streamer_play()</span> function to change the state and start playing:</p>
+<p>To play the server part of the Media Streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_READY</code> state to the <code>MEDIA_STREAMER_STATE_PLAYING</code> state.</p>
+<p>Call the <code>media_streamer_play()</code> function to change the state and start playing:</p>
<pre class="prettyprint">
int media_streamer_play(ms_streamer);
</pre>
<p>To create the client part on the 2<sup>nd</sup> device on which the server part device is intended to stream to through an IP:</p>
<ol>
-<li>Create the media streamer handle and call the <span style="font-family: Courier New,Courier,monospace">media_streamer_create()</span> function:
+<li>Create the media streamer handle and call the <code>media_streamer_create()</code> function:
<pre class="prettyprint">
media_streamer_h ms_streamer;
int media_streamer_create(&ms_streamer);
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>To receive data over an IP connection, first create the receiving node on the client part to be able to receive RTP packets for their further decoding into a video stream.
<p>The RTP node is universal and unique at the same time, and capable of performing enormous work on RTP packets for their truthful and confident receiving, such as keeping per participant statistics based on received RTCP packets, allowing an application to easily receive and decode an RTP stream with multiple SSRCs, and reordering and removing duplicate RTP packets as they are received from a network source.</p>
<ol type="a">
-<li>Create the <span style="font-family: Courier New,Courier,monospace">rtp_bin</span> RTP node:
+<li>Create the <code>rtp_bin</code> RTP node:
<pre class="prettyprint">
media_streamer_node_h rtp_bin = NULL;
media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &rtp_bin);
<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:
</ol>
</li>
<li>Create the video decoder node.
-<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 <span style="font-family: Courier New,Courier,monospace">.ini</span> file.</p>
+<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">
<h2 id="client_prepare">Preparing the Client Part</h2>
-<p>To prepare the client part of the media streamer, transfer the nodes from the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_IDLE</span> state to the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span> state.</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">media_streamer_prepare()</span> function to change the state:</p>
+<p>To prepare the client part of the media streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_IDLE</code> state to the <code>MEDIA_STREAMER_STATE_READY</code> state.</p>
+<p>Call the <code>media_streamer_prepare()</code> function to change the state:</p>
<pre class="prettyprint">
int media_streamer_prepare(ms_streamer);
</pre>
<h2 id="client_play">Playing the Client Part</h2>
-<p>To play the client part of the media streamer, transfer the nodes from the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_READY</span> state to the <span style="font-family: Courier New,Courier,monospace">MEDIA_STREAMER_STATE_PLAYING</span> state.</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">media_streamer_play()</span> function to change the state and start playing:</p>
+<p>To play the client part of the media streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_READY</code> state to the <code>MEDIA_STREAMER_STATE_PLAYING</code> state.</p>
+<p>Call the <code>media_streamer_play()</code> function to change the state and start playing:</p>
<pre class="prettyprint">
int media_streamer_play(ms_streamer);
</pre>
<p>At this point, the VideoTest Streaming is shown on the client part device.</p>
-<p class="figure">Figure: Media streamer client part device receiving Videotestsrc streamed in the streaming scenario</p>
+<p align="center"><strong>Figure: Media streamer client part device receiving Videotestsrc streamed in the streaming scenario</strong></p>
<p align="center"><img src="../../images/media_streamer_playing.png" alt="Media streamer streaming media" /></p>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Visual Detection and Recognition</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Visual Detection and Recognition</h1>
+
+<p>You can perform various visual detection and recognition tasks in your application. You can detect or generate barcodes. In addition, you can track how faces or image objects move as well as detect and recognize faces or objects.</p>
+
+<p>You can use the following visual detection and recognition features in your native applications:</p>
+
+<ul>
+<li><a href="image_barcode_n.htm">Barcode Detection and Generation</a>
+
+<p>You can perceive and understand an image or extract information from images in your application. You can encrypt a message by generating a barcode from it, and you can also detect barcodes in an image or from a camera preview stream.</p></li>
+
+<li><a href="face_detection_n.htm">Face Detection, Recognition, and Tracking</a>
+
+<p>You can detect a face from an image, and recognize a face with a set of examples. You can also track a face within the camera preview stream.</p></li>
+
+<li><a href="image_recognition_n.htm">Image Recognition and Tracking</a>
+
+<p>You can extract features of an image object and recognize it from specific images. You can also track the image object within the camera preview stream.</p></li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Metadata-editor" target="_blank">Metadata-editor Sample Description</a></li>
<p>To handle content metadata, you can use the following features:</p>
<ul>
-<li>Metadata editing <strong>in mobile applications only</strong>
+<li>Metadata editing
<p>You can <a href="#edit_metadata">edit the metadata</a> of several popular audio formats using the metadata editor. You can add and remove album art, or update the information of the audio file.</p>
<p>The metadata editor supports editing the <a href="#attribute">metadata</a> of the mp3 and mp4 (audio only) file formats. Image and video file editing is not supported.</p></li>
<li>Metadata extraction
-<p>Media files, such as mp3 and mp4 files, contain <a href="attribute2">extractable metadata</a>. You can <a href="#get_metadata">extract metadata</a> from such media files with the metadata extractor.</p>
+<p>Media files, such as mp3 and mp4 files, contain <a href="
#attribute2">extractable metadata</a>. You can <a href="#get_metadata">extract metadata</a> from such media files with the metadata extractor.</p>
- <p class="figure">Figure: Getting metadata</p>
+ <p align="center"><strong>Figure: Getting metadata</strong></p>
<p align="center"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
<p>The metadata extractor can be used with video and audio files only. It is not supported in the image files.</p>
<p>To enable your application to use the metadata functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><metadata_editor.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Metadata Editor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">wearable</a> applications), include the <code><metadata_editor.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <metadata_editor.h>
</li>
<li>
<p>Make sure you have access to the file whose metadata and artwork you want to edit.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The metadata editor APIs can use both common content in the device storage (internal or external) and private content in your application data.</td>
- </tr>
- </tbody>
-</table>
-<p>This guide uses an MP3 audio file, which is accessed through its file path. The following example code uses an internal storage, so you must include the <span style="font-family: Courier New,Courier,monospace;">storage.h</span> header file for the code to work.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ The metadata editor APIs can use both common content in the device storage (internal or external) and private content in your application data.
+ </div>
+<p>This guide uses an MP3 audio file, which is accessed through its file path. The following example code uses an internal storage, so you must include the <code>storage.h</code> header file for the code to work.</p>
<pre class="prettyprint">
int internal_storage_id;
char *internal_music_storage_path;
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>
<li>
-<p>To use the functions and data types of the Metadata Extractor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><metadata_extractor.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Metadata Extractor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">wearable</a> applications), include the <code><metadata_extractor.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <metadata_extractor.h>
</pre>
-<p>To ensure that a Metadata Extractor function has been executed properly, make sure that the return value is equal to <span style="font-family: Courier New,Courier,monospace;">METADATA_EXTRACTOR_ERROR_NONE</span>.</p>
+<p>To ensure that a Metadata Extractor function has been executed properly, make sure that the return value is equal to <code>METADATA_EXTRACTOR_ERROR_NONE</code>.</p>
</li>
<li>
<p>To work with the Metadata Extractor API, define a handle variable for the metadata extractor:</p>
</li>
<li>
<p>Make sure you have access to the files whose metadata you want to extract, and make sure the files contain metadata, since the Metadata Extractor API only works on files with metadata.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Metadata Extractor functions can use both common content in the device storage (internal or external) and private content in your application data.</td>
- </tr>
- </tbody>
-</table>
-<p>This guide uses 2 files: an MP3 audio file and an MP4 video file, which are accessed through their file paths. The following example code uses an internal storage, so you must include the <span style="font-family: Courier New,Courier,monospace;">storage.h</span> header file for the code to work.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The Metadata Extractor functions can use both common content in the device storage (internal or external) and private content in your application data.
+ </div>
+<p>This guide uses 2 files: an MP3 audio file and an MP4 video file, which are accessed through their file paths. The following example code uses an internal storage, so you must include the <code>storage.h</code> header file for the code to work.</p>
<pre class="prettyprint">
int internal_storage_id;
char *internal_music_storage_path;
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>
</li>
<li>
-<p>To use the functions and data types of the MIME Type API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><mime_type.h></span> header file in your application:</p>
+<p>To use the functions and data types of the MIME Type API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">wearable</a> applications), include the <code><mime_type.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <mime_type.h>
</pre>
</ol>
-<h2 id="edit_metadata" name="edit_metadata">Editing Metadata and Artwork in Mobile Applications</h2>
+<h2 id="edit_metadata" name="edit_metadata">Editing Metadata and Artwork</h2>
<p>To edit the metadata and artwork in the file:</p>
<ol>
<li>
-<p>Create the metadata editor handle using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_create()</span> function:</p>
+<p>Create the metadata editor handle using the <code>metadata_editor_create()</code> function:</p>
<pre class="prettyprint">
ret = metadata_editor_create(&g_metadata_h);
</pre>
</li>
<li>
-<p>Set the path to the file you want to edit using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_set_path()</span> function:</p>
+<p>Set the path to the file you want to edit using the <code>metadata_editor_set_path()</code> function:</p>
<pre class="prettyprint">
ret = metadata_editor_set_path(g_metadata_h, music_test_path);
</pre>
-<p>The function binds the metadata editor handle (first parameter) with the file specified in the <span style="font-family: Courier New,Courier,monospace;">music_test_path</span> variable (second parameter).</p>
+<p>The function binds the metadata editor handle (first parameter) with the file specified in the <code>music_test_path</code> variable (second parameter).</p>
</li>
<li>
-<p>Edit the metadata in the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_set_metadata()</span> function. Edit each piece of metadata (each metadata attribute) individually.</p>
-<p>As parameters, define the metadata editor handle, the attribute you want to edit, and the new value you want to set to the attribute. The possible attributes are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">metadata_editor_attr_e</a> enumeration.</p>
+<p>Edit the metadata in the file using the <code>metadata_editor_set_metadata()</code> function. Edit each piece of metadata (each metadata attribute) individually.</p>
+<p>As parameters, define the metadata editor handle, the attribute you want to edit, and the new value you want to set to the attribute. The possible attributes are defined in the <code>metadata_editor_attr_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">wearable</a> applications).</p>
<p>The following example code edits the title of the audio content. You can edit other attributes by defining a different attribute enumerator (and a corresponding new value).</p>
<pre class="prettyprint">
char *value = "My Song";
ret = metadata_editor_set_metadata(g_metadata_h, METADATA_EDITOR_ATTR_TITLE, value);
</pre>
-<p>After calling the function, check whether the return value is <span style="font-family: Courier New,Courier,monospace;">METADATA_EDITOR_ERROR_NONE</span>. If it is, you can check the updated metadata using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_get_metadata()</span> function. Otherwise, the function failed because of an error, which you need to handle.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The updated metadata is applied to the file only after you call the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_update_metadata()</span> function, which is discussed below.</td>
- </tr>
- </tbody>
-</table>
+<p>After calling the function, check whether the return value is <code>METADATA_EDITOR_ERROR_NONE</code>. If it is, you can check the updated metadata using the <code>metadata_editor_get_metadata()</code> function. Otherwise, the function failed because of an error, which you need to handle.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The updated metadata is applied to the file only after you call the <code>metadata_editor_update_metadata()</code> function, which is discussed below.
+ </div>
</li>
<li>
-<p>Add artwork to the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_append_picture()</span> function.</p>
+<p>Add artwork to the file using the <code>metadata_editor_append_picture()</code> function.</p>
<p>As parameters, define the metadata editor handle and the path of the image file that contains the artwork. The image file must be in the JPEG or PNG format. The image is added to the last image file position. You can add multiple image files to the same audio file.</p>
<pre class="prettyprint">
char *artwork = "append_image.jpg";
ret = metadata_editor_append_picture(g_metadata_h, artwork);
</pre>
-<p>To remove artwork from the file, use the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_remove_picture()</span> function. As parameters, define the metadata editor handle and the index number of the image file you want to remove.</p>
-<p>To retrieve the number of images in the file, use the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_get_metadata()</span> function. To retrieve a specific image, use the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_get_picture()</span> function.</p>
+<p>To remove artwork from the file, use the <code>metadata_editor_remove_picture()</code> function. As parameters, define the metadata editor handle and the index number of the image file you want to remove.</p>
+<p>To retrieve the number of images in the file, use the <code>metadata_editor_get_metadata()</code> function. To retrieve a specific image, use the <code>metadata_editor_get_picture()</code> function.</p>
<pre class="prettyprint">
int index = 0;
ret = metadata_editor_remove_picture(g_metadata_h, index);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The artwork is added to the file or removed from the file only after you call the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_update_metadata()</span> function, which is discussed below.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The artwork is added to the file or removed from the file only after you call the <code>metadata_editor_update_metadata()</code> function, which is discussed below.
+ </div>
</li>
<li>
-<p>Apply the metadata and artwork edits to the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_update_metadata()</span> function:</p>
+<p>Apply the metadata and artwork edits to the file using the <code>metadata_editor_update_metadata()</code> function:</p>
<pre class="prettyprint">
ret = metadata_editor_update_metadata(g_metadata_h);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the metadata editor handle using the <span style="font-family: Courier New,Courier,monospace;">metadata_editor_destroy()</span> function:</p>
+<p>When no longer needed, destroy the metadata editor handle using the <code>metadata_editor_destroy()</code> function:</p>
<pre class="prettyprint">
metadata_editor_destroy(g_metadata_h);
</pre>
<li>
-<p>Create the metadata extractor handle using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_create()</span> function:</p>
+<p>Create the metadata extractor handle using the <code>metadata_extractor_create()</code> function:</p>
<pre class="prettyprint">
ret = metadata_extractor_create(&g_metadata_h);
<li>
-<p>Set the path to the file whose metadata you want to retrieve using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_set_path()</span> function:</p>
+<p>Set the path to the file whose metadata you want to retrieve using the <code>metadata_extractor_set_path()</code> function:</p>
<pre class="prettyprint">
ret = metadata_extractor_set_path(g_metadata_h, video_test_path);
<li>
-<p>Retrieve the metadata from the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_metadata()</span> function. Retrieve each piece of metadata (each metadata attribute) individually.</p>
+<p>Retrieve the metadata from the file using the <code>metadata_extractor_get_metadata()</code> function. Retrieve each piece of metadata (each metadata attribute) individually.</p>
-<p>As parameters, define the metadata extractor handle, the attribute you want to retrieve, and a pointer to the <
span style="font-family: Courier New,Courier,monospace;">char</span> variable in which you want to store the attribute value. The possible attributes are defined in the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_attr_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">wearable</a> applications).</p>
+<p>As parameters, define the metadata extractor handle, the attribute you want to retrieve, and a pointer to the <
code>char</code> variable in which you want to store the attribute value. The possible attributes are defined in the <code>metadata_extractor_attr_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">wearable</a> applications).</p>
<p>The following example code retrieves the duration and prints it on the screen. You can retrieve other attributes by defining a different attribute enumerator as the second parameter.</p>
}
</pre>
-<p>To avoid memory leaks, release the <span style="font-family: Courier New,Courier,monospace;">value</span> variable using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function when you no longer need the variable.</p>
+<p>To avoid memory leaks, release the <code>value</code> variable using the <code>free()</code> function when you no longer need the variable.</p>
</li>
<li>
-<p>In case of an audio file, retrieve the artwork from the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_artwork()</span> function.</p>
+<p>In case of an audio file, retrieve the artwork from the file using the <code>metadata_extractor_get_artwork()</code> function.</p>
<p>The retrieved artwork information is available in the 3 out parameters, which define the artwork image, image size, and MIME type.</p>
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;
}
</pre>
-<p>To avoid memory leaks, release the <span style="font-family: Courier New,Courier,monospace;">artwork</span> and <span style="font-family: Courier New,Courier,monospace;">artwork_mime</span> variables using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function when you no longer need the variables.</p>
+<p>To avoid memory leaks, release the <code>artwork</code> and <code>artwork_mime</code> variables using the <code>free()</code> function when you no longer need the variables.</p>
</li>
<li>
-<p>In case of an audio file, retrieve the synchronized lyrics from the file using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_synclyrics()</span> function.</p>
+<p>In case of an audio file, retrieve the synchronized lyrics from the file using the <code>metadata_extractor_get_synclyrics()</code> function.</p>
<p>The following example code retrieves the synchronized lyrics from index number 1 and prints the time information and lyrics on the screen:</p>
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;
}
</pre>
-<p>To retrieve the synchronized lyrics index number, use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_metadata()</span> function with the <span style="font-family: Courier New,Courier,monospace;">METADATA_SYNCLYRICS_NUM</span> attribute.</p>
-<p>To avoid memory leaks, release the <span style="font-family: Courier New,Courier,monospace;">lyrics</span> variable using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function when you no longer need the variable.</p>
+<p>To retrieve the synchronized lyrics index number, use the <code>metadata_extractor_get_metadata()</code> function with the <code>METADATA_SYNCLYRICS_NUM</code> attribute.</p>
+<p>To avoid memory leaks, release the <code>lyrics</code> variable using the <code>free()</code> function when you no longer need the variable.</p>
</li>
<p>In case of a video file, retrieve frames from the file in one of the following ways:</p>
<ul>
- <li><p>To retrieve a frame without specifying the time when the frame appears, use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_frame()</span> function.</p></li>
- <li><p>To retrieve a frame at a specified time, use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_frame_at_time()</span> function.</p></li>
+ <li><p>To retrieve a frame without specifying the time when the frame appears, use the <code>metadata_extractor_get_frame()</code> function.</p></li>
+ <li><p>To retrieve a frame at a specified time, use the <code>metadata_extractor_get_frame_at_time()</code> function.</p></li>
</ul>
<p>The following example code first retrieves a frame at an unspecified time and prints the frame size, and then retrieves another frame at a specified time and prints its size:</p>
/* 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);
}
</pre>
-<p>To avoid memory leaks, release the <span style="font-family: Courier New,Courier,monospace;">frame</span> variable using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function when you no longer need the variable.</p>
+<p>To avoid memory leaks, release the <code>frame</code> variable using the <code>free()</code> function when you no longer need the variable.</p>
</li>
<li>
-<p>When no longer needed, destroy the metadata extractor handle using the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_destroy()</span> function:</p>
+<p>When no longer needed, destroy the metadata extractor handle using the <code>metadata_extractor_destroy()</code> function:</p>
<pre class="prettyprint">
metadata_extractor_destroy(g_metadata_h);
<p>To get the MIME types of all files in a directory when the extensions are known:</p>
<ul>
<li>For an individual file extension:
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_mime_type()</span> function. The first parameter is the file extension without the leading dot and the second parameter is the MIME type for the given file extension.</p>
+<p>Use the <code>mime_type_get_mime_type()</code> function. The first parameter is the file extension without the leading dot and the second parameter is the MIME type for the given file extension.</p>
-<p>The MIME type is <span style="font-family: Courier New,Courier,monospace;">'application/octet-stream'</span> if the given file extension is not associated with any specific file format.</p>
+<p>The MIME type is <code>'application/octet-stream'</code> if the given file extension is not associated with any specific file format.</p>
<pre class="prettyprint">
#include <dirent.h>
<li>For the extensions of all files in the resource directory:
<ol>
-<li>To get the directory content, use the <span style="font-family: Courier New,Courier,monospace;">dirent</span> structure available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header:
+<li>To get the directory content, use the <code>dirent</code> structure available in the <code><dirent.h></code> header:
<pre class="prettyprint">
struct dirent *pDirent = NULL;
continue;
</pre></li>
-<li><p>Get the extension from a file name using the <span style="font-family: Courier New,Courier,monospace;">strrchr()</span> function available in the <span style="font-family: Courier New,Courier,monospace;"><string.h></span> header. Incrementing the pointer address is necessary, so use the extension without a dot:</p>
+<li><p>Get the extension from a file name using the <code>strrchr()</code> function available in the <code><string.h></code> header. Incrementing the pointer address is necessary, so use the extension without a dot:</p>
<pre class="prettyprint">
char *extension = strrchr(pDirent->d_name, '.');
extension++;
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_mime_type()</span> function to get the MIME type of each file using the extension pointer as an extension:</p>
+<li><p>Use the <code>mime_type_get_mime_type()</code> function to get the MIME type of each file using the extension pointer as an extension:</p>
<pre class="prettyprint">
mime_type_get_mime_type(extension, &mime_type);
/* Here you have a MIME type in its variable */
<h2 id="get_mime" name="get_mime">Getting Extensions for a MIME Type</h2>
-<p>To get a list of extensions associated, for example, with an image or JPEG MIME type, use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_file_extension()</span> function. </p>
+<p>To get a list of extensions associated, for example, with an image or JPEG MIME type, use the <code>mime_type_get_file_extension()</code> function. </p>
<p>The function takes the MIME type as an input parameter, and fills the array of file extensions and the array length (marked as zero if empty) as the output parameters.</p>
<pre class="prettyprint">
char **extension;
<p>The following table lists the metadata you can edit.</p>
+ <p align="center" class="Table"><strong>Table: Editable metadata attributes</strong></p>
<table>
- <caption>
- Table: Editable metadata attributes
- </caption>
<tbody>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_ARTIST</span></td>
+ <td><code>METADATA_EDITOR_ATTR_ARTIST</code></td>
<td>Artist of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_TITLE</span></td>
+ <td><code>METADATA_EDITOR_ATTR_TITLE</code></td>
<td>Title of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_ALBUM</span></td>
+ <td><code>METADATA_EDITOR_ATTR_ALBUM</code></td>
<td>Album of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_GENRE</span></td>
+ <td><code>METADATA_EDITOR_ATTR_GENRE</code></td>
<td>Genre of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_AUTHOR</span></td>
+ <td><code>METADATA_EDITOR_ATTR_AUTHOR</code></td>
<td>Author of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_COPYRIGHT</span></td>
+ <td><code>METADATA_EDITOR_ATTR_COPYRIGHT</code></td>
<td>Copyright of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_DATE</span></td>
+ <td><code>METADATA_EDITOR_ATTR_DATE</code></td>
<td>Date of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_DESCRIPTION</span></td>
+ <td><code>METADATA_EDITOR_ATTR_DESCRIPTION</code></td>
<td>Description of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_COMMENT</span></td>
+ <td><code>METADATA_EDITOR_ATTR_COMMENT</code></td>
<td>Comment of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_TRACK_NUM</span></td>
+ <td><code>METADATA_EDITOR_ATTR_TRACK_NUM</code></td>
<td>Track number of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_PICTURE_NUM</span></td>
+ <td><code>METADATA_EDITOR_ATTR_PICTURE_NUM</code></td>
<td>Picture number of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_CONDUCTOR</span></td>
+ <td><code>METADATA_EDITOR_ATTR_CONDUCTOR</code></td>
<td>Conductor of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_EDITOR_ATTR_UNSYNCLYRICS</span></td>
+ <td><code>METADATA_EDITOR_ATTR_UNSYNCLYRICS</code></td>
<td>Unsync lyrics of the audio content</td>
</tr>
</tbody>
<p>The following table lists the extractable metadata.</p>
+ <p align="center" class="Table"><strong>Table: Metadata extractor attributes</strong></p>
<table>
- <caption>
- Table: Metadata extractor attributes
- </caption>
<tbody>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_DURATION</span></td>
+ <td><code>METADATA_DURATION</code></td>
<td>Duration of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_BITRATE</span></td>
+ <td><code>METADATA_VIDEO_BITRATE</code></td>
<td>Bitrate of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_FPS</span></td>
+ <td><code>METADATA_VIDEO_FPS</code></td>
<td>FPS of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_WIDTH</span></td>
+ <td><code>METADATA_VIDEO_WIDTH</code></td>
<td>Width of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_HEIGHT</span></td>
+ <td><code>METADATA_VIDEO_HEIGHT</code></td>
<td>Height of the video content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_VIDEO</span></td>
+ <td><code>METADATA_HAS_VIDEO</code></td>
<td>Whether the content has video stream</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITRATE</span></td>
+ <td><code>METADATA_AUDIO_BITRATE</code></td>
<td>Bitrate of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_CHANNELS</span></td>
+ <td><code>METADATA_AUDIO_CHANNELS</code></td>
<td>Channel of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_SAMPLERATE</span></td>
+ <td><code>METADATA_AUDIO_SAMPLERATE</code></td>
<td>Sample rate of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITPERSAMPLE</span></td>
+ <td><code>METADATA_AUDIO_BITPERSAMPLE</code></td>
<td>Bit per sample of the audio content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_AUDIO</span></td>
+ <td><code>METADATA_HAS_AUDIO</code></td>
<td>Whether the content has audio stream</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_ARTIST</span></td>
+ <td><code>METADATA_ARTIST</code></td>
<td>Artist of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_TITLE</span></td>
+ <td><code>METADATA_TITLE</code></td>
<td>Title of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM</span></td>
+ <td><code>METADATA_ALBUM</code></td>
<td>Album of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM_ARTIST</span></td>
+ <td><code>METADATA_ALBUM_ARTIST</code></td>
<td>Album artist of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_GENRE</span></td>
+ <td><code>METADATA_GENRE</code></td>
<td>Genre of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUTHOR</span></td>
+ <td><code>METADATA_AUTHOR</code></td>
<td>Author of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_COPYRIGHT</span></td>
+ <td><code>METADATA_COPYRIGHT</code></td>
<td>Copyright of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_DATE</span></td>
+ <td><code>METADATA_DATE</code></td>
<td>Date of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_DESCRIPTION</span></td>
+ <td><code>METADATA_DESCRIPTION</code></td>
<td>Description of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_COMMENT</span></td>
+ <td><code>METADATA_COMMENT</code></td>
<td>Comment about the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_TRACK_NUM</span></td>
+ <td><code>METADATA_TRACK_NUM</code></td>
<td>Track number of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_CLASSIFICATION</span></td>
+ <td><code>METADATA_CLASSIFICATION</code></td>
<td>Classification of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_RATING</span></td>
+ <td><code>METADATA_RATING</code></td>
<td>Rating of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_LONGITUDE</span></td>
+ <td><code>METADATA_LONGITUDE</code></td>
<td>Longitude of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_LATITUDE</span></td>
+ <td><code>METADATA_LATITUDE</code></td>
<td>Latitude of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALTITUDE</span></td>
+ <td><code>METADATA_ALTITUDE</code></td>
<td>Altitude of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_CONDUCTOR</span></td>
+ <td><code>METADATA_CONDUCTOR</code></td>
<td>Conductor of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_UNSYNCLYRICS</span></td>
+ <td><code>METADATA_UNSYNCLYRICS</code></td>
<td>Asynchronous lyrics of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_SYNCLYRICS_NUM</span></td>
+ <td><code>METADATA_SYNCLYRICS_NUM</code></td>
<td>Synchronous lyrics of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_RECDATE</span></td>
+ <td><code>METADATA_RECDATE</code></td>
<td>Recorded date of the content</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">METADATA_ROTATE</span></td>
+ <td><code>METADATA_ROTATE</code></td>
<td>Orientation of the content</td>
</tr>
</tbody>
}
</pre>
-<p>When your audio stream is no longer needed or inactive for a long time, destroy the context by calling the <span style="font-family: Courier New,Courier,monospace">alcDestroyContext()</span> function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The device cannot fall into a sleep state while the context is not destroyed. To avoid unwanted battery consumption, destroy the context punctually.</td>
- </tr>
- </tbody>
- </table>
+<p>When your audio stream is no longer needed or inactive for a long time, destroy the context by calling the <code>alcDestroyContext()</code> function.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ The device cannot fall into a sleep state while the context is not destroyed. To avoid unwanted battery consumption, destroy the context punctually.
+ </div>
</li>
<li>Requesting a source and buffer
<p>To enable your application to use the OpenAL functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the OpenAL API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><AL/al.h></span> and <span style="font-family: Courier New,Courier,monospace;"><AL/alc.h></span> header files in your application:</p>
+<p>To use the functions and data types of the OpenAL API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">wearable</a> applications), include the <code><AL/al.h></code> and <code><AL/alc.h></code> header files in your application:</p>
<pre class="prettyprint">
#include <AL/al.h>
<li>
<p>Retrieve the default device name, and open the default device.</p>
-<p>The following example code verifies that a given extension is available, retrieves the names of all available devices and the name of the default device using the <span style="font-family: Courier New,Courier,monospace;">alcGetString()</span> function, and opens the default device using the <span style="font-family: Courier New,Courier,monospace;">alcOpenDevice()</span> function:</p>
+<p>The following example code verifies that a given extension is available, retrieves the names of all available devices and the name of the default device using the <code>alcGetString()</code> function, and opens the default device using the <code>alcOpenDevice()</code> function:</p>
<pre class="prettyprint">
/* Verify that a given extension is available for the current context */
enumeration = alcIsExtensionPresent(NULL, "ALC_ENUMERATION_EXT");
LOGI("[%s] Device: %s ", __func__, alcGetString(device, ALC_DEVICE_SPECIFIER));
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">alcOpenDevice()</span> function opens the audio device through the pulseaudio layer.</p>
+<p>The <code>alcOpenDevice()</code> function opens the audio device through the pulseaudio layer.</p>
</li>
<li>
-<p>If the device is opened successfully, create a context for the device using the <span style="font-family: Courier New,Courier,monospace;">alcCreateContext()</span> function, and set the context as active using the <span style="font-family: Courier New,Courier,monospace;">alcMakeContextCurrent()</span> function:</p>
+<p>If the device is opened successfully, create a context for the device using the <code>alcCreateContext()</code> function, and set the context as active using the <code>alcMakeContextCurrent()</code> function:</p>
<pre class="prettyprint">
/* Create context */
<ol>
<li>
-<p>Request the source using the <span style="font-family: Courier New,Courier,monospace;">alSources()</span> function, and update the source attributes, such as the default gain and sound position:</p>
+<p>Request the source using the <code>alSources()</code> function, and update the source attributes, such as the default gain and sound position:</p>
<pre class="prettyprint">
/* Request a source name */
alBufferData(buffer, format, _data_buffer, dataSize, frequency);
</pre>
-<p>In the above example code, the <span style="font-family: Courier New,Courier,monospace;">_data_buffer</span> parameter points to the audio sample data. The memory for the data has been allocated using the <span style="font-family: Courier New,Courier,monospace;">malloc()</span> function. The <span style="font-family: Courier New,Courier,monospace;">dataSize</span> parameter defines the amount of data to be buffered.</p>
+<p>In the above example code, the <code>_data_buffer</code> parameter points to the audio sample data. The memory for the data has been allocated using the <code>malloc()</code> function. The <code>dataSize</code> parameter defines the amount of data to be buffered.</p>
<p>The following table lists the supported audio sample formats:</p>
+<p align="center" class="Table"><strong>Table: Supported audio sample formats</strong></p>
<table>
-<caption>Table: Supported audio sample formats</caption>
<tbody>
<tr>
<th>Format</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AL_FORMAT_MONO8</span></td>
+ <td><code>AL_FORMAT_MONO8</code></td>
<td>Unsigned 8-bit mono audio sample</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AL_FORMAT_MONO16</span></td>
+ <td><code>AL_FORMAT_MONO16</code></td>
<td>Unsigned 16-bit mono audio sample</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AL_FORMAT_STEREO8</span></td>
+ <td><code>AL_FORMAT_STEREO8</code></td>
<td>Unsigned 8-bit stereo audio sample (interleaved)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">AL_FORMAT_STEREO16</span></td>
+ <td><code>AL_FORMAT_STEREO16</code></td>
<td>Unsigned 16-bit stereo audio sample (interleaved)</td>
</tr>
</tbody></table>
<p>To control the playback, use the following state transition functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">alSourcePlay()</span>: Play, replay, or resume a source.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">alSourceStop()</span>: Stop one or more sources.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">alSourceRewind()</span>: Rewind a source (set the playback position to the beginning).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">alSourcePause()</span>: Pause a source.</li></ul>
+<li><code>alSourcePlay()</code>: Play, replay, or resume a source.</li>
+<li><code>alSourceStop()</code>: Stop one or more sources.</li>
+<li><code>alSourceRewind()</code>: Rewind a source (set the playback position to the beginning).</li>
+<li><code>alSourcePause()</code>: Pause a source.</li></ul>
<p>To start and stop playback:</p>
<ol>
<li>
<p>To play the audio stream, implement the start event of the playback action (for example, a start button click).</p>
-<p>In the following example code, the whole audio buffer is allocated and filled before the playback starts using the <span style="font-family: Courier New,Courier,monospace;">alSourcei()</span> function. The second parameter specifies the source type as static. Start the playback after changing the state to play.</p>
+<p>In the following example code, the whole audio buffer is allocated and filled before the playback starts using the <code>alSourcei()</code> function. The second parameter specifies the source type as static. Start the playback after changing the state to play.</p>
<pre class="prettyprint">
/* Function: _on_click1() */
<li>
<p>Start the playback stream, and push the buffer (for example, 1024 bytes) periodically on click events.</p>
-<p>If a loop detects a consumed buffer (<span style="font-family: Courier New,Courier,monospace;">iBuffersProcessed</span>) by querying <span style="font-family: Courier New,Courier,monospace;">AL_BUFFERS_PROCESSED</span>, dequeue the consumed buffer using the <span style="font-family: Courier New,Courier,monospace;">alSourceUnqueueBuffers()</span> function. To continue the playback, fill and queue the buffer again using the <span style="font-family: Courier New,Courier,monospace;">alSourceQueueBuffers()</span> function. Run the loop in a thread separate from the application main thread.</p>
+<p>If a loop detects a consumed buffer (<code>iBuffersProcessed</code>) by querying <code>AL_BUFFERS_PROCESSED</code>, dequeue the consumed buffer using the <code>alSourceUnqueueBuffers()</code> function. To continue the playback, fill and queue the buffer again using the <code>alSourceQueueBuffers()</code> function. Run the loop in a thread separate from the application main thread.</p>
<pre class="prettyprint">
/* Start playing the streamed audio */
LOGI("Buffers Processed %d", iTotalBuffersProcessed);
/*
- For each processed buffer, remove it from the source queue, read the next chunk of
- audio data from the file, fill the buffer with new data, and add it to the source queue
+ For each processed buffer, remove it from the source queue,
+ read the next chunk of audio data from the file,
+ fill the buffer with new data, and add it to the source queue
*/
while (iBuffersProcessed) {
- /* Remove the buffer from the queue (uiBuffer contains the buffer ID for the dequeued buffer) */
+ /*
+ Remove the buffer from the queue
+ (uiBuffer contains the buffer ID for the dequeued buffer)
+ */
uiBuffer = 0;
alSourceUnqueueBuffers(source, 1, &uiBuffer);
<ul>
<li>Switching the radio on and off
- <p>You can create a handle for a radio instance using the <span style="font-family: Courier New,Courier,monospace;">radio_create()</span> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <span style="font-family: Courier New,Courier,monospace;">radio_start()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_stop()</span> functions.</p></li>
+ <p>You can create a handle for a radio instance using the <code>radio_create()</code> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <code>radio_start()</code> and <code>radio_stop()</code> functions.</p></li>
<li>Scanning for radio frequencies
<p>You can <a href="#scan">scan for all available frequencies</a>.</p></li>
<li>Tuning the radio
- <p>You can <a href="#tune">select and start playing a radio frequency</a> using the <span style="font-family: Courier New,Courier,monospace;">radio_set_frequency()</span> function.</p></li>
+ <p>You can <a href="#tune">select and start playing a radio frequency</a> using the <code>radio_set_frequency()</code> function.</p></li>
<li>Searching for an adjacent channel
- <p>You can <a href="#seek">seek an adjacent channel</a> with the <span style="font-family: Courier New,Courier,monospace;">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_seek_down()</span> functions.</p></li>
+ <p>You can <a href="#seek">seek an adjacent channel</a> with the <code>radio_seek_up()</code> and <code>radio_seek_down()</code> functions.</p></li>
</ul>
<p>The Radio API allows only one instance at the time. Radio playback can be interrupted by another radio application.</p>
<p>The following figure illustrates the general radio state changes.</p>
- <p class="figure">Figure: Radio state changes</p>
+ <p align="center"><strong>Figure: Radio state changes</strong></p>
<p align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the radio functionality:</p>
<ol>
-<li><p>To use the functions and data types of the Radio API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><radio.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Radio API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">wearable</a> applications), include the <code><radio.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <radio.h>
</pre>
</li>
-<li><p>Define a handle for the radio using the <span style="font-family: Courier New,Courier,monospace">radio_create()</span> function:</p>
+<li><p>Define a handle for the radio using the <code>radio_create()</code> function:</p>
<pre class="prettyprint">
#define MAX_FREQUENCIES 10
struct radioInfo {
return false;
</pre>
</li>
-<li><p>To receive notifications when the radio playback is interrupted, register a callback function using the <span style="font-family: Courier New,Courier,monospace">radio_set_interrupted_cb()</span> function:</p>
+<li><p>To receive notifications when the radio playback is interrupted, register a callback function using the <code>radio_set_interrupted_cb()</code> function:</p>
<pre class="prettyprint">
ret = radio_set_interrupted_cb(mRadio.radio, on_radio_interrupted, &mRadio);
if (ret != RADIO_ERROR_NONE) {
<p>To scan for all available radio frequencies:</p>
<ol>
-<li><p>To receive a notification when the scan is completed, register a callback function using the <span style="font-family: Courier New,Courier,monospace">radio_set_scan_completed_cb()</span> function:</p>
+<li><p>To receive a notification when the scan is completed, register a callback function using the <code>radio_set_scan_completed_cb()</code> function:</p>
<pre class="prettyprint">
ret = radio_set_scan_completed_cb(mRadio.radio, on_scan_finished, &mRadio);
if (ret != RADIO_ERROR_NONE)
radio_scan_start(mRadio.radio, on_scan_updated, &mRadio);
</pre>
<p>The scanning time depends on the environment (the strength of the radio signal).</p>
-<p>Each time the scan finds a new frequency, it calls the <span style="font-family: Courier New,Courier,monospace">on_scan_updated()</span> callback function, which returns the kHz value of the frequency. To cancel the scan before it completes, use the <span style="font-family: Courier New,Courier,monospace">radio_scan_stop()</span> function.</p>
+<p>Each time the scan finds a new frequency, it calls the <code>on_scan_updated()</code> callback function, which returns the kHz value of the frequency. To cancel the scan before it completes, use the <code>radio_scan_stop()</code> function.</p>
</li>
<li><p>Implement the scan update callback that returns the available frequencies:</p>
<pre class="prettyprint">
mRadio->frequencies[mRadio->num_freq++] = frequency;
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not call radio functions (such as <span style="font-family: Courier New,Courier,monospace">radio_set_frequency()</span> or <span style="font-family: Courier New,Courier,monospace">radio_start()</span>) in the callback function.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not call radio functions (such as <code>radio_set_frequency()</code> or <code>radio_start()</code>) in the callback function.
+ </div>
</li>
</ol>
<p>To select and start playing a frequency:</p>
<ol>
-<li><p>Set the frequency you want to play using the <span style="font-family: Courier New,Courier,monospace">radio_set_frequency()</span> function:</p>
+<li><p>Set the frequency you want to play using the <code>radio_set_frequency()</code> function:</p>
<pre class="prettyprint">
ret = radio_set_frequency(mRadio.radio, mRadio.frequencies[mRadio.selected_channel]);
if (ret != RADIO_ERROR_NONE)
return false;
</pre>
</li>
-<li><p>Start playing the frequency using the <span style="font-family: Courier New,Courier,monospace">radio_start()</span> function:</p>
+<li><p>Start playing the frequency using the <code>radio_start()</code> function:</p>
<pre class="prettyprint">
ret = radio_start(mRadio.radio);
if (ret != RADIO_ERROR_NONE)
return false;
</pre>
-<p>If the radio emits no sound, check the signal strength with the <span style="font-family: Courier New,Courier,monospace">radio_get_signal_strength()</span> function, which returns the current signal strength as a dBuV value.</p>
+<p>If the radio emits no sound, check the signal strength with the <code>radio_get_signal_strength()</code> function, which returns the current signal strength as a dBuV value.</p>
</li>
</ol>
<p>To search for and tune in to an adjacent channel:</p>
<ol>
-<li><p>Search for an active adjacent frequency using the <span style="font-family: Courier New,Courier,monospace">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace">radio_seek_down()</span> functions.</p>
+<li><p>Search for an active adjacent frequency using the <code>radio_seek_up()</code> and <code>radio_seek_down()</code> functions.</p>
<p>This is similar to the scanning operation, but only the nearest active frequency is searched for. Once the maximum frequency is reached in either direction, the search ends, and the radio is set to that frequency.</p>
-<p>To seek down, use the <span style="font-family: Courier New,Courier,monospace">radio_seek_down()</span> function:</p>
+<p>To seek down, use the <code>radio_seek_down()</code> function:</p>
<pre class="prettyprint">
ret = radio_seek_down(mRadio.radio, on_seek_completed, &mRadio);
if (ret != RADIO_ERROR_NONE)
return false;
</pre>
-<p>To seek up, use the <span style="font-family: Courier New,Courier,monospace">radio_seek_up()</span> function in the same way.</p>
+<p>To seek up, use the <code>radio_seek_up()</code> function in the same way.</p>
</li>
<li><p>Implement the search complete callback that returns the adjacent frequency:</p>
<pre class="prettyprint">
<li><a href="#prerequisites">Prerequisites</a></li>
<li>Playback
<ul class="toc">
- <li><a href="#simple">Managing Synchronous Playback</a></li>
- <li><a href="#async">Managing Asynchronous Playback</a></li>
+ <li><a href="#simple_playback">Managing Synchronous Playback</a></li>
+ <li><a href="#async_playback">Managing Asynchronous Playback</a></li>
</ul>
</li>
<li>Recording
<ul class="toc">
- <li><a href="#simple">Managing Synchronous Recording</a></li>
- <li><a href="#async">Managing Asynchronous Recording</a></li>
+ <li><a href="#simple_recording">Managing Synchronous Recording</a></li>
+ <li><a href="#async_recording">Managing Asynchronous Recording</a></li>
</ul>
</li>
</ul>
<h2 id="play_pcm" name="play_pcm">Audio Output</h2>
-<p>The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices. You can <a href="#simple">play audio synchronously</a>, or <a href="#async">do it asynchronously</a>.</p>
- <p>To play the audio PCM data, the application must call the <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> function to initialize the audio output handle.</p>
+<p>The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices. You can <a href="#simple_playback">play audio synchronously</a>, or <a href="#async_playback">do it asynchronously</a>.</p>
+ <p>To play the audio PCM data, the application must call the <code>audio_out_create()</code> function to initialize the audio output handle.</p>
<p>Your application must define the following PCM data settings:</p>
<ul>
<li>Audio channels:
</ul> </li>
</ul>
- <p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>
- <p class="figure">Figure: Audio output states</p>
+ <p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>´
+ <p align="center"><strong>Figure: Audio output states</strong></p>
<p align="center"><img src="../../images/audio_output.png" alt="Audio output states" /></p>
- <p class="figure">Figure: Audio output states when interrupted by system</p>
+ <p align="center"><strong>Figure: Audio output states when interrupted by system</strong></p>
<p align="center"><img src="../../images/audio_output_interrupt_state.png" alt="Audio output states when interrupted by system" /></p>
<h3 id="use" name="use">Using Audio Output</h3>
</ul> </li>
<li>Do not call the Audio Output functions too frequently.
<ul>
- <li>The Audio Output functions require more time while repeated in the order of <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>. Therefore, keep the frequency of calling these functions to a minimum. Note that the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions are much faster than <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>.</li>
+ <li>The Audio Output functions require more time while repeated in the order of <code>audio_out_create()</code> > <code>audio_out_prepare()</code> > <code>audio_out_unprepare()</code> > <code>audio_out_destroy()</code>. Therefore, keep the frequency of calling these functions to a minimum. Note that the <code>audio_out_prepare()</code> and <code>audio_out_unprepare()</code> functions are much faster than <code>audio_out_create()</code> and <code>audio_out_destroy()</code>.</li>
</ul></li>
<li>Reduce event delay and remove glitches.
<ul>
</ul> </li>
<li>Save power.
<ul>
- <li>If the Audio Output does not play for a long time for some reason, such as the screen turning off or idle playback, call the <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function to pause the stream and save power. The device cannot go to sleep while in the PLAYING state.</li>
+ <li>If the Audio Output does not play for a long time for some reason, such as the screen turning off or idle playback, call the <code>audio_out_unprepare()</code> function to pause the stream and save power. The device cannot go to sleep while in the PLAYING state.</li>
</ul> </li>
</ul>
<h2 id="record_pcm" name="record_pcm">Audio Input</h2>
-<p>The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device. You can <a href="#simple">record audio synchronously</a>, or <a href="#async">do it asynchronously</a>.</p>
+<p>The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device. You can <a href="#simple_recording">record audio synchronously</a>, or <a href="#async_recording">do it asynchronously</a>.</p>
<p>Audio data is captured periodically, so to receive the audio PCM data from the input device, you must implement the audio input interface to notify the application of audio data events, such as the end of filling audio data.</p>
<p>Before recording audio, you must define the following PCM data settings:</p>
<li>8000 ~ 48000 Hz</li>
</ul></li>
</ul>
- <p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span>, <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_rate()</span> functions, respectively.</p>
+ <p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <code>audio_in_get_channel()</code>, <code>audio_in_get_sample_type()</code> and <code>audio_in_get_sample_rate()</code> functions, respectively.</p>
<p>The following figures illustrate the general audio input states, and how the state changes when the audio input is interrupted by the system.</p>
- <p class="figure">Figure: Audio input states</p>
+ <p align="center"><strong>Figure: Audio input states</strong></p>
<p align="center"><img src="../../images/audio_input.png" alt="Audio input states" /></p>
- <p class="figure">Figure: Audio input states when interrupted by system</p>
+ <p align="center"><strong>Figure: Audio input states when interrupted by system</strong></p>
<p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the uncompressed audio functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the Audio I/O (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">wearable</a> applications) and Sound Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications) APIs, include the <span style="font-family: Courier New,Courier,monospace"><audio_io.h></span> and <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header files in your application:</p>
+<p>To use the functions and data types of the Audio I/O (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">wearable</a> applications) and Sound Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications) APIs, include the <code><audio_io.h></code> and <code><sound_manager.h></code> header files in your application:</p>
<pre class="prettyprint">
#include <audio_io.h>
#include <sound_manager.h>
</pre>
</li>
-<li><p>To initialize the audio input and output devices, use the <span style="font-family: Courier New,Courier,monospace">audio_in_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> functions:</p>
+<li><p>To initialize the audio input and output devices, use the <code>audio_in_create()</code> and <code>audio_out_create()</code> functions:</p>
<pre class="prettyprint">
/* Define the sample rate for recording audio */
/* 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 <
span style="font-family: Courier New,Courier,monospace">audio_channel_e</span> 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 <span style="font-family: Courier New,Courier,monospace">audio_sample_type_e</span> 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>
+<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>
-<p>The sound types are defined in the <
span style="font-family: Courier New,Courier,monospace">sound_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">wearable</a> applications). You can select the sound type according to the audio sample type.</p></li>
+<p>The sound types are defined in the <
code>sound_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">wearable</a> applications). You can select the sound type according to the audio sample type.</p></li>
</ol>
-<h2 id="simple" name="simple">Managing Synchronous Playback</h2>
+<h2 id="simple_playback" name="simple_playback">Managing Synchronous Playback</h2>
-<p>You can <a href="#
record">play an audio sample</a> and <a href="#modify">modify the volume of the playback</a>.</p>
+<p>You can <a href="#
playing">play an audio sample</a> and <a href="#modify">modify the volume of the playback</a>.</p>
-<h3 id="record" name="record">Playing an Audio Sample</h3>
+<h3 id="playing" name="playing">Playing an Audio Sample</h3>
-<p>The synchronous playback process blocks other processes running in the same thread. Launching a playback process from the main thread of the application can make the application unresponsive. To prevent this, launch the playback process from its own thread. For example, in this use case, the playback process is run inside the <span style="font-family: Courier New,Courier,monospace">synchronous_playback()</span> function, which is executed in a separate thread using the <span style="font-family: Courier New,Courier,monospace">ecore_thread_run()</span> function:</p>
+<p>The synchronous playback process blocks other processes running in the same thread. Launching a playback process from the main thread of the application can make the application unresponsive. To prevent this, launch the playback process from its own thread. For example, in this use case, the playback process is run inside the <code>synchronous_playback()</code> function, which is executed in a separate thread using the <code>ecore_thread_run()</code> function:</p>
<pre class="prettyprint">
ecore_thread_run(synchronous_playback, NULL, NULL, NULL);
<p>To play audio:</p>
<ol>
-<li><p>Prepare the audio output device and start the playback process using the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function:</p>
+<li><p>Prepare the audio output device and start the playback process using the <code>audio_out_prepare()</code> function:</p>
<pre class="prettyprint">
/* Prepare the audio output device (starts the hardware playback process) */
<p>The hardware device prepares its internal output buffer for playback. Playback begins when the internal output buffer starts receiving audio data.</p>
</li>
-<li><p>To start playing the recorded audio, copy the audio data from the local buffer to the internal output buffer using the <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function:</p>
+<li><p>To start playing the recorded audio, copy the audio data from the local buffer to the internal output buffer using the <code>audio_out_write()</code> function:</p>
<pre class="prettyprint">
/* Copy the audio data from the local buffer to the internal output buffer */
int bytes_number = audio_out_write(output, buffer, buffer_size);
</pre>
<p>The returned value represents the number of bytes written to the internal output buffer. A negative value represents an error code.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function behaves in a similar manner to the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function.</p>
+<p>The <code>audio_out_write()</code> function behaves in a similar manner to the <code>audio_in_read()</code> function.</p>
</li>
-<li><p>After all data has been copied to the internal output buffer, release the memory allocated to the local buffer using the <span style="font-family: Courier New,Courier,monospace">free()</span> function:</p>
+<li><p>After all data has been copied to the internal output buffer, release the memory allocated to the local buffer using the <code>free()</code> function:</p>
<pre class="prettyprint">
/* Release the memory allocated to the local buffer */
free(buffer);
</pre></li>
-<li><p>Stop the playback process using the <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function:</p>
+<li><p>Stop the playback process using the <code>audio_out_unprepare()</code> function:</p>
<pre class="prettyprint">
/* Stop the hardware playback process */
error_code = audio_out_unprepare(output);
</pre></li>
-<li><p>After you have finished working with the audio output device, deinitialize it using the <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span> function:</p>
+<li><p>After you have finished working with the audio output device, deinitialize it using the <code>audio_out_destroy()</code> function:</p>
<pre class="prettyprint">
/* Deinitialize the audio output device */
error_code = audio_out_destroy(output);
<h3 id="modify" name="modify">Modifying the Audio Sample Volume</h3>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Modifying the volume only works if you have not emptied the local buffer or deinitialized the input audio device.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Modifying the volume only works if you have not emptied the local buffer or deinitialized the input audio device.
+</div>
<p>To modify the volume of the audio sample stored in the local buffer:</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;
}
int16_t *value = (int16_t*)index;
/* Make the sample louder */
- int32_t tmp = (*value) * 8; /* Why not 8 times louder? (on dB scale even much louder) */
+ int32_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
if (tmp > MAX_2BYTES_SIGNED)
tmp = MAX_2BYTES_SIGNED;
if (tmp < MIN_2BYTES_SIGNED)
uint8_t *value = (uint8_t*)index;
/* Make the sample louder */
- uint16_t tmp = (*value) * 8; /* Why not 8 times louder? (on dB scale even much louder) */
+ uint16_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
if (tmp > 255)
tmp = 255;
(*value) = tmp;
<p>In this example, the volume is significantly increased. You can also make other modifications to the audio sample playback.</p>
-<h2 id="async" name="async">Managing Asynchronous Playback</h2>
+<h2 id="async_playback" name="async_playback">Managing Asynchronous Playback</h2>
<p>Playing audio asynchronously involves:</p>
<p>To start playing the recorded audio:</p>
<ol><li>
-<p>Set the callback function using the <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function:</p>
+<p>Set the callback function using the <code>audio_out_set_stream_cb()</code> function:</p>
<pre class="prettyprint">
-/* Set a callback function that is invoked asynchronously for each chunk of stored (recorded) audio */
+/* Set a callback invoked asynchronously for each chunk of stored (recorded) audio */
error_code = audio_out_set_stream_cb(output, _audio_io_stream_write_cb, NULL);
</pre>
</li>
FILE* fp_r = fopen(io_stream_r_path, "r");
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">storage_get_directory()</span> function of the Storage API retrieves the storage path based on the storage ID. To retrieve the storage ID, use the <span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function of the Storage API.</p>
+<p>The <code>storage_get_directory()</code> function of the Storage API 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>
<li>
-<p>Prepare the audio output device and start the playback process using the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function:</p>
+<p>Prepare the audio output device and start the playback process using the <code>audio_out_prepare()</code> function:</p>
<pre class="prettyprint">
/* Prepare the audio output device (starts the hardware playback process) */
<p>To play the audio from the file (inside the callback function):</p>
<ol type="a">
-<li><p>Allocate a local buffer for the audio data using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function. The function returns a pointer to the buffer. Reset the buffer by filling it with zeros using the <span style="font-family: Courier New,Courier,monospace">memset()</span> function.</p></li>
+<li><p>Allocate a local buffer for the audio data using the <code>malloc()</code> function. The function returns a pointer to the buffer. Reset the buffer by filling it with zeros using the <code>memset()</code> function.</p></li>
-<li><p>Read audio data from the file and store the data in the local buffer using the <span style="font-family: Courier New,Courier,monospace">fread()</span> function.</p></li>
+<li><p>Read audio data from the file and store the data in the local buffer using the <code>fread()</code> function.</p></li>
-<li><p>Copy the audio data from the local buffer to the internal output buffer using the <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function. Playback begins when the internal output buffer starts receiving the audio data.</p></li>
+<li><p>Copy the audio data from the local buffer to the internal output buffer using the <code>audio_out_write()</code> function. Playback begins when the internal output buffer starts receiving the audio data.</p></li>
-<li><p>Release the memory allocated to the local buffer using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p></li>
+<li><p>Release the memory allocated to the local buffer using the <code>free()</code> function.</p></li>
</ol>
/* Read audio data from the file and store it in the local buffer */
fread(buffer, sizeof(char), nbytes, fp_r);
- /* Copy the audio data from the local buffer to the internal output buffer (starts playback) */
+ /*
+ Copy the audio data from the local buffer
+ to the internal output buffer (starts playback)
+ */
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>To stop playing the recorded audio:</p>
-<ol><li><p>Stop the playback process using the <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function:</p>
+<ol><li><p>Stop the playback process using the <code>audio_out_unprepare()</code> function:</p>
<pre class="prettyprint">
/* Stop the hardware playback process */
<p>The device no longer invokes the callback function.</p>
</li>
<li>
-<p>If you no longer need asynchronous playback, or if you want to set the callback function separately for each asynchronous playback session, unset the callback function using the <span style="font-family: Courier New,Courier,monospace">audio_out_unset_stream_cb()</span> function:</p>
+<p>If you no longer need asynchronous playback, or if you want to set the callback function separately for each asynchronous playback session, unset the callback function using the <code>audio_out_unset_stream_cb()</code> function:</p>
<pre class="prettyprint">
/* Unset the callback function used for asynchronous playback */
</pre>
</li>
-<li><p>After you have finished working with the audio output device, deinitialize it using the <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span> function:</p>
+<li><p>After you have finished working with the audio output device, deinitialize it using the <code>audio_out_destroy()</code> function:</p>
<pre class="prettyprint">
/* Deinitialize the audio output device */
error_code = audio_out_destroy(output);
</pre></li>
<li>
-<p>Close the file where the recorded audio is stored using the <span style="font-family: Courier New,Courier,monospace">fclose()</span> function:</p>
+<p>Close the file where the recorded audio is stored using the <code>fclose()</code> function:</p>
<pre class="prettyprint">
/* Close the file used for asynchronous playback */
error_code = fclose(fp_r);
</ol>
-<h2 id="simple" name="simple">Managing Synchronous Recording</h2>
+<h2 id="simple_recording" name="simple_recording">Managing Synchronous Recording</h2>
<p>Recording audio synchronously involves:</p>
<li><p>To determine the required buffer size based on what is recommended by the Audio I/O API:</p>
<ol><li>
-<p>Retrieve the recommended buffer size using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function. The function retrieves the buffer size recommended by the sound server (such as PulseAudio).</p>
+<p>Retrieve the recommended buffer size using the <code>audio_in_get_buffer_size()</code> function. The function retrieves the buffer size recommended by the sound server (such as PulseAudio).</p>
<pre class="prettyprint">
int buffer_size;
error_code = audio_in_get_buffer_size(input, &buffer_size);
</pre>
-<p>If no error occurs, the <span style="font-family: Courier New,Courier,monospace">buffer_size</span> parameter returns the preferred size of the buffer that must be allocated (in bytes), based on the specified audio parameters.</p>
+<p>If no error occurs, the <code>buffer_size</code> parameter returns the preferred size of the buffer that must be allocated (in bytes), based on the specified audio parameters.</p>
<p>The recommended buffer size depends on the device. The size can be different for TV, mobile, and wearable devices.</p>
</li>
<p>Set the buffer size to correspond to the desired duration of the recording.</p>
-<p>For example, for the device used in creating this example code, the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function returns the recommended buffer size for 100 milliseconds of recording time. To determine the actual, required buffer size in seconds, multiply the recommended buffer size by 10 (to increase the duration from 100 milliseconds to 1 second) and by the number of seconds the recording lasts (here, 5 seconds):</p>
+<p>For example, for the device used in creating this example code, the <code>audio_in_get_buffer_size()</code> function returns the recommended buffer size for 100 milliseconds of recording time. To determine the actual, required buffer size in seconds, multiply the recommended buffer size by 10 (to increase the duration from 100 milliseconds to 1 second) and by the number of seconds the recording lasts (here, 5 seconds):</p>
<pre class="prettyprint">
#define RECORDING_SEC 5
<ol>
<li>
-<p>Retrieve the audio channel type using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span> function:</p>
+<p>Retrieve the audio channel type using the <code>audio_in_get_channel()</code> function:</p>
<pre class="prettyprint">
audio_channel_e channel;
</li>
<li>
-<p>Retrieve the audio sample type using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> function:</p>
+<p>Retrieve the audio sample type using the <code>audio_in_get_sample_type()</code> function:</p>
<pre class="prettyprint">
audio_sample_type_e sample_type;
<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>
</li>
</ol></li></ul>
-<p>After determining the required buffer size, allocate the memory to the buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function:</p>
+<p>After determining the required buffer size, allocate the memory to the buffer using the <code>malloc()</code> function:</p>
<pre class="prettyprint">
void *buffer = malloc(buffer_size);
<h3 id="record" name="record">Recording an Audio Sample</h3>
-<p>The synchronous recording process blocks other processes running in the same thread. Launching a recording process from the main thread of the application can make the application unresponsive. To prevent this, launch the recording process from its own thread. For example, in this use case, the recording process is run inside the <span style="font-family: Courier New,Courier,monospace">synchronous_playback()</span> function, which is executed in a separate thread using the <span style="font-family: Courier New,Courier,monospace">ecore_thread_run()</span> function:</p>
+<p>The synchronous recording process blocks other processes running in the same thread. Launching a recording process from the main thread of the application can make the application unresponsive. To prevent this, launch the recording process from its own thread. For example, in this use case, the recording process is run inside the <code>synchronous_playback()</code> function, which is executed in a separate thread using the <code>ecore_thread_run()</code> function:</p>
<pre class="prettyprint">
ecore_thread_run(synchronous_playback, NULL, NULL, NULL);
<p>To record audio:</p>
<ol><li>
-<p>Prepare the audio input device and start the recording process using the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function:</p>
+<p>Prepare the audio input device and start the recording process using the <code>audio_in_prepare()</code> function:</p>
<pre class="prettyprint">
/* Prepare the audio input device (starts the hardware recording process) */
</pre>
<p>The hardware device starts buffering the audio recorded by the audio input device. The audio data is buffered to the internal input buffer.</p>
</li>
-<li><p>Copy the audio data from the internal input buffer to the local buffer using the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function:</p>
+<li><p>Copy the audio data from the internal input buffer to the local buffer using the <code>audio_in_read()</code> function:</p>
<pre class="prettyprint">
/* Copy the audio data from the internal input buffer to the local buffer */
<p>The returned value represents the number of bytes read from the internal input buffer. A negative value represents an error code.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function can behave in the following ways:</p>
+<p>The <code>audio_in_read()</code> function can behave in the following ways:</p>
<ul>
<li>If the function is called immediately after preparing the audio input device, the function blocks the thread it is launched from until the local buffer is full.</li>
<li>If the function is called with a delay long enough to allow the internal input buffer to store more audio data than the local buffer can hold, the function executes immediately without blocking its thread.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function fills the local buffer by copying audio data from the internal input buffer. If the internal input buffer does not contain enough data to fill up the local buffer, the function waits until enough data is recorded. If you want to start recording audio immediately after clicking a button, call the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function just before the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function inside the same button callback function. If you prepare the audio input device earlier in a separate function and only run the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function inside the button callback function, the local buffer is filled with audio data recorded before the button is clicked.</p>
+<p>The <code>audio_in_read()</code> function fills the local buffer by copying audio data from the internal input buffer. If the internal input buffer does not contain enough data to fill up the local buffer, the function waits until enough data is recorded. If you want to start recording audio immediately after clicking a button, call the <code>audio_in_prepare()</code> function just before the <code>audio_in_read()</code> function inside the same button callback function. If you prepare the audio input device earlier in a separate function and only run the <code>audio_in_read()</code> function inside the button callback function, the local buffer is filled with audio data recorded before the button is clicked.</p>
</li>
-<li><p>Stop the recording process using the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function:</p>
+<li><p>Stop the recording process using the <code>audio_in_unprepare()</code> function:</p>
<pre class="prettyprint">
/* Stop the hardware recording process */
error_code = audio_in_unprepare(input);
</pre></li>
-<li><p>After you have finished working with the audio input device, deinitialize it using the <span style="font-family: Courier New,Courier,monospace">audio_in_destroy()</span> function:</p>
+<li><p>After you have finished working with the audio input device, deinitialize it using the <code>audio_in_destroy()</code> function:</p>
<pre class="prettyprint">
/* Deinitialize the audio input device */
error_code = audio_in_destroy(input);
</pre></li>
</ol>
-<h2 id="async" name="async">Managing Asynchronous Recording</h2>
+<h2 id="async_recording" name="async_recording">Managing Asynchronous Recording</h2>
<p>Recording audio asynchronously involves:</p>
<p>To start recording audio:</p>
-<ol><li><p>Set the callback function using the <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function. Use this function before calling the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, because otherwise the callback function is never invoked.</p>
+<ol><li><p>Set the callback function using the <code>audio_in_set_stream_cb()</code> function. Use this function before calling the <code>audio_in_prepare()</code> function, because otherwise the callback function is never invoked.</p>
<pre class="prettyprint">
-/* Set a callback function that is invoked asynchronously for each chunk of recorded audio */
+/* Set a callback invoked asynchronously for each chunk of recorded audio */
error_code = audio_in_set_stream_cb(input, _audio_io_stream_read_cb, NULL);
</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 <span style="font-family: Courier New,Courier,monospace">storage_get_directory()</span> 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 <span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function of the Storage API.</p>
+<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>
<li>
-<p>Prepare the audio input device and start the recording process using the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function:</p>
+<p>Prepare the audio input device and start the recording process using the <code>audio_in_prepare()</code> function:</p>
<pre class="prettyprint">
/* Prepare the audio input device (starts the hardware recording process) */
<li>
<p>To store the recorded audio data in the file (inside the callback function):</p>
<ol type="a">
-<li>Retrieve a pointer to the internal input buffer and the number of recorded audio data bytes using the <span style="font-family: Courier New,Courier,monospace">audio_in_peek()</span> function.</li>
-<li>Retrieve the recorded audio data from the internal input buffer and store it in the file using the <span style="font-family: Courier New,Courier,monospace">fwrite()</span> function.</li>
-<li>Remove the recorded audio data, since it is no longer needed, from the internal input buffer using the <span style="font-family: Courier New,Courier,monospace">audio_in_drop()</span> function.</li>
+<li>Retrieve a pointer to the internal input buffer and the number of recorded audio data bytes using the <code>audio_in_peek()</code> function.</li>
+<li>Retrieve the recorded audio data from the internal input buffer and store it in the file using the <code>fwrite()</code> function.</li>
+<li>Remove the recorded audio data, since it is no longer needed, from the internal input buffer using the <code>audio_in_drop()</code> function.</li>
</ol>
<pre class="prettyprint">
const void * buffer = NULL;
if (nbytes > 0) {
- /* Retrieve a pointer to the internal input buffer and the number of recorded audio data bytes */
+ /*
+ Retrieve a pointer to the internal input buffer
+ and the number of recorded audio data bytes
+ */
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>To stop recording audio:</p>
-<ol><li><p>Stop the recording process using the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function:</p>
+<ol><li><p>Stop the recording process using the <code>audio_in_unprepare()</code> function:</p>
<pre class="prettyprint">
/* Stop the hardware recording process */
<p>The device no longer invokes the callback function.</p>
</li>
<li>
-<p>If you no longer need asynchronous recording, or if you want to set the callback function separately for each asynchronous recording session, unset the callback function using the <span style="font-family: Courier New,Courier,monospace">audio_in_unset_stream_cb()</span> function:</p>
+<p>If you no longer need asynchronous recording, or if you want to set the callback function separately for each asynchronous recording session, unset the callback function using the <code>audio_in_unset_stream_cb()</code> function:</p>
<pre class="prettyprint">
/* Unset the callback function used for asynchronous recording */
error_code = audio_in_unset_stream_cb(input);
</pre>
</li>
-<li><p>After you have finished working with the audio input device, deinitialize it using the <span style="font-family: Courier New,Courier,monospace">audio_in_destroy()</span> function:</p>
+<li><p>After you have finished working with the audio input device, deinitialize it using the <code>audio_in_destroy()</code> function:</p>
<pre class="prettyprint">
/* Deinitialize the audio input device */
error_code = audio_in_destroy(input);
</pre></li>
-<li><p>Close the file where the recorded audio is stored using the <span style="font-family: Courier New,Courier,monospace">fclose()</span> function:</p>
+<li><p>Close the file where the recorded audio is stored using the <code>fclose()</code> function:</p>
<pre class="prettyprint">
/* Close the file used for asynchronous recording */
<p>You can <a href="#prepare">set the resolution or display for the mirror</a>.</p>
</li>
<li>Monitoring state changes in the screen mirroring sink
- <p>To track state changes, you can register a callback with the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed_cb()</span> function. The callback is triggered when the screen mirroring state changes or an error occurs.</p>
- <p>Since all functions that change the state are synchronous (except for <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_pause()</span>, and <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_resume()</span>) most function results are passed to the application through the callback mechanism.</p>
+ <p>To track state changes, you can register a callback with the <code>scmirroring_sink_set_state_changed_cb()</code> function. The callback is triggered when the screen mirroring state changes or an error occurs.</p>
+ <p>Since all functions that change the state are synchronous (except for <code>scmirroring_sink_connect()</code>, <code>scmirroring_sink_start()</code>, <code>scmirroring_sink_pause()</code>, and <code>scmirroring_sink_resume()</code>) most function results are passed to the application through the callback mechanism.</p>
<p>You can also <a href="#handle">handle exceptions</a> if any occur.</p>
</li>
</ul>
<p>The following figures illustrates the state and function call diagrams of the screen mirroring sink.</p>
- <p class="figure">Figure: State diagram</p>
+ <p align="center"><strong>Figure: State diagram</strong></p>
<p align="center"><img src="../../images/capi_media_screen_mirroring_sink_state_diagram.png" alt="State diagram" /></p>
- <p class="figure">Figure: Function call diagram</p>
+ <p align="center"><strong>Figure: Function call diagram</strong></p>
<p align="center"><img src="../../images/screen_mirroring_sink_call_diagram.png" alt="Function call diagram" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a> API, include the <span style="font-family: Courier New,Courier,monospace"><scmirroring_type.h></span> and <span style="font-family: Courier New,Courier,monospace"><scmirroring_sink.h></span> header files in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a> API, include the <code><scmirroring_type.h></code> and <code><scmirroring_sink.h></code> header files in your application:</p>
<pre class="prettyprint">
#include <scmirroring_type.h>
#include <scmirroring_sink.h>
</li>
<li>
-<p>Create a handle for the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_create()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span>.</p>
+<p>Create a handle for the screen mirroring sink using the <code>scmirroring_sink_create()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_NULL</code>.</p>
<pre class="prettyprint">
static scmirroring_sink_h g_scmirroring;
<ol>
<li>
-<p>Register and define a callback for checking the screen mirroring sink state using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed_cb()</span> function:</p>
+<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;
}
</li>
<li>
-<p>Set a display object using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_display()</span> function:</p>
+<p>Set a display object using the <code>scmirroring_sink_set_display()</code> function:</p>
<pre class="prettyprint">
switch (display_type) {
case SCMIRRORING_DISPLAY_TYPE_EVAS:
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]",
</li>
<li>
-<p>Prepare the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_prepare()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PREPARED</span>.</p>
+<p>Prepare the screen mirroring sink using the <code>scmirroring_sink_prepare()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_PREPARED</code>.</p>
<pre class="prettyprint">
ret = scmirroring_sink_prepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE) {
<ol>
<li>
-<p>Set the IP address and port number using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_ip_and_port()</span> function:</p>
+<p>Set the IP address and port number using the <code>scmirroring_sink_set_ip_and_port()</code> function:</p>
<pre class="prettyprint">
static int
start_scmirroring_sink(const char* peer_ip, const char* peer_port)
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;
}
</li>
<li>
-<p>Connect the screen mirroring sink to the screen mirroring source using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span> asynchronously. Monitor the state changes using the state callback.</p>
+<p>Connect the screen mirroring sink to the screen mirroring source using the <code>scmirroring_sink_connect()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_CONNECTED</code> asynchronously. Monitor the state changes using the state callback.</p>
<pre class="prettyprint">
ret = scmirroring_sink_connect(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE) {
</li>
<li>
-<p>When the screen mirroring state is <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span>, start the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PLAYING</span> asynchronously.</p>
+<p>When the screen mirroring state is <code>SCMIRRORING_STATE_CONNECTED</code>, start the screen mirroring sink using the <code>scmirroring_sink_start()</code> function.</p>
+<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 */
<ol>
<li>
-<p>Disconnect the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_disconnect()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span>.</p>
+<p>Disconnect the screen mirroring sink using <code>scmirroring_sink_disconnect()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_DISCONNECTED</code>.</p>
<pre class="prettyprint">
static int
destroy_scmirroring_sink()
</li>
<li>
-<p>Unprepare the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_unprepare()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span>.</p>
+<p>Unprepare the screen mirroring sink using the <code>scmirroring_sink_unprepare()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_NULL</code>.</p>
<pre class="prettyprint">
ret = scmirroring_sink_unprepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE) {
</li>
<li>
-<p>Release the screen mirroring sink resources using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_destroy()</span> function.</p>
-<p>The function sets the screen mirroring state to <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NONE</span>.</p>
+<p>Release the screen mirroring sink resources using the <code>scmirroring_sink_destroy()</code> function.</p>
+<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_NONE</code>.</p>
<pre class="prettyprint">
ret = scmirroring_sink_destroy(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE) {
<h2 id="handle" name="handle">Handling Screen Mirroring Sink Exceptions</h2>
-<p>If the state callback returns an error or the <
span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span> 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>
+<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;
}
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <code><sound_manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <sound_manager.h>
</pre>
<p>The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.</p>
-<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <
span style="font-family: Courier New, Courier, monospace">sound_session_option_for_start_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications) and <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
+<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <
code>sound_session_option_for_start_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications) and <code>sound_session_option_for_during_play_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
-<p>You can also set options for resuming the media session when the interruption ends by using the <
span style="font-family: Courier New, Courier, monospace">sound_session_option_for_resumption_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
+<p>You can also set options for resuming the media session when the interruption ends by using the <
code>sound_session_option_for_resumption_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
<p>To set the sound session type for your application and monitor sound session interruptions:</p>
<ol>
<li>
-<p>Set the sound session type using the <
span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_type()</span> function. The parameter defines the sounds session type using the <span style="font-family: Courier New,Courier,monospace">sound_session_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications).</p>
+<p>Set the sound session type using the <
code>sound_manager_set_session_type()</code> function. The parameter defines the sounds session type using the <code>sound_session_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications).</p>
<pre class="prettyprint">
int error_code;
<p>To receive a notification whenever the sound session is interrupted:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_interrupted_cb()</span> function:</p>
+<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 <
span style="font-family: Courier New,Courier,monospace">sound_session_interrupted_code_e</span> 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>
+<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 has been interrupted by media application, handle accordingly */
+ /* Session interrupted by media application, handle accordingly */
if (code == SOUND_SESSION_INTERRUPTED_COMPLETED)
/* Interruption completed, handle accordingly */
}
<h2 id="manage" name="manage">Controlling the Volume</h2>
<p>You can manage the volume level of a particular sound type. With the Sound Manager API, you can set and get a volume level and a maximum volume level of a particular sound type. </p>
-<p>Normally, if there is an active output stream, the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_sound_type()</span> function returns the sound type of that stream, and if not, it returns an error message. However, you can set a particular sound type as current using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_current_sound_type()</span> function. This enables other applications, such as a volume application, to manage the volume level of the particular sound type even though it is not currently playing.</p>
+<p>Normally, if there is an active output stream, the <code>sound_manager_get_current_sound_type()</code> function returns the sound type of that stream, and if not, it returns an error message. However, you can set a particular sound type as current using the <code>sound_manager_set_current_sound_type()</code> function. This enables other applications, such as a volume application, to manage the volume level of the particular sound type even though it is not currently playing.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_unset_current_sound_type()</span> function.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <code>sound_manager_unset_current_sound_type()</code> function.
+ </div>
<p>To control the volume of your application:</p>
<p>To receive a notification whenever the volume changes:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume_changed_cb()</span> function:</p>
+<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,};
<li>
<p>To retrieve the current and maximum volume for a sound type:</p>
<ul>
-<li><p>Retrieve the current volume using the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_volume()</span> function. The function takes as parameters the sound type and an integer variable where to return the current volume. You can call this function separately for each sound type.</p></li>
-<li><p>Retrieve the maximum volume using the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_max_volume()</span> function. The function takes similar parameters and works the same way as the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_volume()</span> function.</p></li>
+<li><p>Retrieve the current volume using the <code>sound_manager_get_volume()</code> function. The function takes as parameters the sound type and an integer variable where to return the current volume. You can call this function separately for each sound type.</p></li>
+<li><p>Retrieve the maximum volume using the <code>sound_manager_get_max_volume()</code> function. The function takes similar parameters and works the same way as the <code>sound_manager_get_volume()</code> function.</p></li>
</ul>
<pre class="prettyprint">
int ret;
</li>
<li>
-<p>To set the volume level, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume()</span> function.</p>
+<p>To set the volume level, use the <code>sound_manager_set_volume()</code> function.</p>
<p>In the following example code, the first parameter is the sound type and the second parameter is a value received from the slider in the application UI, with which the user sets the volume level.</p>
<pre class="prettyprint">
int ret;
<h2 id="query_device" name="query_device">Querying Sound Devices</h2>
<p>The audio behavior of your application must differ in accordance with the various sound devices that are connected.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> function to get the list handle of the currently connected sound devices. With the sequential search of this device list, you can get the device handle of each device on the list. You can use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions for a sequential search of the device list.</p>
+<p>Use the <code>sound_manager_get_current_device_list()</code> function to get the list handle of the currently connected sound devices. With the sequential search of this device list, you can get the device handle of each device on the list. You can use the <code>sound_manager_get_next_device()</code> and <code>sound_manager_get_prev_device()</code> functions for a sequential search of the device list.</p>
-<p>To get a notification when the sound device connection or information has changed, register the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> callbacks. The initial state of the connected sound device is deactivated.</p>
+<p>To get a notification when the sound device connection or information has changed, register the <code>sound_manager_set_device_connected_cb()</code> and <code>sound_manager_set_device_information_changed_cb()</code> callbacks. The initial state of the connected sound device is deactivated.</p>
<p>To query sound device information:</p>
<p>To access the sound device information:</p>
<ol type="a">
<li>
-<p>Use the <
span style="font-family: Courier New, Courier, monospace">sound_device_mask_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need when getting a sound device list or setting callbacks.</p>
+<p>Use the <
code>sound_device_mask_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need when getting a sound device list or setting callbacks.</p>
<p>To only access the sound devices whose information you need, define a combination of masks:</p>
<pre class="prettyprint">
int ret;
</li>
<li>
<p>Retrieve the sound device list handle and sound device handles.</p>
-<p>To query sound device information, you need a list of currently connected sound devices and a handle for each sound device you want query. To retrieve the list handle, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> function. To retrieve the sound device handles, use <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions with the list handle as a parameter.</p>
+<p>To query sound device information, you need a list of currently connected sound devices and a handle for each sound device you want query. To retrieve the list handle, use the <code>sound_manager_get_current_device_list()</code> function. To retrieve the sound device handles, use <code>sound_manager_get_next_device()</code> and <code>sound_manager_get_prev_device()</code> functions with the list handle as a parameter.</p>
<pre class="prettyprint">
sound_device_list_h list;
sound_device_h device;
<p>Retrieve the sound device information.</p>
<p>With the device handle, you can query the sound device information with the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">sound_manger_get_device_type()</span>: To get the device type.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_io_direction()</span>: To get the device IO direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_id()</span>: To get the device ID.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_name()</span>: To get the device name.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_state()</span>: To get the device state.</li></ul>
+<ul><li><code>sound_manger_get_device_type()</code>: To get the device type.</li>
+<li><code>sound_manager_get_device_io_direction()</code>: To get the device IO direction.</li>
+<li><code>sound_manager_get_device_id()</code>: To get the device ID.</li>
+<li><code>sound_manager_get_device_name()</code>: To get the device name.</li>
+<li><code>sound_manager_get_device_state()</code>: To get the device state.</li></ul>
<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)
<p>To receive a notification whenever the sound device connection state changes:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> function. Use the mask to filter the callback information.</p>
+<p>Register a callback using the <code>sound_manager_set_device_connected_cb()</code> function. Use the mask to filter the callback information.</p>
<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The initial state of the connected sound device is deactivated.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The initial state of the connected sound device is deactivated.
+ </div>
</li>
<li>
<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;
<p>To receive a notification whenever the sound device information changes:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> function. Use the mask to filter the callback information.</p>
+<p>Register a callback using the <code>sound_manager_set_device_information_changed_cb()</code> function. Use the mask to filter the callback information.</p>
<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>
ret = sound_manager_get_device_type(device, &type);
if (type == SOUND_DEVICE_BLUETOOTH) {
- if (changed_info == SOUND_DEVICE_CHANGED_INFO_STATE) {
+ if (changed_info == SOUND_DEVICE_CHANGED_INFO_STATE) {
ret = sound_manager_get_device_state(device, &state);
if (state == SOUND_DEVICE_STATE_DEACTIVATED)
/* Bluetooth device has been deactivated, handle accordingly */
} else {
ret = sound_manager_get_device_io_direction(device, &direction);
if (direction == SOUND_DEVICE_IO_DIRECTION_OUT)
- /* IO direction of the Bluetooth device is now out, handle accordingly */
+ /*
+ IO direction of the Bluetooth device is now out,
+ handle accordingly
+ */
else
/* Handle accordingly */
}
<p>To receive a notification whenever the sound session is interrupted:</p>
<ol type="a">
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_interrupted_cb()</span> function:</p>
+<p>Register a callback using the <code>sound_manager_set_session_interrupted_cb()</code> function:</p>
<pre class="prettyprint">
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 <
span style="font-family: Courier New,Courier,monospace">sound_session_interrupted_code_e</span> 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>
+<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">
void
-_sound_session_interrupted_cb(sound_session_interrupted_code_e code, void * userdata)
+_sound_session_interrupted_cb(sound_session_interrupted_code_e code, void* userdata)
{
dlog_print(DLOG_INFO, LOG_TAG, "Interrupt code: %d\n", code);
<li>
<p>Manage the session type.</p>
<p>To start a sound session, this use case uses the Tone Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">wearable</a> applications). For more information, see the <a href="media_playback_n.htm#tone">Tone Player</a>.</p>
-<p>To determine and change the session type, use the following functions. The <
span style="font-family: Courier New,Courier,monospace">sound_session_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications) defines the available sound session types.</p>
+<p>To determine and change the session type, use the following functions. The <
code>sound_session_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications) defines the available sound session types.</p>
<pre class="prettyprint">
#include <tone_player.h>
int id;
sound_manager_set_media_session_resumption_option(SOUND_SESSION_OPTION_RESUMPTION_BY_SYSTEM_OR_MEDIA_PAUSED);
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">sound_session_option_for_starting_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications), <span style="font-family: Courier New,Courier,monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications), and <span style="font-family: Courier New,Courier,monospace">sound_session_option_for_resumption_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications) enumerations define the available sound session options.</p>
+<p>The <
code>sound_session_option_for_starting_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications), <code>sound_session_option_for_during_play_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications), and <code>sound_session_option_for_resumption_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications) enumerations define the available sound session options.</p>
</li>
<li>
<p>The main features of the StreamRecorder API include:</p>
<ul>
<li>Creating a media packet
-<p>You must <a href="#packet">create a media packet</a> for the stream recording using raw data from the source. The media packet must be created for each buffer captured from source and passed to the <span style="font-family: Courier New,Courier,monospace">streamrecorder_push_stream_buffer()</span> function.</p></li>
+<p>You must <a href="#packet">create a media packet</a> for the stream recording using raw data from the source. The media packet must be created for each buffer captured from source and passed to the <code>streamrecorder_push_stream_buffer()</code> function.</p></li>
<li>Recording audio and video, and controlling the recording
<p>You can <a href="#record_stream">record a stream, and stop, pause, and cancel the recording</a>, and push the buffer.</p>
</li>
<li>Supported file formats:
<ul>
-<li>Video: <span style="font-family: Courier New,Courier,monospace">mp4</span> and <span style="font-family: Courier New,Courier,monospace">3gp</span></li>
-<li>Audio: <span style="font-family: Courier New,Courier,monospace">amr</span> and <span style="font-family: Courier New,Courier,monospace">aac</span></li>
+<li>Video: <code>mp4</code> and <code>3gp</code></li>
+<li>Audio: <code>amr</code> and <code>aac</code></li>
</ul>
-<p>The supported file formats are defined in the <
span style="font-family: Courier New,Courier,monospace">streamrecorder_file_format_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gadb3d70e90207c780e1473785a712d90d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gadb3d70e90207c780e1473785a712d90d">wearable</a> applications).</p></li>
+<p>The supported file formats are defined in the <
code>streamrecorder_file_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gadb3d70e90207c780e1473785a712d90d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gadb3d70e90207c780e1473785a712d90d">wearable</a> applications).</p></li>
<li>Video codec for encoding a video stream
-<p>To set the video codec for encoding a video stream, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_video_encoder()</span> function.</p>
-<p>The available video codecs are defined in the <
span style="font-family: Courier New,Courier,monospace">streamrecorder_video_codec_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gae2912d9eceeac43640efa52f96556473">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gae2912d9eceeac43640efa52f96556473">wearable</a> applications).</p></li>
+<p>To set the video codec for encoding a video stream, use the <code>streamrecorder_set_video_encoder()</code> function.</p>
+<p>The available video codecs are defined in the <
code>streamrecorder_video_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gae2912d9eceeac43640efa52f96556473">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#gae2912d9eceeac43640efa52f96556473">wearable</a> applications).</p></li>
<li>Audio codec for encoding an audio stream
-<p>To set the audio codec for encoding an audio stream, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_audio_encoder()</span> function.</p>
-<p>The available audio codecs are defined in the <
span style="font-family: Courier New,Courier,monospace">streamrecorder_audio_codec_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga46f244622314395be47eddb8d84fabd2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga46f244622314395be47eddb8d84fabd2">wearable</a> applications).</p>
+<p>To set the audio codec for encoding an audio stream, use the <code>streamrecorder_set_audio_encoder()</code> function.</p>
+<p>The available audio codecs are defined in the <
code>streamrecorder_audio_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga46f244622314395be47eddb8d84fabd2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga46f244622314395be47eddb8d84fabd2">wearable</a> applications).</p>
</li>
</ul>
</li>
<p>The following figure illustrates the general stream recorder state changes. Use the stream recorder functions according to pre and post conditions, by following the state changes.</p>
-<p class="figure">Figure: Stream recorder state changes</p>
+<p align="center"><strong>Figure: Stream recorder state changes</strong></p>
<p align="center"><img alt="Stream recorder state changes" src="../../images/streamrecorder_states.png" /></p>
<p>The stream recorder functions serve as the interface with the software. Input is processed through a handle.</p>
<p>To enable your application to use the stream recorder functionality:</p>
<ol>
<li>
-<p>To use the functions and data types of the StreamRecorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><streamrecorder.h></span> header file in your application:</p>
+<p>To use the functions and data types of the StreamRecorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html">wearable</a> applications), include the <code><streamrecorder.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <streamrecorder.h>
</pre>
streamrec_data.streamrecorder = NULL;
</pre>
</li>
-<li><p>Create the stream recorder handle using the <span style="font-family: Courier New,Courier,monospace">streamrecorder_create()</span> function. On success, the StreamRecorder state becomes <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_CREATED</span>.</p>
+<li><p>Create the stream recorder handle using the <code>streamrecorder_create()</code> function. On success, the StreamRecorder state becomes <code>STREAMRECORDER_STATE_CREATED</code>.</p>
<pre class="prettyprint">
/* Create the streamrecorder handle */
error_code = streamrecorder_create(&streamrec_data.streamrecorder);
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
</pre>
-<p>You can get the stream recorder state using the <span style="font-family: Courier New,Courier,monospace">streamrecorder_get_state()</span> function after the handle is created.</p>
+<p>You can get the stream recorder state using the <code>streamrecorder_get_state()</code> function after the handle is created.</p>
</li>
-<li>To enable video recording using a live buffer as a source, you have to call the <
span style="font-family: Courier New,Courier,monospace">streamrecorder_enable_source_buffer()</span> function. Additionally, you can enable other types of sources with the <span style="font-family: Courier New,Courier,monospace">streamrecorder_source_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">wearable</a> applications).
+<li>To enable video recording using a live buffer as a source, you have to call the <
code>streamrecorder_enable_source_buffer()</code> function. Additionally, you can enable other types of sources with the <code>streamrecorder_source_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">wearable</a> applications).
<pre class="prettyprint">
/* Set the video source as live buffer to be used for recording */
error_code = streamrecorder_enable_source_buffer(&streamrec_data.streamrecorder,
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
</pre>
</li>
-<li>To subscribe to notifications, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_notify_cb()</span> function to register a callback function. The parameters are a valid stream recorder handle, a callback function, and data passed to the callback.
+<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);
<p>To get and set information about video and audio encoding:</p>
<ol>
-<li>To get a list of video codecs your device supports, call the <span style="font-family: Courier New,Courier,monospace">streamrecorder_foreach_supported_video_encoder()</span> function. One of its parameters is a callback, which is called for each codec supported for the given stream recorder.
+<li>To get a list of video codecs your device supports, call the <code>streamrecorder_foreach_supported_video_encoder()</code> function. One of its parameters is a callback, which is called for each codec supported for the given stream recorder.
<p>In the following example, the codec of the stream recorder is set to the first found supported codec.</p>
<pre class="prettyprint">
streamrecorder_video_codec_supported_codec;
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);
}
</pre>
</li>
-<li>You can set the bitrate of the video encoder with the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_video_encoder_bitrate()</span> function. Even if the bitrate was set, it can depend on the stream buffer which you push.
-<p>You can also set the file format for the recording media stream by invoking the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_file_format()</span> function. Before setting the file format, check the file formats your device supports using the <span style="font-family: Courier New,Courier,monospace">streamrecorder_foreach_supported_file_format()</span> function.</p>
-<p>Finally, you need to set the file path to store the recorded data by invoking the <span style="font-family: Courier New,Courier,monospace">streamrecorder_set_filename()</span> function.</p>
+<li>You can set the bitrate of the video encoder with the <code>streamrecorder_set_video_encoder_bitrate()</code> function. Even if the bitrate was set, it can depend on the stream buffer which you push.
+<p>You can also set the file format for the recording media stream by invoking the <code>streamrecorder_set_file_format()</code> function. Before setting the file format, check the file formats your device supports using the <code>streamrecorder_foreach_supported_file_format()</code> function.</p>
+<p>Finally, you need to set the file path to store the recorded data by invoking the <code>streamrecorder_set_filename()</code> function.</p>
<pre class="prettyprint">
staticintg_bitrate = 288000;
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);
memcpy(data, rawbuffer, size);
error_code = media_packet_set_buffer_size(streamrecdata.streamrecorder, size);
</pre>
-<p>The media packet must be created for each buffer captured from the source and passed to the <span style="font-family: Courier New,Courier,monospace">streamrecorder_push_stream_buffer()</span> function when the stream recorder is prepared to record.</p>
+<p>The media packet must be created for each buffer captured from the source and passed to the <code>streamrecorder_push_stream_buffer()</code> function when the stream recorder is prepared to record.</p>
<h2 id="record_stream">Recording a Stream</h2>
<p>To record a stream:</p>
<ol>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">streamrecorder_prepare()</span> function with a valid stream recorder handle to change the stream recorder state to <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PREPARED</span>. This is one of the states in which you are able to start recording by calling the <span style="font-family: Courier New,Courier,monospace">streamrecorder_start()</span> function.
+<li>Call the <code>streamrecorder_prepare()</code> function with a valid stream recorder handle to change the stream recorder state to <code>STREAMRECORDER_STATE_PREPARED</code>. This is one of the states in which you are able to start recording by calling the <code>streamrecorder_start()</code> function.
<pre class="prettyprint">
/* Prepare the streamrecorder, changing the state to STREAMRECORDER_STATE_PREPARED */
error_code = streamrecorder_prepare(streamrec_data.streamrecorder);
}
</pre>
</li>
-<li>Start recording by calling the <span style="font-family: Courier New,Courier,monospace">streamrecorder_start()</span> function with a valid stream recorder handle:
+<li>Start recording by calling the <code>streamrecorder_start()</code> function with a valid stream recorder handle:
<pre class="prettyprint">
/* Start the stream recorder */
error_code = streamrecorder_start(streamrec_data.streamrecorder);
}
</pre>
<p>Once the recording starts, the file is removed automatically and replaced with a new one, if you set the file path to an existing file.</p>
-<p>Note that you can only call the <span style="font-family: Courier New,Courier,monospace">streamrecorder_start()</span> function in the prepared state (<span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PREPARED</span>) and paused state (<span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PAUSED</span>).</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">streamrecorder_push_stream_buffer()</span> function, which pushes the media packet to record audio or video.</p>
+<p>Note that you can only call the <code>streamrecorder_start()</code> function in the prepared state (<code>STREAMRECORDER_STATE_PREPARED</code>) and paused state (<code>STREAMRECORDER_STATE_PAUSED</code>).</p>
+<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);
</li>
<li>During the recording, you can pause or stop it:
<ul>
-<li>To stop recording and save the result, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_commit()</span> function with the valid stream recorder handle. The results of the recording are saved to a previously configured file path. This function can be called if the recorder is in the <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PAUSED</span> state.
+<li>To stop recording and save the result, use the <code>streamrecorder_commit()</code> function with the valid stream recorder handle. The results of the recording are saved to a previously configured file path. This function can be called if the recorder is in the <code>STREAMRECORDER_STATE_RECORDING</code> or <code>STREAMRECORDER_STATE_PAUSED</code> state.
<pre class="prettyprint">
/* Stop recording and save recorded data to the previously configured path */
error_code = streamrecorder_commit(streamrec_data.streamrecorder);
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
}
</pre>
-<p>After committing, the stream recorder state is changed to the <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PREPARED</span> state.</p>
-<p>If you do not want to save your recording, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_cancel()</span> function with the proper stream recorder handle. The only difference between this function and the <span style="font-family: Courier New,Courier,monospace">streamrecorder_commit()</span> function is that the recording data are not written in the file.</p>
+<p>After committing, the stream recorder state is changed to the <code>STREAMRECORDER_STATE_PREPARED</code> state.</p>
+<p>If you do not want to save your recording, use the <code>streamrecorder_cancel()</code> function with the proper stream recorder handle. The only difference between this function and the <code>streamrecorder_commit()</code> function is that the recording data are not written in the file.</p>
<pre class="prettyprint">
/* Stop recording but don not save the recorded data */
error_code = streamrecorder_cancel(streamrec_data.streamrecorder);
}
</pre>
</li>
-<li>To pause recording, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_pause()</span> function with the valid stream recorder handle. To start recording again later, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_start()</span> function.
-<p>This function can be called if the stream recorder is in the <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_RECORDING</span> state.</p>
+<li>To pause recording, use the <code>streamrecorder_pause()</code> function with the valid stream recorder handle. To start recording again later, use the <code>streamrecorder_start()</code> function.
+<p>This function can be called if the stream recorder is in the <code>STREAMRECORDER_STATE_RECORDING</code> state.</p>
<pre class="prettyprint">
/* Pause the recording */
error_code = streamrecorder_pause(streamrec_data.streamrecorder);
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
}
</pre>
-<p>After pausing, the stream recorder state is changed to <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PAUSED</span>.</p>
-<p>As a special case, you can stop pushing the stream buffers. In this case, the stream recorder state is <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_RECORDING</span>, because the stream recorder is waiting for buffers. It can make the same effect as a pause in recording.</p>
+<p>After pausing, the stream recorder state is changed to <code>STREAMRECORDER_STATE_PAUSED</code>.</p>
+<p>As a special case, you can stop pushing the stream buffers. In this case, the stream recorder state is <code>STREAMRECORDER_STATE_RECORDING</code>, because the stream recorder is waiting for buffers. It can make the same effect as a pause in recording.</p>
</li>
</ul>
</li>
-<li>When you have finished recording, use the <span style="font-family: Courier New,Courier,monospace">streamrecorder_unprepare()</span> function to reset the stream recorder. The required state for this function is <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_PREPARED</span>. After calling the function, the recorder state is <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_CREATED</span>, which allows you to free all stream recorder resources with the <span style="font-family: Courier New,Courier,monospace">streamrecorder_destroy()</span> function.
+<li>When you have finished recording, use the <code>streamrecorder_unprepare()</code> function to reset the stream recorder. The required state for this function is <code>STREAMRECORDER_STATE_PREPARED</code>. After calling the function, the recorder state is <code>STREAMRECORDER_STATE_CREATED</code>, which allows you to free all stream recorder resources with the <code>streamrecorder_destroy()</code> function.
<pre class="prettyprint">
/* Unprepare the stream recorder */
error_code = streamrecorder_unprepare(streamrec_data->streamrecorder);
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
}
</pre>
-<p>After this, the stream recorder is changed to the <span style="font-family: Courier New,Courier,monospace">STREAMRECORDER_STATE_NONE</span> state.</p>
+<p>After this, the stream recorder is changed to the <code>STREAMRECORDER_STATE_NONE</code> state.</p>
</li>
</ol>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Thumbnail-util" target="_blank">Thumbnail-util Sample Description</a></li>
</ul>
</div></div>
<h1>Thumbnail Images</h1>
<p>Tizen allows you to create a thumbnail from an input media file.</p>
- <p>This feature is supported in mobile applications only.</p>
-
<p>The main features of the Thumbnail Util API include:</p>
<ul><li>Video and image thumbnails
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><thumbnail_util.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Thumbnail Util API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">wearable</a> applications), include the <code><thumbnail_util.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <thumbnail_util.h>
</pre>
<li>
<p>Make sure you have access to the file whose thumbnail you want to extract.</p>
-<p>This guide uses a JPEG image file, which is accessed through its file path. The following example code uses internal storage, so you must include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file for the code to work.</p>
+<p>This guide uses a JPEG image file, which is accessed through its file path. The following example code uses internal storage, so you must include the <code><storage.h></code> header file for the code to work.</p>
<pre class="prettyprint">
int internal_storage_id;
char *internal_image_storage_path;
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>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Thumbnail Util functions can use both common content in the device storage (internal or external) and private content in your application data.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The Thumbnail Util functions can use both common content in the device storage (internal or external) and private content in your application data.
+ </div>
<h2 id="get_thumbnail" name="get_thumbnail">Extracting a Thumbnail</h2>
<ol>
<li>
-<p>Create the thumbnail utility handle using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_create()</span> function:</p>
+<p>Create the thumbnail utility handle using the <code>thumbnail_util_create()</code> function:</p>
<pre class="prettyprint">
ret = thumbnail_util_create(&g_thumb_h);
</pre>
</li>
<li>
-<p>Set the path to the file using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_set_path()</span> function:</p>
+<p>Set the path to the file using the <code>thumbnail_util_set_path()</code> function:</p>
<pre class="prettyprint">
ret = thumbnail_util_set_path(g_thumb_h, image_test_path);
</pre>
</li>
<li>
-<p>Set the thumbnail size using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_set_size()</span> function:</p>
+<p>Set the thumbnail size using the <code>thumbnail_util_set_size()</code> function:</p>
<pre class="prettyprint">
int width = 512;
int height = 288;
</li>
<li>
-<p>Extract the thumbnail from the file using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_extract()</span> function. As parameters, define the thumbnail utility handle, a callback for checking the extraction result, user data, and a request ID.</p>
+<p>Extract the thumbnail from the file using the <code>thumbnail_util_extract()</code> function. As parameters, define the thumbnail utility handle, a callback for checking the extraction result, user data, and a request ID.</p>
<pre class="prettyprint">
void
thumbnail_completed_cb(thumbnail_util_error_e error, const char *request_id,
ret = thumbnail_util_extract(g_thumb_h, thumbnail_completed_cb, NULL, &request_id);
}
</pre>
-<p>After calling the function, check whether the return value is <span style="font-family: Courier New,Courier,monospace;">THUMBNAIL_UTIL_ERROR_NONE</span>. If it is, the function extracted the thumbnail successfully and stored it in the <span style="font-family: Courier New,Courier,monospace;">raw_data</span> parameter returned by the callback. Otherwise, the function failed because of an error, which you need to handle.</p>
-<p>The request ID is returned in the <span style="font-family: Courier New,Courier,monospace;">request_id</span> parameter of the callback. You can use it to distinguish between different-sized thumbnails extracted from the same file, or to cancel a specific extraction request using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_cancel()</span> function.</p>
-<p>The thumbnail is raw data that you can display on the screen directly. You can also encode and save the thumbnail to a file. When no longer needed, release the thumbnail using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<p>After calling the function, check whether the return value is <code>THUMBNAIL_UTIL_ERROR_NONE</code>. If it is, the function extracted the thumbnail successfully and stored it in the <code>raw_data</code> parameter returned by the callback. Otherwise, the function failed because of an error, which you need to handle.</p>
+<p>The request ID is returned in the <code>request_id</code> parameter of the callback. You can use it to distinguish between different-sized thumbnails extracted from the same file, or to cancel a specific extraction request using the <code>thumbnail_util_cancel()</code> function.</p>
+<p>The thumbnail is raw data that you can display on the screen directly. You can also encode and save the thumbnail to a file. When no longer needed, release the thumbnail using the <code>free()</code> function.</p>
</li>
<li>
-<p>When no longer needed, destroy the thumbnail utility handle using the <span style="font-family: Courier New,Courier,monospace;">thumbnail_util_destroy()</span> function:</p>
+<p>When no longer needed, destroy the thumbnail utility handle using the <code>thumbnail_util_destroy()</code> function:</p>
<pre class="prettyprint">
thumbnail_util_destroy(g_thumb_h);
</pre>
\r
<div id="toc-navigation">\r
<div id="profile">\r
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>\r
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>\r
</div>\r
\r
<div id="toc_border"><div id="toc">\r
<p class="toc-title">Dependencies</p>\r
<ul class="toc">\r
<li>Tizen 2.4 and Higher for Mobile</li>\r
+ <li>Tizen 3.0 and Higher for Wearable</li>\r
</ul>\r
<p class="toc-title">Content</p>\r
<ul class="toc">\r
<p class="toc-title">Related Info</p>\r
<ul class="toc">\r
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Mobile Native</a></li>\r
- </ul>\r
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Wearable Native</a></li>\r
+ </ul>\r
</div></div>\r
</div>\r
\r
<h1>Email</h1>\r
<p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>\r
\r
-<p>This feature is supported in mobile applications only.</p>\r
-\r
<p>The main features of the Email API include:</p>\r
\r
<ul><li>Preparing email messages\r
<p>Set the subject, body, and recipients of the message, and the file path for any attachments.</p></li>\r
<li>Sending email messages\r
-<p>Once the <span style="font-family: Courier New,Courier,monospace">email_send_message()</span> function is called, the message content is out of the application's control. Even if the message appears not to have finished sending, it can no longer be modified.</p></li>\r
+<p>Once the <code>email_send_message()</code> function is called, the message content is out of the application's control. Even if the message appears not to have finished sending, it can no longer be modified.</p></li>\r
<li>Registering a callback to be notified of the message status\r
<p>Email sending is asynchronous and the application must not wait for the result. The process can be slow (connections must be established), and even if the mail server is not available, message sending is not a failure if a spooling mechanism exists. To receive a notification when the message has been successfully sent, register a callback function.</p></li></ul>\r
\r
\r
<p>The Email API can be utilized by any component in the application layer which helps the end user to manage email messaging. For example, the Email functions can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.</p>\r
\r
- <p class="figure">Figure: Email service architecture</p> \r
+ <p align="center"><strong>Figure: Email service architecture</strong></p> \r
<p align="center"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p> \r
\r
<h2 id="prerequisites">Prerequisites</h2>\r
<p>To enable your application to use the email functionality:</p>\r
<ol>\r
<li>\r
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>\r
+<p>To use the Email API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>\r
<pre class="prettyprint">\r
<privileges>\r
<privilege>http://tizen.org/privilege/email</privilege>\r
</li>\r
<li> \r
<p>Set up at least 1 email account on your device before sending an email.</p></li>\r
-<li><p>To use the functions and data types of the Email API, include the <span style="font-family: Courier New,Courier,monospace;"><email.h></span> header file in your application:</p>\r
+<li><p>To use the functions and data types of the Email API, include the <code><email.h></code> header file in your application:</p>\r
<pre class="prettyprint">\r
#include <email.h>\r
</pre>\r
-<p>To ensure that an Email function has been executed properly, make sure that the return value is equal to <span style="font-family: Courier New,Courier,monospace;">EMAILS_ERROR_NONE</span>.</p></li>\r
+<p>To ensure that an Email function has been executed properly, make sure that the return value is equal to <code>EMAILS_ERROR_NONE</code>.</p></li>\r
</ol>\r
\r
<p>The email service does not need any initialization or connection opening before the API usage.</p>\r
<p>To create and send email messages:</p>\r
\r
<ol><li>Create an email message.\r
-<p>To create an email message and receive its handle, use the <span style="font-family: Courier New,Courier,monospace;">email_create_message()</span> function.</p>\r
+<p>To create an email message and receive its handle, use the <code>email_create_message()</code> function.</p>\r
<pre class="prettyprint">\r
email_h msg;\r
int error_code = EMAILS_ERROR_NONE;\r
if (error_code != EMAILS_ERROR_NONE)\r
dlog_print(DLOG_INFO, LOG_TAG, "Failed to create email message\n");\r
</pre>\r
-<p>The function return code defines whether the message creation succeeded. The <span style="font-family: Courier New,Courier,monospace;">EMAIL_ERROR_ACCOUNT_NOT_FOUND</span> error is not related to the email service as such; it occurs if no email account has been configured on the device.</p></li>\r
+<p>The function return code defines whether the message creation succeeded. The <code>EMAIL_ERROR_ACCOUNT_NOT_FOUND</code> error is not related to the email service as such; it occurs if no email account has been configured on the device.</p></li>\r
\r
<li>Manage recipients and attachments:\r
<ol>\r
</pre></li>\r
\r
<li>Define and register the email sending status callback.\r
-<p>Email sending is an asynchronous operation, and thus the sending status cannot be checked directly in the return code from the <span style="font-family: Courier New,Courier,monospace;">email_send_message()</span> function. To receive notifications about sending success or failure, use a callback function.</p>\r
+<p>Email sending is an asynchronous operation, and thus the sending status cannot be checked directly in the return code from the <code>email_send_message()</code> function. To receive notifications about sending success or failure, use a callback function.</p>\r
<pre class="prettyprint">\r
static void\r
email_send_status(email_h email, email_sending_e result, void *user_data)\r
</pre>\r
</li>\r
<li>\r
-<p>When the message is sent or if sending is canceled and the message no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace;">email_destroy_message()</span> function. The registered email sending status callback must also be unset using the <span style="font-family: Courier New,Courier,monospace;">email_unset_message_sent_cb()</span> function.</p>\r
+<p>When the message is sent or if sending is canceled and the message no longer needed, delete it using the <code>email_destroy_message()</code> function. The registered email sending status callback must also be unset using the <code>email_unset_message_sent_cb()</code> function.</p>\r
<pre class="prettyprint">\r
error_code = email_unset_message_sent_cb(msg);\r
if (error_code != EMAILS_ERROR_NONE)\r
<p>To enable your application to use the messages functionality:</p>\r
<ol>\r
<li>\r
-<p>To use the Messages API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>\r
+<p>To use the Messages API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>\r
<pre class="prettyprint">\r
<privileges>\r
<privilege>http://tizen.org/privilege/message.read</privilege>\r
</privileges>\r
</pre>\r
</li>\r
-<li><p>To use the functions and data types of the Messages API, include the <span style="font-family: Courier New,Courier,monospace"><messages.h></span> header file in your application:</p>\r
+<li><p>To use the functions and data types of the Messages API, include the <code><messages.h></code> header file in your application:</p>\r
<pre class="prettyprint">\r
#include <messages.h>\r
</pre></li>\r
<li><p>The Messages service works like a client-service architecture. In this architecture, a Tizen application is the client side and has to connect to the service before using the Messages API.</p>\r
-<p>Establish a connection using the <span style="font-family: Courier New,Courier,monospace;">messages_open_service()</span> function:</p>\r
+<p>Establish a connection using the <code>messages_open_service()</code> function:</p>\r
\r
<pre class="prettyprint">\r
static messages_service_h service_handle = NULL;\r
/* Error handling */\r
</pre></li>\r
\r
-<li><p>When a connection with the Messages service is no longer needed (or the application is exiting), call the <span style="font-family: Courier New,Courier,monospace;">messages_close_service()</span> function for proper connection closing:</p>\r
+<li><p>When a connection with the Messages service is no longer needed (or the application is exiting), call the <code>messages_close_service()</code> function for proper connection closing:</p>\r
\r
<pre class="prettyprint">\r
messages_close_service(service_handle);\r
\r
<h2 id="fetching" name="fetching">Fetching Messages from a Specified Message Box</h2>\r
\r
-<p>To fetch messages from a message box, use the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.</p>\r
+<p>To fetch messages from a message box, use the <code>messages_foreach_message()</code> function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.</p>\r
\r
<p>To fetch messages:</p>\r
\r
\r
\r
<li>Perform the search.\r
-<p>Call the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function to retrieve all existing messages stored in different mailboxes. With the function parameters, you can limit the search results to a subset of all available messages based on:</p>\r
+<p>Call the <code>messages_foreach_message()</code> function to retrieve all existing messages stored in different mailboxes. With the function parameters, you can limit the search results to a subset of all available messages based on:</p>\r
<ul><li>Message box type (inbox, outbox, sent items, drafts, or all of them)</li>\r
<li>Message type (such as SMS or MMS)</li>\r
<li>Keyword (for search based on text and subject)</li>\r
<li>Address (message recipient address)</li></ul>\r
\r
-<p>The following example shows a simple search for all SMS messages in all message boxes with a callback function named <span style="font-family: Courier New,Courier,monospace;">message_search_callback()</span>.</p>\r
+<p>The following example shows a simple search for all SMS messages in all message boxes with a callback function named <code>message_search_callback()</code>.</p>\r
<pre class="prettyprint">\r
int error_code;\r
error_code = messages_open_service(&service_handle);\r
<p>The Messaging API supports SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files).</p>\r
<p>To send a message:</p>\r
<ol><li>Create a message.\r
-<p>To create an SMS or an MMS message, use the <span style="font-family: Courier New,Courier,monospace;">messages_create_message()</span> function. Specify the message type (<span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_SMS</span> or <span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_MMS</span>) when creating the message. The following example creates an SMS message.</p>\r
+<p>To create an SMS or an MMS message, use the <code>messages_create_message()</code> function. Specify the message type (<code>MESSAGES_TYPE_SMS</code> or <code>MESSAGES_TYPE_MMS</code>) when creating the message. The following example creates an SMS message.</p>\r
<pre class="prettyprint">\r
int error_code;\r
messages_message_h msg_hndl = NULL;\r
dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to set message text");\r
</pre></li>\r
\r
-<li>Set a subject and add an attachment for an MMS message (note that MMS sending is not supported on the Emulator).\r
+<li>Set a subject and add an attachment for an MMS message (note that MMS sending is not supported on the emulator).\r
<ul><li><p>Set a message subject:</p>\r
<pre class="prettyprint">\r
error_code = messages_mms_set_subject(msg_hndl, "MMS test");\r
\r
<li>Send the message.\r
<ol type="a">\r
-<li><p>Define a callback for the <span style="font-family: Courier New,Courier,monospace;">messages_send_message()</span> function. You can use the callback to let the messaging service inform you about the message sending status. Use the first parameter to determine whether the sending succeeded:</p>\r
+<li><p>Define a callback for the <code>messages_send_message()</code> function. You can use the callback to let the messaging service inform you about the message sending status. Use the first parameter to determine whether the sending succeeded:</p>\r
<pre class="prettyprint">\r
static void\r
sent_msg_cb(messages_sending_result_e result, void *user_data)\r
dlog_print(DLOG_DEBUG, LOG_TAG, "Message sending failed");\r
}\r
</pre></li>\r
-<li><p>If the connection to the messaging service is open (you have the <span style="font-family: Courier New,Courier,monospace;">service_handle</span> handle) and the message itself (<span style="font-family: Courier New,Courier,monospace;">msg_hndl</span>) is successfully created, send the message using the <span style="font-family: Courier New,Courier,monospace;">messages_send_message()</span> function:</p>\r
+<li><p>If the connection to the messaging service is open (you have the <code>service_handle</code> handle) and the message itself (<code>msg_hndl</code>) is successfully created, send the message using the <code>messages_send_message()</code> function:</p>\r
<pre class="prettyprint">\r
error_code = messages_send_message(service_handle, msg_hndl, true,\r
sent_msg_cb, NULL);\r
<p>You can use the following messaging features in your native applications:</p>
<ul>
-<li><a href="email_n.htm">Email</a> <strong>in mobile applications only</strong>
+<li><a href="email_n.htm">Email</a>
<p>You can enable the user to create and send email messages, as long as the user's email account has been correctly configured in the device. You can use attachments in the messages, and monitor the sending status of the messages.</p></li>
<p>Push enables you to push events from an application server to your application on a Tizen device.</p>
<p>Once your application is successfully registered in the push server through the <a href="#service">push service</a> (daemon) on the device, your application server can send push messages to the application in that particular device.</p>
- <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the push service makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <
span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the push service forcibly launches the application and hands over the message to the application as an <a href="../app_management/app_controls_n.htm">application control</a>.</p>
-<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>, including the <a href="#request_form">necessary information</a>. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
+ <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the push service makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <
code>LAUNCH</code> option. In this case, the push service forcibly launches the application and hands over the message to the application as an <a href="../app_management/app_controls_n.htm">application control</a>.</p>
+<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>, including the <a href="#permission">necessary information</a>. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
<p>The main features of the Push API include:</p>
<ul>
<li>Connecting to the push service
<p>You can <a href="#receive_push">receive notifications</a> in the application at different application states.</p></li>
</ul>
- <p class="figure">Figure: Push messaging service</p>
+ <p align="center"><strong>Figure: Push messaging service</strong></p>
<p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p>
<h2 id="service" name="service">Service Architecture</h2>
<p>The following figure illustrates the service architecture of the Tizen push messaging service.</p>
- <p class="figure">Figure: Service architecture</p>
+ <p align="center"><strong>Figure: Service architecture</strong></p>
<p align="center"><img alt="Service architecture" src="../../images/push_overview.png" /></p>
<p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p>
<ol>
<p>To enable your application to use the push functionality:</p>
<ol>
<li>
-<p>To use the Push API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Push API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/push</privilege>
<li>Package ID
<p>When you create a project in the Tizen Studio, you are given the package ID (randomly generated by the Tizen Studio or entered by yourself). The Tizen push server identifies your applications using the package ID.</p></li>
<li id="permission" name="permission">Permission to Tizen push servers
-<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
-<p>By sending the request, you agree to the <a href="https://www.tizen.org/about/terms-service" target="_blank">Terms of Service</a> and <a href="https://www.tizen.org/about/privacy-policy" target="_blank">Privacy Policy</a>. The TPS (transactions per second) in the push messaging service is fixed as 150.</p>
-<p>To request the permission for a new application, include the following information in your email.</p>
-
-<table id="request_form">
-<caption>Table: Request form details for a new application</caption>
-<tbody>
- <tr>
- <th colspan="2">Developer information</th>
- </tr>
- <tr>
- <td>Email address</td>
- <td>Your email address to receive the approval response</td>
- </tr>
- <tr>
- <td>Last name</td>
- <td>Your last name</td>
- </tr>
- <tr>
- <td>First name</td>
- <td>Your first name</td>
- </tr>
- <tr>
- <td>Country</td>
- <td>Your country of residence</td>
- </tr>
- <tr>
- <th colspan="2">Application information</th>
- </tr>
- <tr>
- <td>Package ID</td>
- <td>ID of the application package that uses the push messaging service. The package ID can be obtained from the application manifest file in the Tizen Studio.</td>
- </tr>
- <tr>
- <td>Application name</td>
- <td>Name of the application that uses the push service</td>
- </tr>
- <tr>
- <td>Application type</td>
- <td>Tizen native application or Tizen Web application</td>
- </tr>
- <tr>
- <td>Testing purpose</td>
- <td>Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks.</td>
- </tr>
- <tr>
- <td>Purpose of the push notification usage</td>
- <td>Description of how you plan to use the push service, including the situations in which you want to use it</td>
- </tr>
- <tr>
- <td>Application launch date</td>
- <td>Application launch date in the YYYY/MM/DD format, for example: 2014/08/01</td>
- </tr>
- <tr>
- <td>Service area/country</td>
- <td>Service area or the country where the application is used. You can use <strong>Global</strong>, or specify a more limited area (<strong>Africa</strong>, <strong>America</strong>, <strong>Asia</strong>, <strong>Europe</strong>, <strong>Oceania</strong>), or a specific country.</td>
- </tr>
- <tr>
- <td>Daily push requests</td>
- <td>Estimated number of daily notifications</td>
- </tr>
- <tr>
- <td>Push notification payload size</td>
- <td>1 or 2 kb</td>
- </tr>
-</tbody>
-</table>
-
-<p>To extend the expiration date or change the quota for an application that already has the permission to use the push messaging service, include the following information in your email.</p>
-<table id="request_form_extend">
-<caption>Table: Request form details to modify the access permissions of an application</caption>
-<tbody>
- <tr>
- <th colspan="2">Application information for extending the expiration date</th>
- </tr>
- <tr>
- <td>Push app ID</td>
- <td>Push app ID you received when you originally requested permission for a new application</td>
- </tr>
- <tr>
- <td>Expiration date</td>
- <td>Application launch date in the YYYY/MM/DD format, for example: 2017/08/01</td>
- </tr>
- <tr>
- <th colspan="2">Application information for changing the quota</th>
- </tr>
- <tr>
- <td>Push app ID</td>
- <td>Push app ID you received when you originally requested permission for a new application</td>
- </tr>
- <tr>
- <td>Daily push requests</td>
- <td>Estimated number of daily notifications</td>
- </tr>
-</tbody>
-</table>
+<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team:</p>
+<ul>
+<li>
+<p><a href="https://developer.tizen.org/webform/request-push-permission-new-application" target="_blank">Request the permission for a new application</a></p>
+</li>
+<li>
+<p><a href="https://developer.tizen.org/webform/request-extend-expiration-date-or-change-quota" target="_blank">Extend the expiration date or change the quota</a> for an application that already has the permission to use the push messaging service</p>
+</li>
+</ul>
+<p>When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
</li>
</ol>
</li>
-<li><p>To use the functions and data types of the Push API, include the <span style="font-family: Courier New,Courier,monospace;"><push-service.h></span> header file to your application:</p>
+<li><p>To use the functions and data types of the Push API, include the <code><push-service.h></code> header file to your application:</p>
<pre class="prettyprint">
#include <push-service.h>
</pre>
</li>
</ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Since Tizen 3.0, the push service supports launching an application in the background. Remember that you can deliver application data to your application without an unwanted UI launch.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Since Tizen 3.0, the push service supports launching an application in the background. Remember that you can deliver application data to your application without an unwanted UI launch.
+ </div>
<h2 id="connect" name="connect">Connecting to the Push Service</h2>
<p>To manage push service connections:</p>
<ol>
<li>Connect to the push service.
-<p>Once the connection handle is defined, use the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function to connect to the push service:</p>
+<p>Once the connection handle is defined, use the <code>push_service_connect()</code> function to connect to the push service:</p>
<pre class="prettyprint">
#define PUSH_APP_ID "YOUR_PUSH_ID_HERE"
<p>In the above example, the application establishes a socket connection to the push service:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace;">YOUR_PUSH_ID_HERE</span> parameter is the push app ID received from the Tizen push server team when the access to the server was requested. Keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</li>
-<li>The <
span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> parameters are callback functions called when the <a href="#state">state changes</a> or <a href="#receive_push">a notification arrives from the server</a> through the push service.</li>
-<li>The <
span style="font-family: Courier New,Courier,monospace;">push_conn</span> parameter is the output of the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. If the connection between the application and the service is successful, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> and the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle is returned through the last parameter. If the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns other values, the connection to the service failed. This happens most likely when the <a href="#prerequisites">push privilege</a> is not added in the Tizen Studio.</li>
+<li>The <code>YOUR_PUSH_ID_HERE</code> parameter is the push app ID received from the Tizen push server team when the access to the server was requested. Keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</li>
+<li>The <
code>_state_cb()</code> and <code>_noti_cb()</code> parameters are callback functions called when the <a href="#state">state changes</a> or <a href="#receive_push">a notification arrives from the server</a> through the push service.</li>
+<li>The <
code>push_conn</code> parameter is the output of the <code>push_service_connect()</code> function. If the connection between the application and the service is successful, the <code>push_service_connect()</code> function returns <code>PUSH_SERVICE_ERROR_NONE</code> and the <code>push_conn</code> connection handle is returned through the last parameter. If the <code>push_service_connect()</code> function returns other values, the connection to the service failed. This happens most likely when the <a href="#prerequisites">push privilege</a> is not added in the Tizen Studio.</li>
</ul>
-<p>This sample application establishes a connection to the service when it is launched and disconnects from the service when it terminates. Due to this, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function is located in the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function, which is called when the application is launched.
+<p>This sample application establishes a connection to the service when it is launched and disconnects from the service when it terminates. Due to this, the <code>push_service_connect()</code> function is located in the <code>app_create()</code> function, which is called when the application is launched.
</p>
-<p>The application can be resumed after being paused. To ensure that push notifications are handled fluently, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function must be located in the <span style="font-family: Courier New,Courier,monospace;">app_resume()</span> function:</p>
+<p>The application can be resumed after being paused. To ensure that push notifications are handled fluently, the <code>push_service_connect()</code> function must be located in the <code>app_resume()</code> function:</p>
<pre class="prettyprint">
static void
app_resume(void *data)
if (!push_conn) {
ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &push_conn);
if (ret != PUSH_SERVICE_ERROR_NONE){
- dlog_print(DLOG_ERROR, LOG_TAG, "ERROR : push_service_connect() failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR: push_service_connect() failed.");
push_conn = NULL;
return;
*/
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>
<li>Disconnect from the push service.
-<p>When the application terminates or no longer uses the push service, close the connection using the <span style="font-family: Courier New,Courier,monospace;">push_service_disconnect()</span> function.</p>
+<p>When the application terminates or no longer uses the push service, close the connection using the <code>push_service_disconnect()</code> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">push_service_disconnect()</span> function closes the existing connection associated with the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> handle and returns all the resources allocated for the connection.</p>
+<p>The <code>push_service_disconnect()</code> function closes the existing connection associated with the <code>push_conn</code> handle and returns all the resources allocated for the connection.</p>
<pre class="prettyprint">
static void
<p>The connection is automatically closed when the application terminates. Hence, if the application uses the push service while being launched, it does not need this function.</p>
<p>The application can also disconnect the service in the middle of the application operation. If you add a toggle switch to the application for switching the push service on and off, call this function when the service is switched off. Do not call this function inside any push callback functions, however, since it can cause the application to crash.</p>
-<p>The application can be paused by pressing the <strong>Home</strong> or <strong>Back</strong> key. For a proper push operation, the <span style="font-family: Courier New,Courier,monospace;">push_service_disconnect()</span> function must be located in the <span style="font-family: Courier New,Courier,monospace;">app_pause()</span> function.</p>
+<p>The application can be paused by pressing the <strong>Home</strong> or <strong>Back</strong> key. For a proper push operation, the <code>push_service_disconnect()</code> function must be located in the <code>app_pause()</code> function.</p>
<pre class="prettyprint">
static void
app_pause(void *data)
</li>
<li id="state" name="state">Handle state transitions.
-<p>After the connection to the service is made, the application is notified whenever the connection state changes. This notification is conducted through the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback, which is defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The following figure illustrates the possible states.</p>
+<p>After the connection to the service is made, the application is notified whenever the connection state changes. This notification is conducted through the <code>_state_cb()</code> callback, which is defined in the <code>push_service_connect()</code> function. The following figure illustrates the possible states.</p>
<p align="center"><img alt="State transitions" src="../../images/push_state_transitions.png" /></p>
-<p>Once launched, the application is in the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state. When the application establishes a connection to the service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function, the state becomes either <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> or <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>:</p>
-<ul><li>If the application is currently registered to the push server, the service forces it to transit from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state. In this case, the application can request deregistration from the push server using the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>.</li>
-<li>If the application is not currently registered to the push server, the state transits from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state. In this case, the application can request registration to the push server using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>.</li>
-<li>When an error occurs, the state transits to <span style="font-family: Courier New,Courier,monospace;">ERROR</span>.</li></ul>
+<p>Once launched, the application is in the <code>INITIAL</code> state. When the application establishes a connection to the service using the <code>push_service_connect()</code> function, the state becomes either <code>UNREGISTERED</code> or <code>REGISTERED</code>:</p>
+<ul><li>If the application is currently registered to the push server, the service forces it to transit from the <code>INITIAL</code> state to the <code>REGISTERED</code> state. In this case, the application can request deregistration from the push server using the <code>push_service_deregister()</code> function. If this request is approved by the push server, the state transits to <code>UNREGISTERED</code>.</li>
+<li>If the application is not currently registered to the push server, the state transits from the <code>INITIAL</code> state to the <code>UNREGISTERED</code> state. In this case, the application can request registration to the push server using the <code>push_service_register()</code> function. If this request is approved by the push server, the state transits to <code>REGISTERED</code>.</li>
+<li>When an error occurs, the state transits to <code>ERROR</code>.</li></ul>
-<p>When the current state transits, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> function is called and the new state is obtained from the first parameter. Determine the application actions based on the new state:</p>
+<p>When the current state transits, the <code>_state_cb()</code> function is called and the new state is obtained from the first parameter. Determine the application actions based on the new state:</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>In the above example, the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span>, <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span>, and <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> functions contain the actions for the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>, <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>, and <span style="font-family: Courier New,Courier,monospace;">ERROR</span> states, respectively. The application does not need to handle the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state, because it is maintained internally, and this callback function is never invoked in that state. The second parameter, <span style="font-family: Courier New,Courier,monospace;">err</span>, is the error message from the push service when the state becomes <span style="font-family: Courier New,Courier,monospace;">ERROR</span>. Consequently, only the <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> function takes this parameter.</p>
+<p>In the above example, the <code>_on_state_registered()</code>, <code>_on_state_unregistered()</code>, and <code>_on_state_error()</code> functions contain the actions for the <code>REGISTERED</code>, <code>UNREGISTERED</code>, and <code>ERROR</code> states, respectively. The application does not need to handle the <code>INITIAL</code> state, because it is maintained internally, and this callback function is never invoked in that state. The second parameter, <code>err</code>, is the error message from the push service when the state becomes <code>ERROR</code>. Consequently, only the <code>_on_state_error()</code> function takes this parameter.</p>
<p>The registration state is subject to change. Consequently, make sure that the application connects to the push service whenever it is launched.</p>
</li>
</ol>
<p>To register with the push server:</p>
<ol>
<li>Request registration.
-<p>After connecting to the push service, request registration using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function.</p>
-<p>The first parameter is the connection handle that was returned from the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function, and the second parameter is the callback function that returns the result of the registration request.</p>
+<p>After connecting to the push service, request registration using the <code>push_service_register()</code> function.</p>
+<p>The first parameter is the connection handle that was returned from the <code>push_service_connect()</code> function, and the second parameter is the callback function that returns the result of the registration request.</p>
<pre class="prettyprint">
#define PUSH_HASH_KEY "existing_push_reg_id"
/* 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);
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span> function containing the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function is called when the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>. This sample application is designed to send the registration request as soon as it is connected to the push service. If the application requires users to login to the service, this registration request must be sent after the login process is complete.</p>
+<p>The <code>_on_state_unregistered()</code> function containing the <code>push_service_register()</code> function is called when the state transits to <code>UNREGISTERED</code>. This sample application is designed to send the registration request as soon as it is connected to the push service. If the application requires users to login to the service, this registration request must be sent after the login process is complete.</p>
-<p>The registration request is non-blocking. If the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span>, the request is successfully delivered to the push service. However, it does not necessarily mean that the request is approved by the server. If the push service successfully sends the request to the server and receives an approval, the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> callback is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_RESULT_SUCCESS</span> as the first parameter:</p>
+<p>The registration request is non-blocking. If the <code>push_service_register()</code> function returns <code>PUSH_SERVICE_ERROR_NONE</code>, the request is successfully delivered to the push service. However, it does not necessarily mean that the request is approved by the server. If the push service successfully sends the request to the server and receives an approval, the <code>_result_cb()</code> callback is called with <code>PUSH_SERVICE_RESULT_SUCCESS</code> as the first parameter:</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>When an error occurs in the middle of the registration process, the reason is returned in the first parameter of the callback. For example, if the push server is not responding, the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> (because delivery to the service is successful), but the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> function is called later with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_RESULT_TIMEOUT</span>. In this case, the application does not need to request registration again because the push service keeps the previous request and sends it when the network becomes online. The <span style="font-family: Courier New,Courier,monospace;">msg</span> parameter is the error message from the push service if the request fails.</p>
+<p>When an error occurs in the middle of the registration process, the reason is returned in the first parameter of the callback. For example, if the push server is not responding, the <code>push_service_register()</code> function returns <code>PUSH_SERVICE_ERROR_NONE</code> (because delivery to the service is successful), but the <code>_result_cb()</code> function is called later with <code>PUSH_SERVICE_RESULT_TIMEOUT</code>. In this case, the application does not need to request registration again because the push service keeps the previous request and sends it when the network becomes online. The <code>msg</code> parameter is the error message from the push service if the request fails.</p>
</li>
-<li id="upon" name="upon">Handle the transit to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state.
-<p>The application transits to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state in one of the following cases:</p>
+<li id="upon" name="upon">Handle the transit to the <code>REGISTERED</code> state.
+<p>The application transits to the <code>REGISTERED</code> state in one of the following cases:</p>
<ul>
-<li>The registration request sent at the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state is approved.</li>
-<li>The already-registered application at the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state is successfully connected to the push service.</li>
+<li>The registration request sent at the <code>UNREGISTERED</code> state is approved.</li>
+<li>The already-registered application at the <code>INITIAL</code> state is successfully connected to the push service.</li>
</ul>
-<p>In both cases, the <
span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback function is called with the <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_STATE_REGISTERED</span> state. The application calls the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span> function immediately, <a href="#state">as shown in the state transitions</a>. When defining the actions inside the function, keep the following points in mind:</p>
+<p>In both cases, the <
code>_state_cb()</code> callback function is called with the <code>PUSH_SERVICE_STATE_REGISTERED</code> state. The application calls the <code>_on_state_registered()</code> function immediately, <a href="#state">as shown in the state transitions</a>. When defining the actions inside the function, keep the following points in mind:</p>
<ul>
<li>If the application has already been registered, request the push service for any unread notifications that have arrived before the application is launched.
-<p>Request the unread notifications asynchronously. If there is such a notification, it can be received through the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function after the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span> function returns. Once the request for unread notifications is successfully delivered, <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> is returned.</p></li>
+<p>Request the unread notifications asynchronously. If there is such a notification, it can be received through the <code>_noti_cb()</code> function after the <code>_on_state_registered()</code> function returns. Once the request for unread notifications is successfully delivered, <code>PUSH_SERVICE_ERROR_NONE</code> is returned.</p></li>
<li>If the application is newly registered, send the registration ID issued by the push server to your application server.
-<p>Retrieve the registration ID from the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle. If the ID is new or updated, you need to send it to your application server. This ID is used as a destination address to the application in a particular device. If the application has already sent the ID, you can skip this step. This logic is implemented in the <span style="font-family: Courier New,Courier,monospace;">_send_reg_id_if_necessary()</span> function.</p></li>
+<p>Retrieve the registration ID from the <code>push_conn</code> connection handle. If the ID is new or updated, you need to send it to your application server. This ID is used as a destination address to the application in a particular device. If the application has already sent the ID, you can skip this step. This logic is implemented in the <code>_send_reg_id_if_necessary()</code> function.</p></li>
</ul>
<pre class="prettyprint">
/* _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;
}
}
</pre>
-<p>Compute the hash value of the ID and compare it with the existing hash value in the <span style="font-family: Courier New,Courier,monospace;">_send_reg_id_if_necessary()</span> function:</p>
+<p>Compute the hash value of the ID and compare it with the existing hash value in the <code>_send_reg_id_if_necessary()</code> function:</p>
<ul><li>If they are different, send the current registration ID to your application server and store the new hash value. For security, it is not safe to keep the ID as a string because it can be easily exposed.</li>
<li>If they are the same, the application server already has this registration ID. In this case, the application exits this function.</li></ul>
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);
push_service_deregister(push_conn, _dereg_result_cb, NULL);
</pre>
-<p>This function is non-blocking. If it returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span>, the request is successfully received by the push service. The result of this request is returned in the <span style="font-family: Courier New,Courier,monospace;">_dereg_result_cb()</span> callback function.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function is not used, if the application is intended to receive push notifications continuously while it is installed on the device. When the application is uninstalled, the push service detects the event and deregisters the application automatically. <p>On the other hand, if the application wants to receive push notifications only when a user logs in, the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function must be called whenever a user logs out.</p></td>
- </tr>
- </tbody>
-</table>
+<p>This function is non-blocking. If it returns <code>PUSH_SERVICE_ERROR_NONE</code>, the request is successfully received by the push service. The result of this request is returned in the <code>_dereg_result_cb()</code> callback function.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The <code>push_service_deregister()</code> function is not used, if the application is intended to receive push notifications continuously while it is installed on the device. When the application is uninstalled, the push service detects the event and deregisters the application automatically.
+ <p>On the other hand, if the application wants to receive push notifications only when a user logs in, the <code>push_service_deregister()</code> function must be called whenever a user logs out.</p>
+ </div>
</li>
</ol>
<li>Use the message field to describe how to process the notification.
<p>The message field contains not only the message to show in the quick panel on the device, but also the behaviors that the device must take when receiving the notification. The message field is a string that consists of key-value pairs. The available pair options are given in the following table.</p>
+<p align="center" class="Table"><strong>Table: Message field key-value pairs</strong></p>
<table>
-<caption>Table: Message field key-value pairs</caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">action</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">ALERT</span>: Store the message and alert the user.
- <p><span style="font-family: Courier New,Courier,monospace;">SILENT</span>: Store the message without alerting the user.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">DISCARD</span>: Discard the message, if the application is not up and running.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">LAUNCH</span>: Forcibly launch the application and deliver the notification.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">BACKGROUNDLAUNCH</span>: Launch the application in the background and deliver the notification (supported since Tizen 3.0).</p></td>
- <td>Action to be performed if the application is not running. If no action is defined, the default behavior is <span style="font-family: Courier New,Courier,monospace;">SILENT</span>.</td>
+ <td><code>action</code></td>
+ <td><code>ALERT</code>: Store the message and alert the user.
+ <p><code>SILENT</code>: Store the message without alerting the user.</p>
+ <p><code>DISCARD</code>: Discard the message, if the application is not up and running.</p>
+ <p><code>LAUNCH</code>: Forcibly launch the application and deliver the notification.</p>
+ <p><code>BACKGROUNDLAUNCH</code>: Launch the application in the background and deliver the notification (supported since Tizen 3.0).</p></td>
+ <td>Action to be performed if the application is not running. If no action is defined, the default behavior is <code>SILENT</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">alertMessage</span></td>
+ <td><code>alertMessage</code></td>
<td>Up to 127 bytes</td>
- <td>Alert message shown to the user in the quick panel. If the action is not set as <span style="font-family: Courier New,Courier,monospace;">ALERT</span>, this value is meaningless.</td>
+ <td>Alert message shown to the user in the quick panel. If the action is not set as <code>ALERT</code>, this value is meaningless.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">badgeOption</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">INCREASE</span>: Increase the badge number by the given value.
- <p><span style="font-family: Courier New,Courier,monospace;">DECREASE</span>: Decrease the badge number by the given value.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">SET</span>: Set badge number to the given value.</p></td>
- <td>Option for updating the icon badge number. If the action is set as <span style="font-family: Courier New,Courier,monospace;">DISCARD</span>, the <span style="font-family: Courier New,Courier,monospace;">badgeOption</span> is ignored. If the badge option is not included, the icon badge number remains unchanged.</td>
+ <td><code>badgeOption</code></td>
+ <td><code>INCREASE</code>: Increase the badge number by the given value.
+ <p><code>DECREASE</code>: Decrease the badge number by the given value.</p>
+ <p><code>SET</code>: Set badge number to the given value.</p></td>
+ <td>Option for updating the icon badge number. If the action is set as <code>DISCARD</code>, the <code>badgeOption</code> is ignored. If the badge option is not included, the icon badge number remains unchanged.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">badgeNumber</span></td>
+ <td><code>badgeNumber</code></td>
<td>0-999</td>
<td>-</td>
</tr>
<pre class="prettyprint">
"action=LAUNCH"
</pre>
-<p>When the push service in the target device receives a notification with this message, it launches your application and delivers the notification through an <a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm">Application Controls</a>. Your application can get the notification using the <
span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_notification()</span> function. For more information, see how to <a href="#recv_noti_app_not_run">receive notifications when the application is not running</a>.</p>
+<p>When the push service in the target device receives a notification with this message, it launches your application and delivers the notification through an <a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm">Application Controls</a>. Your application can get the notification using the <
code>push_service_app_control_to_notification()</code> function. For more information, see how to <a href="#recv_noti_app_not_run">receive notifications when the application is not running</a>.</p>
<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the "Hi" message in the quick panel or increase the badge count.</p>
</li>
<ul>
<li id="receive" name="receive">Receive notifications when the application is running.
-<p>When a notification arrives to the application while it is running (precisely, the application is connected to the service), the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called as defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. In this callback, you can handle the received notification.</p>
-<p>The following example shows how the application can retrieve the app data (payload), message, and timestamp from the received notification. When the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> callback is called, obtain the notification through the first parameter. You can retrieve the app data, message, and time stamp from the handle using the <span style="font-family: Courier New,Courier,monospace;">push_service_get_notification_data()</span>, <span style="font-family: Courier New,Courier,monospace;">push_service_get_notification_message()</span>, and <span style="font-family: Courier New,Courier,monospace;">push_service_get_notification_time()</span> functions respectively. Before exiting the function, free the data, except for the notification itself. The notification is freed automatically right after the callback.</p>
+<p>When a notification arrives to the application while it is running (precisely, the application is connected to the service), the <code>_noti_cb()</code> function is called as defined in the <code>push_service_connect()</code> function. In this callback, you can handle the received notification.</p>
+<p>The following example shows how the application can retrieve the app data (payload), message, and timestamp from the received notification. When the <code>_noti_cb()</code> callback is called, obtain the notification through the first parameter. You can retrieve the app data, message, and time stamp from the handle using the <code>push_service_get_notification_data()</code>, <code>push_service_get_notification_message()</code>, and <code>push_service_get_notification_time()</code> functions respectively. Before exiting the function, free the data, except for the notification itself. The notification is freed automatically right after the callback.</p>
<pre class="prettyprint">
static void
<p>If the notification arrives when the application is not running, there are 3 ways to handle the notification:</p>
<ul>
<li id="force_launch">Forcibly launch the application and deliver the notification to it.
-<p>You need to set the action to <span style="font-family: Courier New,Courier,monospace;">LAUNCH</span> in the message field when sending the notification from the application server. When the notification action arrives at the device, the push service forcibly launches the application and delivers the notification as a bundle.</p>
-<p>When you create a project in the Tizen Studio, the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function is created automatically. When the application is launched by another application or process (in this case, by the push service), all related information regarding this launch request is delivered through the <span style="font-family: Courier New,Courier,monospace;">app_control</span> parameter. From this handle, retrieve the <span style="font-family: Courier New,Courier,monospace;">op</span> operation using the <span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span> function. With <span style="font-family: Courier New,Courier,monospace;">app_control</span> and <span style="font-family: Courier New,Courier,monospace;">op</span>, retrieve the notification data using the <span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_noti_data()</span> function. </p>
-<p>If the application is not launched by the push service, this function returns as <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<p>You need to set the action to <code>LAUNCH</code> in the message field when sending the notification from the application server. When the notification action arrives at the device, the push service forcibly launches the application and delivers the notification as a bundle.</p>
+<p>When you create a project in the Tizen Studio, the <code>app_control()</code> function is created automatically. When the application is launched by another application or process (in this case, by the push service), all related information regarding this launch request is delivered through the <code>app_control</code> parameter. From this handle, retrieve the <code>op</code> operation using the <code>app_control_get_operation()</code> function. With <code>app_control</code> and <code>op</code>, retrieve the notification data using the <code>push_service_app_control_to_noti_data()</code> function. </p>
+<p>If the application is not launched by the push service, this function returns as <code>NULL</code>.</p>
<pre class="prettyprint">
static void
}
</pre>
-<p>Since Tizen 3.0, the push service provides launch types when the application is launched by the service. Use the following code to figure out why the application is launched, as the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function is invoked in both cases of receiving notification and changing registration state.</p>
+<p>Since Tizen 3.0, the push service provides launch types when the application is launched by the service. Use the following code to figure out why the application is launched, as the <code>app_control()</code> function is invoked in both cases of receiving notification and changing registration state.</p>
<pre class="prettyprint">
#define EXTRA_DATA_FROM_REGISTRATION_CHANGE "registration_change"
#define EXTRA_DATA_FROM_NOTIFICATION "notification"
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 */
</li>
<li>Store the notification at the push service database and request it later when the application is launched.
-<p>You need to set the action to <span style="font-family: Courier New,Courier,monospace;">ALERT</span> or <span style="font-family: Courier New,Courier,monospace;">SILENT</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application.</p>
+<p>You need to set the action to <code>ALERT</code> or <code>SILENT</code> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application.</p>
<p>You can request for unread notifications from the push service. The request can be performed after the connection to the push server when the application is launched.</p>
<pre class="prettyprint">
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 <
span style="font-family: Courier New,Courier,monospace;">ALERT</span> and <span style="font-family: Courier New,Courier,monospace;">SILENT</span> 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>
+<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>
<li>Discard it.
-<p>You need to set the action to <span style="font-family: Courier New,Courier,monospace;">DISCARD</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service delivers the notification only when the application is up and running. Otherwise, the push service does not store the notification and discards it.</p></li>
+<p>You need to set the action to <code>DISCARD</code> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service delivers the notification only when the application is up and running. Otherwise, the push service does not store the notification and discards it.</p></li>
</ul>
</li>
<li>Request unread notifications.
-<p>If the user does not launch the application from the quick panel, the application requests the unread notifications after start-up using the <a href="#upon">asynchronous <span style="font-family: Courier New,Courier,monospace;">push_service_request_unread_notification()</span> function</a>.</p>
-<p>The following example shows a synchronous request using the <span style="font-family: Courier New,Courier,monospace;">push_service_get_unread_notification()</span> function:</p>
+<p>If the user does not launch the application from the quick panel, the application requests the unread notifications after start-up using the <a href="#upon">asynchronous <code>push_service_request_unread_notification()</code> function</a>.</p>
+<p>The following example shows a synchronous request using the <code>push_service_get_unread_notification()</code> function:</p>
<pre class="prettyprint">
push_service_notification_h noti;
</pre>
<p>Call this function repeatedly until no notification is returned. If there are multiple unread notifications, the notifications are retrieved in their arrival order.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">push_service_get_unread_notification()</span> function blocks the code while it receives a notification from the service. Unless you need this kind of synchronous behavior, use the asynchronous function.</p>
+<p>The <code>push_service_get_unread_notification()</code> function blocks the code while it receives a notification from the service. Unless you need this kind of synchronous behavior, use the asynchronous function.</p>
</li>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<li>Determine the RQM server.
<p>The request manager (RQM) servers collect your push notifications before sending them to the applications. The RQM server must be chosen based on the first 2 digits of the registration ID.</p>
+<p align="center" class="Table"><strong>Table: Push RQM server URLs</strong></p>
<table>
-<caption>Table: Push RQM server URLs</caption>
<tbody>
<tr>
- <th>Prefix of the <span style="font-family: Courier New,Courier,monospace;">regId</span></th>
+ <th>Prefix of the <code>regId</code></th>
<th>Region</th>
<th>URL</th>
</tr>
<tr>
<td>00</td>
<td>US East</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://useast.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://useast.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>02</td>
<td>Asia Pacific Southeast</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apsoutheast.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apsoutheast.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>03</td>
<td>EU West</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://euwest.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://euwest.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>04</td>
<td>Asia Pacific Northeast</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apnortheast.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apnortheast.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>05</td>
<td>Korea</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apkorea.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apkorea.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>06</td>
<td>China</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apchina.push.samsungosp.com.cn:8090/spp/pns/api/push</span></td>
+ <td><code>https://apchina.push.samsungosp.com.cn:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>50</td>
<td>US East</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://useast.gateway.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://useast.gateway.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>52</td>
<td>Asia Pacific Southeast</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apsoutheast.gateway.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apsoutheast.gateway.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>53</td>
<td>EU West</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://euwest.gateway.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://euwest.gateway.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>54</td>
<td>Asia Pacific Northeast</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apnortheast.gateway.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apnortheast.gateway.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>55</td>
<td>Korea</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apkorea.gateway.push.samsungosp.com:8090/spp/pns/api/push</span></td>
+ <td><code>https://apkorea.gateway.push.samsungosp.com:8090/spp/pns/api/push</code></td>
</tr>
<tr>
<td>56</td>
<td>China</td>
- <td><span style="font-family: Courier New,Courier,monospace;">https://apchina.gateway.push.samsungosp.com.cn:8090/spp/pns/api/push</span></td>
+ <td><code>https://apchina.gateway.push.samsungosp.com.cn:8090/spp/pns/api/push</code></td>
</tr>
</tbody>
</table>
-<p>For example, if the registration ID of the application that you want to send a notification to begins with 04, the URL of the RQM server must be <span style="font-family: Courier New,Courier,monospace;">https://apnortheast.push.samsungosp.com:8090/spp/pns/api/push</span>.</p>
+<p>For example, if the registration ID of the application that you want to send a notification to begins with 04, the URL of the RQM server must be <code>https://apnortheast.push.samsungosp.com:8090/spp/pns/api/push</code>.</p>
</li>
<li>Determine the type of push notification.
<li>Create the notification message.
<p>A message is one of the fields that constitute a notification. The message field contains not only the message to show in the quick panel on the device, but also the behaviors that the device must take when receiving the notification. The message field is a string that consists of key-value pairs. The available pair options are given in the following table.</p>
+<p align="center" class="Table"><strong>Table: Message field key-value pairs</strong></p>
<table>
-<caption>Table: Message field key-value pairs</caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">action</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">ALERT</span>: Store the message and alert the user.
- <p><span style="font-family: Courier New,Courier,monospace;">SILENT</span>: Store the message without alerting the user.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">DISCARD</span>: Discard the message, if the application is not up and running.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">LAUNCH</span>: Forcibly launch the application and deliver the notification.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">BACKGROUNDLAUNCH</span>: Launch the application in the background and deliver the notification (supported since Tizen 3.0).</p></td>
- <td>Action to be performed if the application is not running. If no action is defined, the default behavior is <span style="font-family: Courier New,Courier,monospace;">SILENT</span>.</td>
+<td><code>action</code></td>
+ <td><code>ALERT</code>: Store the message and alert the user.
+ <p><code>SILENT</code>: Store the message without alerting the user.</p>
+ <p><code>DISCARD</code>: Discard the message, if the application is not up and running.</p>
+ <p><code>LAUNCH</code>: Forcibly launch the application and deliver the notification.</p>
+ <p><code>BACKGROUNDLAUNCH</code>: Launch the application in the background and deliver the notification (supported since Tizen 3.0).</p></td>
+ <td>Action to be performed if the application is not running. If no action is defined, the default behavior is <code>SILENT</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">alertMessage</span></td>
+ <td><code>alertMessage</code></td>
<td>Up to 127 bytes</td>
- <td>Alert message shown to the user in the quick panel. If the action is not set as <span style="font-family: Courier New,Courier,monospace;">ALERT</span>, this value is meaningless.</td>
+ <td>Alert message shown to the user in the quick panel. If the action is not set as <code>ALERT</code>, this value is meaningless.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">badgeOption</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">INCREASE</span>: Increase the badge number by the given value.
- <p><span style="font-family: Courier New,Courier,monospace;">DECREASE</span>: Decrease the badge number by the given value.</p>
- <p><span style="font-family: Courier New,Courier,monospace;">SET</span>: Set badge number to the given value.</p></td>
- <td>Option for updating the icon badge number. If the action is set as <span style="font-family: Courier New,Courier,monospace;">DISCARD</span>, the <span style="font-family: Courier New,Courier,monospace;">badgeOption</span> is ignored. If the badge option is not included, the icon badge number remains unchanged.</td>
+ <td><code>badgeOption</code></td>
+ <td><code>INCREASE</code>: Increase the badge number by the given value.
+ <p><code>DECREASE</code>: Decrease the badge number by the given value.</p>
+ <p><code>SET</code>: Set badge number to the given value.</p></td>
+ <td>Option for updating the icon badge number. If the action is set as <code>DISCARD</code>, the <code>badgeOption</code> is ignored. If the badge option is not included, the icon badge number remains unchanged.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">badgeNumber</span></td>
+ <td><code>badgeNumber</code></td>
<td>0-999</td>
<td>-</td>
</tr>
<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the "Hi" message in the quick panel or increase the badge count.</p>
-<p>Since Tizen 3.0, the <span style="font-family: Courier New,Courier,monospace;">BACKGROUNDLAUNCH</span> option is supported. When you send a notification to the device with the <span style="font-family: Courier New,Courier,monospace;">BACKGROUNDLAUNCH</span> action value, the push service launches the application in the background (if it is not already running), and delivers the appData field to the application. The user cannot see that a notification is received, but they find out when they use the application the next time.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In case of the <span style="font-family: Courier New,Courier,monospace;">BACKGROUNDLAUNCH</span> notification, the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> and <span style="font-family: Courier New,Courier,monospace;">app_control()</span> life-cycle callbacks are called, but the <span style="font-family: Courier New,Courier,monospace;">app_resume()</span> callback is not called. However, the next time the user runs the application, the <span style="font-family: Courier New,Courier,monospace;">app_resume()</span> callback is invoked normally. For more information on the life-cycle, see the <a href="../../../../org.tizen.guides/html/native/app_management/applications_n.htm">Applications</a> guide.</td>
- </tr>
- </tbody>
-</table>
+<p>Since Tizen 3.0, the <code>BACKGROUNDLAUNCH</code> option is supported. When you send a notification to the device with the <code>BACKGROUNDLAUNCH</code> action value, the push service launches the application in the background (if it is not already running), and delivers the appData field to the application. The user cannot see that a notification is received, but they find out when they use the application the next time.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ In case of the <code>BACKGROUNDLAUNCH</code> notification, the <code>app_create()</code> and <code>app_control()</code> life-cycle callbacks are called, but the <code>app_resume()</code> callback is not called. However, the next time the user runs the application, the <code>app_resume()</code> callback is invoked normally. For more information on the life-cycle, see the <a href="../../../../org.tizen.guides/html/native/app_management/applications_n.htm">Applications</a> guide.
+ </div>
</li>
<li>Use the Rest APIs for sending push notifications.
<li>Note: The total request message body must be less than the system default value, 200 kb. If not, "3034 – error of too long chuned message data" is returned. The system default value can be changed as needed.</li>
<li>Header
-<p>There are 2 required fields: <span style="font-family: Courier New,Courier,monospace;">appID</span> and <span style="font-family: Courier New,Courier,monospace;">appSecret</span>.</p>
+<p>There are 2 required fields: <code>appID</code> and <code>appSecret</code>.</p>
<p>The fields are given when you register the application, and they are used for application authentication. If either is missing, the push server rejects the request and returns "3046 – error of application authentication" error. Put these 2 parameters on the request header.</p>
</li>
<li>Arguments
+<p align="center" class="Table"><strong>Table: Arguments</strong></p>
<table>
-<caption>Table: Arguments</caption>
<tbody>
<tr>
<th>Key</th>
<th>Additional information</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">encoding</span></td>
- <td>Encoding defines how the <span style="font-family: Courier New,Courier,monospace;">regId</span> is encoded.
-<p>For most cases, the push server issues the <span style="font-family: Courier New,Courier,monospace;">regId</span> as a hex string by default, but if third-party providers state that they use the base64 encoding for the <span style="font-family: Courier New,Courier,monospace;">regId</span> at the application registration time, the <span style="font-family: Courier New,Courier,monospace;">regId</span> is base64-encoded.</p>
-<p>If the <span style="font-family: Courier New,Courier,monospace;">regId</span> is base64-encoded, use the <span style="font-family: Courier New,Courier,monospace;">"base64"</span> value for this field. Otherwise, leave this field blank to allow the push server to handle the <span style="font-family: Courier New,Courier,monospace;">regId</span> as a hex string.</p></td>
+ <td><code>encoding</code></td>
+ <td>Encoding defines how the <code>regId</code> is encoded.
+<p>For most cases, the push server issues the <code>regId</code> as a hex string by default, but if third-party providers state that they use the base64 encoding for the <code>regId</code> at the application registration time, the <code>regId</code> is base64-encoded.</p>
+<p>If the <code>regId</code> is base64-encoded, use the <code>"base64"</code> value for this field. Otherwise, leave this field blank to allow the push server to handle the <code>regId</code> as a hex string.</p></td>
<td><ul><li>Optional</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul></td>
+ <li>Default: <code>NULL</code></li></ul></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">regID</span></td>
+ <td><code>regID</code></td>
<td>Distinguish a recipient from other recipients by assigning a unique registration ID to each recipient. <p>The registration ID is assigned when the application is installed in a device and marked to use an application service.</p>
<p>The current registration ID passing policy is as follows (it can change in the future):</p>
<ol type="a">
<li>Type: string</li></ul></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">requestID</span></td>
+ <td><code>requestID</code></td>
<td>An application server needs to assign a request ID to each request. It enables you to distinguish one request from the others.</td>
<td><ul><li>Required</li>
<li>Type: string</li></ul></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">sender</span></td>
+ <td><code>sender</code></td>
<td>Information of the user who sends the notification.</td>
<td>
<ul><li>Optional</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul></td>
+ <li>Default: <code>NULL</code></li></ul></td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace;">action</span><p>(since Tizen 3.0)</p></td>
- <td>This message is delivered along with another urgent message, when the action value is <span style="font-family: Courier New,Courier,monospace;">"backgroundLaunch"</span> and message field is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</td>
+ <td><
code>action</code><p>(since Tizen 3.0)</p></td>
+ <td>This message is delivered along with another urgent message, when the action value is <code>"backgroundLaunch"</code> and message field is <code>NULL</code>.</td>
<td>
<ul><li>Optional</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul>
+ <li>Default: <code>NULL</code></li></ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">message</span></td>
+ <td><code>message</code></td>
<td>The message the sender wants to deliver. It can be a multibyte character.
<p>The message goes from an application server through the push server and push service to the application, which can handle the message.</p>
- <p>Maximum message length must be less than 2 kb. Make sure that if there is no message and <span style="font-family: Courier New,Courier,monospace;">appData</span>, the push server rejects the message and returns an error.</p></td>
+ <p>Maximum message length must be less than 2 kb. Make sure that if there is no message and <code>appData</code>, the push server rejects the message and returns an error.</p></td>
<td>
<ul><li>Conditionally mandatory
-(if <span style="font-family: Courier New,Courier,monospace;">appData</span> is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, this field is required)</li>
+(if <code>appData</code> is <code>NULL</code>, this field is required)</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul>
+ <li>Default: <code>NULL</code></li></ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">appData</span></td>
- <td>Applications can use this field to carry their own data. The handling of this data depends on the type defined with the <span style="font-family: Courier New,Courier,monospace;">type</span> key.
- <p>Make sure that if there is no message and no <span style="font-family: Courier New,Courier,monospace;">appData</span>, the push server rejects the message and returns an error.</p></td>
+ <td><code>appData</code></td>
+ <td>Applications can use this field to carry their own data. The handling of this data depends on the type defined with the <code>type</code> key.
+ <p>Make sure that if there is no message and no <code>appData</code>, the push server rejects the message and returns an error.</p></td>
<td>
- <ul><li>Conditionally mandatory (if message is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, this field is required)</li>
+ <ul><li>Conditionally mandatory (if message is <code>NULL</code>, this field is required)</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul>
+ <li>Default: <code>NULL</code></li></ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">reliableOption</span></td>
- <td>The push server guarantees reliable message delivery if the <span style="font-family: Courier New,Courier,monospace;">reliableOption</span> is set. The possible options are:
+ <td><code>reliableOption</code></td>
+ <td>The push server guarantees reliable message delivery if the <code>reliableOption</code> is set. The possible options are:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">NoReliable</span>: Do not send any acknowledgment back to an application server and do not store the notification in the push server if the push service did not receive the notification.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">Transport</span>: Send an acknowledgment back to the application server when the push service receives the notification.</li>
+ <li><code>NoReliable</code>: Do not send any acknowledgment back to an application server and do not store the notification in the push server if the push service did not receive the notification.</li>
+ <li><code>Transport</code>: Send an acknowledgment back to the application server when the push service receives the notification.</li>
</ul>
- <p>This is an optional field, and if it does not exist, the server applies its default value (<span style="font-family: Courier New,Courier,monospace;">Transport</span>). An acknowledgment at this point does not mean a response to the notification request, but an acknowledgment that the push service has received the notification. When the push service receives the notification, the push server sends this acknowledgment to the application server in a JSON format through HTTP.</p>
+ <p>This is an optional field, and if it does not exist, the server applies its default value (<code>Transport</code>). An acknowledgment at this point does not mean a response to the notification request, but an acknowledgment that the push service has received the notification. When the push service receives the notification, the push server sends this acknowledgment to the application server in a JSON format through HTTP.</p>
</td>
<td>
<ul><li>Optional</li>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">sessionInfo</span></td>
+ <td><code>sessionInfo</code></td>
<td>Connection information of an application. Third-party applications can define this field by themselves.</td>
<td>
<ul><li>Optional</li>
<li>Type: string</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul>
+ <li>Default: <code>NULL</code></li></ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">timeStamp</span></td>
+ <td><code>timeStamp</code></td>
<td>Server time in milliseconds when a notification request has been made.</td>
<td>
<ul><li>Optional</li>
<li>Type: long</li>
- <li>Default: <span style="font-family: Courier New,Courier,monospace;">NULL</span></li></ul>
+ <li>Default: <code>NULL</code></li></ul>
</td>
</tr>
</tbody>
"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 */
</li>
<li>Example response:
-<p>If the push server receives a notification request, the server returns a JSON string that contains the <span style="font-family: Courier New,Courier,monospace;">regID</span>, <span style="font-family: Courier New,Courier,monospace;">requestID</span>, status code, and status message. If the request contains a malformed JSON format, requests are not processed and are returned without the <span style="font-family: Courier New,Courier,monospace;">regID</span> and <span style="font-family: Courier New,Courier,monospace;">requestID</span> values. If the request is of the JSON format but has invalid data, no requests are processed and are considered as an error.</p>
+<p>If the push server receives a notification request, the server returns a JSON string that contains the <code>regID</code>, <code>requestID</code>, status code, and status message. If the request contains a malformed JSON format, requests are not processed and are returned without the <code>regID</code> and <code>requestID</code> values. If the request is of the JSON format but has invalid data, no requests are processed and are considered as an error.</p>
<p>The response message only shows whether receiving the notification request was successful. The response message does not deal with whether the push service receives the notification. The order of the response message is the same as the request message order.</p>
<ul>
<li>
}]
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the above example, the 3008 error code means that the regID does not exist in the push server. It happens when your application of that particular regID was uninstalled or disabled by the user, and consequently the regID must be removed from your application server. When the application is reinstalled or enabled, it must repeat the <a href="push_n.htm#registration">registration process</a> and send a new regID to your application server.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ In the above example, the 3008 error code means that the regID does not exist in the push server. It happens when your application of that particular regID was uninstalled or disabled by the user, and consequently the regID must be removed from your application server. When the application is reinstalled or enabled, it must repeat the <a href="push_n.htm#registration">registration process</a> and send a new regID to your application server.
+ </div>
</li>
</ul>
</li>
<h2 id="decorate_noti" name="decorate_noti">Decorating Push Notifications</h2>
<p>Since Tizen 3.0, you can decorate push notifications you send from the application server to Tizen devices. For example, you can add images and sounds to the notifications. The push service creates a notification using the resources from the application and notifies the user. You can compose the push message using a set of REST APIs.</p>
-<p>To decorate push notifications, you have to understand the notification functions. In addition to the existing <
span style="font-family: Courier New,Courier,monospace;">message</span> field, more fields are provided. For more details about the functions to use to create a notification, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications). When you include a key and value in the message field, the push service creates a notification as the application creates a notification using the Notification API.</p>
-<p>Prepare all the resource files under the <span style="font-family: Courier New,Courier,monospace;">/shared/res</span> folder in your application, and you can directly address the resource files. For example, <span style="font-family: Courier New,Courier,monospace;">imageTypeIcon=image.png</span> means that the <span style="font-family: Courier New,Courier,monospace;">/share/res/image.png</span> image is displayed as an icon in the notification panel. You can perform the same action by calling the <span style="font-family: Courier New,Courier,monospace;">notification_set_image(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</span> function.</p>
+<p>To decorate push notifications, you have to understand the notification functions. In addition to the existing <
code>message</code> field, more fields are provided. For more details about the functions to use to create a notification, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications). When you include a key and value in the message field, the push service creates a notification as the application creates a notification using the Notification API.</p>
+<p>Prepare all the resource files under the <code>/shared/res</code> folder in your application, and you can directly address the resource files. For example, <code>imageTypeIcon=image.png</code> means that the <code>/share/res/image.png</code> image is displayed as an icon in the notification panel. You can perform the same action by calling the <code>notification_set_image(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</code> function.</p>
<p>The following table lists the additional key and value pairs for the message field in notifications.</p>
+<p align="center" class="Table"><strong>Table: Additional message field key and value pairs for notification</strong></p>
<table>
-<caption>Table: Additional message field key and value pairs for notification</caption>
<tbody>
<tr>
<th>Key</th>
<th>Corresponding parameters</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeIcon</span></td>
- <td rowspan="18">Image file path <p>(for example, <span style="font-family: Courier New,Courier,monospace;">image.png</span>)</p></td>
- <td rowspan="18"><span style="font-family: Courier New,Courier,monospace;">notification_set_image()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</span></td>
+ <td><code>imageTypeIcon</code></td>
+ <td rowspan="18">Image file path <p>(for example, <code>image.png</code>)</p></td>
+ <td rowspan="18"><code>notification_set_image()</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeIconForIndicator</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR, "image.png")</span></td>
+ <td><code>imageTypeIconForIndicator</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeIconForLock</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK , "image.png")</span></td>
+ <td><code>imageTypeIconForLock</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK , "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeThumbnail</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL, "image.png")</span></td>
+ <td><code>imageTypeThumbnail</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeThumbnailForLock</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK, "image.png")</span></td>
+ <td><code>imageTypeThumbnailForLock</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeIconSub</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_ICON_SUB, "image.png")</span></td>
+ <td><code>imageTypeIconSub</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_SUB, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeBackground</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BACKGROUND, "image.png")</span></td>
+ <td><code>imageTypeBackground</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BACKGROUND, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeList1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_LIST_1, "image.png")</span></td>
+ <td><code>imageTypeList1</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_1, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeList2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_LIST_2, "image.png")</span></td>
+ <td><code>imageTypeList2</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_2, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeList3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_LIST_3, "image.png")</span></td>
+ <td><code>imageTypeList3</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_3, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeList4</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_LIST_4, "image.png")</span></td>
+ <td><code>imageTypeList4</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_4, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeList5</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_LIST_5, "image.png")</span></td>
+ <td><code>imageTypeList5</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_5, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_1, "image.png")</span></td>
+ <td><code>imageTypeButton1</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_1, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_2, "image.png")</span></td>
+ <td><code>imageTypeButton2</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_2, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_3, "image.png")</span></td>
+ <td><code>imageTypeButton3</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_3, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton4</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_4, "image.png")</span></td>
+ <td><code>imageTypeButton4</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_4, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton5</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_5, "image.png")</span></td>
+ <td><code>imageTypeButton5</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_5, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">imageTypeButton6</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_6, "image.png")</span></td>
+ <td><code>imageTypeButton6</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_6, "image.png")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeTitle</span></td>
+ <td><code>textTypeTitle</code></td>
<td rowspan="19">Text message</td>
- <td rowspan="19"><span style="font-family: Courier New,Courier,monospace;">notification_set_text()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_TITLE, "text")</span></td>
+ <td rowspan="19"><code>notification_set_text()</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_TITLE, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeContent</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_CONTENT, "text")</span></td>
+ <td><code>textTypeContent</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeContentForDisplayOptionIsOff</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</span></td>
+ <td><code>textTypeContentForDisplayOptionIsOff</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeEventCount</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_EVENT_COUNT, "text")</span></td>
+ <td><code>textTypeEventCount</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_EVENT_COUNT, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfo1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_1, "text")</span></td>
+ <td><code>textTypeInfo1</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_1, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfoSub1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_1, "text")</span></td>
+ <td><code>textTypeInfoSub1</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_1, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfo2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_2, "text")</span></td>
+ <td><code>textTypeInfo2</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_2, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfoSub2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_2, "text")</span></td>
+ <td><code>textTypeInfoSub2</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_2, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfo3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_3, "text")</span></td>
+ <td><code>textTypeInfo3</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_3, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeInfoSub3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_3, "text")</span></td>
+ <td><code>textTypeInfoSub3</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_3, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeGroupTitle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_GROUP_TITLE, "text")</span></td>
+ <td><code>textTypeGroupTitle</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_TITLE, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeGroupContent</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT, "text")</span></td>
+ <td><code>textTypeGroupContent</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeGroupContentForDisplayOptionIsOff</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</span></td>
+ <td><code>textTypeGroupContentForDisplayOptionIsOff</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton1</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_1, "text")</span></td>
+ <td><code>textTypeButton1</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_1, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_2, "text")</span></td>
+ <td><code>textTypeButton2</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_2, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_3, "text")</span></td>
+ <td><code>textTypeButton3</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_3, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton4</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_4, "text")</span></td>
+ <td><code>textTypeButton4</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_4, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton5</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_5, "text")</span></td>
+ <td><code>textTypeButton5</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_5, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">textTypeButton6</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_TEXT_TYPE_BUTTON_6, "text")</span></td>
+ <td><code>textTypeButton6</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_6, "text")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">soundTypeNone</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace;">notification_set_sound()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_SOUND_TYPE_NONE, NULL)</span></td>
+ <td><code>soundTypeNone</code></td>
+ <td><code>TRUE</code></td>
+ <td rowspan="2"><code>notification_set_sound()</code></td>
+ <td><code>(noti, NOTIFICATION_SOUND_TYPE_NONE, NULL)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">soundTypeUserData</span></td>
+ <td><code>soundTypeUserData</code></td>
<td>Sound file path</td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_SOUND_TYPE_USER_DATA, "sound_path")</span></td>
+ <td><code>(noti, NOTIFICATION_SOUND_TYPE_USER_DATA, "sound_path")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">vibrationTypeNone</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace;">notification_set_vibration()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_VIBRATION_TYPE_NONE, NULL)</span></td>
+ <td><code>vibrationTypeNone</code></td>
+ <td><code>TRUE</code></td>
+ <td rowspan="2"><code>notification_set_vibration()</code></td>
+ <td><code>(noti, NOTIFICATION_VIBRATION_TYPE_NONE, NULL)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">vibrationTypeUserData</span></td>
+ <td><code>vibrationTypeUserData</code></td>
<td>Vibration file path</td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_VIBRATION_TYPE_USER_DATA, "vib_path")</span></td>
+ <td><code>(noti, NOTIFICATION_VIBRATION_TYPE_USER_DATA, "vib_path")</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ledOpOn</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace;">notification_set_led()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_LED_OP_ON, NULL)</span></td>
+ <td><code>ledOpOn</code></td>
+ <td><code>TRUE</code></td>
+ <td rowspan="2"><code>notification_set_led()</code></td>
+ <td><code>(noti, NOTIFICATION_LED_OP_ON, NULL)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ledOpOnCustomColor</span></td>
+ <td><code>ledOpOnCustomColor</code></td>
<td>Led argument</td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_LED_OP_ON_CUSTOM_COLOR, led_argb)</span></td>
+ <td><code>(noti, NOTIFICATION_LED_OP_ON_CUSTOM_COLOR, led_argb)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton1</span></td>
+ <td><code>eventTypeClickOnButton1</code></td>
<td rowspan="8">[key,value]</td>
- <td rowspan="8"><span style="font-family: Courier New,Courier,monospace;">notification_set_eventhandler()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_1)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1, app_control)</span></p></td>
+ <td rowspan="8"><code>notification_set_eventhandler()</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_1)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton2</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_2)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2, app_control)</span></p></td>
+ <td><code>eventTypeClickOnButton2</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_2)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton3</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_3)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_3, app_control)</span></p></td>
+ <td><code>eventTypeClickOnButton3</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_3)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_3, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton4</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_4)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_4, app_control)</span></p></td>
+ <td><code>eventTypeClickOnButton4</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_4)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_4, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton5</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_5)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_5, app_control)</span></p></td>
+ <td><code>eventTypeClickOnButton5</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_5)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_5, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnButton6</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">notification_add_button(noti, NOTIFICATION_BUTTON_6)</span></p>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_6, app_control)</span></p></td>
+ <td><code>eventTypeClickOnButton6</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>notification_add_button(noti, NOTIFICATION_BUTTON_6)</code></p>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_6, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnIcon</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_ICON, app_control)</span></p></td>
+ <td><code>eventTypeClickOnIcon</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_ICON, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">eventTypeClickOnThumbnail</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">app_control_add_extra_data(appcontrol, key, value)</span>
- <p><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_THUMBNAIL, app_control)</span></p></td>
+ <td><code>eventTypeClickOnThumbnail</code></td>
+ <td><code>app_control_add_extra_data(appcontrol, key, value)</code>
+ <p><code>(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_THUMBNAIL, app_control)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">setProperty</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">displayOnlySimmode|</span><p><span style="font-family: Courier New,Courier,monospace;">disableAppLaunch|</span></p><p><span style="font-family: Courier New,Courier,monospace;">disableAutoDelete|</span></p><p><span style="font-family: Courier New,Courier,monospace;">disableUpdateOnInsert|</span></p><p><span style="font-family: Courier New,Courier,monospace;">disableUpdateOnDelete|</span></p><p><span style="font-family: Courier New,Courier,monospace;">volatileDisplay</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">notification_set_property()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_PROP_DISPLAY_ONLY_SIMMODE|</span><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_PROP_DISABLE_APP_LAUNCH|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_PROP_DISABLE_AUTO_DELETE|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_PROP_DISABLE_UPDATE_ON_INSERT|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_PROP_DISABLE_UPDATE_ON_DELETE|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_PROP_VOLATILE_DISPLAY)</span></p></td>
+ <td><code>setProperty</code></td>
+ <td><code>displayOnlySimmode|</code><p><code>disableAppLaunch|</code></p><p><code>disableAutoDelete|</code></p><p><code>disableUpdateOnInsert|</code></p><p><code>disableUpdateOnDelete|</code></p><p><code>volatileDisplay</code></p></td>
+ <td><code>notification_set_property()</code></td>
+ <td><code>(noti, NOTIFICATION_PROP_DISPLAY_ONLY_SIMMODE|</code><p><code>NOTIFICATION_PROP_DISABLE_APP_LAUNCH|</code></p><p><code>NOTIFICATION_PROP_DISABLE_AUTO_DELETE|</code></p><p><code>NOTIFICATION_PROP_DISABLE_UPDATE_ON_INSERT|</code></p><p><code>NOTIFICATION_PROP_DISABLE_UPDATE_ON_DELETE|</code></p><p><code>NOTIFICATION_PROP_VOLATILE_DISPLAY)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lyNotiEventSingle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">notification_set_layout()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_LY_NOTI_EVENT_SINGLE)</span></td>
+ <td><code>lyNotiEventSingle</code></td>
+ <td><code>TRUE</code></td>
+ <td rowspan="3"><code>notification_set_layout()</code></td>
+ <td><code>(noti, NOTIFICATION_LY_NOTI_EVENT_SINGLE)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lyNotiEventMultiple</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_LY_NOTI_EVENT_MULTIPLE)</span></td>
+ <td><code>lyNotiEventMultiple</code></td>
+ <td><code>TRUE</code></td>
+ <td><code>(noti, NOTIFICATION_LY_NOTI_EVENT_MULTIPLE)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lyNotiThumbnail</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_LY_NOTI_THUMBNAIL)</span></td>
+ <td><code>lyNotiThumbnail</code></td>
+ <td><code>TRUE</code></td>
+ <td><code>(noti, NOTIFICATION_LY_NOTI_THUMBNAIL)</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">setDisplayApplist</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">notificationTray|</span><p><span style="font-family: Courier New,Courier,monospace;">ticker|</span></p><p><span style="font-family: Courier New,Courier,monospace;">lock|</span></p><p><span style="font-family: Courier New,Courier,monospace;">indicator|</span></p><p><span style="font-family: Courier New,Courier,monospace;">active|</span></p><p><span style="font-family: Courier New,Courier,monospace;">all</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">notification_set_display_applist()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY|</span><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_DISPLAY_APP_TICKER|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_DISPLAY_APP_LOCK|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_DISPLAY_APP_INDICATOR|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_DISPLAY_APP_ACTIVE|</span></p><p><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_DISPLAY_APP_ALL)</span></p></td>
+ <td><code>setDisplayApplist</code></td>
+ <td><code>notificationTray|</code><p><code>ticker|</code></p><p><code>lock|</code></p><p><code>indicator|</code></p><p><code>active|</code></p><p><code>all</code></p></td>
+ <td><code>notification_set_display_applist()</code></td>
+ <td><code>(noti, NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY|</code><p><code>NOTIFICATION_DISPLAY_APP_TICKER|</code></p><p><code>NOTIFICATION_DISPLAY_APP_LOCK|</code></p><p><code>NOTIFICATION_DISPLAY_APP_INDICATOR|</code></p><p><code>NOTIFICATION_DISPLAY_APP_ACTIVE|</code></p><p><code>NOTIFICATION_DISPLAY_APP_ALL)</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">setAutoRemove</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TRUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">notification_set_auto_remove()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">(noti, BOOL)</span></td>
+ <td><code>setAutoRemove</code></td>
+ <td><code>TRUE</code></td>
+ <td><code>notification_set_auto_remove()</code></td>
+ <td><code>(noti, BOOL)</code></td>
</tr>
</tbody>
</table>
<p>The following figure shows a decorated push notification.</p>
-<p class="figure">Figure: Decorated notification</p>
+<p align="center"><strong>Figure: Decorated notification</strong></p>
<p align="center"><img alt="Decorated notification" src="../../images/push_active_notification.png"/></p>
-<p>If the user presses any of the 3 buttons, the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> callback of your application is called. Use the following code for further actions:</p>
+<p>If the user presses any of the 3 buttons, the <code>app_control()</code> callback of your application is called. Use the following code for further actions:</p>
<pre class="prettyprint">
#define KEY_FROM_ACTIVE_NOTICATION "test"
/* Add code here to react to registration state changes */
}
</pre>
-<p>Since Tizen 3.0, you can use a notification template to reuse well-decorated notification content without having to define it from scratch each time. When you want to use the same notification multiple times, you can make and save a template for it. Use the <span style="font-family: Courier New,Courier,monospace;">notification_save_as_template()</span> function to save the notification handle. For more information on the function, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications).</p>
-<p>Once you save a notification template with a specific name, you can use the <span style="font-family: Courier New,Courier,monospace;">template</span> key in the message field to load the template when you send a notification.</p>
+<p>Since Tizen 3.0, you can use a notification template to reuse well-decorated notification content without having to define it from scratch each time. When you want to use the same notification multiple times, you can make and save a template for it. Use the <code>notification_save_as_template()</code> function to save the notification handle. For more information on the function, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications).</p>
+<p>Once you save a notification template with a specific name, you can use the <code>template</code> key in the message field to load the template when you send a notification.</p>
+<p align="center" class="Table"><strong>Table: Notification template key-value pair</strong></p>
<table>
-<caption>Table: Notification template key-value pair</caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">template</span></td>
+<td><code>template</code></td>
<td>string</td>
<td>Create a notification handle from the received template name, if a saved notification template exists.</td>
</tr>
</tbody>
</table>
-<p>The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">template</span> key in the message field:</p>
+<p>The following example shows how to use the <code>template</code> key in the message field:</p>
<pre class="prettyprint">
"message":"template=noti_template"
</pre>
<p>If sending a push notification request fails for some reason, the response message contains an error code. Use the following table to identify the reason for the failure and take appropriate action.</p>
+<p align="center" class="Table"><strong>Table: Push notification error codes</strong></p>
<table>
-<caption>Table: Push notification error codes</caption>
<tbody>
<tr>
<th>Status code</th>
</tr>
<tr>
<td>3018</td>
- <td>Error of notification data contains unreadable data or <span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td>Error of notification data contains unreadable data or <code>NULL</code></td>
</tr>
<tr>
<td>3019</td>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h2 id="bg_app" name="bg_app">New Background Application Policy</h2>
<p>Since Tizen 2.4, the application on the background goes into a suspended state.</p>
<p>In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can designate their background category as an allowed category to avoid going into the suspended state.</p>
-<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/efl_ui_app_n.htm#allow_bg">Allowing Applications to Run on the Background</a>.</p>
+<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/efl_ui_app_n.htm#allow_bg">Background Categories</a>.</p>
-<p>You can receive an event when the background application goes to the suspended state. Pass <span style="font-family: Courier New,Courier,monospace;">APP_EVENT_SUSPENDED_STATE_CHANGED</span> as <span style="font-family: Courier New,Courier,monospace;">event_type</span> to the <span style="font-family: Courier New,Courier,monospace;">ui_app_add_event_handler()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_add_event_handler()</span> function to handle the suspended event. You must release the resources properly when your application goes to the suspended state.</p>
+<p>You can receive an event when the background application goes to the suspended state. Pass <code>APP_EVENT_SUSPENDED_STATE_CHANGED</code> as <code>event_type</code> to the <code>ui_app_add_event_handler()</code> or <code>service_app_add_event_handler()</code> function to handle the suspended event. You must release the resources properly when your application goes to the suspended state.</p>
<h2 id="alarm" name="alarm">Changes in the Alarm API for Reducing Power Consumption</h2>
<p>Since Tizen 2.4, the Alarm API is changed to reduce the power consumption of the device:</p>
<ul>
-<li>Alarm APIs that support exact alarms are changed to be able to launch UI applications only. While launching UI applications when the alarm expires, the framework turns the LCD display on. Because of this you must not use those Alarm APIs for background processing. You can use the <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function that supports an inexact alarm for background processing.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function is changed to support an inexact alarm. You can pass a period for alarm expiration, but the platform decides when the alarm expires according to the status of the device.
-<p>The <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function can launch service applications when it is expired. However, the target service application must specify a background category to be registered as the target application of the function.</p></li>
-<li>Regarding the <span style="font-family: Courier New,Courier,monospace;">app_control</span> parameter of the Alarm APIs, only explicit launch is allowed. You cannot pass <span style="font-family: Courier New,Courier,monospace;">app_control</span> for an implicit launch because the implicit launch cannot specify the target application when it is registered.</li>
+<li>Alarm APIs that support exact alarms are changed to be able to launch UI applications only. While launching UI applications when the alarm expires, the framework turns the LCD display on. Because of this you must not use those Alarm APIs for background processing. You can use the <code>alarm_schedule_after_delay()</code> function that supports an inexact alarm for background processing.</li>
+<li>The <code>alarm_schedule_after_delay()</code> function is changed to support an inexact alarm. You can pass a period for alarm expiration, but the platform decides when the alarm expires according to the status of the device.
+<p>The <code>alarm_schedule_after_delay()</code> function can launch service applications when it is expired. However, the target service application must specify a background category to be registered as the target application of the function.</p></li>
+<li>Regarding the <code>app_control</code> parameter of the Alarm APIs, only explicit launch is allowed. You cannot pass <code>app_control</code> for an implicit launch because the implicit launch cannot specify the target application when it is registered.</li>
</ul>
<p>When you migrate your application from Tizen 2.3 to Tizen 2.4, check the changes and modify your application to conform with the Tizen 2.4 Alarm APIs.</p>
<h2 id="event" name="event">Tizen Application Event System in Mobile Applications</h2>
<p>Tizen 2.4 introduces new Tizen Application Event APIs for subscribing system events and publishing and subscribing application events to other applications.</p>
-<p>Using the Tizen Application Event APIs, you can register your service application to be launched when a specified event is published. You can specify the event name through the <
span style="font-family: Courier New,Courier,monospace;"><app-control></span> element in the application manifest file. This launch-on-event allows your service application to only run after receiving an event from the platform or other application. Note that UI applications cannot be launched using the launch-on-event mechanism. For more information, see the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event</a> API.</p>
+<p>Using the Tizen Application Event APIs, you can register your service application to be launched when a specified event is published. You can specify the event name through the <
code><app-control></code> element in the application manifest file. This launch-on-event allows your service application to only run after receiving an event from the platform or other application. Note that UI applications cannot be launched using the launch-on-event mechanism. For more information, see the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event</a> API.</p>
<h2 id="group_launch" name="group_launch">Application Group Launching Management</h2>
-<p>When you launch an application using the <span style="font-family: Courier New,Courier,monospace;">app_control_send_launch_request()</span> function, you can treat the launched application as a sub-view of your application. For example, when your application launches the message composer application to send a message, you can treat the message composer as a member of your application group. Tizen 2.4 introduces the application group feature to supports this requirement.</p>
-<p>The application can specify a launch mode when it launches a new application with the <span style="font-family: Courier New,Courier,monospace;">app_control_set_launch_mode()</span> function. The following modes are available:</p>
+<p>When you launch an application using the <code>app_control_send_launch_request()</code> function, you can treat the launched application as a sub-view of your application. For example, when your application launches the message composer application to send a message, you can treat the message composer as a member of your application group. Tizen 2.4 introduces the application group feature to supports this requirement.</p>
+<p>The application can specify a launch mode when it launches a new application with the <code>app_control_set_launch_mode()</code> function. The following modes are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;"> APP_CONTROL_LAUNCH_MODE_SINGLE</span>: the launched application is launched in a separate group.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">APP_CONTROL_LAUNCH_MODE_GROUP</span>: the launched application is included in the group of the caller application.</li>
+<li><code> APP_CONTROL_LAUNCH_MODE_SINGLE</code>: the launched application is launched in a separate group.</li>
+<li><code>APP_CONTROL_LAUNCH_MODE_GROUP</code>: the launched application is included in the group of the caller application.</li>
</ul>
-<p>You can also specify whether your application supports the group mode launching. You can specify the supported launch mode of your application in the application manifest file. The available <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> options are:</p>
+<p>You can also specify whether your application supports the group mode launching. You can specify the supported launch mode of your application in the application manifest file. The available <code>launch_mode</code> options are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">single</span>: the application is always launched in a separate group, even if the caller application requests the <span style="font-family: Courier New,Courier,monospace;">APP_CONTROL_LAUNCH_MODE_GROUP</span> mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">caller</span>: the application is launched according to the caller application request.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">group</span>: the application is included in the group of the caller application.</li>
+<li><code>single</code>: the application is always launched in a separate group, even if the caller application requests the <code>APP_CONTROL_LAUNCH_MODE_GROUP</code> mode.</li>
+<li><code>caller</code>: the application is launched according to the caller application request.</li>
+<li><code>group</code>: the application is included in the group of the caller application.</li>
</ul>
<p>For more information, see <a href="app_management/app_controls_n.htm#group">Managing Application Groups</a>.</p>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>The main features of the Attach panel API include:</p>
<ul>
<li>Creating an attach panel
-<p>You can <a href="#create">create an attach panel and
and set callbacks</a>. You can also <a href="#categories">add content categories</a>. When no longer needed, you can also delete the attach panel.</p></li>
+<p>You can <a href="#create">create an attach panel and set callbacks</a>. You can also <a href="#categories">add content categories</a>. When no longer needed, you can also delete the attach panel.</p></li>
<li>Managing an attach panel
<p>You can <a href="#manage">set extra data to a content category, show and hide the panel, and get the panel state</a>.</p></li>
</ul>
-<p class="figure">Figure: Attach panel</p>
+<p align="center"><strong>Figure: Attach panel</strong></p>
<p align="center"><img alt="Attach panel" src="../../images/attach_panel_area.png" /></p>
<p>The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel's <strong>More</strong> tab using <a href="../app_management/app_controls_n.htm">application controls</a>.</p>
<p>The attach panel has half and full modes. The mode can be changed by swiping up and down the page.</p>
-<p class="figure">Figure: Attach panel modes</p>
+<p align="center"><strong>Figure: Attach panel modes</strong></p>
<p align="center"><img alt="Attach panel modes" src="../../images/attach_mode.png" /></p>
<h2 id="categories">Content Categories</h2>
</ul>
<p>The following figure illustrates the content types. From left to right: images, camera, voice, and <strong>More</strong> tab.</p>
-<p class="figure">Figure: Content categories</p>
+<p align="center"><strong>Figure: Content categories</strong></p>
<p align="center"><img alt="Images content" src="../../images/attach_images.png" /> <img alt="Camera content" src="../../images/attach_camera.png" /> <img alt="Voice content" src="../../images/attach_voice.png" /> <img alt="More content" src="../../images/attach_more.png" /></p>
<p>To enable your application to use the attach panel functionality:</p>
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html">Attach panel</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html">Attach panel</a> API, the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<!--To add the image viewer and camera UI gadget in the attach panel-->
</pre>
</li>
<li>
-<p>To use the functions and data types of the Attach panel API, include the <span style="font-family: Courier New,Courier,monospace"><attach_panel.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Attach panel API, include the <code><attach_panel.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <attach_panel.h>
</pre>
<p>To create an attach panel:</p>
<ol>
-<li>Create the attach panel using the <span style="font-family: Courier New,Courier,monospace">attach_panel_create()</span> function.
-<p>When the attach panel is created, its state is hidden by default. To show the created panel, use the <span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span> function.</p>
+<li>Create the attach panel using the <code>attach_panel_create()</code> function.
+<p>When the attach panel is created, its state is hidden by default. To show the created panel, use the <code>attach_panel_show()</code> function.</p>
<pre class="prettyprint">
attach_panel_h attach_panel = NULL;
s_info.attach_panel = attach_panel;
</pre>
</li>
-<li>Based on the type of content you want the user to be able to select for the attach panel, add content categories using the <
span style="font-family: Courier New,Courier,monospace">attach_panel_add_content_category()</span> function. The available content categories are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html#gada3a2db6ac8e7d42b7dff7c3cc48720b">attach_panel_content_category</a> enumerator.
+<li>Based on the type of content you want the user to be able to select for the attach panel, add content categories using the <
code>attach_panel_add_content_category()</code> function. The available content categories are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html#gada3a2db6ac8e7d42b7dff7c3cc48720b">attach_panel_content_category</a> enumerator.
<p>The content categories in the <strong>More</strong> tab are shown in the frequency, recently used, and alphabetical sequence.</p>
<p>To deliver more information to the UI gadget or called application, add the data with a bundle.</p>
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);
</li>
<li>Register and define callbacks:
-<ul><li>To get the data that the user selects in the called application, register a callback using the <span style="font-family: Courier New,Courier,monospace">attach_panel_set_result_cb()</span> function. The callback is triggered when the user selects and conforms something to attach on the caller application. When you use this callback, you must use the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data_array()</span> function to get the received data.</li>
-<li>To get the published events from the panel side, register a callback using the <
span style="font-family: Courier New,Courier,monospace">attach_panel_set_event_cb()</span> function. The callback is triggered when reserved events (defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html#ga722a6d81e76fc1c4567a1bf920b4da3e">attach_panel_event</a> enumerator) are published from the panel side.</li></ul>
+<ul><li>To get the data that the user selects in the called application, register a callback using the <code>attach_panel_set_result_cb()</code> function. The callback is triggered when the user selects and conforms something to attach on the caller application. When you use this callback, you must use the <code>app_control_get_extra_data_array()</code> function to get the received data.</li>
+<li>To get the published events from the panel side, register a callback using the <
code>attach_panel_set_event_cb()</code> function. The callback is triggered when reserved events (defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html#ga722a6d81e76fc1c4567a1bf920b4da3e">attach_panel_event</a> enumerator) are published from the panel side.</li></ul>
<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 (!)
}
</pre>
</li>
-<li>When no longer needed, destroy the attach panel with the <span style="font-family: Courier New,Courier,monospace">attach_panel_destroy()</span> function. If the attach panel is shown when you destroy it, the panel is first hidden and then destroyed.
+<li>When no longer needed, destroy the attach panel with the <code>attach_panel_destroy()</code> function. If the attach panel is shown when you destroy it, the panel is first hidden and then destroyed.
- <p>If you only need to remove a specific content category, use the <span style="font-family: Courier New,Courier,monospace">attach_panel_remove_content_category()</span> function.</p>
+ <p>If you only need to remove a specific content category, use the <code>attach_panel_remove_content_category()</code> function.</p>
<pre class="prettyprint">
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);
<p>To manage an attach panel:</p>
<ul>
-<li>To set some information to the content category after adding the category, use the <span style="font-family: Courier New,Courier,monospace">attach_panel_set_extra_data()</span> function, which sets extra data to send to the content category using a bundle:
+<li>To set some information to the content category after adding the category, use the <code>attach_panel_set_extra_data()</code> function, which sets extra data to send to the content category using a bundle:
<pre class="prettyprint">
static void
/* 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);
}
</pre></li>
-<li>To show or hide the attach panel, use the <span style="font-family: Courier New,Courier,monospace">attach_panel_show()</span> and <span style="font-family: Courier New,Courier,monospace">attach_panel_hide()</span> functions:
+<li>To show or hide the attach panel, use the <code>attach_panel_show()</code> and <code>attach_panel_hide()</code> functions:
<pre class="prettyprint">
attach_panel_h attach_panel;
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></li>
-<li>To know whether the attach panel is visible, use the <span style="font-family: Courier New,Courier,monospace">attach_panel_get_visibility()</span> function. It fills the second parameter with a Boolean value that shows whether the panel is visible.
+<li>To know whether the attach panel is visible, use the <code>attach_panel_get_visibility()</code> function. It fills the second parameter with a Boolean value that shows whether the panel is visible.
<pre class="prettyprint">
bool visible = false;
<ul>
<li>Creating a minicontrol
<p>You can <a href="#create">create minicontrols</a> using the Minicontrol provider API:</p>
-<ul><li>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function, which returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> of the minicontrol window.</li>
-<li>To send a request, use the <
span style="font-family: Courier New,Courier,monospace">minicontrol_send_event()</span> function to get a minicontrol handle and set the details. You can use the same function to <a href="#hide">hide the quick panel</a>, when needed.</li></ul>
+<ul><li>To create a minicontrol, use the <code>minicontrol_create_window()</code> function, which returns an <code>Evas_Object</code> of the minicontrol window.</li>
+<li>To send a request, use the <
code>minicontrol_send_event()</code> function to get a minicontrol handle and set the details. You can use the same function to <a href="#hide">hide the quick panel</a>, when needed.</li></ul>
</li>
<li>Hosting minicontrols
<p>You can host minicontrols, such as lock screens, on your application using the Minicontrol viewer API:</p>
-<ul><li>To host minicontrols, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_set_event_cb()</span> function for listening to the request from minicontrol providers. </li>
-<li>When you get the creation request from a minicontrol provider, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_add()</span> function to add the minicontrol on your application.</li></ul>
+<ul><li>To host minicontrols, use the <code>minicontrol_viewer_set_event_cb()</code> function for listening to the request from minicontrol providers. </li>
+<li>When you get the creation request from a minicontrol provider, use the <code>minicontrol_viewer_add()</code> function to add the minicontrol on your application.</li></ul>
</li>
</ul>
- <p class="figure">Figure: Minicontrol on a quick panel (left) and lock screen (right)</p>
+ <p align="center"><strong>Figure: Minicontrol on a quick panel (left) and lock screen (right)</strong></p>
<p align="center"><img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-quickpanel.png" /> <img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-lockscreen.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the minicontrol functionality:</p>
<ol>
-<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:
+<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/minicontrol.provider</privilege>
</pre>
</li>
<li>
-<p>To use the functions and data types of the Minicontrol API, include the <span style="font-family: Courier New,Courier,monospace"><minicontrol_provider.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Minicontrol API, include the <code><minicontrol_provider.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <minicontrol_provider.h>
</pre>
<p>To create a minicontrol of your application:</p>
<ol>
-<li><p>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function.</p>
-<p>To create a minicontrol on the quick panel, the second parameter must be set to <span style="font-family: Courier New,Courier,monospace">MINICONTROL_TARGET_VIEWER_QUICK_PANEL</span>.</p>
+<li><p>To create a minicontrol, use the <code>minicontrol_create_window()</code> function.</p>
+<p>To create a minicontrol on the quick panel, the second parameter must be set to <code>MINICONTROL_TARGET_VIEWER_QUICK_PANEL</code>.</p>
<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>
</li>
-<li>Add a text label on the minicontrol using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function:
+<li>Add a text label on the minicontrol using the <code>elm_label_add()</code> function:
<pre class="prettyprint">
label = elm_label_add(win);
</pre></li>
</ol>
-<p class="figure">Figure: Minicontrol button for hiding the quick panel</p>
+<p align="center"><strong>Figure: Minicontrol button for hiding the quick panel</strong></p>
<p align="center"><img alt="Minicontrol button for hiding the quick panel" src="../../images/minicontrol.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<li>Setting notification attributes
<p>You can <a href="#set">set notification attributes</a>, such as the notification text, timestamp, and various display and LED options.</p></li>
<li>Posting a notification
- <p>You can <a href="#post">post a simple notification</a> using the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function, which accepts a notification handle as a parameter.</p>
+ <p>You can <a href="#post">post a simple notification</a> using the <code>notification_post()</code> function, which accepts a notification handle as a parameter.</p>
<p>The posted notification has a default notification icon and the application name as the title.</p></li>
<li>Updating notification content
- <p>You can <a href="#update">update the content of a notification</a> using the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function.</p></li>
+ <p>You can <a href="#update">update the content of a notification</a> using the <code>notification_update()</code> function.</p></li>
<li>Deleting a notification
<p>You can <a href="#delete">delete notifications</a> when no longer needed.</p></li>
<li>Using advanced notification features
<li>On-going area
<p>The on-going area is the application screen area and is only used to display notifications for the currently running application.</p></li></ul>
- <p class="figure">Figure: Notification and on-going areas</p>
+ <p align="center"><strong>Figure: Notification and on-going areas</strong></p>
<p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
<h3 id="active_notification" name="active_notification">Active Notifications</h3>
<p>An active notification is displayed on the upper side of the screen. You can add several buttons for user interaction.</p>
- <p class="figure">Figure: Active notification</p>
+ <p align="center"><strong>Figure: Active notification</strong></p>
<p align="center"><img alt="Active notification" src="../../images/active_notification.png" /></p>
<h3 id="indicator" name="indicator">Indicator Notifications</h3>
<p>The indicator type notification is displayed for a few seconds in the indicator area. Only a simple string and icon can be displayed.</p>
- <p class="figure">Figure: Notification on the ticker and the indicator</p>
+ <p align="center"><strong>Figure: Notification on the ticker and the indicator</strong></p>
<p align="center"><img alt="Notification on the ticker and the indicator" src="../../images/notification_indicator.png" /></p>
<h3 id="lockscreen" name="lockscreen">Lock Screen Notifications</h3>
<p>You can display a notification on the lock screen. The notification content can be displayed or hidden.</p>
- <p class="figure">Figure: Notification on the lock screen</p>
+ <p align="center"><strong>Figure: Notification on the lock screen</strong></p>
<p align="center"><img alt="Notification on the lock screen" src="../../images/notification_lockscreen.png" /></p>
<h3 id="status_message" name="status_message">Status Message Notifications</h3>
<p>A status message type notification can be used like a pop-up. It is displayed for a few seconds and then disappears.</p>
- <p class="figure">Figure: Status message</p>
+ <p align="center"><strong>Figure: Status message</strong></p>
<p align="center"><img alt="Status message" src="../../images/status_message.png" /></p>
<h2 id="layout" name="layout">Notification Layouts</h2>
<p>The following notification layouts are provided:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_SINGLE</span>
+<ul><li><code>NOTIFICATION_LY_NOTI_EVENT_SINGLE</code>
<p>Layout for a single event notification.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</span>
+<li><code>NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</code>
<p>Layout for a multiple event notification.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_THUMBNAIL</span>
+<li><code>NOTIFICATION_LY_NOTI_THUMBNAIL</code>
<p>Layout for a notification displaying images.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_PROGRESS</span>
+<li><code>NOTIFICATION_LY_ONGOING_PROGRESS</code>
<p>Layout for an ongoing notification displaying progress.</p></li></ul>
- <p class="figure">Figure: Notification layouts</p>
+ <p align="center"><strong>Figure: Notification layouts</strong></p>
<p align="center"><img alt="Notification layouts" src="../../images/notification_layout_desc.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the notification functionality:</p>
<ol>
-<li>To use the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:
+<li>To use the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/notification</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the Notification API, include the <span style="font-family: Courier New,Courier,monospace"><notification.h></span> header file in your application:
+<li>To use the functions and data types of the Notification API, include the <code><notification.h></code> header file in your application:
<pre class="prettyprint">
#include <notification.h>
</pre>
-<p>To ensure that a Notification function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_ERROR_NONE</span>.</p></li>
+<p>To ensure that a Notification function has been executed properly, make sure that the return is equal to <code>NOTIFICATION_ERROR_NONE</code>.</p></li>
<li>To follow this guide, place an image file in, for example, your application's shared resource directory. The following variables are used in the code:
<pre class="prettyprint">
<h2 id="create" name="create">Creating a Notification</h2>
-<p>Initialize a notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function.</p>
-<p>The parameter is the notification type, whose possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">_notification_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">wearable</a> applications).</p>
+<p>Initialize a notification handle by calling the <code>notification_create()</code> function.</p>
+<p>The parameter is the notification type, whose possible values are listed in the <
code>_notification_type</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">wearable</a> applications).</p>
<pre class="prettyprint">
notification = notification_create(NOTIFICATION_TYPE_NOTI);
if (notification != NULL)
<ul>
<li id="text">Notification text:
-<p>To set the text (title and content string) to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function.</p>
-<p>The second parameter defines the notification type, whose possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">_notification_text_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">wearable</a> applications).</p>
+<p>To set the text (title and content string) to display in the notification view, use the <code>notification_set_text()</code> function.</p>
+<p>The second parameter defines the notification type, whose possible values are listed in the <
code>_notification_text_type</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">wearable</a> applications).</p>
<pre class="prettyprint">
int ret =0;
ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text",
if (ret != NOTIFICATION_ERROR_NONE)
/* Error handling */
</pre>
-<p>To <a href="../internationalization/resource_localization_n.htm">implement multi-language support</a>, define the text string key (<span style="font-family: Courier New,Courier,monospace">msgid</span> field in the <span style="font-family: Courier New,Courier,monospace">.po</span> file) as the fourth parameter.</p>
+<p>To <a href="../internationalization/resource_localization_n.htm">implement multi-language support</a>, define the text string key (<code>msgid</code> field in the <code>.po</code> file) as the fourth parameter.</p>
</li>
<li id="timestamp">Notification timestamp:
-<p>To set the timestamp to display in the notification text, use the <span style="font-family: Courier New,Courier,monospace">notification_set_time_to_text()</span> function.</p>
-<p>The second parameter defines the notification text type in which the timestamp is shown. Its values are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_text_type</span> enumeration.</p>
+<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));
<li id="image">Notification image:
-<p>To set the image to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_image()</span> function.</p>
-<p>The second parameter defines the notification image type, whose possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">_notification_image_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">wearable</a> applications).</p>
+<p>To set the image to display in the notification view, use the <code>notification_set_image()</code> function.</p>
+<p>The second parameter defines the notification image type, whose possible values are listed in the <
code>_notification_image_type</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">wearable</a> applications).</p>
<pre class="prettyprint">
ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
if (ret != NOTIFICATION_ERROR_NONE)
<li id="display">Notification display options:
-<p>To set how applications display the notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_display_applist()</span> function.</p>
-<p>The second parameter defines the notification display option, whose possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">_notification_display_applist</span> 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>
+<p>To set how applications display the notification, use the <code>notification_set_display_applist()</code> function.</p>
+<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
<li id="led">LED options:
-<p>To set the LED options for a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> functions:</p>
+<p>To set the LED options for a notification, use the <code>notification_set_led()</code> and <code>notification_set_led_time_period()</code> functions:</p>
<ul>
<li>
-<p>The <
span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> function sets the LED operation. The second parameter defines the LED notification, whose values are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_led_op</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">wearable</a> applications).</p>
+<p>The <
code>notification_set_led()</code> function sets the LED operation. The second parameter defines the LED notification, whose values are listed in the <code>_notification_led_op</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">wearable</a> applications).</p>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> function sets the time period when the LED is switched on and off (second and third parameters).</p>
+<p>The <code>notification_set_led_time_period()</code> function sets the time period when the LED is switched on and off (second and third parameters).</p>
</li>
</ul>
<pre class="prettyprint">
</li>
<li id="prop">Notification properties:
-<p>To set a notification property, use the <span style="font-family: Courier New,Courier,monospace">notification_set_property()</span> function.</p>
-<p>The second parameter defines the notification property, whose possible values are listed in the <
span style="font-family: Courier New,Courier,monospace">_notification_property</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">wearable</a> applications). You can set multiple properties with the "|" pipe operation.</p>
+<p>To set a notification property, use the <code>notification_set_property()</code> function.</p>
+<p>The second parameter defines the notification property, whose possible values are listed in the <
code>_notification_property</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">wearable</a> applications). You can set multiple properties with the "|" pipe operation.</p>
<pre class="prettyprint">
ret = notification_set_property(notification, NOTIFICATION_PROP_DISABLE_APP_LAUNCH);
if (ret != NOTIFICATION_ERROR_NONE)
</li>
<li id="button">Button on the active notification:
-<p>To add a button on the active notification, use the <span style="font-family: Courier New,Courier,monospace">notification_add_button()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_event_handler()</span> functions:</p>
+<p>To add a button on the active notification, use the <code>notification_add_button()</code> and <code>notification_set_event_handler()</code> functions:</p>
<ul>
<li>
-<p>The <
span style="font-family: Courier New,Courier,monospace">notification_add_button()</span> adds the button. The second parameter defines the button index, whose possible values are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_button_index</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">wearable</a> applications).</p>
+<p>The <
code>notification_add_button()</code> adds the button. The second parameter defines the button index, whose possible values are listed in the <code>_notification_button_index</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">wearable</a> applications).</p>
</li>
<li>
-<p>The <
span style="font-family: Courier New,Courier,monospace">notification_set_event_handler()</span> function defines the application control that launches the application at the button click. The third parameter defines the app control handle, whose possible values are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_event_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">wearable</a> applications).</p>
+<p>The <
code>notification_set_event_handler()</code> function defines the application control that launches the application at the button click. The third parameter defines the app control handle, whose possible values are listed in the <code>_notification_event_type</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">wearable</a> applications).</p>
<pre class="prettyprint">
noti_err = notification_add_button(noti, NOTIFICATION_BUTTON_1);
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 */
<h2 id="post" name="post">Posting a Notification</h2>
-<p>To post a notification to the database, use the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function:</p>
+<p>To post a notification to the database, use the <code>notification_post()</code> function:</p>
<pre class="prettyprint">
ret = notification_post(notification);
if (ret != NOTIFICATION_ERROR_NONE)
<h2 id="update" name="update">Updating Notification Content</h2>
-<p>To update the content of a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function. The function works only for ongoing notifications.</p>
+<p>To update the content of a notification, use the <code>notification_update()</code> function. The function works only for ongoing notifications.</p>
<pre class="prettyprint">
ret = notification_update(notification);
if (ret != NOTIFICATION_ERROR_NONE)
<h2 id="delete" name="delete">Deleting a Notification</h2>
<p>To delete a notification:</p>
-<ol><li>To delete a notification from the database, use the <span style="font-family: Courier New,Courier,monospace">notification_delete()</span> function:
+<ol><li>To delete a notification from the database, use the <code>notification_delete()</code> function:
<pre class="prettyprint">
ret = notification_delete(notification);
if (ret != NOTIFICATION_ERROR_NONE)
/* Error handling */
</pre></li>
-<li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_free()</span> function:</p>
+<li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <code>notification_free()</code> function:</p>
<pre class="prettyprint">ret = notification_free(notification);
if (ret != NOTIFICATION_ERROR_NONE)
<p>To display the progress bar and update the progress data:</p>
-<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span> parameter to create a notification with a progress bar. To be able to retrieve the notification handle later on to update the progress data, set a notification tag with the <span style="font-family: Courier New,Courier,monospace">notification_set_tag()</span> function.</p>
+<ol><li><p>Use the <code>NOTIFICATION_TYPE_ONGOING</code> parameter to create a notification with a progress bar. To be able to retrieve the notification handle later on to update the progress data, set a notification tag with the <code>notification_set_tag()</code> function.</p>
<p>To set the initial progress:</p>
<pre class="prettyprint">
ecore_timer_add(1, timeout_func, NULL);
</pre></li>
-<li>To update the progress bar, retrieve the notification handle with the <span style="font-family: Courier New,Courier,monospace">notification_load_by_tag()</span> function, set and get the progress data, and update the notification:
+<li>To update the progress bar, retrieve the notification handle with the <code>notification_load_by_tag()</code> function, set and get the progress data, and update the notification:
<pre class="prettyprint">
static
}
</pre></li></ol>
- <p class="figure">Figure: Progress bar</p>
+ <p align="center"><strong>Figure: Progress bar</strong></p>
<p align="center"><img alt="Progress bar" src="../../images/notification_bar_sd.png" /></p>
<h2 id="input_box" name="input_box">Creating an Active Notification with Text Input</h2>
<p>To create an active notification and an input text field, with which the user can directly reply to the notification:</p>
-<ol><li>To create an active notification, add the <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_ACTIVE</span> type to the display application list.
+<ol><li>To create an active notification, add the <code>NOTIFICATION_DISPLAY_APP_ACTIVE</code> type to the display application list.
<p>You can create up to 3 buttons, and each button must have an application control that can handle the event.</p>
<pre class="prettyprint">
notification_h notification = NULL;
/* Post a notification */
</pre></li></ol>
- <p class="figure">Figure: Text input box</p>
+ <p align="center"><strong>Figure: Text input box</strong></p>
<p align="center"><img alt="Text input box" src="../../images/active_notification_2.png" /></p>
<h2 id="template" name="template">Using a Notification Template</h2>
if (ret != APP_CONTROL_ERROR_NONE)
/* Error handling */
</pre></li>
-<li><p>To save the notification handle as a template and define a name for the template, use the <span style="font-family: Courier New,Courier,monospace">notification_save_as_template()</span> function:</p>
+<li><p>To save the notification handle as a template and define a name for the template, use the <code>notification_save_as_template()</code> function:</p>
<pre class="prettyprint">
ret = notification_save_as_template(notification, "CALL_ACCEPT");
if (ret != APP_CONTROL_ERROR_NONE)
/* Error handling */
</pre></li>
-<li><p>To use the template when creating a new notification, call the <span style="font-family: Courier New,Courier,monospace">notification_create_from_template()</span> function:</p>
+<li><p>To use the template when creating a new notification, call the <code>notification_create_from_template()</code> function:</p>
<pre class="prettyprint">
notification_h notification = NULL;
notification = notification_create_from_template("CALL_ACCEPT")
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
</div></div>
</div>
<p>The notifications and content sharing features cover the ways you can inform the user of important events and allow the user to share content between applications.</p>
-<p>The following notifications and content sharing features apply in <strong>mobile applications only</strong>:</p>
+<p>You can use the following notifications and content sharing features in your native applications:</p>
<ul>
<li><a href="noti_n.htm">Notifications</a>
<p>You can keep the user informed of important information with notifications. You can post notifications in the quick panel. You can also control the behavior of the notification by updating its content or showing a progress bar.</p></li>
-<li><a href="attach_panel_n.htm">Attach Panel</a>
+<li><a href="attach_panel_n.htm">Attach Panel</a> <strong>in mobile applications only</strong>
<p>The attach panel is a method that allows the user to attach various content into an application. You can attach images, take pictures, record voice, and select files on the attach panel. You can also select new applications to be launched.</p></li>
-<li><a href="minicontrol_n.htm">Minicontrol Window</a>
+<li><a href="minicontrol_n.htm">Minicontrol Window</a> <strong>in mobile applications only</strong>
<p>A minicontrol is a small application view that can be shown in other applications, or the quick panel or lock screen. You can create a minicontrol and display it in the quick panel or lock screen. You can also host minicontrols in your application.</p></li>
</ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
</div></div>
</div>
<p>The performance features introduce how you can use tracepoints. You can generate traces and visualize them to help you to optimize your application performance.</p>
-<p>The following performance features apply in <strong>mobile applications only</strong>:</p>
+<p>You can use the following performance features in your native applications:</p>
<ul>
<li><a href="tracepoints_n.htm">Tracepoints</a>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Wearable Native</a></li>
<li><a href="../../../../org.tizen.studio/html/native_tools/t_trace_n.htm">Optimizing Performance with T-trace</a></li>
</ul>
</div></div>
<p>You can perform trace operations in Tizen native applications with the <a href="../../../../org.tizen.studio/html/native_tools/t_trace_n.htm">T-trace tool</a>. The tool allows you to generate traces and visualize them.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>With the T-trace API, you can <a href="#insert">create custom tracepoints in your application</a>. The tracepoints allow the framework to write application traces to the system trace buffer to align them with the T-trace traces from the Tizen platform.</p>
- <p class="figure">Figure: T-trace architecture</p>
+ <p align="center"><strong>Figure: T-trace architecture</strong></p>
<p align="center">
<img src="../../images/trace.png" alt="T-trace architecture" />
</p>
<p>The following T-trace function types are provided for application-level tracepoints:</p>
<ul>
- <li>Synchronous tracing functions: <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_end()</span></li>
- <li>Asynchronous tracing functions: <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span></li>
- <li>Counter tracking function: <span style="font-family: Courier New,Courier,monospace">trace_update_counter()</span></li>
+ <li>Synchronous tracing functions: <code>trace_begin()</code> and <code>trace_end()</code></li>
+ <li>Asynchronous tracing functions: <code>trace_async_begin()</code> and <code>trace_async_end()</code></li>
+ <li>Counter tracking function: <code>trace_update_counter()</code></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the T-trace functionality:</p>
<ol>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a> API, include the <span style="font-family: Courier New,Courier,monospace"><trace.h></span> header file in your application:
+<li>To use the functions and data types of the T-trace API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">wearable</a> applications), include the <code><trace.h></code> header file in your application:
<pre class="prettyprint">
#include <trace.h>
</pre>
</li>
-<li>Make sure you have the <span style="font-family: Courier New,Courier,monospace">libttrace.so</span> T-trace library. The T-trace library provides a tracing function to write traces to the system trace buffer.</li>
+<li>Make sure you have the <code>libttrace.so</code> T-trace library. The T-trace library provides a tracing function to write traces to the system trace buffer.</li>
<li>Check that the following prerequisites are fulfilled:
<ul>
<li>linux-2.6.27 kernel</li>
- <li><span style="font-family: Courier New,Courier,monospace">debugfs</span> mounted on <span style="font-family: Courier New,Courier,monospace">/sys/kernel/debug</span></li>
+ <li><code>debugfs</code> mounted on <code>/sys/kernel/debug</code></li>
</ul>
</li>
</ol>
<ul>
<li>Use synchronous tracing.
-<p>If the trace event starts and ends in a same context within the same process, thread, and function, use the <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_end()</span> functions to track the event. Note that every <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> function matches up with a <span style="font-family: Courier New,Courier,monospace">trace_end()</span> function that occurs after it.</p>
+<p>If the trace event starts and ends in a same context within the same process, thread, and function, use the <code>trace_begin()</code> and <code>trace_end()</code> functions to track the event. Note that every <code>trace_begin()</code> function matches up with a <code>trace_end()</code> function that occurs after it.</p>
<pre class="prettyprint">
int
</li>
<li>Use asynchronous tracing.
-<p>If the trace event starts and ends in a different context, use the <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span> functions to track the event. Note that every <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> function matches with a <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span> function that has the same name and cookie. As the cookie provides an identifier among several events, it must have a unique integer value.</p>
+<p>If the trace event starts and ends in a different context, use the <code>trace_async_begin()</code> and <code>trace_async_end()</code> functions to track the event. Note that every <code>trace_async_begin()</code> function matches with a <code>trace_async_end()</code> function that has the same name and cookie. As the cookie provides an identifier among several events, it must have a unique integer value.</p>
<pre class="prettyprint">
void
function1()
</pre>
</li>
<li>Track the trace counter.
-<p>To track the change of an integer counter on your application, use the <span style="font-family: Courier New,Courier,monospace">trace_update_counter()</span> function:</p>
+<p>To track the change of an integer counter on your application, use the <code>trace_update_counter()</code> function:</p>
<pre class="prettyprint">
void
function2(int count)
<li>Creating and managing accounts
<p>You can <a href="#add">create an account</a>, set its properties, and insert it to the database.</p>
<p>You can also <a href="#secret">manage the account secrecy level</a> and <a href="#remove">remove accounts</a>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.</td>
- </tr>
- </tbody>
- </table></li>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.
+ </div>
+ </li>
<li>Retrieving account information
<p>You can <a href="#get">retrieve information for each existing account</a> and implement a callback function.</p>
<p>You can also get accounts based on a <a href="#retrieve">specific account provider package name</a>, or account providers based on a <a href="#capability">specific capability</a>.</p></li>
<li>Receiving account change notifications</li>
<li>Modifying account properties
- <p>The <
span style="font-family: Courier New,Courier,monospace">account.h</span> header file handles account-related information. You can <a href="#queries">query the account details</a> with database queries, <a href="#type">retrieve the account type</a>, and <a href="#update">update the account information</a>.</p>
+ <p>The <
code>account.h</code> header file handles account-related information. You can <a href="#queries">query the account details</a> with database queries, <a href="#type">retrieve the account type</a>, and <a href="#update">update the account information</a>.</p>
<p>The following table lists the account properties that can be modified.</p>
+ <p align="center" class="Table"><strong>Table: Account properties</strong></p>
<table id="account_properties" border="1">
- <caption>
- Table: Account properties
- </caption>
<tbody>
<tr>
<th>Account property</th>
</tr>
<tr>
<td>User name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>Yes</td>
<td>Identity of an account.
<p>If the display name and email address are not set for an account, the user name is shown for the account on the Accounts screen in the Setting application.</p>
</tr>
<tr>
<td>Display name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Display name of an account.
<p>Display name is shown for the account on the Accounts screen in the Setting application.</p>
</tr>
<tr>
<td>Email address</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Email address of an account.
<p>If the display name is not set for an account, the email address is shown for the account on the Accounts screen in the Setting application.</p>
</tr>
<tr>
<td>Package name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>One of an account package IDs, like the app ID.
<p>If the package name is not set for an account, the app ID is used as a package name.</p>
</tr>
<tr>
<td>Icon path</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Icon path of an account.
<p>The icon is shown through the registered icon path as an account icon on the Accounts screen in the Setting application.</p>
</tr>
<tr>
<td>Domain name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Domain name of an account.
</td>
</tr>
<tr>
<td>Access token</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Access token of an account.
</td>
</tr>
<tr>
<td>Auth type</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td><code>Integer</code></td>
<td>No</td>
<td>Authentication type, such as oauth or xauth.
</td>
</tr>
<tr>
<td>Capability</td>
- <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span>-<span style="font-family: Courier New,Courier,monospace">integer</span> pairs</td>
+ <td>Key-value <code>string</code>-<code>integer</code> pairs</td>
<td>No</td>
<td>Capability of an account.
</td>
</tr>
<tr>
<td>Secret</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td><code>Integer</code></td>
<td>No</td>
<td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.
</td>
</tr>
<tr>
<td>Sync support</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td><code>Integer</code></td>
<td>No</td>
<td>Current synchronization status.</td>
</tr>
<tr>
<td>Source</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Source of an account.
</td>
</tr>
<tr>
<td>User text</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>String array which you can use freely.
</td>
</tr>
<tr>
<td>User int</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td><code>Integer</code></td>
<td>No</td>
<td>Integer array which you can use freely.
</td>
</tr>
<tr>
<td>Custom</td>
- <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span> pairs</td>
+ <td>Key-value <code>string</code> pairs</td>
<td>No</td>
<td>Key-value pairs which you can use freely.
</td>
<h2 id="provider" name="provider">Account Providers</h2>
<p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
<p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p>
+ <p align="center" class="Table"><strong>Table: Account provider properties</strong></p>
<table border="1">
- <caption>
- Table: Account provider properties
- </caption>
<tbody>
<tr>
<th>Account property</th>
</tr>
<tr>
<td>Multiple accounts support</td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span> </td>
+ <td><code>bool</code> </td>
<td>Yes</td>
<td>Indicates whether multiple accounts are supported.</td>
</tr>
<tr>
<td>Icon</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>Yes</td>
<td>File path of the account provider icon.
<p>The icon size is:</p>
</tr>
<tr>
<td>Small icon</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>Yes</td>
<td>File path of the account provider icon.
<p>The icon size is:</p>
</tr>
<tr>
<td>Display name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>Yes</td>
<td>Display name of the account provider.</td>
</tr>
<tr>
<td>Capabilities</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td><code>String</code></td>
<td>No</td>
<td>Capability of the account provider.
<p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>
<ul>
<li>Contact capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or "http://tizen.org/account/capability/contact"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or "http://tizen.org/account/capability/contact"</code></p>
<p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
</li>
<li>Calendar capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or "http://tizen.org/account/capability/calendar"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or "http://tizen.org/account/capability/calendar"</code></p>
<p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
</li>
<li>Email capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or "http://tizen.org/account/capability/email"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or "http://tizen.org/account/capability/email"</code></p>
</li>
<li>Photo capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or "http://tizen.org/account/capability/photo"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or "http://tizen.org/account/capability/photo"</code></p>
</li>
<li>Video capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or "http://tizen.org/account/capability/video"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or "http://tizen.org/account/capability/video"</code></p>
</li>
<li>Music capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or "http://tizen.org/account/capability/music"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or "http://tizen.org/account/capability/music"</code></p>
</li>
<li>Document capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or "http://tizen.org/account/capability/document"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or "http://tizen.org/account/capability/document"</code></p>
</li>
<li>Message capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or "http://tizen.org/account/capability/message"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or "http://tizen.org/account/capability/message"</code></p>
</li>
<li>Game capability:
- <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or "http://tizen.org/account/capability/game"</span></p>
+ <p><code>ACCOUNT_SUPPORTS_CAPABILITY_GAME or "http://tizen.org/account/capability/game"</code></p>
</li>
</ul>
</td>
<h2 id="appcontrol" name="appcontrol">Account Application Control</h2>
<p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor to <a href="#screen">add the application on the <strong>Account</strong> screen</a>.</p>
- <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operations.</p>
+ <p>This application control supports the <code>http://tizen.org/appcontrol/operation/account/add</code> and <code>http://tizen.org/appcontrol/operation/account/configure</code> operations.</p>
<h3 id="signin" name="signin">ACCOUNT_OPERATION_SIGNIN Operation</h3>
- <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings > Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
+ <p>The <code>http://tizen.org/appcontrol/operation/account/add</code> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings > Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
- <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+ <p>You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>.</p>
- <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
- <p>The following table shows the <span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span> (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p>
+ <p>The results of the operation are returned in the <code>app_control_get_operation()</code> event handler.</p>
+ <p>The following table shows the <code>ACCOUNT_OPERATION_SIGNIN</code> (<code>http://tizen.org/appcontrol/operation/account/add</code>) operation.</p>
+ <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_SIGNIN operation</strong></p>
<table border="1">
- <caption>
- Table: ACCOUNT_OPERATION_SIGNIN operation
- </caption>
-
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span></td>
+ <td><code>ACCOUNT_OPERATION_SIGNIN</code></td>
<td>Account ID of the added account.</td>
</tr>
</tbody>
</table>
<h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
- <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p>
+ <p>The <code>http://tizen.org/appcontrol/operation/account/configure</code> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p>
<p>In <strong>Settings > Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>
- <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
- <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
- <p>The following table shows the <span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span> (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>
+ <p> You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>. </p>
+ <p>The results of the operation are returned in the <code>app_control_get_operation()</code> event handler.</p>
+ <p>The following table shows the <code>ACCOUNT_OPERATION_VIEW</code> (<code>http://tizen.org/appcontrol/operation/account/configure</code>) operation.</p>
+ <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_VIEW operation</strong></p>
<table border="1">
- <caption>
- Table: ACCOUNT_OPERATION_VIEW operation
- </caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span></td>
+ <td><code>ACCOUNT_OPERATION_VIEW</code></td>
<td>Account ID for setting account information.</td>
</tr>
</tbody>
<p>To enable your application to use the account management functionality:</p>
<ol>
<li>
-<p>To use the Account Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Account Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/account.read</privilege>
</privileges>
</pre>
</li>
-<li> <p>To use the functions and data types of the Account Manager API, include the <span style="font-family: Courier New,Courier,monospace"><account.h></span> header file in your application:</p>
+<li> <p>To use the functions and data types of the Account Manager API, include the <code><account.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <account.h>
</pre>
-<p>To ensure that an Account Manager function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>
+<p>To ensure that an Account Manager function has been executed properly, make sure that the return is equal to <code>ACCOUNT_ERROR_NONE</code>.</p>
</li>
<li><p>Declare the necessary global variables, including the account handle:</p>
static int account_id = 0;
int ret = 0;
</pre>
-<p>When you no longer need it, destroy the account handle with the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:</p>
+<p>When you no longer need it, destroy the account handle with the <code>account_destroy()</code> function:</p>
<pre class="prettyprint">
ret = account_destroy(account);
</pre>
<ol>
-<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:
+<li>Create an account using the <code>account_create()</code> function and the previously defined account handle:
<pre class="prettyprint">
ret = account_create(&account);
</pre>
</li>
-<li>When the account is configured, use the <span style="font-family: Courier New,Courier,monospace;">account_insert_to_db()</span> function to insert the account to the account database. Use the account ID as the second parameter (<span style="font-family: Courier New,Courier,monospace;">account_id</span>):
+<li>When the account is configured, use the <code>account_insert_to_db()</code> function to insert the account to the account database. Use the account ID as the second parameter (<code>account_id</code>):
<pre class="prettyprint">
ret = account_insert_to_db(account, &account_id);
<p>To get account information, such as user name, display name, domain name, and email address:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">account_get_total_count_from_db()</span> function to get the total number of inserted records.
-<p>To get individual records, use the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, which iterates through all the records and invokes a callback function for each account.</p>
+<li>Use the <code>account_get_total_count_from_db()</code> function to get the total number of inserted records.
+<p>To get individual records, use the <code>account_foreach_account_from_db()</code> function, which iterates through all the records and invokes a callback function for each account.</p>
<pre class="prettyprint">
int total_count = -1;
</pre>
</li>
-<li>Define the callback function for the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function to retrieve information for each account.
+<li>Define the callback function for the <code>account_foreach_account_from_db()</code> function to retrieve information for each account.
-<p>To get more details, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_user_name()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_display_name()</span>, and <span style="font-family: Courier New,Courier,monospace;">account_get_icon_path()</span> functions:</p>
+<p>To get more details, use the <code>account_get_account_id()</code>, <code>account_get_user_name()</code>, <code>account_get_display_name()</code>, and <code>account_get_icon_path()</code> functions:</p>
<pre class="prettyprint">
static bool
<p>To retrieve accounts by a specific account provider:</p>
<ol>
- <li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting account data:
+ <li>Define the <code>account_cb()</code> callback for getting account data:
<pre class="prettyprint">
static bool
account_callback(account_h account, void* user_data) /* account_cb() callback */
/* Called once for each account in the database */
}
</pre></li>
- <li>Retrieve the accounts of a specific account provider using the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function, and specifying the callback for getting account data and the package name of the account provider:
+ <li>Retrieve the accounts of a specific account provider using the <code>account_query_account_by_package_name()</code> function, and specifying the callback for getting account data and the package name of the account provider:
<pre class="prettyprint">
int ret = -1;
char* package_name = "package_name";
<p>To retrieve account providers by a specific capability:</p>
<ol>
- <li>Define the <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers:
+ <li>Define the <code>account_type_cb()</code> callback for getting account providers:
<pre class="prettyprint">
+/* account_type_cb() callback */
static bool
-account_type_callback(account_type_h account_type, void* user_data) /* account_type_cb() callback */
+account_type_callback(account_type_h account_type, void* user_data)
{
/* Called once for each account type in the database */
}
</pre>
</li>
- <li>Retrieve the account providers of a specific capability by using the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function, and specifying the callback for getting account providers:
+ <li>Retrieve the account providers of a specific capability by using the <code>account_type_query_by_provider_feature()</code> function, and specifying the callback for getting account providers:
<pre class="prettyprint">
int ret = -1;
char* capability = "http://tizen.org/account/capability/contact";
<h2 id="remove" name="remove">Removing an Account</h2>
-<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>
+<p>To remove an account, use the <code>account_delete_from_db_by_id()</code>, <code>account_delete_from_db_by_user_name()</code>, or <code>account_delete_from_db_by_package_name()</code> function. They all remove a given account record.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To get the ID needed as a parameter of the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span> function, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span> function.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ To get the ID needed as a parameter of the <code>account_delete_from_db_by_id()</code> function, use the <code>account_get_account_id()</code> function.
+ </div>
<pre class="prettyprint">
ret = account_delete_from_db_by_id(account_id);
<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>
</pre>
<p>The required information includes:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">appid="app-id name"</span>
-<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid="org.tizen.account"</span>).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">providerid="url style string"</span>
-<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid="http://www.tizen.org"</span>).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support="true or false"</span>
-<p>Multiple account support (if your application can manage 2 or more accounts, set to <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise set to <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
-<li><span style="font-family: Courier New,Courier,monospace"><icon section="account">application icon name</icon></span>
+<ul><li><code>appid="app-id name"</code>
+<p>Application ID (for example, <code>appid="org.tizen.account"</code>).</p></li>
+<li><code>providerid="url style string"</code>
+<p>Provider identification string (for example, <code>providerid="http://www.tizen.org"</code>).</p></li>
+<li><code>multiple-accounts-support="true or false"</code>
+<p>Multiple account support (if your application can manage 2 or more accounts, set to <code>true</code>; otherwise set to <code>false</code>)</p></li>
+<li><code><icon section="account">application icon name</icon></code>
<p>Icon displayed on the Add account screen.</p>
-<p>The icon size must be 72 x 72 px and the icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace"><icon section="account-small">application small icon name</icon></span>
+<p>The icon size must be 72 x 72 px and the icon file must be in the <code>{app-root}\shared\res\</code> directory.</p></li>
+<li><code><icon section="account-small">application small icon name</icon></code>
<p>Small icon displayed on the Other application screen to represent the account provider.</p>
-<p>The small icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace"><label xml:lang="en-gb">Application name</label></span>
+<p>The small icon file must be in the <code>{app-root}\shared\res\</code> directory.</p></li>
+<li><code><label xml:lang="en-gb">Application name</label></code>
<p>Application name displayed on the Add account screen, according to the selected language.</p>
<p>An account provider must have at least one label tag.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace"><capability>http://tizen.org/account/capability/contact</capability></span>
+<li><code><capability>http://tizen.org/account/capability/contact</capability></code>
<p>For more information, see <a href="#provider">Account Providers</a>.</p></li></ul>
</li>
<li>Create the sign-in screen UI.
-<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>
+<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<code>ACCOUNT_OPERATION_SIGNIN</code>) defined in the <code>account-types.h</code> header file, so the sign-in screen must be displayed.</p>
<p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p>
</li>
</ol>
<p>To perform queries, you need existing content in the database. To access the existing account, obtain it from the database. This can be done using a few functions, depending on the user requirements.</p>
<p>To create new content to the database:</p>
-<ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">Create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, email). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
+<ol type="a"><li><p>The <code>Create_Account()</code> function creates a new account from a given <code>account_h</code> handle and account details (name, display name, domain, email). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
-<p>After the account is created, it is added to the database. When no longer needed, destroy the account handle using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>
+<p>After the account is created, it is added to the database. When no longer needed, destroy the account handle using the <code>account_destroy(account)</code> function.</p>
<pre class="prettyprint">
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);
List_Accounts(&rec);
</pre></li>
-<li><p>If the account list is not empty (<span style="font-family: Courier New,Courier,monospace;">NULL</span>), the <span style="font-family: Courier New,Courier,monospace;">List_Accounts()</span> function counts all records in the database. Obtain the records using the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function.</p>
+<li><p>If the account list is not empty (<code>NULL</code>), the <code>List_Accounts()</code> function counts all records in the database. Obtain the records using the <code>account_foreach_account_from_db()</code> function.</p>
<pre class="prettyprint">
static void
}
</pre></li>
-<li><p>Call the <span style="font-family: Courier New,Courier,monospace;">on_account_read()</span> callback function for each found record. If the second parameter (<span style="font-family: Courier New,Courier,monospace;">user_data</span>) is not <span style="font-family: Courier New,Courier,monospace;">NULL</span>, the function is counting the existing accounts. String data returned by the <span style="font-family: Courier New,Courier,monospace;">account_get_xxx()</span> functions must be released with the <span style="font-family: Courier New,Courier,monospace;">free()</span> function. Data prepared with the <span style="font-family: Courier New,Courier,monospace;">sprintf()</span> function can, for example, be sent to <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
+<li><p>Call the <code>on_account_read()</code> callback function for each found record. If the second parameter (<code>user_data</code>) is not <code>NULL</code>, the function is counting the existing accounts. String data returned by the <code>account_get_xxx()</code> functions must be released with the <code>free()</code> function. Data prepared with the <code>sprintf()</code> function can, for example, be sent to <code>stdout</code>.</p>
<pre class="prettyprint">
static bool
}
</pre></li></ol>
</li>
-<li>Query the account by its ID with the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_account_id()</span> function. This function requires an existing handle to an account as an input parameter.
+<li>Query the account by its ID with the <code>account_query_account_by_account_id()</code> function. This function requires an existing handle to an account as an input parameter.
<pre class="prettyprint">
for (i = 0; i < rec.count; i++) {
<li>Query the account by various attributes:
<ul><li>Query by user name.
-<p>Querying data by user name requires a valid user name and callback function. In this example, the same callback is used as in the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, but it is cast without the third parameter (user data).</p>
+<p>Querying data by user name requires a valid user name and callback function. In this example, the same callback is used as in the <code>account_foreach_account_from_db()</code> function, but it is cast without the third parameter (user data).</p>
<pre class="prettyprint">
account_query_account_by_user_name(on_account_read, "Human", NULL);
</li>
<li>Query by package name.
-<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <span style="font-family: Courier New,Courier,monospace;">account_set_package_name()</span> function. To list accounts by package name, the user can provide a name by themselves or obtain it with the <span style="font-family: Courier New,Courier,monospace;">account_get_package_name()</span> function.</p>
+<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <code>account_set_package_name()</code> function. To list accounts by package name, the user can provide a name by themselves or obtain it with the <code>account_get_package_name()</code> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_package_name()</span> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>
+<p>The <code>account_query_account_by_package_name()</code> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>
<p>The package name has to be released when no longer needed.</p>
<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>
<li>Query by capability type.
-<p>This function is similar to the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_capability()</span> function, but returns all accounts with a specified capability, without checking their state.</p>
+<p>This function is similar to the <code>account_query_account_by_capability()</code> function, but returns all accounts with a specified capability, without checking their state.</p>
<pre class="prettyprint">
account_query_account_by_capability_type(on_account_read, "Next", NULL);
</li>
<li>Query capability by account ID.
-<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_capability_by_account_id()</span> function is different from the previous functions. It lists all capabilities from an account with a specified ID, and requires a different type of callback. The callback function prepares data to be sent to an output.</p>
+<p>The <code>account_query_capability_by_account_id()</code> function is different from the previous functions. It lists all capabilities from an account with a specified ID, and requires a different type of callback. The callback function prepares data to be sent to an output.</p>
<pre class="prettyprint">
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;
}
<p>To manage account secrecy:</p>
<ol>
-<li>Select the secrecy level using the <
span style="font-family: Courier New,Courier,monospace;">account_secrecy_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">wearable</a> applications):
+<li>Select the secrecy level using the <
code>account_secrecy_state_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">wearable</a> applications):
<pre class="prettyprint">
static
List_Accounts(NULL);
</pre>
-<p>Secrecy is only linked with the visibility on the account settings screen. The account is still visible and can be accessed using a query or a <
span style="font-family: Courier New,Courier,monospace;">foreach</span> function. For further information on how to add your application to the account screen, see <a href="#screen">Adding an Application on the Account Screen</a>.</p>
+<p>Secrecy is only linked with the visibility on the account settings screen. The account is still visible and can be accessed using a query or a <
code>foreach</code> function. For further information on how to add your application to the account screen, see <a href="#screen">Adding an Application on the Account Screen</a>.</p>
<pre class="prettyprint">
/* List_Account() console output */
<p>To update and track account data:</p>
<ol>
-<li>Subscribe notifications to track account changes. Create an <span style="font-family: Courier New,Courier,monospace;">account_subscribe_h</span> instance and register a notification.
+<li>Subscribe notifications to track account changes. Create an <code>account_subscribe_h</code> instance and register a notification.
<pre class="prettyprint">
account_subscribe_h account_subscribe;
</li>
<li>Get the type information.
-<p>If the account type with a specified ID exists, you can get it from the database with the <span style="font-family: Courier New,Courier,monospace;">account_query_by_app_id()</span> function.</p>
+<p>If the account type with a specified ID exists, you can get it from the database with the <code>account_query_by_app_id()</code> function.</p>
<p>It is possible to set, for example:</p>
<ul>
<li>Multiple account support (this is only a flag)</li>
</ul>
-<p>To get the account types by the application ID, use the <span style="font-family: Courier New,Courier,monospace;">account_type_query_by_app_id()</span> function:</p>
+<p>To get the account types by the application ID, use the <code>account_type_query_by_app_id()</code> function:</p>
<pre class="prettyprint">
int multiple_account_support = -1;
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/Social/Scheduler" target="_blank">Scheduler Sample Description</a></li>
</ul>
</div></div>
<p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event is recurring, separate instances are generated for each time the event occurs.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>The calendar information is stored in a calendar database. To manage the information in the database, you must <a href="#prerequisites">connect to the calendar service</a>. The calendar service module works in a way similar to a client-service architecture. In this architecture, the Tizen application is the client side and has to connect to the service before using calendar service APIs.</p>
<p>The following figure illustrates the calendar model.</p>
- <p class="figure">Figure: Calendar model</p>
+ <p align="center"><strong>Figure: Calendar model</strong></p>
<p align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
<p>The main features of the Calendar API include:</p>
<p>The following figure illustrates the different Calendar entities and their relationships.</p>
- <p class="figure">Figure: Calendar entities</p>
+ <p align="center"><strong>Figure: Calendar entities</strong></p>
<p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>
<h2 id="record2" name="record2">Records</h2>
<p>To manage the record using the handle, you can use the URI, views, or basic types:</p>
<ul>
<li id="uri" name="uri">URI
-<p>A record type is identified by a structure called the view. For example, the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view describes the properties of the calendar event record. Every view has a special field - <span style="font-family: Courier New,Courier,monospace">_uri</span> - that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to create or operate on.</p>
+<p>A record type is identified by a structure called the view. For example, the <code>_calendar_event</code> view describes the properties of the calendar event record. Every view has a special field - <code>_uri</code> - that uniquely identifies the view. In many cases, you must provide the <code>_uri</code> value to indicate what type of record you want to create or operate on.</p>
<pre class="prettyprint">
/* Create an event with the _calendar_event view */
calendar_record_h record = NULL;
<p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database "VIEW", which limits access and guarantees performance. A "record" represents a single row of the data-views.</p>
+ <p align="center" class="Table"><strong>Table: Calendar views</strong></p>
<table>
- <caption>
- Table: Calendar views
- </caption>
<tbody>
<tr>
<th>Editable view</th>
<th>Read-only view</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_todo</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_timezone</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_alarm</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_todo_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime_calendar_book_extended</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime_calendar_book_extended</span></td>
+ <td><code>_calendar_book</code><br/>
+<code>_calendar_event</code><br/>
+<code>_calendar_todo</code><br/>
+<code>_calendar_timezone</code><br/>
+<code>_calendar_attendee</code><br/>
+<code>_calendar_alarm</code><br/>
+<code>_calendar_extended_property</code></td>
+ <td><code>_calendar_updated_info</code><br/>
+<code>_calendar_event_calendar_book</code><br/>
+<code>_calendar_todo_calendar_book</code><br/>
+<code>_calendar_event_calendar_book_attendee</code><br/>
+<code>_calendar_instance_utime_calendar_book</code><br/>
+<code>_calendar_instance_localtime_calendar_book</code><br/>
+<code>_calendar_instance_utime_calendar_book_extended</code><br/>
+<code>_calendar_instance_localtime_calendar_book_extended</code></td>
</tr>
</tbody>
</table>
-<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime_calendar_book</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span></li></ul>
+<p>The <code>_calendar_updated_info</code> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>
+<ul><li><code>_calendar_event</code> + <code>_calendar_book</code> = <code>_calendar_event_calendar_book</code></li>
+<li><code>_calendar_instance_utime</code> + <code>_calendar_book</code> = <code>_calendar_instance_utime_calendar_book</code></li>
+<li><code>_calendar_event</code> + <code>_calendar_book</code> + <code>_calendar_attendee</code> = <code>_calendar_event_calendar_book_attendee</code></li></ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime</span> views are not available as editable views, but can be used in combination with other views in read-only views.</td>
- </tr>
- </tbody>
- </table>
-<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> record properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>
+ <div class="note">
+ <strong>Note</strong>
+ The <code>_calendar_instance_utime</code> and <code>_calendar_instance_localtime</code> views are not available as editable views, but can be used in combination with other views in read-only views.
+ </div>
+
+<p>The record types that have <code>*_id</code> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <code>event_id</code> or <code>todo_id</code> property (as children of the corresponding event or todo records).</p>
+<p>The <code>record</code> type properties are other records. For example, an event record has <code>attendee</code> and <code>alarm</code> record properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <code>calendar_view.h</code> header file.</p>
- <p class="figure">Figure: Properties</p>
+ <p align="center"><strong>Figure: Properties</strong></p>
<p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>
<p>The calendar service uses a version system in the following APIs:</p>
</pre>
<p>Whenever modifications are made in the database, the version number is increased. If sync applications, such as Google or Facebook, sync at version 13 and try to sync again every 1 minute, they want to get the changes from version 14 to the current version.</p>
-<p>To get the current version, the <
span style="font-family: Courier New,Courier,monospace">calendar_db_get_current_version()</span> function is used. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_by_version()</span> function retrieves the modified record list. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>
+<p>To get the current version, the <
code>calendar_db_get_current_version()</code> function is used. The <code>calendar_db_get_changes_by_version()</code> function retrieves the modified record list. The <code>calendar_db_get_changes_exception_by_version()</code> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>
</li>
<li id="types" name="types">Basic types
-<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> type holds either a long long int, or 3 integers (year, month, day).</p>
+<p>Records contain properties of basic types: <code>integer</code>, <code>lli</code> (long integer, long long int), <code>double</code>, <code>string</code>, <code>bool</code>, and <code>time</code>. The <code>time</code> type holds either a long long int, or 3 integers (year, month, day).</p>
<p>The following table lists the setter and getter functions for each type.</p>
+ <p align="center" class="Table"><strong>Table: Setter and getter functions</strong></p>
<table>
- <caption>
- Table: Setter and getter functions
- </caption>
<tbody>
<tr>
<th>Property</th>
<th>Getter</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_int()</span></td>
+ <td><code>integer</code></td>
+ <td><code>calendar_record_set_int()</code></td>
+ <td><code>calendar_record_get_int()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_lli()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_lli()</span></td>
+ <td><code>long long integer</code></td>
+ <td><code>calendar_record_set_lli()</code></td>
+ <td><code>calendar_record_get_lli()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_double()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_double()</span></td>
+ <td><code>double</code></td>
+ <td><code>calendar_record_set_double()</code></td>
+ <td><code>calendar_record_get_double()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_str()</span></td>
+ <td><code>string</code></td>
+ <td><code>calendar_record_set_str()</code></td>
+ <td><code>calendar_record_get_str()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_caltime()</span></td>
+ <td><code>calendar_time_s</code></td>
+ <td><code>calendar_record_set_caltime()</code></td>
+ <td><code>calendar_record_get_caltime()</code></td>
</tr>
</tbody>
</table>
-<p>These functions also require specifying which property to get and set, and for this, every getter and setter function needs a record and property ID. Create a property ID by combining the data-view and property name. For example, the property ID of an event <span style="font-family: Courier New,Courier,monospace">summary</span> property is <span style="font-family: Courier New,Courier,monospace">_calendar_event.summary</span>.</p>
+<p>These functions also require specifying which property to get and set, and for this, every getter and setter function needs a record and property ID. Create a property ID by combining the data-view and property name. For example, the property ID of an event <code>summary</code> property is <code>_calendar_event.summary</code>.</p>
-<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">summary</span> property of an event record:</p>
+<p>The following example sets the <code>summary</code> property of an event record:</p>
<pre class="prettyprint">
/* Create an event with the _calendar_event view */
calendar_record_set_str(event, _calendar_event.summary, "Meeting");
</pre>
-<p id="time">The calendar time structure property, <span style="font-family: Courier New,Courier,monospace">calendar_caltime_s</span>, is defined as follows:</p>
+<p id="time">The calendar time structure property, <code>calendar_caltime_s</code>, is defined as follows:</p>
<pre class="prettyprint">
struct _calendar_time_s {
calendar_time_type_e type;
};
typedef struct _calendar_time_s calendar_time_s;
</pre>
-<p>Use this structure when setting the calendar time (<span style="font-family: Courier New,Courier,monospace">_CALENDAR_PROPERTY_CALTIME</span>) properties of the records.</p>
-<p>The time structure can hold 2 types of data, as defined in the following table. These types are identified by the values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga809c1bb1db41169c65939b929520e9b6">calendar_time_type_e</a> variable, and they determine the usage of the structure.</p>
+<p>Use this structure when setting the calendar time (<code>_CALENDAR_PROPERTY_CALTIME</code>) properties of the records.</p>
+<p>The time structure can hold 2 types of data, as defined in the following table. These types are identified by the values of the <code>calendar_time_type_e</code> variable (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga809c1bb1db41169c65939b929520e9b6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga809c1bb1db41169c65939b929520e9b6">wearable</a> applications), and they determine the usage of the structure.</p>
+ <p align="center" class="Table"><strong>Table: Data types</strong></p>
<table>
- <caption>
- Table: Data types
- </caption>
<tbody>
<tr>
<th>Identifier</th>
<th>Purpose</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">long long int</span></td>
+ <td><code>CALENDAR_TIME_UTIME</code></td>
+ <td><code>long long int</code></td>
<td>utime</td>
<td>UTC time is used to describe non-all-day events.
<p>For non-all-day events, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>
-<p>For example, when setting the start time of an event, the local time zone must be stored in the <span style="font-family: Courier New,Courier,monospace">start_tzid</span> property.</p>
+<p>For example, when setting the start time of an event, the local time zone must be stored in the <code>start_tzid</code> property.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">struct</span></td>
+ <td><code>CALENDAR_TIME_LOCALTIME</code></td>
+ <td><code>struct</code></td>
<td>date</td>
<td>Date only (year, month, and day of the month) is used to describe all day events.
- <p>For all day events, the structure type field must be set to <span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>. Only the date (no time) is stored.</p>
+ <p>For all day events, the structure type field must be set to <code>CALENDAR_TIME_LOCALTIME</code>. Only the date (no time) is stored.</p>
<p>Both the start and end time of the event must be set, and they do not have to be equal. If they are not, the event lasts more than 1 day. Note that in such cases there are no instances created, as this is still a non-recurring event.</p></td>
</tr>
</tbody>
</table>
-<p>When converting local time to UTC time, use the function shown in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first parameter). The function uses the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API.</p>
+<p>When converting local time to UTC time, use the function shown in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first parameter). The function uses the i18n API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">wearable</a> applications).</p>
<pre class="prettyprint">
#define ms2sec(ms) (long long int)(ms / 1000.0)
{
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);
<h3 id="children" name="children">Child Records</h3>
-<p>A certain record type can be a parent of other records. For example, the attendee records can hold an event identifier in their <span style="font-family: Courier New,Courier,monospace">event_id</span> property. The event is the parent record of the attendee child records.</p>
+<p>A certain record type can be a parent of other records. For example, the attendee records can hold an event identifier in their <code>event_id</code> property. The event is the parent record of the attendee child records.</p>
<p>The following code example creates an event and inserts an attendee record into it as a child record:</p>
<p>A calendar book is a placeholder for other calendar records. Every event and todo must belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>
+ <p align="center" class="Table"><strong>Table: Calendar books</strong></p>
<table>
- <caption>
- Table: Calendar books
- </caption>
<tbody>
<tr>
<th>Book</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td>
+ <td><code>DEFAULT_EVENT_CALENDAR_BOOK_ID</code></td>
<td>Event book</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td>
+ <td><code>DEFAULT_TODO_CALENDAR_BOOK_ID</code></td>
<td>Todo book</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td>
+ <td><code>DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</code></td>
<td>Birthday book</td>
</tr>
</tbody>
calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &calendar_book_list);
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function, you need as parameters the URI of the view to get records from, the index from which results are received, the maximum number of results, and the record list.</p>
+<p>In the <code>calendar_db_get_all_records()</code> function, you need as parameters the URI of the view to get records from, the index from which results are received, the maximum number of results, and the record list.</p>
<h2 id="event" name="event">Event Instances and Reminders</h2>
<p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than 1 instance of the event. Each instance has its corresponding instance record.</p>
<p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each relevant database. Generated instances based on the rrule are also stored in the instance database.</p>
- <p class="figure">Figure: Views and databases for event instances</p>
+ <p align="center"><strong>Figure: Views and databases for event instances</strong></p>
<p align="center"><img alt="Views and databases for event instances" src="../../images/calendar_db.png" /></p>
<p>The following table illustrates an example of a recurring event and its instances.</p>
+ <p align="center" class="Table"><strong>Table: Event and instance example</strong></p>
<table>
- <caption>
- Table: Event and instance example
- </caption>
<tbody>
<tr>
<th>Event</th>
</tbody>
</table>
<p>The recurrence model in the Calendar API is compliant with the <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">iCalendar specification</a>. The following event properties have the same functionality as their corresponding values in iCalendar:</p>
-
-<table>
- <caption>
+ <p align="center" class="Table"><strong>
Table: Recurrence rules
- </caption>
+ </strong></p>
+<table>
<tbody>
<tr>
<th>Recurrence rule property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">freq</span></td>
+ <td><code>freq</code></td>
<td>Yearly, monthly, weekly, or daily</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">count</span></td>
+ <td><code>count</code></td>
<td>Until count. If the count is 3, 3 instances are generated.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">interval</span></td>
+ <td><code>interval</code></td>
<td>Interval is a positive integer representing how often the recurrence rule repeats</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">byday</span></td>
+ <td><code>byday</code></td>
<td>MO, TU, WE, TH, FR, SA, or SU</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bymonthday</span></td>
+ <td><code>bymonthday</code></td>
<td>Days of the month</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">byyearday</span></td>
+ <td><code>byyearday</code></td>
<td>Days of the year</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">byweekno</span></td>
+ <td><code>byweekno</code></td>
<td>Ordinals specifying weeks of the year</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bymonth</span></td>
+ <td><code>bymonth</code></td>
<td>Months of the year</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bysetpos</span></td>
+ <td><code>bysetpos</code></td>
<td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wkst</span></td>
+ <td><code>wkst</code></td>
<td>Day on which the workweek starts</td>
</tr>
</tbody>
<p>If 1 of the instances of a recurring event is modified (such as its summary or date) or deleted, it is called an exception. For example, if the second instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>
+ <p align="center" class="Table"><strong>Table: Exception example</strong></p>
<table>
- <caption>
- Table: Exception example
- </caption>
<tbody>
<tr>
<th>Event</th>
</tbody>
</table>
-<p>To get the changes in an exception, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function. The instances and exceptions are deleted together when the original event is deleted.</p>
+<p>To get the changes in an exception, use the <code>calendar_db_get_changes_exception_by_version()</code> function. The instances and exceptions are deleted together when the original event is deleted.</p>
<h3 id="remind" name="remind">Reminders</h3>
<p>The following figure illustrates how the alarm process works.</p>
- <p class="figure">Figure: Alarm process</p>
+ <p align="center"><strong>Figure: Alarm process</strong></p>
<p align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
<p>To get a reminder when an alarm is triggered, the application must set the reminder mime name. After the reminder mime name is set, insert an alarm as a child of an event record:</p>
<li>Filtering
<p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows an example of how the operator precedence works.</p>
+ <p align="center" class="Table"><strong>Table: Filter conditions</strong></p>
<table>
- <caption>
- Table: Filter conditions
- </caption>
<tbody>
<tr>
<th>Condition</th>
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 */
<h2 id="change" name="change">Database Change Notifications</h2>
-<p>To detect the <a href="#monitor_event">event</a> and <a href="#monitor">todo</a> changes in the calendar database, register a callback with the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function. To deregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_remove_changed_cb()</span> function.</p>
+<p>To detect the <a href="#monitor_event">event</a> and <a href="#monitor">todo</a> changes in the calendar database, register a callback with the <code>calendar_db_add_changed_cb()</code> function. To deregister the callback and ignore database changes, use the <code>calendar_db_remove_changed_cb()</code> function.</p>
<p>Clients wait for calendar change notifications on the client side. If the calendar is changed by another module, the server publishes an inotify event. The Inotify module broadcasts to the subscribed modules, and an internal inotify handler is called at the client side. A user callback function is called with the user data.</p>
<pre class="prettyprint">
/* Add callback function */
<p>To enable your application to use the calendar functionality:</p>
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Calendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/calendar.read</privilege>
</li>
<li>
-<p>To use the functions and data types of the Calendar API, include the <span style="font-family: Courier New,Courier,monospace"><calendar.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Calendar API, include the <code><calendar.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <calendar.h>
</pre>
-<p>To ensure that a Calendar function has been executed properly, make sure that the return value is equal to <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If the function returns an error, handle it accordingly.</p>
+<p>To ensure that a Calendar function has been executed properly, make sure that the return value is equal to <code>CALENDAR_ERROR_NONE</code>. If the function returns an error, handle it accordingly.</p>
</li>
<li>
-<p>To access the calendar database, connect to the calendar service using the <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> function:</p>
+<p>To access the calendar database, connect to the calendar service using the <code>calendar_connect()</code> function:</p>
<pre class="prettyprint">
int error_code;
error_code = calendar_connect();
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_connect failed: %x\n", error_code);
</pre>
-<p>When the calendar service is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> function:</p>
+<p>When the calendar service is no longer needed, disconnect from the service using the <code>calendar_disconnect()</code> function:</p>
<pre class="prettyprint">
error_code = calendar_disconnect();
if (error_code != CALENDAR_ERROR_NONE)
<p>Creating a new event involves creating an event handle, setting the event properties, and inserting the event into the calendar database.</p>
-<p>Some event properties are defined as child records that are associated with the parent record. For a detailed list of the event properties, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_event">_calendar_event</a> view description in the Calendar API. If the property type is <span style="font-family: Courier New,Courier,monospace">child list</span>, the property is defined as a child record.</p>
+<p>Some event properties are defined as child records that are associated with the parent record. For a detailed list of the event properties, see the <code>_calendar_event</code> view description in the Calendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_event">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_event">wearable</a> applications). If the property type is <code>child list</code>, the property is defined as a child record.</p>
<p>To create a new event:</p>
<ol>
<li>
-<p>Create an event handle using the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> property as the first parameter and the event handle variable as the second parameter:</p>
+<p>Create an event handle using the <code>calendar_record_create()</code> function with the <code>_calendar_event._uri</code> property as the first parameter and the event handle variable as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h event = NULL;
error_code = calendar_record_create(_calendar_event._uri, &event);
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create failed: %x\n", error_code);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Records created with the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function are memory objects, with <span style="font-family: Courier New,Courier,monospace">calendar_record_h</span> type variables as their handles. If you changes these objects, the changes are not reflected in the calendar database until you explicitly insert or update the objects to the database using the <span style="font-family: Courier New,Courier,monospace"> calendar_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Records created with the <code>calendar_record_create()</code> function are memory objects, with <code>calendar_record_h</code> type variables as their handles. If you changes these objects, the changes are not reflected in the calendar database until you explicitly insert or update the objects to the database using the <code>calendar_db_insert_record()</code> or <code>calendar_db_update_record()</code> function.
+ </div>
</li>
<ul>
<li>
<p>Set the subject.</p>
-<p>To set the subject for the event, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_event.summary</span> property as the second parameter:</p>
+<p>To set the subject for the event, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.summary</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = calendar_record_set_str(event, _calendar_event.summary, "summary");
if (error_code != CALENDAR_ERROR_NONE)
</li>
<li>
<p>Set the description.</p>
-<p>To set the description for the event, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_event.description</span> property as the second parameter:</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>
</li>
<li>
<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 <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_event.start_tzid</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_event.end_tzid</span> properties as the second parameter. If you do not set the time zone, the system uses UTC.</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);
</li>
<li>
<p>Set the start and end times.</p>
-<p>To set the start and end times for the event, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_event.start_time</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_event.end_time</span> properties as the second parameter:</p>
+<p>To set the start and end times for the event, use the <code>calendar_record_set_caltime()</code> function with the <code>_calendar_event.start_time</code> and <code>_calendar_event.end_time</code> properties as the second parameter:</p>
<pre class="prettyprint">
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 end_time failed: %x\n", error_code);
</pre>
-<p>The <
a href="../../../../org.tizen.native.mobile.apireference/structcalendar__time__s.html">calendar_time_s</a> structure has <a href="#time">2 types</a>.</p>
+<p>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) has <a href="#time">2 types</a>.</p>
</li>
<li>
<p>To create a recurring event:</p>
<ol type="a">
<li>
-<p>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">frequency</a>.</p>
+<p>Set the frequency (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">wearable</a> applications).</p>
<p>In the following example, the event is set to occur every month on the 3<sup>rd</sup>, 4<sup>th</sup>, and 5<sup>th</sup> day:</p>
<pre class="prettyprint">
error_code = calendar_record_set_int(event, _calendar_event.freq,
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>
-<p>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">range of recurrence</a>.</p>
+<p>Set the range of recurrence (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">wearable</a> applications).</p>
<p>In the following example, the event is set to occur a total of 8 times:</p>
<pre class="prettyprint">
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)
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "adding the alarm failed \n");
</pre>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga631b1b606158479e3a14a921b006b4fe">calendar_alarm_time_unit_type_e</a> enumeration defines the available alarm tick units.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you use <span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_SPECIFIC</span> as a tick unit, specify the alarm time in Unix time.</td>
- </tr>
- </tbody>
-</table>
+<p>The <code>calendar_alarm_time_unit_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga631b1b606158479e3a14a921b006b4fe">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga631b1b606158479e3a14a921b006b4fe">wearable</a> applications) defines the available alarm tick units.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ If you use <code>CALENDAR_ALARM_TIME_UNIT_SPECIFIC</code> as a tick unit, specify the alarm time in Unix time.
+ </div>
</li>
<li>
<p>Add an attendee.</p>
</li>
<li>
-<p>Insert the event into the calendar database using the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function. All child records added to the event using the <span style="font-family: Courier New,Courier,monospace">calendar_record_add_child_record()</span> function are inserted automatically along with the parent.</p>
+<p>Insert the event into the calendar database using the <code>calendar_db_insert_record()</code> function. All child records added to the event using the <code>calendar_record_add_child_record()</code> function are inserted automatically along with the parent.</p>
<p>The system assigns a unique ID to the event, and the function returns it as its second parameter.</p>
<pre class="prettyprint">
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>
</li>
<li>
-<p>When no longer needed, destroy the event handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the event handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(event, true);
</pre>
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
+<p>If you set the second parameter to <code>true</code>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
</li>
</ol>
<ol>
<li>
-<p>Retrieve an event record using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_record()</span> function with the event ID as the second parameter:</p>
+<p>Retrieve an event record using the <code>calendar_db_get_record()</code> function with the event ID as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h record;
const int event_id = ...; /* Get the event ID */
</li>
<li>
-<p>When no longer needed, destroy the event handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the event handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(record, true);
</pre>
<p>Retrieve a list of all events, or retrieve a filtered list of events:</p>
<ul>
<li>
-<p>To retrieve a list of all events, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all events, use the <code>calendar_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
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>
<p>To retrieve a filtered list of events:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">calendar_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>calendar_query_create()</code> function:</p>
<pre class="prettyprint">
calendar_list_h list = NULL;
calendar_query_h query = NULL;
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>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">calendar_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>calendar_filter_create()</code> function:</p>
<pre class="prettyprint">
calendar_filter_h filter = NULL;
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 <span style="font-family: Courier New,Courier,monospace">calendar_filter_add_XXX()</span> function.</p>
+<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 <a href="../../../../org.tizen.native.mobile.apireference/structcalendar__time__s.html">calendar_time_s</a> structure's <span style="font-family: Courier New,Courier,monospace">type</span> parameter determines whether the event is an all-day event (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>) or a non-all-day event (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span>).</p>
-<p>To retrieve the specified time period, use 2 conditions using <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_GREATER_THAN</span> and <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_LESS_THAN</span> with the operator <span style="font-family: Courier New,Courier,monospace">CALENDAR_FILTER_OPERATOR_AND</span>. You can also use <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_EQUAL</span> to set an equality condition.</p>
+<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>
</li>
<li>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">calendar_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>calendar_query_set_filter()</code> function:</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>
-<p>Retrieve the filtered list of events using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of events using the <code>calendar_db_get_records_with_query()</code> function:</p>
<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>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">calendar_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>calendar_filter_destroy()</code> and <code>calendar_query_destroy()</code> functions:</p>
<pre class="prettyprint">
calendar_filter_destroy(filter);
calendar_query_destroy(query);
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the event details.</p>
-<p>Move forward and backward within the event list using the <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span> functions, and retrieve the current event using the <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the event list using the <code>calendar_list_next()</code> and <code>calendar_list_prev()</code> functions, and retrieve the current event using the <code>calendar_list_get_current_record_p()</code> function.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
<p>The following example iterates through the list and retrieves the summary of each event:</p>
<pre class="prettyprint">
calendar_record_h record;
</pre>
</li>
<li>
-<p>Optionally, retrieve more details of each event using the <span style="font-family: Courier New,Courier,monospace">calendar_gl_event_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each event using the <code>calendar_gl_event_data_t</code> structure:</p>
<pre class="prettyprint">
calendar_gl_event_data_t *gl_event_data = NULL;
calendar_record_h record = NULL;
break;
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">calendar_gl_event_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>calendar_gl_event_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _calendar_gl_event_data {
int id;
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);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>calendar_list_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_list_destroy(list, true);
</pre>
<ol>
<li>
-<p>Retrieve the event you want to update using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_record()</span> function with the event ID as the second parameter:</p>
+<p>Retrieve the event you want to update using the <code>calendar_db_get_record()</code> function with the event ID as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h record;
const int event_id = ...; /* Get the event ID */
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
</pre>
-<p>You can also retrieve the event using a search function, such as <span style="font-family: Courier New,Courier,monospace">calendar_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the event using a search function, such as <code>calendar_db_get_records_with_query()</code>.</p>
</li>
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>
</li>
<li>
-<p>Update the event using the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function:</p>
+<p>Update the event using the <code>calendar_db_update_record()</code> function:</p>
<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>When no longer needed, destroy the event handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the event handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(record, true);
</pre>
<h2 id="delete_event" name="delete_event">Deleting an Event</h2>
-<p>To delete an event, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with the event ID as the second parameter:</p>
+<p>To delete an event, use the <code>calendar_db_delete_record()</code> function with the event ID as the second parameter:</p>
<pre class="prettyprint">
int event_id = ...; /* Get the event ID */
<p>Create a recurring event.</p>
<p>The following example creates an event with the following properties:</p>
<ul>
-<li><p>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></p></li>
+<li><p>Frequency: <code>CALENDAR_RECURRENCE_MONTHLY</code></p></li>
<li><p>Interval: 1</p></li>
<li><p>Days of the month: "3, 4, 5"</p></li>
-<li><p>Range type: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RANGE_COUNT</span></p></li>
+<li><p>Range type: <code>CALENDAR_RANGE_COUNT</code></p></li>
<li><p>Count: 8</p></li>
</ul>
<pre class="prettyprint">
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)
dlog_print(DLOG_ERROR, LOG_TAG, "creating the event failed: \n");
</pre>
<p>The event has 8 instances:</p>
+<p align="center" class="Table"><strong>Table: Event instances</strong></p>
<table>
- <caption>Table: Event instances</caption>
<tbody>
<tr>
<th>unixtime</th>
</li>
<li>
-<p>Create the exception by setting the <span style="font-family: Courier New,Courier,monospace">exdate</span> property.</p>
-<p>In vCalendar 2.0 (RFC 2445), the <span style="font-family: Courier New,Courier,monospace">exdate</span> property is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (for example, <span style="font-family: Courier New,Courier,monospace">20121104T010000Z, 20121105T010000Z, 20121203T010000Z</span>).</p>
+<p>Create the exception by setting the <code>exdate</code> property.</p>
+<p>In vCalendar 2.0 (RFC 2445), the <code>exdate</code> property is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (for example, <code>20121104T010000Z, 20121105T010000Z, 20121203T010000Z</code>).</p>
<pre class="prettyprint">
error_code = calendar_record_set_str(event, _calendar_event.exdate, "20121104T010000Z");
if (error_code != CALENDAR_ERROR_NONE)
</li>
<li>
-<p>Insert the event into the calendar database using the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function:</p>
+<p>Insert the event into the calendar database using the <code>calendar_db_insert_record()</code> function:</p>
<pre class="prettyprint">
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);
</li>
<li>
-<p>Insert the exception into the calendar database using the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function:</p>
+<p>Insert the exception into the calendar database using the <code>calendar_db_insert_record()</code> function:</p>
<pre class="prettyprint">
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);
<ol>
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function:</p>
+<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>Creating a new todo involves creating a todo handle, setting the todo properties, and inserting the todo into the calendar database.</p>
-<p>Some todo properties are defined as child records that are associated with the parent record. For a detailed list of the todo properties, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_todo">_calendar_todo</a> view description in the Calendar API. If the property type is <span style="font-family: Courier New,Courier,monospace">child list</span>, the property is defined as a child record.</p>
+<p>Some todo properties are defined as child records that are associated with the parent record. For a detailed list of the todo properties, see the <code>_calendar_todo</code> view description in the Calendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_todo">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_VIEW_MODULE_calendar_todo">wearable</a> applications). If the property type is <code>child list</code>, the property is defined as a child record.</p>
<p>To create a new todo:</p>
<ol>
<li>
-<p>Create a todo handle using the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> property as the first parameter and the todo handle variable as the second parameter:</p>
+<p>Create a todo handle using the <code>calendar_record_create()</code> function with the <code>_calendar_todo._uri</code> property as the first parameter and the todo handle variable as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h todo = NULL;
error_code = calendar_record_create(_calendar_todo._uri, &todo);
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create failed: %x\n", error_code);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Records created with the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function are memory objects, with <span style="font-family: Courier New,Courier,monospace">calendar_record_h</span> type variables as their handles. If you changes these objects, the changes are not reflected in the calendar database until you explicitly insert or update the objects to the database using the <span style="font-family: Courier New,Courier,monospace"> calendar_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ Records created with the <code>calendar_record_create()</code> function are memory objects, with <code>calendar_record_h</code> type variables as their handles. If you changes these objects, the changes are not reflected in the calendar database until you explicitly insert or update the objects to the database using the <code>calendar_db_insert_record()</code> or <code>calendar_db_update_record()</code> function.
+ </div>
</li>
<ul>
<li>
<p>Set the subject.</p>
-<p>To set the subject for the todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_todo.summary</span> property as the second parameter:</p>
+<p>To set the subject for the todo, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_todo.summary</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = calendar_record_set_str(todo, _calendar_todo.summary, "summary");
if (error_code != CALENDAR_ERROR_NONE)
</li>
<li>
<p>Set the description.</p>
-<p>To set the description for the todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_todo.description</span> property as the second parameter:</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>
</li>
<li>
<p>Set the due time.</p>
-<p>To set the due time for the todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_todo.due_time</span> property as the second parameter:</p>
+<p>To set the due time for the todo, use the <code>calendar_record_set_caltime()</code> function with the <code>_calendar_todo.due_time</code> property as the second parameter:</p>
<pre class="prettyprint">
calendar_time_s duetime = {0};
duetime.type = CALENDAR_TIME_UTIME;
</li>
<li>
<p>Set the status.</p>
-<p>To set the status for the todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_calendar_todo.todo_status</span> property as the second parameter. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">calendar_todo_status_e</a> enumeration defines the possible status values.</p>
+<p>To set the status for the todo, use the <code>calendar_record_set_int()</code> function with the <code>_calendar_todo.todo_status</code> property as the second parameter. The <code>calendar_todo_status_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">wearable</a> applications) defines the possible status values.</p>
<pre class="prettyprint">
error_code = calendar_record_set_int(todo, _calendar_todo.todo_status,
CALENDAR_TODO_STATUS_COMPLETED);
</li>
<li>
-<p>Insert the todo into the calendar database using the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function. All child records added to the todo using the <span style="font-family: Courier New,Courier,monospace">calendar_record_add_child_record()</span> function are inserted automatically along with the parent.</p>
+<p>Insert the todo into the calendar database using the <code>calendar_db_insert_record()</code> function. All child records added to the todo using the <code>calendar_record_add_child_record()</code> function are inserted automatically along with the parent.</p>
<p>The system assigns a unique ID to the todo, and the function returns it as its second parameter.</p>
<pre class="prettyprint">
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>
<li>
-<p>When no longer needed, destroy the todo handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the todo handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(todo, true);
</pre>
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
+<p>If you set the second parameter to <code>true</code>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
</li>
</ol>
<ol>
<li>
-<p>Retrieve an todo record using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_record()</span> function with the todo ID as the second parameter:</p>
+<p>Retrieve an todo record using the <code>calendar_db_get_record()</code> function with the todo ID as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h record;
const int todo_id = ...; /* Get the todo ID */
</li>
<li>
-<p>When no longer needed, destroy the todo handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the todo handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(record, true);
</pre>
<p>Retrieve a list of all todos, or retrieve a filtered list of todos:</p>
<ul>
<li>
-<p>To retrieve a list of all todos, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all todos, use the <code>calendar_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
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>
<p>To retrieve a filtered list of todos:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">calendar_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>calendar_query_create()</code> function:</p>
<pre class="prettyprint">
calendar_list_h list = NULL;
calendar_query_h query = NULL;
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>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">calendar_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>calendar_filter_create()</code> function:</p>
<pre class="prettyprint">
calendar_filter_h filter = NULL;
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 <span style="font-family: Courier New,Courier,monospace">calendar_filter_add_XXX()</span> function.</p>
+<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>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">calendar_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>calendar_query_set_filter()</code> function:</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>
-<p>Retrieve the filtered list of todos using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of todos using the <code>calendar_db_get_records_with_query()</code> function:</p>
<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>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">calendar_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>calendar_filter_destroy()</code> and <code>calendar_query_destroy()</code> functions:</p>
<pre class="prettyprint">
calendar_filter_destroy(filter);
calendar_query_destroy(query);
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the todo details.</p>
-<p>Move forward and backward within the todo list using the <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span> functions, and retrieve the current todo using the <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the todo list using the <code>calendar_list_next()</code> and <code>calendar_list_prev()</code> functions, and retrieve the current todo using the <code>calendar_list_get_current_record_p()</code> function.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
+
<p>The following example iterates through the list and retrieves the summary of each todo:</p>
<pre class="prettyprint">
calendar_record_h record;
</pre>
</li>
<li>
-<p>Optionally, retrieve more details of each todo using the <span style="font-family: Courier New,Courier,monospace">calendar_gl_todo_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each todo using the <code>calendar_gl_todo_data_t</code> structure:</p>
<pre class="prettyprint">
calendar_gl_todo_data_t *gl_todo_data = NULL;
calendar_record_h record = NULL;
break;
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">calendar_gl_todo_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>calendar_gl_todo_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _calendar_gl_todo_data {
int id;
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);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>calendar_list_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_list_destroy(list, true);
</pre>
<ol>
<li>
-<p>Retrieve the todo you want to update using the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_record()</span> function with the todo ID as the second parameter:</p>
+<p>Retrieve the todo you want to update using the <code>calendar_db_get_record()</code> function with the todo ID as the second parameter:</p>
<pre class="prettyprint">
calendar_record_h record;
const int todo_id = ...; /* Get the todo ID */
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
</pre>
-<p>You can also retrieve the todo using a search function, such as <span style="font-family: Courier New,Courier,monospace">calendar_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the todo using a search function, such as <code>calendar_db_get_records_with_query()</code>.</p>
</li>
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>
</li>
<li>
-<p>Update the todo using the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function:</p>
+<p>Update the todo using the <code>calendar_db_update_record()</code> function:</p>
<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>When no longer needed, destroy the todo handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the todo handle and release all its resources using the <code>calendar_record_destroy()</code> function:</p>
<pre class="prettyprint">
calendar_record_destroy(record, true);
</pre>
<h2 id="delete" name="delete">Deleting a Todo</h2>
-<p>To delete a todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with the todo ID as the second parameter:</p>
+<p>To delete a todo, use the <code>calendar_db_delete_record()</code> function with the todo ID as the second parameter:</p>
<pre class="prettyprint">
int todo_id = ...; /* Get the todo ID */
<ol>
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function:</p>
+<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>
<ol>
<li>
-<p>Parse the vCalendar stream using the <span style="font-family: Courier New,Courier,monospace">calendar_vcalendar_parse_to_calendar_foreach()</span> function:</p>
+<p>Parse the vCalendar stream using the <code>calendar_vcalendar_parse_to_calendar_foreach()</code> function:</p>
<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, /* File path of vCalendar */
- _vcalendar_parse_cb, /* Callback to invoke */
- NULL); /* User data passed to the callback */
+error_code = calendar_vcalendar_parse_to_calendar_foreach(/* vCalendar file path */
+ vcalendar_file_path,
+ /* Callback to invoke */
+ _vcalendar_parse_cb,
+ /* User data for callback */
+ NULL);
</pre>
</li>
<li>
<p>Define a callback that inserts the parsed event or todo into the calendar database.</p>
-<p>The vCalendar stream can contain multiple events or todos. The <span style="font-family: Courier New,Courier,monospace">calendar_vcalendar_parse_to_calendar_foreach()</span> function invokes a separate callback for each parsed item. As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to parse new events and todos.</p>
+<p>The vCalendar stream can contain multiple events or todos. The <code>calendar_vcalendar_parse_to_calendar_foreach()</code> function invokes a separate callback for each parsed item. As long as the callback returns <code>true</code>, the foreach function continues to parse new events and todos.</p>
<pre class="prettyprint">
static bool
_vcalendar_parse_cb(calendar_record_h record, void *user_data)
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;
}
<p>In the figure, the Person1 is an aggregation of the Contact1, Contact2, and Contact3 instances, which all belong to different address books.</p>
- <p class="figure">Figure: Contact structure</p>
+ <p align="center"><strong>Figure: Contact structure</strong></p>
<p align="center"><img alt="Contact structure" src="../../images/contacts_contact_structure.png" /></p>
<p>The following figure illustrates the different entities and their relationships in the contact service.</p>
- <p class="figure">Figure: Contact entities</p>
+ <p align="center"><strong>Figure: Contact entities</strong></p>
<p align="center"><img alt="Contact entities" src="../../images/contacts_contact_entity.png" /></p>
<ul>
<li>A person record cannot be created directly - it is created automatically when a contact record is inserted in the contacts database, and at the same time the contact is linked to the person.
- <p class="figure">Figure: Person is created along with the contact</p>
+ <p align="center"><strong>Figure: Person is created along with the contact</strong></p>
<p align="center"><img alt="Person is created along with the contact" src="../../images/contacts_person_record.png" /></p>
</li>
<li>2 persons (with contacts in different address books) can be linked together.
<p>As a result, the second person is destroyed automatically, and all the contacts linked to both persons are consequently linked to the 1 remaining person.</p>
- <p class="figure">Figure: 2 persons can be linked</p>
+ <p align="center"><strong>Figure: 2 persons can be linked</strong></p>
<p align="center"><img alt="2 persons can be linked" src="../../images/contacts_link_person.png" /></p>
</li>
<li>A contact can be separated (unlinked) from the person.
<p>As a result, a new person is automatically created and the separated contact is linked to that.</p>
- <p class="figure">Figure: Unlinking a contact</p>
+ <p align="center"><strong>Figure: Unlinking a contact</strong></p>
<p align="center"><img alt="Unlinking a contact" src="../../images/contacts_unlink_contact.png" /></p>
</li>
</ul>
<h2 id="record" name="record">Records</h2>
-<p>A record represents an actual record in the internal database, but you can also consider it a piece of information, such as an address, a phone number, or a group of contacts. A record can be a complex set of data, containing other data. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace">address</span> property, which is a reference to an address record. An address record belongs to a contact record, and its <span style="font-family: Courier New,Courier,monospace">contact_id</span> property is set to the identifier of the corresponding contact. In this case, the address is the child record of the contact and the contact is the parent record.</p>
+<p>A record represents an actual record in the internal database, but you can also consider it a piece of information, such as an address, a phone number, or a group of contacts. A record can be a complex set of data, containing other data. For example, a contact record contains the <code>address</code> property, which is a reference to an address record. An address record belongs to a contact record, and its <code>contact_id</code> property is set to the identifier of the corresponding contact. In this case, the address is the child record of the contact and the contact is the parent record.</p>
<p>You can <a href="#insert2">create records</a> in the database, <a href="#get2">retrieve individual record details</a> or <a href="#list2">lists of multiple records</a>, <a href="#delete2">delete records</a>, and combine contact records by <a href="#link2">linking them into a single person</a>.</p>
</pre>
</li>
<li>Obtaining the handle using the parent record
-<p>The following code example changes a country of addresses which are child records of a contact. Each address can be traversed by using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function. It is possible to apply the changes by updating the contact which is the parent record:</p>
+<p>The following code example changes a country of addresses which are child records of a contact. Each address can be traversed by using the <code>contacts_record_get_child_record_at_p()</code> function. It is possible to apply the changes by updating the contact which is the parent record:</p>
<pre class="prettyprint">
int contact_id = ... /* Acquire ID of the created contact */
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);
<ul>
<li>URI
-<p>A record type is identified by a structure called the view, which contains identifiers of its properties. Every view has a special <span style="font-family: Courier New,Courier,monospace">_uri</span> field that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value as a parameter to indicate what type of record you want to create or operate on.</p>
-<p>For a list of functions that need the <
span style="font-family: Courier New,Courier,monospace">_uri</span> postfix, see the list of functions in the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_MODULE_RECORDS_URI">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_MODULE_RECORDS_URI">wearable</a> applications).</p>
+<p>A record type is identified by a structure called the view, which contains identifiers of its properties. Every view has a special <code>_uri</code> field that uniquely identifies the view. In many cases, you must provide the <code>_uri</code> value as a parameter to indicate what type of record you want to create or operate on.</p>
+<p>For a list of functions that need the <
code>_uri</code> postfix, see the list of functions in the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_MODULE_RECORDS_URI">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_MODULE_RECORDS_URI">wearable</a> applications).</p>
</li>
<li id="view">Views
-<p>Views are provided to access and handle entities. A data-view is a structure, which has property elements. For example, the <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view describes the properties of the contact record. Its properties include, for example, name, company, and nickname of the contact. The property elements have their data types and names. The generic access functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_record_get_int()</span>, can be used to access the contact views.</p>
-<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property, hold identifiers of other records. For example, the name, number, and email views hold the ID of their corresponding contacts in the <span style="font-family: Courier New,Courier,monospace">contact_id</span> property as children of the corresponding contact records. A data-view is almost the same as a database "VIEW", which limits access and guarantees performance. A "record" represents a single row of the data-views.</p>
+<p>Views are provided to access and handle entities. A data-view is a structure, which has property elements. For example, the <code>_contacts_contact</code> view describes the properties of the contact record. Its properties include, for example, name, company, and nickname of the contact. The property elements have their data types and names. The generic access functions, such as <code>contacts_db_insert_record()</code> and <code>contacts_record_get_int()</code>, can be used to access the contact views.</p>
+<p>The record types that have <code>*_id</code> as their property, hold identifiers of other records. For example, the name, number, and email views hold the ID of their corresponding contacts in the <code>contact_id</code> property as children of the corresponding contact records. A data-view is almost the same as a database "VIEW", which limits access and guarantees performance. A "record" represents a single row of the data-views.</p>
-<p>The property type <span style="font-family: Courier New,Courier,monospace">record</span> means that the parent record can have child records. For example, a contact record has <span style="font-family: Courier New,Courier,monospace">name</span>, <span style="font-family: Courier New,Courier,monospace">number</span>, and <span style="font-family: Courier New,Courier,monospace">email</span> properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">contacts_view.h</span> header file.</p>
+<p>The property type <code>record</code> means that the parent record can have child records. For example, a contact record has <code>name</code>, <code>number</code>, and <code>email</code> properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a <code>contacts_view.h</code> header file.</p>
- <p class="figure">Figure: Properties</p>
+ <p align="center"><strong>Figure: Properties</strong></p>
<p align="center"><img alt="Properties" src="../../images/contact_property.png" /></p>
<p>For more information, see the View/Property API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p>
</li>
<li>Basic types
-<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">boolean</span>, <span style="font-family: Courier New,Courier,monospace">long integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long long int), and <span style="font-family: Courier New,Courier,monospace">double</span>.</p>
+<p>Records contain properties of basic types: <code>integer</code>, <code>string</code>, <code>boolean</code>, <code>long integer</code>, <code>lli</code> (long long int), and <code>double</code>.</p>
<p>The following table lists the setter and getter functions for each type.</p>
+ <p align="center" class="Table"><strong>Table: Setter and getter functions</strong></p>
<table>
- <caption>
- Table: Setter and getter functions
- </caption>
<tbody>
<tr>
<th>Property</th>
<th>Getter</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_str()</span></td>
+ <td><code>string</code></td>
+ <td><code>contacts_record_set_str()</code></td>
+ <td><code>contacts_record_get_str()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_int()</span></td>
+ <td><code>integer</code></td>
+ <td><code>contacts_record_set_int()</code></td>
+ <td><code>contacts_record_get_int()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_bool()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_bool()</span></td>
+ <td><code>boolean</code></td>
+ <td><code>contacts_record_set_bool()</code></td>
+ <td><code>contacts_record_get_bool()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_lli()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_lli()</span></td>
+ <td><code>long long integer</code></td>
+ <td><code>contacts_record_set_lli()</code></td>
+ <td><code>contacts_record_get_lli()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_double()</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_double()</span></td>
+ <td><code>double</code></td>
+ <td><code>contacts_record_set_double()</code></td>
+ <td><code>contacts_record_get_double()</code></td>
</tr>
</tbody>
</table>
-<p>These functions also require specifying which property to get and set, and for this, every getter and setter function needs a record and property ID. Create a property ID by combining the data-view and property name. For example, the property ID of a contact <span style="font-family: Courier New,Courier,monospace">display_name</span> property is <span style="font-family: Courier New,Courier,monospace">_contacts_contact.display_name</span>.</p>
+<p>These functions also require specifying which property to get and set, and for this, every getter and setter function needs a record and property ID. Create a property ID by combining the data-view and property name. For example, the property ID of a contact <code>display_name</code> property is <code>_contacts_contact.display_name</code>.</p>
-<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">ringtone_path</span> property of a contact record:</p>
+<p>The following example sets the <code>ringtone_path</code> property of a contact record:</p>
<pre class="prettyprint">
char *resource_path = app_get_resource_path();
char ringtone_path[1024];
contacts_record_set_str(contact, _contacts_contact.ringtone_path, ringtone_path);
</pre>
<p>With a record handle, you can access all records of a specific type related to the given record.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The string getter functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value should not be freed by the application, as it is a pointer to data in an existing record.
+
+ <div class="note">
+ <strong>Note</strong>
+ The string getter functions have the <code>_p</code> postfix. It means that the returned value should not be freed by the application, as it is a pointer to data in an existing record.
<p>The following example shows that there are 2 ways of getting the string property:</p>
contacts_record_get_str_p(record, _contacts_person.display_name, &display_name);
</pre>
-<p>In the first case, the returned string must be freed by the application. In the second one, the <span style="font-family: Courier New,Courier,monospace">display_name</span> value is freed automatically when destroying the record handle.</p>
-</td>
- </tr>
- </tbody>
- </table>
+<p>In the first case, the returned string must be freed by the application. In the second one, the <code>display_name</code> value is freed automatically when destroying the record handle.</p>
+ </div>
</li>
</ul>
<h3>Child Records</h3>
-<p>A record can have properties of the <span style="font-family: Courier New,Courier,monospace">record</span> type called child records. Effectively, a record can be a node in a tree or graph of relations between records.</p>
+<p>A record can have properties of the <code>record</code> type called child records. Effectively, a record can be a node in a tree or graph of relations between records.</p>
<p>The following figure illustrates the relationships between the parent and child records.</p>
-<p class="figure">Figure: Child records</p>
+<p align="center"><strong>Figure: Child records</strong></p>
<p align="center"><img alt="Child records" src="../../images/contacts_children.png" /></p>
<p>The following code example inserts an address record into a contact record. Note that it is not necessary to insert or destroy all records - just the parent record needs to be inserted into the database to store all the information, and when the parent record is destroyed, the child records are also destroyed automatically.</p>
contacts_db_insert_record(contact, &contact_id);
contacts_record_destroy(contact, true);</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For an application to insert private images in contacts, the following conditions apply:
- <ul><li>The application must have the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.write</span> privilege to use the database modifying functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span>.</li>
- <li>The application's private directory and files must have the <span style="font-family: Courier New,Courier,monospace">read</span> permission of others, such as <span style="font-family: Courier New,Courier,monospace">644</span>. SMACK protects the <span style="font-family: Courier New,Courier,monospace">read</span> permission from the other applications.</li>
- <li>The application can erase the image after destroying the contact record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function.</li></ul>
- </td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ For an application to insert private images in contacts, the following conditions apply:
+ <ul><li>The application must have the <code>http://tizen.org/privilege/contact.write</code> privilege to use the database modifying functions, such as <code>contacts_db_insert_record()</code>.</li>
+ <li>The application's private directory and files must have the <code>read</code> permission of others, such as <code>644</code>. SMACK protects the <code>read</code> permission from the other applications.</li>
+ <li>The application can erase the image after destroying the contact record using the <code>contacts_record_destroy()</code> function.</li></ul>
+ </div>
-<p>Identifiers can be used to establish a relationship between 2 records. The following code example sets an address record's <span style="font-family: Courier New,Courier,monospace">contact_id</span> property to the ID of the contact. The <span style="font-family: Courier New,Courier,monospace">contact_id</span> relates between the address record and the contact which is identified by the <span style="font-family: Courier New,Courier,monospace">contact_id</span>. After the ID is set, the address becomes one of the addresses connected to the contact. The address is now the contact's child record, and the contact is the parent record.</p>
+<p>Identifiers can be used to establish a relationship between 2 records. The following code example sets an address record's <code>contact_id</code> property to the ID of the contact. The <code>contact_id</code> relates between the address record and the contact which is identified by the <code>contact_id</code>. After the ID is set, the address becomes one of the addresses connected to the contact. The address is now the contact's child record, and the contact is the parent record.</p>
<pre class="prettyprint">
int contact_id = ... /* Acquire the ID of the created contact */
<p>The contact service provides functions which can handle lists of records with the same type. The list concept is based on a standard doubly-linked list.</p>
-<p>To operate a list, you must obtain its handle. The handle is provided during the list creation using the <span style="font-family: Courier New,Courier,monospace">contacts_list_create()</span> function.</p>
+<p>To operate a list, you must obtain its handle. The handle is provided during the list creation using the <code>contacts_list_create()</code> function.</p>
<p>To create a list:</p>
contacts_list_destroy(list, true);
</pre>
-<p>Destroy the list handle after use with the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span> function. If the last parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child resources are destroyed automatically.</p>
+<p>Destroy the list handle after use with the <code>contacts_list_destroy()</code> function. If the last parameter is <code>true</code>, child resources are destroyed automatically.</p>
</li>
<li>
<p>Create a list by performing a query to the database, and receive a handle for the list:</p>
<ul>
<li id="cursor" name="cursor">Traversing
-<p>The list can be traversed using a cursor. Use the <span style="font-family: Courier New,Courier,monospace">contacts_list_first()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions to move the cursor in the list.</p>
+<p>The list can be traversed using a cursor. Use the <code>contacts_list_first()</code>, <code>contacts_list_last()</code>, <code>contacts_list_next()</code>, and <code>contacts_list_prev()</code> functions to move the cursor in the list.</p>
-<p>To get a record of the current cursor, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function.</p>
+<p>To get a record of the current cursor, use the <code>contacts_list_get_current_record_p()</code> function.</p>
<p>The following example loops through a list:</p>
<pre class="prettyprint">
</li>
<li id="add" name="add">Adding and removing
-<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_list_add()</span> function to add, and the <span style="font-family: Courier New,Courier,monospace">contacts_list_remove()</span> function to remove child records.</p>
+<p>Use the <code>contacts_list_add()</code> function to add, and the <code>contacts_list_remove()</code> function to remove child records.</p>
<p>The following example adds records to the list:</p>
<pre class="prettyprint">
<p>With batch functions, you can use insert, update, and delete operations for multiple records simultaneously. There is no limit on the record count for a batch function, but it causes a process to hang while the function is operated. Batch functions guarantee atomicity. That is, the batch operations are performed either for all, or nothing.</p>
<ul>
-<li>To insert records, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_records()</span> function.</li>
-<li>To update the records database, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_records()</span> function.</li>
-<li>To delete the contacts, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_records()</span> function.</li>
-<li>To replace the contact records, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_replace_records()</span> function.</li>
+<li>To insert records, use the <code>contacts_db_insert_records()</code> function.</li>
+<li>To update the records database, use the <code>contacts_db_update_records()</code> function.</li>
+<li>To delete the contacts, use the <code>contacts_db_delete_records()</code> function.</li>
+<li>To replace the contact records, use the <code>contacts_db_replace_records()</code> function.</li>
</ul>
<p>The following code example inserts 2 contact records using a batch function:</p>
<pre class="prettyprint">
<ul>
<li>Filtering
<p>The Filter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) provides the set of definitions and interfaces that enable you to make filters to set queries.</p>
-<p>When creating a filter, use the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function, and specify the filter type you want to create using the <span style="font-family: Courier New,Courier,monospace">_uri</span> property. A filter handle must be destroyed after use with the <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span> function.</p>
+<p>When creating a filter, use the <code>contacts_filter_create()</code> function, and specify the filter type you want to create using the <code>_uri</code> property. A filter handle must be destroyed after use with the <code>contacts_filter_destroy()</code> function.</p>
<p>To manage filters:</p>
<ul>
<li>
-<p>To set the filter condition to contain a given substring, use the <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_str()</span> function.</p>
+<p>To set the filter condition to contain a given substring, use the <code>contacts_filter_add_str()</code> function.</p>
</li>
<li>
-<p>To set the filter condition to property value as <span style="font-family: Courier New,Courier,monospace">true</span>, use the <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_bool()</span> function.</p>
+<p>To set the filter condition to property value as <code>true</code>, use the <code>contacts_filter_add_bool()</code> function.</p>
</li>
<li>
-<p>Multiple conditions can be added to a filter. Join the conditions by using the logical operators <span style="font-family: Courier New,Courier,monospace">AND</span> and <span style="font-family: Courier New,Courier,monospace">OR</span>.</p>
+<p>Multiple conditions can be added to a filter. Join the conditions by using the logical operators <code>AND</code> and <code>OR</code>.</p>
-<p>The following example creates a composite filter with the <span style="font-family: Courier New,Courier,monospace">OR</span> operator.</p>
+<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>Additionally, multiple filters can join each other by using the logical operators <span style="font-family: Courier New,Courier,monospace">AND</span> and <span style="font-family: Courier New,Courier,monospace">OR</span>.</p>
+<p>Additionally, multiple filters can join each other by using the logical operators <code>AND</code> and <code>OR</code>.</p>
-<p>The following example creates a joined filter with the <span style="font-family: Courier New,Courier,monospace">AND</span> operator.</p>
+<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);
<p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows the results, if the following sequences are added.</p>
+ <p align="center" class="Table"><strong>Table: Filters</strong></p>
<table>
- <caption>
- Table: Filters
- </caption>
<tbody>
<tr>
<th>Filters</th>
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);
</li>
<li id="sort2" name="sort2">Sorting
-<p>To sort the query result list by the property ID, use the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_sort()</span> function. The second parameter is the property ID.</p>
+<p>To sort the query result list by the property ID, use the <code>contacts_query_set_sort()</code> function. The second parameter is the property ID.</p>
<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);
</li>
<li id="projection" name="projection">Projection querying
-<p>Projection allows you to query data for specific properties of a record, at lower latency and cost than retrieving all properties. To use projection, use the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_projection()</span> function.</p>
+<p>Projection allows you to query data for specific properties of a record, at lower latency and cost than retrieving all properties. To use projection, use the <code>contacts_query_set_projection()</code> function.</p>
<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>
<li id="distinct" name="distinct">Removing duplicates
-<p>If you query a read-only view with a set projection, the result list can contain duplicates. Remove duplicates using the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_distinct()</span> function.</p>
+<p>If you query a read-only view with a set projection, the result list can contain duplicates. Remove duplicates using the <code>contacts_query_set_distinct()</code> function.</p>
<p>The following example removes duplicates:</p>
<pre class="prettyprint">
<h2 id="db" name="db">Database Change Notifications</h2>
-<p>To detect the <a href="#monitor_contact">person</a> and <a href="#monitor">group</a> changes in the contacts database, use the Database API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">wearable</a> applications). Register a callback with the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function. To deregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_remove_changed_cb()</span> function.</p>
+<p>To detect the <a href="#monitor_contact">person</a> and <a href="#monitor">group</a> changes in the contacts database, use the Database API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">wearable</a> applications). Register a callback with the <code>contacts_db_add_changed_cb()</code> function. To deregister the callback and ignore database changes, use the <code>contacts_db_remove_changed_cb()</code> function.</p>
<p>Clients wait for contact change notifications on the client side. If the contact is changed by another module, the server publishes a notification. The notification module broadcasts to the subscribed modules and a user callback function is called with the user data. The following example registers a person change notification callback:</p>
<pre class="prettyprint">
<p>To enable your application to use the contact functionality:</p>
<ol>
<li>
-<p>To use the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/contact.read</privilege>
</li>
<li>
-<p>To use the functions and data types of the Contacts API, include the <span style="font-family: Courier New,Courier,monospace"><contacts.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Contacts API, include the <code><contacts.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <contacts.h>
</pre>
-<p>To ensure that a Contacts function has been executed properly, make sure that the return value is equal to <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>. If the function returns an error, handle it accordingly.</p>
+<p>To ensure that a Contacts function has been executed properly, make sure that the return value is equal to <code>CONTACTS_ERROR_NONE</code>. If the function returns an error, handle it accordingly.</p>
</li>
<li>
-<p>To access the contact database, connect to the contacts service using the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function:</p>
+<p>To access the contact database, connect to the contacts service using the <code>contacts_connect()</code> function:</p>
<pre class="prettyprint">
int error_code;
error_code = contacts_connect();
</pre>
-<p>When the contacts service is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function:</p>
+<p>When the contacts service is no longer needed, disconnect from the service using the <code>contacts_disconnect()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_disconnect();
</pre>
<p>Creating a new contact involves creating a contact handle, setting the contact properties, and inserting the contact into the contact database.</p>
-<p>Some contact properties are defined as child records that are associated with the parent record. For a detailed list of the contact properties, see the <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_contact">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_contact">wearable</a> applications). If the property type is <span style="font-family: Courier New,Courier,monospace">record</span>, the property is defined as a child record. The property description defines whether a single or multiple child records are allowed for a specific property.</p>
+<p>Some contact properties are defined as child records that are associated with the parent record. For a detailed list of the contact properties, see the <code>_contacts_contact</code> view description in the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_contact">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_contact">wearable</a> applications). If the property type is <code>record</code>, the property is defined as a child record. The property description defines whether a single or multiple child records are allowed for a specific property.</p>
<p>When you create a new contact, the system automatically creates a new person associated with that contact. A person is an aggregation of one or more contacts associated with the same individual. A contact is always associated with a person.</p>
<ol>
<li>
-<p>Create a contact handle using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> property as the first parameter and the contact handle variable as the second parameter:</p>
+<p>Create a contact handle using the <code>contacts_record_create()</code> function with the <code>_contacts_contact._uri</code> property as the first parameter and the contact handle variable as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h contact;
error_code = contacts_record_create(_contacts_contact._uri, &contact);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Records created with the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function are memory objects, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. If you changes these objects, the changes are not reflected in the contact database until you explicitly insert or update the objects to the database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Records created with the <code>contacts_record_create()</code> function are memory objects, with <code>contacts_record_h</code> type variables as their handles. If you changes these objects, the changes are not reflected in the contact database until you explicitly insert or update the objects to the database using the <code>contacts_db_insert_record()</code> or <code>contacts_db_update_record()</code> function.
+ </div>
</li>
<li>
<p>To set the contact's name:</p>
<ol type="a">
<li>
-<p>Create a name record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_name._uri</span> property as the first parameter:</p>
+<p>Create a name record using the <code>contacts_record_create()</code> function with the <code>_contacts_name._uri</code> property as the first parameter:</p>
<pre class="prettyprint">
contacts_record_h name;
</pre>
</li>
<li>
-<p>Set the contact's first name using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span> property as the second parameter:</p>
+<p>Set the contact's first name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.first</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = contacts_record_set_str(name, _contacts_name.first, "John");
</pre>
</li>
<li>
-<p>Set the contact's last name using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_name.last</span> property as the second parameter:</p>
+<p>Set the contact's last name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.last</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = contacts_record_set_str(name, _contacts_name.last, "Smith");
</pre>
</li>
<li>
-<p>Set the name record as a child record of the contact record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span> property as the second parameter:</p>
+<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>
<p>To set an image for the contact:</p>
<ol type="a">
<li>
-<p>Create an image record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_image._uri</span> property as the first parameter:</p>
+<p>Create an image record using the <code>contacts_record_create()</code> function with the <code>_contacts_image._uri</code> property as the first parameter:</p>
<pre class="prettyprint">
contacts_record_h image;
</pre>
</li>
<li>
-<p>Define the image, and set the image using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_image.path</span> property as the second parameter:</p>
+<p>Define the image, and set the image using the <code>contacts_record_set_str()</code> function with the <code>_contacts_image.path</code> property as the second parameter:</p>
<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 <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.image</span> property as the second parameter:</p>
+<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- <p>To set private images for contacts, the application must meet the following conditions:</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ To set private images for contacts, the application must meet the following conditions:
<ul>
- <li><p>The application's private directory and files must have the <span style="font-family: Courier New,Courier,monospace">read</span> permission for others, such as <span style="font-family: Courier New,Courier,monospace">644</span>. SMACK protects the <span style="font-family: Courier New,Courier,monospace">read</span> permission from other applications.</p></li>
- <li><p>The application must delete the image after destroying the contact record (using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function).</p></li>
+ <li><p>The application's private directory and files must have the <code>read</code> permission for others, such as <code>644</code>. SMACK protects the <code>read</code> permission from other applications.</p></li>
+ <li><p>The application must delete the image after destroying the contact record (using the <code>contacts_record_destroy()</code> function).</p></li>
</ul>
- </td>
- </tr>
- </tbody>
-</table>
+ </div>
</li>
<li>
<p>To set an event for the contact:</p>
-<p>An event consists of an event type, date, and other properties. You can set various types of events for the contact, as defined in the <span style="font-family: Courier New,Courier,monospace">contacts_event_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label for the event using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_event.label</span> property as the second parameter.</p>
+<p>An event consists of an event type, date, and other properties. You can set various types of events for the contact, as defined in the <code>contacts_event_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <code>CONTACTS_EVENT_TYPE_CUSTOM</code>, you can set a custom label for the event using the <code>contacts_record_set_str()</code> function with the <code>_contacts_event.label</code> property as the second parameter.</p>
<p>To set a birthday event:</p>
<ol type="a">
<li>
-<p>Create an event record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_event._uri</span> property as the first parameter:</p>
+<p>Create an event record using the <code>contacts_record_create()</code> function with the <code>_contacts_event._uri</code> property as the first parameter:</p>
<pre class="prettyprint">
contacts_record_h event;
</pre>
</li>
<li>
-<p>Set the event date using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_event.date</span> property as the second parameter. The date is an integer calculated as year * 10000 + month * 100 + day.</p>
+<p>Set the event date using the <code>contacts_record_set_int()</code> function with the <code>_contacts_event.date</code> property as the second parameter. The date is an integer calculated as year * 10000 + month * 100 + day.</p>
<pre class="prettyprint">
int year = 1990;
int month = 5;
</pre>
</li>
<li>
-<p>Set the event type to birthday using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_event.type</span> property as the second parameter and the <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_BIRTH</span> enumerator as the third parameter:</p>
+<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 <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.event</span> property as the second parameter:</p>
+<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>
<p>To set the contact's phone number:</p>
<ol type="a">
<li>
-<p>Create a phone number record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_number._uri</span> property as the first parameter:</p>
+<p>Create a phone number record using the <code>contacts_record_create()</code> function with the <code>_contacts_number._uri</code> property as the first parameter:</p>
<pre class="prettyprint">
contacts_record_h number;
</pre>
</li>
<li>
-<p>Set the phone number using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_number.number</span> property as the second parameter:</p>
+<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 <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.number</span> property as the second parameter:</p>
+<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>
</li>
<li>
-<p>Insert the contact into the contact database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function. All child records added to the contact using the <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> function are inserted automatically along with the parent.</p>
+<p>Insert the contact into the contact database using the <code>contacts_db_insert_record()</code> function. All child records added to the contact using the <code>contacts_record_add_child_record()</code> function are inserted automatically along with the parent.</p>
<p>The system assigns a unique ID to the contact, and the function returns it as its second parameter</p>
<pre class="prettyprint">
</li>
<li>
-<p>Destroy the contact handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>Destroy the contact handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(contact, true);
</pre>
-<p>If you set the second parameter to <span style="font-family: Courier New,Courier,monospace">true</span>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
+<p>If you set the second parameter to <code>true</code>, all child records of the given record are also destroyed, irrespective of how the child records were added (individually or along with their parent record).</p>
</li>
</ol>
<ol>
<li>
-<p>Retrieve a person record using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the person ID as the second parameter:</p>
+<p>Retrieve a person record using the <code>contacts_db_get_record()</code> function with the person ID as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h person = NULL;
const int person_id = ...; /* Get the person ID */
</li>
<li>
-<p>When no longer needed, destroy the person handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the person handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(person, true);
</pre>
<ul>
<li>
-<p>To retrieve a list of all persons, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all persons, use the <code>contacts_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
<p>To retrieve a filtered list of persons:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">contacts_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>contacts_query_create()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
contacts_query_h query = NULL;
</pre>
</li>
<li>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>contacts_filter_create()</code> function:</p>
<pre class="prettyprint">
contacts_filter_h filter = NULL;
</pre>
</li>
<li>
-<p>Add a filtering condition using a <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_XXX()</span> function.</p>
+<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 the persons whose display name contains the string "John":</p>
<pre class="prettyprint">
error_code = contacts_filter_add_str(filter, _contacts_person.display_name,
<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>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>contacts_query_set_filter()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_query_set_filter(query, filter);
</pre>
</li>
<li>
-<p>Retrieve the filtered list of persons using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of persons using the <code>contacts_db_get_records_with_query()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_get_records_with_query(query, 0, 0, &list);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all persons matching the query.</p>
</li>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>contacts_filter_destroy()</code> and <code>contacts_query_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_filter_destroy(filter);
contacts_query_destroy(query);
</ol>
</li>
<li>
-<p>To retrieve a list of persons matching a search keyword, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function with the search keyword as the second parameter.</p>
+<p>To retrieve a list of persons matching a search keyword, use the <code>contacts_db_search_records()</code> function with the search keyword as the second parameter.</p>
<p>The following example shows how to find all person records that contain the keyword "John":</p>
<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>
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the person details.</p>
-<p>Move forward and backward within the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions, and retrieve the current person using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the list using the <code>contacts_list_next()</code> and <code>contacts_list_prev()</code> functions, and retrieve the current person using the <code>contacts_list_get_current_record_p()</code> function.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
+
<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>
</li>
<li>
-<p>Optionally, retrieve more details of each person using the <span style="font-family: Courier New,Courier,monospace">contacts_gl_person_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each person using the <code>contacts_gl_person_data_t</code> structure:</p>
<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 */
error_code = contacts_list_next(list);
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">contacts_gl_person_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>contacts_gl_person_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _contacts_gl_person_data {
int id;
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);
<p>Define the functions for retrieving the person details:</p>
<ul>
<li>
-<p>Retrieve the person's display name using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_person.display_name</span> property as the second parameter:</p>
+<p>Retrieve the person's display name using the <code>contacts_record_get_str()</code> function with the <code>_contacts_person.display_name</code> property as the second parameter:</p>
<pre class="prettyprint">
static bool
_get_display_name(contacts_record_h record, char **display_name)
{
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);
- /* Run the query: Retrieve a list of all contacts associated with the person ID */
- error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
+ /* 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);
- /* Destroy the filter and query handles and release all their resources */
+ /* Destroy the handles and release all their resources */
contacts_filter_destroy(filter);
contacts_query_destroy(query);
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);
+ /*
+ 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);
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's phone number records and retrieve the phone number details */
+ /*
+ Iterate through the contact's phone number records
+ and retrieve the phone number details
+ */
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);
</li>
<li>
<p>Retrieve the person's default phone number.</p>
-<p>If a person is associated with multiple phone numbers, one of them is defined as the person's default phone number. To determine the default phone number, check the <span style="font-family: Courier New,Courier,monospace">is_primary_default</span> property of the <span style="font-family: Courier New,Courier,monospace">_contacts_person_number</span> view for the person's phone numbers. For the default phone number, the property is set to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<p>If a person is associated with multiple phone numbers, one of them is defined as the person's default phone number. To determine the default phone number, check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view for the person's phone numbers. For the default phone number, the property is set to <code>true</code>.</p>
<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);
-
- /* 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_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,
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);
- /* Run the query: Retrieve the phone number records containing the default phone number */
+ /* 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 list, filter, and query handles and release all their resources */
+ /* Destroy the handles and release all their resources */
contacts_list_destroy(list, true);
contacts_filter_destroy(filter);
contacts_query_destroy(query);
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);
+ /*
+ 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);
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's event records and retrieve the event details */
+ /* 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;
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>contacts_list_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
</pre>
<ol>
<li>
-<p>Retrieve the contact you want to update using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the contact ID as the second parameter:</p>
+<p>Retrieve the contact you want to update using the <code>contacts_db_get_record()</code> function with the contact ID as the second parameter:</p>
<pre class="prettyprint">
int contact_id = ...; /* Get the contact ID */
contacts_record_h contact = NULL;
error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &contact);
</pre>
-<p>You can also retrieve the contact using a search function, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the contact using a search function, such as <code>contacts_db_get_records_with_query()</code>.</p>
</li>
<li>
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);
</pre>
-<p>The example assumes the birthday event is the only event defined for the contact, meaning you can retrieve the event record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function with the record index set to 0. If the contact has multiple events defined, you must iterate through them.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_XXX()</span> functions only change the data in the memory object, not in the contact database. Normally, to update the database, you need to update each record separately using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function. However, if you retrieve a child record using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, you only need to update the parent record to the database; the child record is updated automatically with the parent record.</td>
- </tr>
- </tbody>
-</table>
+<p>The example assumes the birthday event is the only event defined for the contact, meaning you can retrieve the event record using the <code>contacts_record_get_child_record_at_p()</code> function with the record index set to 0. If the contact has multiple events defined, you must iterate through them.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The <code>contacts_record_set_XXX()</code> functions only change the data in the memory object, not in the contact database. Normally, to update the database, you need to update each record separately using the <code>contacts_db_update_record()</code> function. However, if you retrieve a child record using the <code>contacts_record_get_child_record_at_p()</code> function, you only need to update the parent record to the database; the child record is updated automatically with the parent record.
+ </div>
</li>
<li>
-<p>Update the contact using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function:</p>
+<p>Update the contact using the <code>contacts_db_update_record()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_update_record(contact);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the contact handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the contact handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(contact, true);
</pre>
<h2 id="delete_contact" name="delete_contact">Deleting a Person</h2>
-<p>To delete a person, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with the person ID as the second parameter:</p>
+<p>To delete a person, use the <code>contacts_db_delete_record()</code> function with the person ID as the second parameter:</p>
<pre class="prettyprint">
int person_id = ...; /* Get the person ID */
<ul>
<li>
-<p>To manually link a person to another person, use the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function. The function links the contacts of the other person (second parameter) to the base person (first parameter) and deletes the former from the contact database. The base person is left with both their original contacts and the other person's contacts.</p>
+<p>To manually link a person to another person, use the <code>contacts_person_link_person()</code> function. The function links the contacts of the other person (second parameter) to the base person (first parameter) and deletes the former from the contact database. The base person is left with both their original contacts and the other person's contacts.</p>
<pre class="prettyprint">
int person_id1 = ...; /* Get the base person ID */
int person_id2 = ...; /* Get another person ID */
</li>
<li>
-<p>To automatically link a new contact to an existing person, set the <
span style="font-family: Courier New,Courier,monospace">_contacts_contact.link_mode</span> property of the contact to <span style="font-family: Courier New,Courier,monospace">CONTACTS_CONTACT_LINK_MODE_NONE</span> when <a href="#create_contact">creating the contact</a>.</p>
-<p>The contacts service determines the link based on the <span style="font-family: Courier New,Courier,monospace">_contacts_number.number</span> and <span style="font-family: Courier New,Courier,monospace">_contacts_email.email</span> properties of the contact. If an existing person has the same phone number or email address, but in a different address book, the contact is automatically linked to the person. If the phone number or email address lead to an existing contact in the same address book, the link does not work.</p>
+<p>To automatically link a new contact to an existing person, set the <
code>_contacts_contact.link_mode</code> property of the contact to <code>CONTACTS_CONTACT_LINK_MODE_NONE</code> when <a href="#create_contact">creating the contact</a>.</p>
+<p>The contacts service determines the link based on the <code>_contacts_number.number</code> and <code>_contacts_email.email</code> properties of the contact. If an existing person has the same phone number or email address, but in a different address book, the contact is automatically linked to the person. If the phone number or email address lead to an existing contact in the same address book, the link does not work.</p>
<pre class="prettyprint">
contacts_record_h contact = NULL;
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);
-
-/* Contact is linked automatically if an existing person has the same number in a different address book */
+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
+ has the same number in a different address book
+*/
error_code += contacts_db_insert_record(contact, NULL);
contacts_record_destroy(contact, true);
</li>
<li>
-<p>To unlink a contact from a person, use the <span style="font-family: Courier New,Courier,monospace">contacts_person_unlink_contact()</span> function. The function removes the contact (second parameter) from the person (first parameter), creates a new person (third parameter), and links the contact to the new person.</p>
+<p>To unlink a contact from a person, use the <code>contacts_person_unlink_contact()</code> function. The function removes the contact (second parameter) from the person (first parameter), creates a new person (third parameter), and links the contact to the new person.</p>
<pre class="prettyprint">
int person_id = ...; /* Get the person ID */
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>
<ul>
<li>
-<p>To set a new person as a favorite when creating the corresponding new contact, set the <span style="font-family: Courier New,Courier,monospace">_contacts_contact.is_favorite</span> property of the contact to <span style="font-family: Courier New,Courier,monospace">true</span>. When you insert the contact into the contact database, the new person that is created for the contact is automatically set as a favorite.</p>
+<p>To set a new person as a favorite when creating the corresponding new contact, set the <code>_contacts_contact.is_favorite</code> property of the contact to <code>true</code>. When you insert the contact into the contact database, the new person that is created for the contact is automatically set as a favorite.</p>
<pre class="prettyprint">
contacts_record_h contact = NULL;
</li>
<li>
-<p>To set an existing person as a favorite, update the person record by setting its <span style="font-family: Courier New,Courier,monospace">_contacts_person.is_favorite</span> property to <span style="font-family: Courier New,Courier,monospace">true</span>:</p>
+<p>To set an existing person as a favorite, update the person record by setting its <code>_contacts_person.is_favorite</code> property to <code>true</code>:</p>
<pre class="prettyprint">
int person_id = ...; /* Get the person ID */
contacts_record_h person = NULL;
</li>
<li>
-<p>To unset an existing person as a favorite, update the person record by setting its <span style="font-family: Courier New,Courier,monospace">_contacts_person.is_favorite</span> property to <span style="font-family: Courier New,Courier,monospace">false</span>:</p>
+<p>To unset an existing person as a favorite, update the person record by setting its <code>_contacts_person.is_favorite</code> property to <code>false</code>:</p>
<pre class="prettyprint">
int person_id = ...; /* Get the person ID */
contacts_record_h person = NULL;
<ol>
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function:</p>
+<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>
<ol>
<li>
-<p>Create a group handle using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> property as the first parameter and the group handle variable as the second parameter:</p>
+<p>Create a group handle using the <code>contacts_record_create()</code> function with the <code>_contacts_group._uri</code> property as the first parameter and the group handle variable as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h group = NULL;
<p>Set the group properties:</p>
<ul>
<li>
-<p>To set the group name, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_group.name</span> property as the second parameter:</p>
+<p>To set the group name, use the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.name</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = contacts_record_set_str(group, _contacts_group.name, "Neighbors");
</pre>
</li>
<li>
-<p>To set the group image, define the path to the image file, and set the path to the group using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_group.image_path</span> property as the second parameter:</p>
+<p>To set the group image, define the path to the image file, and set the path to the group using the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.image_path</code> property as the second parameter:</p>
<pre class="prettyprint">
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>
<li>
-<p>To set the group ringtone, define the path to the ringtone file, and set the path to the group using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_group.ringtone_path</span> property as the second parameter:</p>
+<p>To set the group ringtone, define the path to the ringtone file, and set the path to the group using the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.ringtone_path</code> property as the second parameter:</p>
<pre class="prettyprint">
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>
</li>
<li>
-<p>Insert the group into the contact database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function:</p>
+<p>Insert the group into the contact database using the <code>contacts_db_insert_record()</code> function:</p>
<pre class="prettyprint">
int added_group_id = -1;
</li>
<li>
-<p>When no longer needed, destroy the group handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the group handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(group, true);
</pre>
<ol>
<li>
-<p>Retrieve a group record using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the group ID as the second parameter:</p>
+<p>Retrieve a group record using the <code>contacts_db_get_record()</code> function with the group ID as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h group;
int group_id = ...; /* Get the group ID */
</li>
<li>
-<p>When no longer needed, destroy the group handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the group handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(group, true);
</pre>
<p>Retrieve a list of all groups, or retrieve a filtered list of groups:</p>
<ul>
<li>
-<p>To retrieve a list of all groups, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all groups, use the <code>contacts_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
<p>To retrieve a filtered list of groups:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">contacts_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>contacts_query_create()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
contacts_query_h query = NULL;
</pre>
</li>
<li>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>contacts_filter_create()</code> function:</p>
<pre class="prettyprint">
contacts_filter_h filter = NULL;
</pre>
</li>
<li>
-<p>Add a filtering condition using a <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_XXX()</span> function.</p>
+<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 any group whose name contains the string "neighbors":</p>
<pre class="prettyprint">
error_code = contacts_filter_add_str(filter, _contacts_group.name,
<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");
</pre>
</li>
<li>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>contacts_query_set_filter()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_query_set_filter(query, filter);
</pre>
</li>
<li>
-<p>Retrieve the filtered list of groups using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of groups using the <code>contacts_db_get_records_with_query()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_get_records_with_query(query, 0, 0, &list);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all groups matching the query.</p>
</li>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>contacts_filter_destroy()</code> and <code>contacts_query_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_filter_destroy(filter);
contacts_query_destroy(query);
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the group details.</p>
-<p>Move forward and backward within the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions, and retrieve the current group using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the list using the <code>contacts_list_next()</code> and <code>contacts_list_prev()</code> functions, and retrieve the current group using the <code>contacts_list_get_current_record_p()</code> function.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
+
<p>The following example iterates through the list and retrieves the name of each group:</p>
<pre class="prettyprint">
contacts_record_h record;
</pre>
</li>
<li>
-<p>Optionally, retrieve more details of each group using the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each group using the <code>contacts_gl_group_data_t</code> structure:</p>
<pre class="prettyprint">
contacts_gl_group_data_t *gl_group_data = NULL;
contacts_record_h record;
break;
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>contacts_gl_group_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _contacts_gl_group_data {
int id;
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);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>contacts_list_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
</pre>
<ol>
<li>
-<p>Retrieve the group you want to update using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the group ID as the second parameter:</p>
+<p>Retrieve the group you want to update using the <code>contacts_db_get_record()</code> function with the group ID as the second parameter:</p>
<pre class="prettyprint">
int group_id = ...; /* Get the group ID */
contacts_record_h group = NULL;
error_code = contacts_db_get_record(_contacts_group._uri, group_id, &group);
</pre>
-<p>You can also retrieve the group using a search function, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the group using a search function, such as <code>contacts_db_get_records_with_query()</code>.</p>
</li>
<li>
</li>
<li>
-<p>Update the group using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function:</p>
+<p>Update the group using the <code>contacts_db_update_record()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_update_record(group);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the group handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the group handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(group, true);
</pre>
<h2 id="delete" name="delete">Deleting a Group</h2>
-<p>To delete a group, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with the group ID as the second parameter:</p>
+<p>To delete a group, use the <code>contacts_db_delete_record()</code> function with the group ID as the second parameter:</p>
<pre class="prettyprint">
int group_id = ...; /* Get the group ID */
<ul>
<li>
-<p>To add a new contact to a group, retrieve the contact ID and the group ID, and use the <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span> function:</p>
+<p>To add a new contact to a group, retrieve the contact ID and the group ID, and use the <code>contacts_group_add_contact()</code> function:</p>
<pre class="prettyprint">
int contact_id = ...; /* Get the contact ID */
int group_id = ...; /* Get the group ID */
</li>
<li>
-<p>To remove a contact from a group, use the <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span> function:</p>
+<p>To remove a contact from a group, use the <code>contacts_group_remove_contact()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_group_remove_contact(group_id, contact_id);
</pre>
CONTACTS_MATCH_EQUAL, group_id);
contacts_query_set_filter(query, filter);
-/* Run the query: Retrieve a list of all persons assigned to the specified group */
+/* Query to get a list of all persons assigned to the specified group */
contacts_db_get_records_with_query(query, 0, 0, &list);
</pre>
</li>
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);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the list, filter, and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the list, filter, and query handles and release all their resources using the <code>contacts_list_destroy()</code>, <code>contacts_filter_destroy()</code>, and <code>contacts_query_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
contacts_filter_destroy(filter);
<ol>
<li>
-<p>Register a callback using the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function:</p>
+<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>
error_code = contacts_vcard_make_from_person(record, &vcard_stream);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The contacts service allows you to create a vCard stream from a person, contact, or my profile (using the <span style="font-family: Courier New,Courier,monospace">contacts_vcard_make_from_person()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_vcard_make_from_contact()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_vcard_make_from_my_profile()</span> function).</td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ The contacts service allows you to create a vCard stream from a person, contact, or my profile (using the <code>contacts_vcard_make_from_person()</code>, <code>contacts_vcard_make_from_contact()</code>, or <code>contacts_vcard_make_from_my_profile()</code> function).
+ </div>
</li>
<li>
<ol>
<li>
-<p>Parse the vCard stream using the <span style="font-family: Courier New,Courier,monospace">contacts_vcard_parse_to_contact_foreach()</span> function:</p>
+<p>Parse the vCard stream using the <code>contacts_vcard_parse_to_contact_foreach()</code> function:</p>
<pre class="prettyprint">
char *resource_path = app_get_resource_path();
char temp_path[1024];
snprintf(temp_path, sizeof(temp_path), "%s/vcard.vcf", resource_path);
free(resource_path);
-error_code = contacts_vcard_parse_to_contact_foreach(temp_path, /* File path of vCard */
- _vcard_parse_cb, /* Callback to invoke */
- NULL); /* User data passed to the callback */
+error_code = contacts_vcard_parse_to_contact_foreach(/* vCard file path */
+ temp_path,
+ /* Callback to invoke */
+ _vcard_parse_cb,
+ /* User data for callback */
+ NULL);
</pre>
</li>
<li>
<p>Define a callback that inserts the parsed contact into the contact database.</p>
-<p>The vCard stream can contain multiple contacts. The <span style="font-family: Courier New,Courier,monospace">contacts_vcard_parse_to_contact_foreach()</span> function invokes a separate callback for each parsed contact. As long as the callbacks return <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to parse new contacts.</p>
+<p>The vCard stream can contain multiple contacts. The <code>contacts_vcard_parse_to_contact_foreach()</code> function invokes a separate callback for each parsed contact. As long as the callbacks return <code>true</code>, the foreach function continues to parse new contacts.</p>
<pre class="prettyprint">
static bool
_vcard_parse_cb(contacts_record_h contact, void *user_data)
<ol>
<li>
-<p>Create a speed dial handle using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> property as the first parameter and the speed dial handle variable as the second parameter:</p>
+<p>Create a speed dial handle using the <code>contacts_record_create()</code> function with the <code>_contacts_speeddial._uri</code> property as the first parameter and the speed dial handle variable as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h speeddial;
<p>Set the speed dial properties:</p>
<ul>
<li>
-<p>To set the speed dial number, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial.speeddial_number</span> property as the second parameter:</p>
+<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>
<li>
-<p>To set the ID for the speed dial number, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial.number_id</span> property as the second parameter:</p>
+<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>
</li>
<li>
-<p>Insert the speed dial into the contact database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function:</p>
+<p>Insert the speed dial into the contact database using the <code>contacts_db_insert_record()</code> function:</p>
<pre class="prettyprint">
int added_speeddial_id = -1;
</li>
<li>
-<p>When no longer needed, destroy the speed dial handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the speed dial handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(speeddial, true);
</pre>
<ol>
<li>
-<p>Retrieve a speed dial record using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the speed dial ID as the second parameter:</p>
+<p>Retrieve a speed dial record using the <code>contacts_db_get_record()</code> function with the speed dial ID as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h speeddial;
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>
<li>
-<p>When no longer needed, destroy the speed dial handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the speed dial handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(speeddial, true);
</pre>
<p>Retrieve a list of all speed dials, or retrieve a filtered list of speed dials:</p>
<ul>
<li>
-<p>To retrieve a list of all speed dials, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all speed dials, use the <code>contacts_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
<p>To retrieve a filtered list of speed dials:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">contacts_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>contacts_query_create()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
contacts_query_h query = NULL;
</pre>
</li>
<li>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>contacts_filter_create()</code> function:</p>
<pre class="prettyprint">
contacts_filter_h filter = NULL;
</pre>
</li>
<li>
-<p>Add a filtering condition using a <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_XXX()</span> function.</p>
+<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>
<li>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>contacts_query_set_filter()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_query_set_filter(query, filter);
</pre>
</li>
<li>
-<p>Retrieve the filtered list of speed dials using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of speed dials using the <code>contacts_db_get_records_with_query()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_get_records_with_query(query, 0, 0, &list);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all speed dials matching the query.</p>
</li>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>contacts_filter_destroy()</code> and <code>contacts_query_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_filter_destroy(filter);
contacts_query_destroy(query);
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the speed dial details.</p>
-<p>Move forward and backward within the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions, and retrieve the current speed dial using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the list using the <code>contacts_list_next()</code> and <code>contacts_list_prev()</code> functions, and retrieve the current speed dial using the <code>contacts_list_get_current_record_p()</code> function.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
<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>
</li>
<li>
-<p>Optionally, retrieve more details of each speed dial using the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each speed dial using the <code>contacts_gl_speeddial_data_t</code> structure:</p>
<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);
break;
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>contacts_gl_speeddial_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _contacts_gl_speeddial_data {
int speeddial_number;
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);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>contacts_list_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
</pre>
<ol>
<li>
-<p>Retrieve the speed dial you want to update using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the speed dial number as the second parameter:</p>
+<p>Retrieve the speed dial you want to update using the <code>contacts_db_get_record()</code> function with the speed dial number as the second parameter:</p>
<pre class="prettyprint">
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 <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+<p>You can also retrieve the speed dial using a search function, such as <code>contacts_db_get_records_with_query()</code>.</p>
</li>
<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>
<li>
-<p>Update the speed dial using the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function:</p>
+<p>Update the speed dial using the <code>contacts_db_update_record()</code> function:</p>
<pre class="prettyprint">
error_code = contacts_db_update_record(speeddial);
</pre>
</li>
<li>
-<p>When no longer needed, destroy the speed dial handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the speed dial handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(speeddial, true);
</pre>
<h2 id="sd_delete" name="sd_delete">Deleting a Speed Dial</h2>
-<p>To delete a speed dial, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with the speed dial number as the second parameter:</p>
+<p>To delete a speed dial, use the <code>contacts_db_delete_record()</code> function with the speed dial number as the second parameter:</p>
<pre class="prettyprint">
int speeddial_number = ...; /* Get the speed dial number */
<ol>
<li>
-<p>Create a log handle using the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> property as the first parameter and the log handle variable as the second parameter:</p>
+<p>Create a log handle using the <code>contacts_record_create()</code> function with the <code>_contacts_phone_log._uri</code> property as the first parameter and the log handle variable as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h log;
<p>Set the log properties:</p>
<ul>
<li>
-<p>To set the log type, use the <
span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.log_type</span> property as the second parameter. The third parameter defines the log type using the values of the <span style="font-family: Courier New,Courier,monospace">contacts_phone_log_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">wearable</a> applications).</p>
+<p>To set the log type, use the <
code>contacts_record_set_int()</code> function with the <code>_contacts_phone_log.log_type</code> property as the second parameter. The third parameter defines the log type using the values of the <code>contacts_phone_log_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">wearable</a> applications).</p>
<pre class="prettyprint">
error_code = contacts_record_set_int(log, _contacts_phone_log.log_type,
CONTACTS_PLOG_TYPE_VOICE_INCOMING);
</li>
<li>
-<p>To set the log time (calculated as number of seconds since 1970-01-01 00:00:00 UTC), use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.log_time</span> property as the second parameter:</p>
+<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>
<li>
-<p>To set the log duration (in practice, the message ID, email ID, or call duration in seconds), use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.extra_data1</span> property as the second parameter:</p>
+<p>To set the log duration (in practice, the message ID, email ID, or call duration in seconds), use the <code>contacts_record_set_int()</code> function with the <code>_contacts_phone_log.extra_data1</code> property as the second parameter:</p>
<pre class="prettyprint">
error_code = contacts_record_set_int(log, _contacts_phone_log.extra_data1, 37);
if (error_code != CONTACTS_ERROR_NONE)
</pre>
</li>
<li>
-<p>To set the log address (in practice, the phone number or email address), use the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function with the <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.address</span> property as the second parameter:</p>
+<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>
</li>
<li>
-<p>Insert the log into the contact database using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function:</p>
+<p>Insert the log into the contact database using the <code>contacts_db_insert_record()</code> function:</p>
<pre class="prettyprint">
int added_log_id = -1;
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>
<li>
-<p>When no longer needed, destroy the log handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the log handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(log, true);
</pre>
<ol>
<li>
-<p>Retrieve a log record using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the log ID as the second parameter:</p>
+<p>Retrieve a log record using the <code>contacts_db_get_record()</code> function with the log ID as the second parameter:</p>
<pre class="prettyprint">
contacts_record_h log;
int log_id = ...; /* Get the log ID */
</li>
<li>
-<p>When no longer needed, destroy the log handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function:</p>
+<p>When no longer needed, destroy the log handle and release all its resources using the <code>contacts_record_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_record_destroy(log, true);
</pre>
<p>Retrieve a list of all logs, or retrieve a filtered list of logs:</p>
<ul>
<li>
-<p>To retrieve a list of all logs, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<p>To retrieve a list of all logs, use the <code>contacts_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
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>
<p>To retrieve a filtered list of logs:</p>
<ol type="a">
<li>
-<p>Define a list handle variable, and create a query handle using the <span style="font-family: Courier New,Courier,monospace">contacts_query_create()</span> function:</p>
+<p>Define a list handle variable, and create a query handle using the <code>contacts_query_create()</code> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
contacts_query_h query = NULL;
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>
-<p>Create a filter handle using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function:</p>
+<p>Create a filter handle using the <code>contacts_filter_create()</code> function:</p>
<pre class="prettyprint">
contacts_filter_h filter = NULL;
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>
-<p>Add a filtering condition using a <span style="font-family: Courier New,Courier,monospace">contacts_filter_add_XXX()</span> function.</p>
-<p>The following example adds an integer-based filtering condition that retrieves any log whose type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_INCOMING</span>:</p>
+<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 any log whose type is <code>CONTACTS_PLOG_TYPE_VOICE_INCOMING</code>:</p>
<pre class="prettyprint">
error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type,
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>To add more conditions, define an operator between the conditions.</p>
-<p>The following example first adds an OR operator and then an integer-based filtering condition that retrieves any log whose type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_OUTGOING</span>.</p>
-<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves logs whose type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_INCOMING</span> or <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_OUTGOING</span>.</p>
+<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>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace">contacts_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>contacts_query_set_filter()</code> function:</p>
<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>
-<p>Retrieve the filtered list of logs using the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list of logs using the <code>contacts_db_get_records_with_query()</code> function:</p>
<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>
<li>
-<p>When no longer needed, destroy the filter and query handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace">contacts_filter_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_query_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter and query handles and release all their resources using the <code>contacts_filter_destroy()</code> and <code>contacts_query_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_filter_destroy(filter);
contacts_query_destroy(query);
<ol type="a">
<li>
<p>Use a loop to iterate through the list and retrieve the log details.</p>
-<p>Move forward and backward within the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions, and retrieve the current log using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+<p>Move forward and backward within the list using the <code>contacts_list_next()</code> and <code>contacts_list_prev()</code> functions, and retrieve the current log using the <code>contacts_list_get_current_record_p()</code> function.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
+
<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>
</li>
<li>
-<p>Optionally, retrieve more details of each log using the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>
+<p>Optionally, retrieve more details of each log using the <code>contacts_gl_log_data_t</code> structure:</p>
<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);
break;
}
</pre>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure and the functions for using the structure:</p>
+<p>Define the <code>contacts_gl_log_data_t</code> structure and the functions for using the structure:</p>
<pre class="prettyprint">
struct _contacts_gl_log_data {
int id;
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);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">contacts_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>contacts_list_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
</pre>
<h2 id="pl_delete" name="pl_delete">Deleting a Log</h2>
-<p>To delete a log entry, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with the log ID as the second parameter:</p>
+<p>To delete a log entry, use the <code>contacts_db_delete_record()</code> function with the log ID as the second parameter:</p>
<pre class="prettyprint">
int log_id = ...; /* Get the log ID */
<h2 id="insert2" name="insert2">Creating a Record</h2>
-<p>The basic concept in the Contacts API is a record. A record can be a complex set of data, containing other data. For example, an address record can contain data about the country, region, and street. Also, the contained data can be a reference to another record. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace;">address</span> property, which is a reference to an address record. A record can therefore be a node in a tree of relations between records.</p>
+<p>The basic concept in the Contacts API is a record. A record can be a complex set of data, containing other data. For example, an address record can contain data about the country, region, and street. Also, the contained data can be a reference to another record. For example, a contact record contains the <code>address</code> property, which is a reference to an address record. A record can therefore be a node in a tree of relations between records.</p>
-<p>Each record type has a special <span style="font-family: Courier New,Courier,monospace;">view</span> structure, which contains identifiers of its properties. For example, the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view describes the properties of the contact record. It contains properties, such as the name, company, and nickname of the contact. A special property in such structures is the URI, which is used to identify the record type. Every view describing a record has this property.</p>
+<p>Each record type has a special <code>view</code> structure, which contains identifiers of its properties. For example, the <code>_contacts_contact</code> view describes the properties of the contact record. It contains properties, such as the name, company, and nickname of the contact. A special property in such structures is the URI, which is used to identify the record type. Every view describing a record has this property.</p>
<p>To insert a new record into the contact database:</p>
<li>
<p>Create a new record.</p>
-<p>For example, to create a new contact record, create a record using the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view:</p>
+<p>For example, to create a new contact record, create a record using the <code>_contacts_contact</code> view:</p>
<pre class="prettyprint">
contacts_record_h hcontact = NULL;
error_code = contacts_record_create(_contacts_contact._uri, &hcontact);
</pre>
-<p>Creating another type of record, such as a group or speed dial, is similar to creating a record. The only difference is using another view, for example, <span style="font-family: Courier New,Courier,monospace;">_contacts_group</span> for a group or <span style="font-family: Courier New,Courier,monospace;">_contacts_speeddial</span> for a speed dial.</p>
+<p>Creating another type of record, such as a group or speed dial, is similar to creating a record. The only difference is using another view, for example, <code>_contacts_group</code> for a group or <code>_contacts_speeddial</code> for a speed dial.</p>
</li>
<li>
<p>Most properties in the contact view are separate records, so create more records, as needed. For example, to set the address for the contact:</p>
<ol type="a">
<li>
-<p>Create a new address record using the <span style="font-family: Courier New,Courier,monospace;">_contacts_address</span> view:</p>
+<p>Create a new address record using the <code>_contacts_address</code> view:</p>
<pre class="prettyprint">
contacts_record_h haddress = NULL;
<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not destroy the child record handle.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not destroy the child record handle.
+ </div>
</li>
</ol>
</li>
error_code = contacts_db_insert_record(hcontact, &id);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not manually insert any of the child records into the database. The system inserts the child records automatically along with the parent record.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not manually insert any of the child records into the database. The system inserts the child records automatically along with the parent record.
+ </div>
</li>
<li>
<li>
<p>Retrieve direct record details.</p>
-<p>To retrieve details directly from the record, use a <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_XXX()</span> function. The specific function depends on the data type of the detail (property) you want to retrieve.</p>
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function to retrieve a contact's display name, which is a string value:</p>
+<p>To retrieve details directly from the record, use a <code>contacts_record_get_XXX()</code> function. The specific function depends on the data type of the detail (property) you want to retrieve.</p>
+<p>The following example uses the <code>contacts_record_get_str()</code> function to retrieve a contact's display name, which is a string value:</p>
<pre class="prettyprint">
char *d_name;
contacts_record_get_str(record, _contacts_contact.display_name, d_name);
<li>
<p>Retrieve child record details.</p>
-<p>When working with a record from one view, you sometimes need details from its child record from another view. To retrieve details from a child record, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function.</p>
+<p>When working with a record from one view, you sometimes need details from its child record from another view. To retrieve details from a child record, use the <code>contacts_record_get_child_record_at_p()</code> function.</p>
<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;
<li>
<p>Retrieve parent record details.</p>
<p>When working with a child record from one view, you sometimes need details from its parent record from another view. To access the parent record, first determine its ID, and then retrieve the parent record.</p>
-<p>The following example first retrieves the parent contact record ID for a name record using the <span style="font-family: Courier New,Courier,monospace;">contact_id</span> property, then retrieves the contact record, and finally checks whether the contact has an email address:</p>
+<p>The following example first retrieves the parent contact record ID for a name record using the <code>contact_id</code> property, then retrieves the contact record, and finally checks whether the contact has an email address:</p>
<pre class="prettyprint">
contacts_record_h parent_record;
int parent_id;
<ol type="a">
<li>
<p>Create the structure.</p>
-<p>The following example defines the <span style="font-family: Courier New,Courier,monospace;">contact_gl_data_t</span> structure for contacts and implements the create function for the structure:</p>
+<p>The following example defines the <code>contact_gl_data_t</code> structure for contacts and implements the create function for the structure:</p>
<pre class="prettyprint">
gldata = _create_gl_data(record);
char *number = gldata->number;
<p>Contacts, for example, are organized in a parent-child structure, where the contact record is the parent. To retrieve specific data from a contact record:</p>
<ul>
<li>
-<p>If the data is stored directly in the contact record, access the correct property using the appropriate <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_XXX()</span> function.</p>
+<p>If the data is stored directly in the contact record, access the correct property using the appropriate <code>contacts_record_get_XXX()</code> function.</p>
</li>
<li>
-<p>If the data is stored in a child record, retrieve the child record responsible for the data type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function, and then access the correct property in the child record using the appropriate <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_XXX()</span> function.</p>
+<p>If the data is stored in a child record, retrieve the child record responsible for the data type using the <code>contacts_record_get_child_record_at_p()</code> function, and then access the correct property in the child record using the appropriate <code>contacts_record_get_XXX()</code> function.</p>
</li>
</ul>
<p>For a list of properties by view, see View/Property (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</td>
- </tr>
- </tbody>
-</table>
-<p>To retrieve contact details into the <span style="font-family: Courier New,Courier,monospace;">contact_gl_data_t</span> structure:</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not pass any data returned by a function with the <code>_p</code> suffix to the <code>free()</code> function.
+ </div>
+<p>To retrieve contact details into the <code>contact_gl_data_t</code> structure:</p>
<ul>
<li>
-<p>To retrieve the ID of the contact record, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function on the contact record with the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.id</span> property.</p>
-<p>The ID is a unique number representing the record key in the contact database. If you know the ID of a record, you can access and manipulate the record with different functions, such as <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_record()</span> or <span style="font-family: Courier New,Courier,monospace;">contacts_db_delete_record()</span>.</p>
+<p>To retrieve the ID of the contact record, use the <code>contacts_record_get_int()</code> function on the contact record with the <code>_contacts_contact.id</code> property.</p>
+<p>The ID is a unique number representing the record key in the contact database. If you know the ID of a record, you can access and manipulate the record with different functions, such as <code>contacts_db_get_record()</code> or <code>contacts_db_delete_record()</code>.</p>
<pre class="prettyprint">
static bool
_get_contact_id(contacts_record_h r_contact, int *id)
{
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;
}
</pre>
</li>
<li>
-<p>To retrieve the contact's phone number, first check whether the contact has at least 1 phone number using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function on the contact record with the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.has_phonenumber</span> property. If the contact has 1 or more phone numbers, retrieve the numbers using the various Query (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">wearable</a> applications) and Filter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) functions from the Contacts API. The numbers are stored in the number child records (the <span style="font-family: Courier New,Courier,monospace;">_contacts_number</span> view). After you are done, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
+<p>To retrieve the contact's phone number, first check whether the contact has at least 1 phone number using the <code>contacts_record_get_bool()</code> function on the contact record with the <code>_contacts_contact.has_phonenumber</code> property. If the contact has 1 or more phone numbers, retrieve the numbers using the various Query (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">wearable</a> applications) and Filter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) functions from the Contacts API. The numbers are stored in the number child records (the <code>_contacts_number</code> view). After you are done, free any data returned by a function not containing the <code>_p</code> suffix.</p>
<p>The following example checks whether the contact has any phone numbers. Then, it queries all phone numbers and filters the search so that only the numbers that are default numbers and belong to the specific contact are included in the search result.</p>
<pre class="prettyprint">
static bool
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;
}
return false;
}
</pre>
-<p>To retrieve a second number, change the third parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function from 0 to 1.</p>
+<p>To retrieve a second number, change the third parameter of the <code>contacts_record_get_child_record_at_p()</code> function from 0 to 1.</p>
</li>
<li>
-<p>To retrieve the contact's name details, retrieve the name child record of the contact record using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function with the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> property. From the child record, retrieve the name data using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
+<p>To retrieve the contact's name details, retrieve the name child record of the contact record using the <code>contacts_record_get_child_record_at_p()</code> function with the <code>_contacts_contact.name</code> property. From the child record, retrieve the name data using the <code>contacts_record_get_str()</code> function.</p>
<p>The following example retrieves the contact's first name from the name record:</p>
<pre class="prettyprint">
static bool
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);
}
</pre>
</li>
<li>
-<p>To retrieve the contact's image, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function on the contact record with the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.image_thumbnail_path</span> property:</p>
+<p>To retrieve the contact's image, use the <code>contacts_record_get_str()</code> function on the contact record with the <code>_contacts_contact.image_thumbnail_path</code> property:</p>
<pre class="prettyprint">
static bool
_get_contact_image(contacts_record_h r_contact, char **image_path)
{
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>Retrieve a list of records:</p>
<ul>
<li>
-<p>To retrieve a list of all records of a given type, use the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_all_records()</span> function.</p>
+<p>To retrieve a list of all records of a given type, use the <code>contacts_db_get_all_records()</code> function.</p>
<p>The following example retrieves a list of all contacts:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
<p>To retrieve a filtered and sorted list of records of a given type:</p>
<ol type="a">
<li>
-<p>Create a query using the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function.</p>
+<p>Create a query using the <code>contacts_query_create()</code> function.</p>
<p>The following example creates a query for contact names:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
</pre>
</li>
<li>
-<p>Create a filter for the query using the <span style="font-family: Courier New,Courier,monospace;">contacts_filter_create()</span> function:</p>
+<p>Create a filter for the query using the <code>contacts_filter_create()</code> function:</p>
<p>The following example creates a name filter:</p>
<pre class="prettyprint">
contacts_filter_h filter = NULL;
contacts_filter_create(_contacts_name._uri, &filter);
</pre>
-<p>The first parameter defines in which view to place the filter. To filter contacts by first and last name, use the <
span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> view. The first parameter must be the same as the first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function, that is, the query and its filter must both use the same view. For more information on views, see View/Property (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p>
+<p>The first parameter defines in which view to place the filter. To filter contacts by first and last name, use the <
code>_contacts_name</code> view. The first parameter must be the same as the first parameter of the <code>contacts_query_create()</code> function, that is, the query and its filter must both use the same view. For more information on views, see View/Property (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p>
</li>
<li>
-<p>Add a filtering condition using a <span style="font-family: Courier New,Courier,monospace;">contacts_filter_add_XXX()</span> function.</p>
+<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 <
span style="font-family: Courier New,Courier,monospace;">contacts_match_str_flag_e</span> 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>
+<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>
<li>
-<p>To add more conditions, add a logical operator before each new condition using the <span style="font-family: Courier New,Courier,monospace;">contacts_filter_add_operator()</span> function. The conditions and operators together define the filtering logic as a whole.</p>
+<p>To add more conditions, add a logical operator before each new condition using the <code>contacts_filter_add_operator()</code> function. The conditions and operators together define the filtering logic as a whole.</p>
<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves name records where the last name ends with "ra".</p>
<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves name records where the last name starts with "Za" and ends with "ra".</p>
<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>
-<p>If you need to use a logical expression with brackets, such as "C1 AND C2 AND (C3 OR C4)", define the bracketed conditions in a separate filter, and add the new filter to the parent filter as a filtering condition using the <span style="font-family: Courier New,Courier,monospace;">contacts_filter_add_filter()</span> function.</p>
+<p>If you need to use a logical expression with brackets, such as "C1 AND C2 AND (C3 OR C4)", define the bracketed conditions in a separate filter, and add the new filter to the parent filter as a filtering condition using the <code>contacts_filter_add_filter()</code> function.</p>
<p>The following example extends the previous example by first adding an AND operator and then a child filter with 2 string-based filtering conditions separated by an OR operator.</p>
<p>The combination of all the filtering conditions means that the parent filter only retrieves name records where (1) the last name starts with "Za" and ends with "ra" and (2) the first name starts with either "Ada" or "Igo".</p>
<pre class="prettyprint">
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>
</li>
<li>
-<p>Set the filter to the query using the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_filter()</span> function:</p>
+<p>Set the filter to the query using the <code>contacts_query_set_filter()</code> function:</p>
<pre class="prettyprint">
contacts_query_set_filter(query, filter);
</pre>
</li>
<li>
-<p>Sort the query results by one of its view properties using the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_sort()</span> function.</p>
+<p>Sort the query results by one of its view properties using the <code>contacts_query_set_sort()</code> function.</p>
<p>The following example sorts the contact name query by first name:</p>
<pre class="prettyprint">
contacts_query_set_sort(query, _contacts_name.first, true);
</pre>
</li>
<li>
-<p>Set a projection to the query using the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_projection()</span> function.</p>
+<p>Set a projection to the query using the <code>contacts_query_set_projection()</code> function.</p>
<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 <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_distinct()</span> function, which removes duplicates from the results:</p>
+<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">
contacts_query_set_distinct(query, true);
</pre>
</li>
<li>
-<p>Retrieve the filtered list using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_records_with_query()</span> function:</p>
+<p>Retrieve the filtered list using the <code>contacts_db_get_records_with_query()</code> function:</p>
<pre class="prettyprint">
contacts_db_get_records_with_query(query, 0, 0, &list);
</pre>
<p>Use a loop to iterate through the list and retrieve the details:</p>
<ul>
<li>
-<p>Move forward and backward within the list using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_prev()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_next()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_first()</span>, and <span style="font-family: Courier New,Courier,monospace;">contacts_list_last()</span> functions.</p>
+<p>Move forward and backward within the list using the <code>contacts_list_prev()</code>, <code>contacts_list_next()</code>, <code>contacts_list_first()</code>, and <code>contacts_list_last()</code> functions.</p>
</li>
<li>
-<p>Retrieve the current record using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function. By default, before iterating through the list, the current record is the first record.</p>
+<p>Retrieve the current record using the <code>contacts_list_get_current_record_p()</code> function. By default, before iterating through the list, the current record is the first record.</p>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace;">_p</span> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td>
- </tr>
- </tbody>
-</table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
+ </div>
<p>To retrieve the record details:</p>
<ul>
<li>
-<p>To retrieve only basic details, use a <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_XXX()</span> function on the record.</p>
-<p>The following example use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function to retrieve a contact's display name:</p>
+<p>To retrieve only basic details, use a <code>contacts_record_get_XXX()</code> function on the record.</p>
+<p>The following example use the <code>contacts_record_get_str()</code> function to retrieve a contact's display name:</p>
<pre class="prettyprint">
contacts_record_h record;
</li>
<li>
<p>To retrieve more details, including child record details, use a structure. For more information, see <a href="#structure">Retrieving Record Details</a>.</p>
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">contact_gl_data_t</span> structure to retrieve contact details:</p>
+<p>The following example uses the <code>contact_gl_data_t</code> structure to retrieve contact details:</p>
<pre class="prettyprint">
contacts_record_h record;
contact_gl_data_t *gldata = NULL;
</pre>
</li>
<li>
-<p>The previous examples work only if you use the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, that is, if you are dealing with contact records. If you use filtering in another view, as shown in the filtering examples, and you want to use the same contact structure with those records, first retrieve the parent contact record of the current record, and then use the structure for the parent record. This is basically a way to switch to the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view from another view.</p>
-<p>In the following example, the loop iterates through a list of name records. To retrieve the full details of the contact record corresponding to the current name record, the code retrieves the parent of the name record, which is a contact, and creates the <span style="font-family: Courier New,Courier,monospace;">contact_gl_data_t</span> structure for the parent, retrieving its full details.</p>
+<p>The previous examples work only if you use the <code>_contacts_contact</code> view, that is, if you are dealing with contact records. If you use filtering in another view, as shown in the filtering examples, and you want to use the same contact structure with those records, first retrieve the parent contact record of the current record, and then use the structure for the parent record. This is basically a way to switch to the <code>_contacts_contact</code> view from another view.</p>
+<p>In the following example, the loop iterates through a list of name records. To retrieve the full details of the contact record corresponding to the current name record, the code retrieves the parent of the name record, which is a contact, and creates the <code>contact_gl_data_t</code> structure for the parent, retrieving its full details.</p>
<pre class="prettyprint">
contacts_record_h record;
contact_gl_data_t *gldata = NULL;
</li>
<li>
-<p>When no longer needed, destroy the filter, query, and list handles and release all their resources using the <span style="font-family: Courier New,Courier,monospace;">contacts_filter_destroy()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_query_destroy()</span>, and <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> functions:</p>
+<p>When no longer needed, destroy the filter, query, and list handles and release all their resources using the <code>contacts_filter_destroy()</code>, <code>contacts_query_destroy()</code>, and <code>contacts_list_destroy()</code> functions:</p>
<pre class="prettyprint">
contacts_filter_destroy(filter);
contacts_query_destroy(query);
</li>
<li>
-<p>When no longer needed, destroy the list handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> function:</p>
+<p>When no longer needed, destroy the list handle and release all its resources using the <code>contacts_list_destroy()</code> function:</p>
<pre class="prettyprint">
contacts_list_destroy(list, true);
</pre>
<h2 id="delete2" name="delete2">Deleting a Record</h2>
-<p>To delete a record, use the <span style="font-family: Courier New,Courier,monospace;">contacts_db_delete_record()</span> function with the view URI as the first parameter and the record ID as the second parameter.</p>
+<p>To delete a record, use the <code>contacts_db_delete_record()</code> function with the view URI as the first parameter and the record ID as the second parameter.</p>
<p>The following example deletes a contact record:</p>
<ul>
<li>
-<p>Link a person to another person using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_link_person()</span> function with the corresponding person IDs.</p>
+<p>Link a person to another person using the <code>contacts_person_link_person()</code> function with the corresponding person IDs.</p>
-<p>The following example first retrieves the person IDs using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function and then links the persons:</p>
+<p>The following example first retrieves the person IDs using the <code>contacts_record_get_int()</code> function and then links the persons:</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);
<li>
<p>Set the default properties for the linked person.</p>
-<p>Set the default properties from one of the associated contacts using the <
span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter uses the values of the <span style="font-family: Courier New,Courier,monospace;">contacts_person_property_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">wearable</a> applications), which defines the available default properties for a person.</p>
+<p>Set the default properties from one of the associated contacts using the <
code>contacts_person_set_default_property()</code> function. The first parameter uses the values of the <code>contacts_person_property_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">wearable</a> applications), which defines the available default properties for a person.</p>
<p>For example, to set the person's default phone number based on the number of one of the associated contacts:</p>
<ol type="a">
<li><p>Retrieve the contact whose phone number you want to use.</p></li>
-<li><p>Retrieve the correct phone number record associated with the contact using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function.</p></li>
-<li><p>Retrieve the phone number ID from the phone number record using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function with the <span style="font-family: Courier New,Courier,monospace;">_contacts_number</span> view.</p></li>
-<li><p>Set the phone number as the default for the person using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function.</p></li>
+<li><p>Retrieve the correct phone number record associated with the contact using the <code>contacts_record_get_child_record_at_p()</code> function.</p></li>
+<li><p>Retrieve the phone number ID from the phone number record using the <code>contacts_record_get_int()</code> function with the <code>_contacts_number</code> view.</p></li>
+<li><p>Set the phone number as the default for the person using the <code>contacts_person_set_default_property()</code> function.</p></li>
</ol>
<pre class="prettyprint">
contacts_record_h record;
/* 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>
<li>
-<p>Retrieve the default properties of the linked person using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function.</p>
+<p>Retrieve the default properties of the linked person using the <code>contacts_person_get_default_property()</code> function.</p>
<p>For example, to retrieve the default email address:</p>
<ol type="a">
<li>
-<p>Retrieve the ID of the default email record using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function with the <span style="font-family: Courier New,Courier,monospace;">CONTACTS_PERSON_PROPERTY_EMAIL</span> property:</p>
+<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>
<li>
-<p>Retrieve the default email record using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_record()</span> function with the email record ID:</p>
+<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 */
</li>
<li>
-<p>Unlink a contact from the linked person using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_unlink_contact()</span> function. The function removes the contact (second parameter) from the person (first parameter), creates a new person (third parameter), and links the contact to the new person.</p>
+<p>Unlink a contact from the linked person using the <code>contacts_person_unlink_contact()</code> function. The function removes the contact (second parameter) from the person (first parameter), creates a new person (third parameter), and links the contact to the new person.</p>
<pre class="prettyprint">
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>
<ol>
<li>
-<p>Check the current display order using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_display_order()</span> function. The display order defines the order in which contacts (names) are displayed on the device screen.</p>
+<p>Check the current display order using the <code>contacts_setting_get_name_display_order()</code> function. The display order defines the order in which contacts (names) are displayed on the device screen.</p>
<pre class="prettyprint">
contacts_name_display_order_e display_order;
contacts_setting_get_name_display_order(&display_order);
/* 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>
<li>
-<p>Check the current sorting order using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_sorting_order()</span> function. The sorting order defines the order in which contact records are returned.</p>
+<p>Check the current sorting order using the <code>contacts_setting_get_name_sorting_order()</code> function. The sorting order defines the order in which contact records are returned.</p>
<pre class="prettyprint">
contacts_name_sorting_order_e sorting_order;
contacts_setting_get_name_sorting_order(&sorting_order);
/* 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>
<li>
-<p>Change the display and sorting orders using the <
span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_display_order()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_sorting_order()</span> functions. Both functions use as a parameter a value of an enumeration: <span style="font-family: Courier New,Courier,monospace;">contacts_name_display_order_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga0b52839d82e7ca998436b174e1f807d8">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga0b52839d82e7ca998436b174e1f807d8">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">contacts_name_sorting_order_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga28fdacd75efe1b14b33a3215fc5c3854">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga28fdacd75efe1b14b33a3215fc5c3854">wearable</a> applications) that define the available display and sorting orders.</p>
+<p>Change the display and sorting orders using the <
code>contacts_setting_set_name_display_order()</code> and <code>contacts_setting_set_name_sorting_order()</code> functions. Both functions use as a parameter a value of an enumeration: <code>contacts_name_display_order_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga0b52839d82e7ca998436b174e1f807d8">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga0b52839d82e7ca998436b174e1f807d8">wearable</a> applications) and <code>contacts_name_sorting_order_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga28fdacd75efe1b14b33a3215fc5c3854">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__SETTING__MODULE.html#ga28fdacd75efe1b14b33a3215fc5c3854">wearable</a> applications) that define the available display and sorting orders.</p>
<pre class="prettyprint">
contacts_setting_set_name_display_order(CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST);
<li>
<p>Receive a notification whenever the display or sorting order changes:</p>
<ol type="a">
-<li><p>Register callbacks using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions.</p></li>
+<li><p>Register callbacks using the <code>contacts_setting_add_name_display_order_changed_cb()</code> and <code>contacts_setting_add_name_sorting_order_changed_cb()</code> functions.</p></li>
<li>
<p>Define the order change callbacks.</p>
<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>
</li>
-<li><p>When no longer needed, deregister the callbacks using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_sorting_order_changed_cb()</span> functions.</p></li>
+<li><p>When no longer needed, deregister the callbacks using the <code>contacts_setting_remove_name_display_order_changed_cb()</code> and <code>contacts_setting_remove_name_sorting_order_changed_cb()</code> functions.</p></li>
</ol>
</li>
contacts_sim_get_initialization_status(&completed);
dlog_print(DLOG_DEBUG, LOG_TAG, "SIM %s completed", completed ? "" : "not ");
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You cannot access contacts on a SIM card that has not been initialized.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You cannot access contacts on a SIM card that has not been initialized.
+ </div>
</li>
<li>
<p>To import contacts from vCard streams:</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This use case imports contacts from every vCard file in a given directory.</td>
- </tr>
- </tbody>
-</table>
+
+ <div class="note">
+ <strong>Note</strong>
+ This use case imports contacts from every vCard file in a given directory.
+ </div>
<ol>
/* 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) {
/* Handle each storage in the storage_cb() callback */
error_code = storage_foreach_device_supported(storage_cb, NULL);
- /* 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);
+ /*
+ 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);
if (error_code != STORAGE_ERROR_NONE) {
vcf_path = strdup(path);
free(path);
</li>
<li>
-<p>Create a vCard stream of each vCard file in the source directory. You can do this with the <span style="font-family: Courier New,Courier,monospace;">dirent</span> structure and the directory stream functions available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header file.</p>
-<p>The following example implements a <span style="font-family: Courier New,Courier,monospace;">while</span> loop that cycles through the vCard files in the source directory and creates a vCard stream of each file:</p>
+<p>Create a vCard stream of each vCard file in the source directory. You can do this with the <code>dirent</code> structure and the directory stream functions available in the <code><dirent.h></code> header file.</p>
+<p>The following example implements a <code>while</code> loop that cycles through the vCard files in the source directory and creates a vCard stream of each file:</p>
<pre class="prettyprint">
/* Open a directory stream for the source directory */
DIR *dir = opendir(vcf_path);
</li>
<li>
-<p>Parse the vCard streams for contacts using the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function. The function returns a list of all contact records parsed from the stream.</p>
+<p>Parse the vCard streams for contacts using the <code>contacts_vcard_parse_to_contacts()</code> function. The function returns a list of all contact records parsed from the stream.</p>
<p>The following example first parses a list of contact records from the vCard stream and then iterates through the list inserting each record to the contact database:</p>
<pre class="prettyprint">
contacts_list_h contacts_list;
/* 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 */
while (contacts_list_get_current_record_p(contacts_list, &record) == 0) {
int id = -1;
- error_code = contacts_db_insert_record(record, &id); /* Add to the database */
+ /* Add to the database */
+ error_code = contacts_db_insert_record(record, &id);
if (error_code != 0)
dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_insert_record failed");
}
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);
<ol>
<li>
-<p>Parse the vCard file using the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span> function. The function invokes a callback for each contact record it parses from the file.</p>
+<p>Parse the vCard file using the <code>contacts_vcard_parse_to_contact_foreach()</code> function. The function invokes a callback for each contact record it parses from the file.</p>
<p>The following example first defines the vCard file path and then parses the vCard file:</p>
<pre class="prettyprint">
/* Get the vCard file path */
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 <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_get_entity_count()</span> function.</p>
+<p>To check how many records are contained in a vCard file, use the <code>contacts_vcard_get_entity_count()</code> function.</p>
</li>
<li>
<p>Implement the callback for handling the contact records parsed from the vCard file. You can use the callback to insert the records into the contact database.</p>
-<p>The callback is invoked separately for each parsed contact record. As long as the callbacks return <span style="font-family: Courier New,Courier,monospace">true</span>, the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span> function continues to parse new contacts.</p>
+<p>The callback is invoked separately for each parsed contact record. As long as the callbacks return <code>true</code>, the <code>contacts_vcard_parse_to_contact_foreach()</code> function continues to parse new contacts.</p>
<p>The following example implements a callback that inserts the parsed record into the contact database:</p>
<pre class="prettyprint">
bool
<ol>
<li>
-<p>Define the location of the vCard file where the contacts are to be exported, and retrieve a list of all records using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_all_records()</span> function:</p>
+<p>Define the location of the vCard file where the contacts are to be exported, and retrieve a list of all records using the <code>contacts_db_get_all_records()</code> function:</p>
<pre class="prettyprint">
char file_path[] = "/path/contacts.vcf";
contacts_list_h list = NULL;
<li>
<p>Loop through the contact list, export each contact record in the vCard format, and write the record to the file:</p>
<ul>
-<li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>
-<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_person</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_person()</span> function.</p></li>
-<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_my_profile</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_my_profile()</span> function.</p></li>
+<li><p>To export a contact from the <code>_contacts_contact</code> view, use the <code>contacts_vcard_make_from_contact()</code> function.</p></li>
+<li><p>To export details from the <code>_contacts_person</code> view, use the <code>contacts_vcard_make_from_person()</code> function.</p></li>
+<li><p>To export details from the <code>_contacts_my_profile</code> view, use the <code>contacts_vcard_make_from_my_profile()</code> function.</p></li>
</ul>
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, but other views work the same way.</p>
+<p>The following example uses the <code>_contacts_contact</code> view, but other views work the same way.</p>
<pre class="prettyprint">
contacts_record_h contact;
char *vcard_stream;
</li>
<li>Enumerating profile data lists
<p>You can enumerate the records contained in the retrieved profile data list.</p>
- <p>Once the <span style="font-family: Courier New, Courier, monospace">context_history_list_h</span> data handle is retrieved through the <span style="font-family: Courier New, Courier, monospace">context_history_get_list()</span> function, you can <a href="#enumerate_list">retrieve the attributes of each data record of the handle</a>. You can use the <span style="font-family: Courier New, Courier, monospace">context_history_list_get_current()</span> function to get the current record and the <span style="font-family: Courier New, Courier, monospace">context_history_record_get_string()</span> and <span style="font-family: Courier New, Courier, monospace">context_history_record_get_int()</span> functions to access its values.</p></li>
+ <p>Once the <code>context_history_list_h</code> data handle is retrieved through the <code>context_history_get_list()</code> function, you can <a href="#enumerate_list">retrieve the attributes of each data record of the handle</a>. You can use the <code>context_history_list_get_current()</code> function to get the current record and the <code>context_history_record_get_string()</code> and <code>context_history_record_get_int()</code> functions to access its values.</p></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__HISTORY__MODULE.html">Contextual History</a> API, include the <span style="font-family: Courier New,Courier,monospace"><context_history.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__HISTORY__MODULE.html">Contextual History</a> API, include the <code><context_history.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <context_history.h>
</pre>
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:
</ol>
<h2 id="enumerate_list" name="enumerate_list">Enumerating Profile Data Lists</h2>
-<p>The list retrieved using the <span style="font-family: Courier New,Courier,monospace;">context_history_get_list()</span> function contains a sorted list of records, each of which consists of a key and value pair.</p>
+<p>The list retrieved using the <code>context_history_get_list()</code> function contains a sorted list of records, each of which consists of a key and value pair.</p>
<p>To enumerate the list:</p>
<ol>
<li>Check the number of records in the list.
<p>Through contextual history, you can mainly retrieve statistics for 3 categories of usage logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.</p>
+ <p align="center" class="Table"><strong>Table: History data types and required privileges</strong></p>
<table>
- <caption>Table: History data types and required privileges</caption>
<tbody>
<tr>
<th>History type</th>
<tr>
<td>Application usage history:
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RECENTLY_USED_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_USED_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RARELY_USED_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
+ <p><code>CONTEXT_HISTORY_RECENTLY_USED_APP</code></p>
+ <p><code>CONTEXT_HISTORY_FREQUENTLY_USED_APP</code></p>
+ <p><code>CONTEXT_HISTORY_RARELY_USED_APP</code></p>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_APP</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</code></p>
</td>
<td>
The contextual history contains data on which applications are used in the foreground. From this data, the following statistics are provided:
<p>The result is a sorted list of hours of the day, in a descending order of the application use count in each one-hour time slot.</p></li>
<li>Common settings for applications, or the most common setting values regarding an application or any applications.</li>
</ul>
- The required privilege is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/apphistory.read</span>.
+ The required privilege is <code>http://tizen.org/privilege/apphistory.read</code>.
</td>
</tr>
<tr>
<td>Media playback history:
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</code></p>
</td>
<td>
Media playback events, including music and video playback, can be logged. From this data, the following statistics are provided:
<p>The result is a sorted list of hours of the day, in a descending order of the playback count in each one-hour time slot.</p></li>
<li>Common settings for music or video playback, or the most common setting values when listening to music or watching videos.</li>
</ul>
- <p>The required privilege is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediahistory.read</span>.</p>
+ <p>The required privilege is <code>http://tizen.org/privilege/mediahistory.read</code>.</p>
<p>For more information on other media content metadata, such as when or how many times media content is played, see the <a href="../media/media_content_n.htm">Media Content and Metadata</a> guide.</p>
</td>
</tr>
<tr>
<td>Communication history:
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_COMMUNICATED_ADDRESS</span></p>
+ <p><code>CONTEXT_HISTORY_FREQUENTLY_COMMUNICATED_ADDRESS</code></p>
</td>
<td>
Applications can retrieve the contacts the user has called or messaged most frequently.
- <p>The required privilege is <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/callhistory.read</span>.</p>
+ <p>The required privilege is <code>http://tizen.org/privilege/callhistory.read</code>.</p>
<p>For more detailed information on the communication history, see the <a href="contacts_n.htm">Contacts</a> guide.</p>
</td>
</tr>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- To compute the above usage history statistics, it is necessary to store and aggregate contextual events. In many cases, immediately reflecting the contextual events to the statistics costs more than applying the events in a batch later. For this reason, the above history statistics may not show up-to-date results all the time.
- </td>
- </tr>
- </tbody>
-</table>
+ <div class="note">
+ <strong>Note</strong>
+ To compute the above usage history statistics, it is necessary to store and aggregate contextual events. In many cases, immediately reflecting the contextual events to the statistics costs more than applying the events in a batch later. For this reason, the above history statistics may not show up-to-date results all the time.
+ </div>
<p>Regarding each history data type, one or more filters can be set to specify the necessary statistics. For example, applications can get information about the 3 most frequently used applications from the last 30 days while a headphone is connected by setting the filters of the result size, time span, and the audio jack status. The supported filters for the history data types are summarized in the following table.</p>
+ <p align="center" class="Table"><strong>Table: Supported filters for history data</strong></p>
<table>
- <caption>Table: Supported filters for history data</caption>
<tbody>
<tr>
<th>History type</th>
<td rowspan="2">
All types
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_TIME_SPAN</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_TIME_SPAN</code></td>
<td>Integer</td>
<td>
This filter specifies in days the time span of the data to be aggregated. For example, if the value is set to 10, the application gets the statistics from the data logged in the last 10 days.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_START_TIME</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_END_TIME</span></p>
+ <td><code>CONTEXT_HISTORY_FILTER_START_TIME</code>
+ <p><code>CONTEXT_HISTORY_FILTER_END_TIME</code></p>
</td>
<td>Integer</td>
<td>
<tr>
<td>
All types, <strong>except</strong>:
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_RESULT_SIZE</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_RESULT_SIZE</code></td>
<td>Integer</td>
<td>
This filter limits the number of data records to be retrieved. It accepts positive integers as the filter values, but if not set, it is set to 10 by default. It is possible that the aggregated result contains a smaller number of records than the filter value.
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RECENTLY_USED_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_USED_APP</span></p>
+ <code>CONTEXT_HISTORY_RECENTLY_USED_APP</code>
+ <p><code>CONTEXT_HISTORY_FREQUENTLY_USED_APP</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_WIFI_BSSID</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_WIFI_BSSID</code></td>
<td>String</td>
<td>
Applications can get the statistics of the data logged while a specific Wi-Fi is connected, by setting the BSSID string of the target Wi-Fi AP.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_AUDIO_JACK</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_AUDIO_JACK</code></td>
<td>Integer</td>
<td>
- Applications can get the statistics of the data logged while the headphone is connected or disconnected. The audio jack status can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_AUDIO_JACK_NOT_CONNECTED</span> or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED</span>.
+ Applications can get the statistics of the data logged while the headphone is connected or disconnected. The audio jack status can be either <code>CONTEXT_HISTORY_FILTER_AUDIO_JACK_NOT_CONNECTED</code> or <code>CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED</code>.
</td>
</tr>
<tr>
<td>
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
+ <code>CONTEXT_HISTORY_PEAK_TIME_FOR_APP</code>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_APP_ID</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_APP_ID</code></td>
<td>String</td>
<td>
Use this filter to compute the peak time (or the common settings) for a specific application. Without this filter, the peak time (or the common setting) is computed from the usage history of all applications.
</tr>
<tr>
<td>
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
+ <code>CONTEXT_HISTORY_PEAK_TIME_FOR_APP</code>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK</span></td>
+ <td><code>CONTEXT_HISTORY_FILTER_DAY_OF_WEEK</code></td>
<td>Integer</td>
<td>
- Use this filter to get usage patterns on weekdays or weekends. The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</span>. Without this filter, data from both weekdays and weekends are used.
+ Use this filter to get usage patterns on weekdays or weekends. The filter value can be either <code>CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</code>, <code>CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</code>, or <code>CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</code>. Without this filter, data from both weekdays and weekends are used.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">
+ <td><code>
CONTEXT_HISTORY_FREQUENTLY_COMMUNICATED_ADDRESS
- </span></td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE</span></td>
+ </code></td>
+ <td><code>CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE</code></td>
<td>Integer</td>
<td>
By default, communication frequency is computed from the call and message logs. Applications can narrow down the target data to one type of communication, call or messaging, using this filter.
- <p>The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_CALL</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_MESSAGE</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_ALL</span>.</p>
+ <p>The filter value can be either <code>CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_CALL</code>, <code>CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_MESSAGE</code>, or <code>CONTEXT_HISTORY_FILTER_COMMUNICATION_TYPE_ALL</code>.</p>
</td>
</tr>
</tbody>
<p>The history data records retrieved through the contextual history API contain the following data attributes.</p>
+ <p align="center" class="Table"><strong>Table: Attributes provided by history data</strong></p>
<table>
- <caption>Table: Attributes provided by history data</caption>
<tbody>
<tr>
<th>History type</th>
</tr>
<tr>
<td rowspan="4">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RECENTLY_USED_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_USED_APP</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RARELY_USED_APP</span></p>
+ <code>CONTEXT_HISTORY_RECENTLY_USED_APP</code>
+ <p><code>CONTEXT_HISTORY_FREQUENTLY_USED_APP</code></p>
+ <p><code>CONTEXT_HISTORY_RARELY_USED_APP</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_APP_ID</span></td>
+ <td><code>CONTEXT_HISTORY_APP_ID</code></td>
<td>String</td>
<td>
This attribute denotes the application ID.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_TOTAL_COUNT</span></td>
+ <td><code>CONTEXT_HISTORY_TOTAL_COUNT</code></td>
<td>Integer</td>
<td>
This attribute denotes how many times the application is used in the foreground.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_TOTAL_DURATION</span></td>
+ <td><code>CONTEXT_HISTORY_TOTAL_DURATION</code></td>
<td>Integer</td>
<td>
This attribute denotes the time the application is being displayed in the foreground in seconds. If the application is used multiple times, it denotes the accumulated time of use.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_LAST_TIME</span></td>
+ <td><code>CONTEXT_HISTORY_LAST_TIME</code></td>
<td>Integer</td>
<td>
This attribute denotes when the application has been used (moved to the foreground) the last time, in Unix epoch in seconds.
</tr>
<tr>
<td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
+ <code>CONTEXT_HISTORY_PEAK_TIME_FOR_APP</code>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_HOUR_OF_DAY</span></td>
+ <td><code>CONTEXT_HISTORY_HOUR_OF_DAY</code></td>
<td>Integer</td>
<td>
This attribute denotes the hour of the day. Its value is an integer from 0 to 23.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_TOTAL_COUNT</span></td>
+ <td><code>CONTEXT_HISTORY_TOTAL_COUNT</code></td>
<td>Integer</td>
<td>
- This attribute denotes the aggregated count of the application uses or media playbacks within the hour of the day defined with <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_HOUR_OF_DAY</span>.
+ This attribute denotes the aggregated count of the application uses or media playbacks within the hour of the day defined with <code>CONTEXT_HISTORY_HOUR_OF_DAY</code>.
</td>
</tr>
<tr>
<td rowspan="3">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+ <code>CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</code>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</code></p>
+ <p><code>CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_AUDIO_JACK</span></td>
+ <td><code>CONTEXT_HISTORY_AUDIO_JACK</code></td>
<td>Integer</td>
<td>
- This attribute denotes the most common audio jack status. The value is either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_AUDIO_JACK_NOT_CONNECTED</span> or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED</span>.
+ This attribute denotes the most common audio jack status. The value is either <code>CONTEXT_HISTORY_FILTER_AUDIO_JACK_NOT_CONNECTED</code> or <code>CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED</code>.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_SYSTEM_VOLUME</span></td>
+ <td><code>CONTEXT_HISTORY_SYSTEM_VOLUME</code></td>
<td>Integer</td>
<td>
This attribute denotes the most common system volume level.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_MEDIA_VOLUME</span></td>
+ <td><code>CONTEXT_HISTORY_MEDIA_VOLUME</code></td>
<td>Integer</td>
<td>
This attribute denotes the most common media volume level.
</tr>
<tr>
<td rowspan="4">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_COMMUNICATED_ADDRESS</span>
+ <code>CONTEXT_HISTORY_FREQUENTLY_COMMUNICATED_ADDRESS</code>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_ADDRESS</span></td>
+ <td><code>CONTEXT_HISTORY_ADDRESS</code></td>
<td>String</td>
<td>
This attribute denotes the contact address or a phone number.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_TOTAL_COUNT</span></td>
+ <td><code>CONTEXT_HISTORY_TOTAL_COUNT</code></td>
<td>Integer</td>
<td>
- This attribute denotes the total number of communications with the address defined with <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_ADDRESS</span>.
+ This attribute denotes the total number of communications with the address defined with <code>CONTEXT_HISTORY_ADDRESS</code>.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_TOTAL_DURATION</span></td>
+ <td><code>CONTEXT_HISTORY_TOTAL_DURATION</code></td>
<td>Integer</td>
<td>
- This attribute denotes the accumulated duration of calls in seconds with the address defined with <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_ADDRESS</span>.
+ This attribute denotes the accumulated duration of calls in seconds with the address defined with <code>CONTEXT_HISTORY_ADDRESS</code>.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_LAST_TIME</span></td>
+ <td><code>CONTEXT_HISTORY_LAST_TIME</code></td>
<td>Integer</td>
<td>
- This attribute denotes when a call is connected or a message is received or sent last in Unix epoch in seconds, to or from the address defined with <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_ADDRESS</span>.
+ This attribute denotes when a call is connected or a message is received or sent last in Unix epoch in seconds, to or from the address defined with <code>CONTEXT_HISTORY_ADDRESS</code>.
</td>
</tr>
</tbody>
</ul>
<p>Use the <a href="#variables">sync manager variables</a> with the sync job functions. The sync manager operates the sync jobs based on the rules defined in the following table.</p>
+ <p align="center" class="Table"><strong>Table: Sync job scheduling rules</strong></p>
<table>
- <caption>Table: Sync job scheduling rules
- </caption>
<tbody>
<tr>
<th>Rule</th>
</tr>
<tr>
<td>On demand sync</td>
- <td>The on-demand sync means that you can schedule a sync job once. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> function.</td>
+ <td>The on-demand sync means that you can schedule a sync job once. You can use this feature with the <code>sync_manager_on_demand_sync_job()</code> function.</td>
</tr>
<tr>
<td>Periodic sync</td>
- <td>The periodic sync means that you can schedule a sync job to be performed regularly. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function. You can also use the sync intervals through various enumerators provided through the Sync Manager API.
+ <td>The periodic sync means that you can schedule a sync job to be performed regularly. You can use this feature with the <code>sync_manager_add_periodic_sync_job()</code> function. You can also use the sync intervals through various enumerators provided through the Sync Manager API.
<p>When using the Sync Manager API, you can set an alarm indirectly.</p></td>
</tr>
</tbody>
<h2 id="adapter">Sync Adapter</h2>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Sync Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">wearable</a> applications) operations must be carried out by a service application (which operates data synchronization) before using the Sync Manager API.
-<p>The number of service applications that can set callbacks is restricted to only one per a package.</p></td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ The Sync Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">wearable</a> applications) operations must be carried out by a service application (which operates data synchronization) before using the Sync Manager API.
+<p>The number of service applications that can set callbacks is restricted to only one per a package.</p>
+ </div>
+
<p>The Sync Adapter API allows you to:</p>
<ul>
<li><a href="#set_callback">Register callbacks</a> for receiving notifications about the sync job start and cancellation.</li>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the data synchronization functionality:</p>
<ol>
-<li>To use the Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:
+<li>To use the Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
<pre class="prettyprint">
<privileges>
<!--To set an alarm-->
<p>A UI application cannot initialize and set callbacks through the Sync Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">wearable</a> applications). Instead, the UI application must call the Sync Manager API to request sync operations.</p>
</li>
-<li>To use the functions and data types of the Sync Manager API, include the <span style="font-family: Courier New,Courier,monospace"><sync_manager.h></span> header file in the UI application:
+<li>To use the functions and data types of the Sync Manager API, include the <code><sync_manager.h></code> header file in the UI application:
<pre class="prettyprint">
#include <sync_manager.h>
</pre></li>
-<li>To use the functions and data types of the Sync Adapter API, include the <span style="font-family: Courier New,Courier,monospace"><sync_adapter.h></span> header file in the service application:
+<li>To use the functions and data types of the Sync Adapter API, include the <code><sync_adapter.h></code> header file in the service application:
<pre class="prettyprint">
#include <sync_adapter.h>
<p>To inform a service application of the time to operate a one-time sync job:</p>
<ol>
-<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> function.
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <code>sync_manager_on_demand_sync_job()</code> function.
<p>For more information, see <a href="account_n.htm#add">Creating and Managing an Account</a> and <a href="../app_management/data_bundles_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
<pre class="prettyprint">
result = sync_manager_on_demand_sync_job(account, sync_job_name, SYNC_OPTION_NONE,
sync_job_user_data, &sync_job_id);
</pre>
-<p>This function can be used with various options, as shown in the following example. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means the sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means the other sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
+<p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means the sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means the other sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
<pre class="prettyprint">
result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY,
result = sync_manager_on_demand_sync_job(NULL, sync_job_name3, SYNC_OPTION_EXPEDITED,
NULL, &sync_job_id3);
</pre>
-<p>If the on-demand sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
+<p>If the on-demand sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
</li>
-<li>When the on-demand sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle.
-<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
+<li>When the on-demand sync is no longer needed, remove it with the <code>sync_manager_remove_sync_job()</code> function with its <code>sync_job_id</code>. If you want to stop using the account too, clean up the account handle.
+<p>At the end, unset the sync callbacks and release the resources with the <code>sync_adapter_unset_callbacks()</code> function.</p>
<pre class="prettyprint">
result = sync_manager_remove_sync_job(sync_job_id);
<p>To inform periodically a service application of the time to operate a sync job with its sync interval:</p>
<ol>
-<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function.
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <code>sync_manager_add_periodic_sync_job()</code> function.
<p>For more information, see <a href="account_n.htm#add">Creating and Managing an Account</a> and <a href="../app_management/data_bundles_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
<pre class="prettyprint">
account_h account = NULL;
SYNC_OPTION_NONE, sync_job_user_data,
&sync_job_id);
</pre>
-<p>This function can be used with various options, as shown in the following example. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means a sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
+<p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means a sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
<pre class="prettyprint">
result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2,
SYNC_OPTION_NO_RETRY, sync_job_user_data,
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, NULL,
&sync_job_id3);
</pre>
-<p>If the periodic sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
+<p>If the periodic sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function can renew a registered periodic sync job by using the same <span style="font-family: Courier New,Courier,monospace">sync_job_name</span> as before:
+<li>The <code>sync_manager_add_periodic_sync_job()</code> function can renew a registered periodic sync job by using the same <code>sync_job_name</code> as before:
<pre class="prettyprint">
result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period,
SYNC_OPTION_NONE, sync_job_user_data,
SYNC_OPTION_EXPEDITED, sync_job_user_data2,
&sync_job_id);
</pre>
-<p>All the function parameters can be reset except <span style="font-family: Courier New,Courier,monospace">sync_job_name</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>, which are used to manage a specific sync job.</p>
+<p>All the function parameters can be reset except <code>sync_job_name</code> and <code>sync_job_id</code>, which are used to manage a specific sync job.</p>
</li>
-<li>When the periodic sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle.
-<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
+<li>When the periodic sync is no longer needed, remove it with the <code>sync_manager_remove_sync_job()</code> function with its <code>sync_job_id</code>. If you want to stop using the account too, clean up the account handle.
+<p>At the end, unset the sync callbacks and release the resources with the <code>sync_adapter_unset_callbacks()</code> function.</p>
<pre class="prettyprint">
result = sync_manager_remove_sync_job(sync_job_id);
<p>To inform a service application of the time to operate a sync job whenever a corresponding database change occurs:</p>
<ol>
-<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function.
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <code>sync_manager_add_data_change_sync_job()</code> function.
<p>For more information, see <a href="account_n.htm#add">Creating and Managing an Account</a> and <a href="../app_management/data_bundles_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
<pre class="prettyprint">
</li>
<li>Add a data change sync job for the calendar capability.
-<p>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function operates a sync job only for a registered capability.</p>
+<p>The <code>sync_manager_add_data_change_sync_job()</code> function operates a sync job only for a registered capability.</p>
<pre class="prettyprint">
result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
SYNC_OPTION_NONE, sync_job_user_data,
&sync_job_id);
</pre>
-<p>This function can be used with various options, as shown in the following example. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means a sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
+<p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means a sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
<pre class="prettyprint">
result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
SYNC_OPTION_NO_RETRY, sync_job_user_data,
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_EXPEDITED, NULL,
&sync_job_id3);
</pre>
-<p>If the data change sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
+<p>If the data change sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function can renew a registered data change sync job by using the same <span style="font-family: Courier New,Courier,monospace">sync_capability</span> as before:
+<li>The <code>sync_manager_add_data_change_sync_job()</code> function can renew a registered data change sync job by using the same <code>sync_capability</code> as before:
<pre class="prettyprint">
result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
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 <span style="font-family: Courier New,Courier,monospace">sync_capability</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>, which are used to manage a specific sync job.</p>
+<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>
</li>
-<li>When the data change sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle.
-<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
+<li>When the data change sync is no longer needed, remove it with the <code>sync_manager_remove_sync_job()</code> function with its <code>sync_job_id</code>. If you want to stop using the account too, clean up the account handle.
+<p>At the end, unset the sync callbacks and release the resources with the <code>sync_adapter_unset_callbacks()</code> function.</p>
<pre class="prettyprint">
result = sync_manager_remove_sync_job(sync_job_id);
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">sync_job_cb()</span> callback, which is invoked separately for every registered sync job. In the callback, the sync jobs are verified with a corresponding data.
+<li>Define the <code>sync_job_cb()</code> callback, which is invoked separately for every registered sync job. In the callback, the sync jobs are verified with a corresponding data.
<pre class="prettyprint">
bool
sync_job_cb(account_h account, const char *sync_job_name, const char *sync_capability,
<p>When a specific event is detected or a sync job is requested, the applicable callback is invoked.</p>
</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">on_start_cb()</span> callback is invoked, the predefined data sync process is performed inside the callback function. The <span style="font-family: Courier New,Courier,monospace">on_cancel_cb()</span> callback works in a similar way and cancels the data sync process.
+<li>When the <code>on_start_cb()</code> callback is invoked, the predefined data sync process is performed inside the callback function. The <code>on_cancel_cb()</code> callback works in a similar way and cancels the data sync process.
<pre class="prettyprint">
bool
on_start_cb(account_h account, const char *sync_job_name,
<p>The following table lists the variables used with the sync manager.</p>
+ <p align="center" class="Table"><strong>Table: Sync manager variables</strong></p>
<table border="1">
- <caption>Table: Sync manager variables</caption>
<tbody>
<tr>
<th>Variable</th>
</tr>
<tr>
<td>Account handle</td>
- <td><span style="font-family: Courier New,Courier,monospace">account_s*</span></td>
+ <td><code>account_s*</code></td>
<td>No</td>
<td>Handle of the account module for managing account-related data.</td>
</tr>
<tr>
<td>Sync job name</td>
- <td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
+ <td><code>const char*</code></td>
<td>Yes</td>
<td>Sync job name for managing sync jobs.
- <p>The on-demand and periodic sync jobs can be managed by a user-defined name. If the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function is called again with same sync job name (where all details except the name and sync job ID are changed), the function does not add a new sync job but updates the existing job. This is mainly used to reset the periodic interval.</p></td>
+ <p>The on-demand and periodic sync jobs can be managed by a user-defined name. If the <code>sync_manager_add_periodic_sync_job()</code> function is called again with same sync job name (where all details except the name and sync job ID are changed), the function does not add a new sync job but updates the existing job. This is mainly used to reset the periodic interval.</p></td>
</tr>
<tr>
<td>Sync capability</td>
- <td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
+ <td><code>const char*</code></td>
<td>Yes</td>
<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 <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function is used with a capability, it is operated for the related capability only.</p>
+ <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">
#define SYNC_SUPPORTS_CAPABILITY_CALENDAR "http://tizen.org/sync/capability/calendar"
</tr>
<tr>
<td>Sync period</td>
- <td><span style="font-family: Courier New,Courier,monospace">sync_period_e</span></td>
+ <td><code>sync_period_e</code></td>
<td>Yes</td>
<td>Interval for adding a periodic sync job.
<p>If the interval is provided, the sync job is performed periodically. If you set the periodic interval to 30 minutes, a time interval is set as a power of 2 less than 30. This means that a time interval set to 16 minutes operates the sync job every 16 minutes while skipping the first notification (so the first is in 32 minutes). The same logic applies to other cases.</p>
<p>This variable provides a periodic sync job with an inexact time. Coupling various periodic sync jobs with an interval as a power of 2 prevents the device from waking up the service application too many times.</p>
- <p>The <
span style="font-family: Courier New,Courier,monospace">sync_period_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html#gad6f301bc84c4e758aee1636b0122dd7e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html#gad6f301bc84c4e758aee1636b0122dd7e">wearable</a> applications) defines the available period intervals.</p></td>
+ <p>The <
code>sync_period_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html#gad6f301bc84c4e758aee1636b0122dd7e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html#gad6f301bc84c4e758aee1636b0122dd7e">wearable</a> applications) defines the available period intervals.</p></td>
</tr>
<tr>
<td>Sync option</td>
- <td><span style="font-family: Courier New,Courier,monospace">sync_option_e</span></td>
+ <td><code>sync_option_e</code></td>
<td>Yes</td>
<td>Option for deciding the sync job behavior.
- <p>The behavior options can be used as an OR value. For example, the <span style="font-family: Courier New,Courier,monospace">(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)</span> expression is available, and means that the "Sync job is operated just once with priority".</p>
+ <p>The behavior options can be used as an OR value. For example, the <code>(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)</code> expression is available, and means that the "Sync job is operated just once with priority".</p>
<p>The following options are available:</p>
- <ul><li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NONE</span>: Sync job is operated normally</li>
- <li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span>: Sync job is operated as soon as possible</li>
- <li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span>: Sync job is not performed again when it fails</li></ul></td>
+ <ul><li><code>SYNC_OPTION_NONE</code>: Sync job is operated normally</li>
+ <li><code>SYNC_OPTION_EXPEDITED</code>: Sync job is operated as soon as possible</li>
+ <li><code>SYNC_OPTION_NO_RETRY</code>: Sync job is not performed again when it fails</li></ul></td>
</tr>
<tr>
<td>Sync job ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">int*</span></td>
+ <td><code>int*</code></td>
<td>Yes</td>
<td>Unique ID for managing sync jobs.
<p>The ID is generated when a sync job is added. It is required to remove the sync job. The number of ID that can be generated is restricted to a hundred per a package.</p></td>
</tr>
<tr>
<td>Sync job user data</td>
- <td><span style="font-family: Courier New,Courier,monospace">bundle*</span></td>
+ <td><code>bundle*</code></td>
<td>No</td>
<td>User data for sync jobs.
<p>The data can contain additional information related to the registered sync jobs.</p></td>
</tr>
<tr>
<td>User data</td>
- <td><span style="font-family: Courier New,Courier,monospace">void*</span></td>
+ <td><code>void*</code></td>
<td>No</td>
- <td>User data for the <span style="font-family: Courier New,Courier,monospace">sync_manager_for_each_sync_job()</span> function.
+ <td>User data for the <code>sync_manager_for_each_sync_job()</code> function.
<p>The data can contain additional information related to the foreach jobs.</p></td>
</tr>
</tbody>
<p>UAF (Universal Authentication Framework) authenticators can be connected to a user device using various physical interfaces, such as SPI, USB, and Bluetooth. The UAF Authenticator-Specific Module (ASM) is a software interface on top of UAF authenticators, which gives a standardized way for the FIDO UAF clients to <a href="#find_auth">detect and access the functionality of UAF authenticators</a>, and hides the internal communication complexity from the clients.</p>
<p>The ASM is a platform-specific software component offering an API to FIDO UAF clients, enabling them to discover and communicate with one or more available authenticators. A single ASM can report on behalf of multiple authenticators.</p>
<p>The FIDO UAF protocol and its various operations are described in the <a href="https://fidoalliance.org/specs/fido-uaf-v1.0-ps-20141208/fido-uaf-protocol-v1.0-ps-20141208.html" target="_blank">FIDO UAF Protocol Specification</a>. The following figure shows a simplified architecture diagram of the interactions and actors.</p>
- <p class="figure">Figure: UAF high level architecture</p>
+ <p align="center"><strong>Figure: UAF high level architecture</strong></p>
<p style="text-align: center;"> <img alt="UAF High Level Architecture" src="../../images/fido_uaf_high_level_architecture.png" /></p>
<p>The FIDO UAF consists of the following basic components:</p>
<li><p><strong>FIDO UAF protocols </strong></p>
<p>The FIDO UAF protocols carry FIDO UAF messages between user devices and relying parties. <a href="#protocol_conversation">Use the protocol messages to register, authenticate, and deregister the authentication</a>:</p>
<ul><li>Authenticator registration: <p>The FIDO UAF registration protocol enables relying parties to discover the FIDO UAF authenticators available on a user's system or device. Discovery conveys the FIDO UAF authenticator attributes to the relying party, thus enabling policy decisions and enforcement to take place.</p>
- <p class="figure">Figure: FIDO UAF registration</p>
+ <p align="center"><strong>Figure: FIDO UAF registration</strong></p>
<p style="text-align: center;"> <img alt="Components" src="../../images/fido_reg_flow.png" /></p>
</li>
<li>User authentication: <p>Authentication is typically based on cryptographic challenge-response authentication protocols and facilitates the user choice regarding which FIDO UAF authenticators are employed in an authentication event.</p>
- <p class="figure">Figure: FIDO UAF authentication</p>
+ <p align="center"><strong>Figure: FIDO UAF authentication</strong></p>
<p style="text-align: center;"> <img alt="Components" src="../../images/fido_auth_flow.png" /></p>
</li>
<li>Authenticator deregistration: <p>Deregistration is typically required when the user account is removed at the relying party. The relying party can trigger the deregistration by requesting the authenticator to delete the UAF credential associated with the user account.</p>
- <p class="figure">Figure: FIDO UAF deregistration</p>
+ <p align="center"><strong>Figure: FIDO UAF deregistration</strong></p>
<p style="text-align: center;"> <img alt="Components" src="../../images/fido_dereg_flow.png" /></p>
</li>
</ul>
<p>In the FIDO UAF context, attestation is how authenticators make claims to a relying party during registration that the keys they generate, and certain measurements they report, originate from genuine devices with certified characteristics. An attestation signature, carried in a FIDO UAF registration protocol message, is validated by the FIDO UAF server.</p>
</li></ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the FIDO Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__FIDO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__FIDO__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the FIDO Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__FIDO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__FIDO__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/fido.client</privilege>
<h2 id="find_auth" name="find_auth">Finding the FIDO Authenticator</h2>
-<p>To obtain the list of all available authenticators, use the <span style="font-family: Courier New,Courier,monospace">fido_foreach_authenticator()</span> function:</p>
+<p>To obtain the list of all available authenticators, use the <code>fido_foreach_authenticator()</code> function:</p>
<pre class="prettyprint">
void
start_discover(void *data, Evas_Object *obj, void *event_info)
<h2 id="check_uaf_msg_supported" name="check_uaf_msg_supported">Checking the UAF Message Support</h2>
-<p>To check whether the given UAF protocol message can be processed by the device, use the <span style="font-family: Courier New,Courier,monospace">fido_uaf_is_supported()</span> function:</p>
+<p>To check whether the given UAF protocol message can be processed by the device, use the <code>fido_uaf_is_supported()</code> function:</p>
<pre class="prettyprint">
void
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);
<p>You can <a href="#response">obtain information from the OAuth 2.0 response handle</a> returned in a callback.</p></li>
</ul>
-<p class="figure">Figure: Protocol flow</p>
+<p align="center"><strong>Figure: Protocol flow</strong></p>
<p style="text-align: center;"> <img alt="Protocol flow" src="../../images/oauth2_protocol_flow.png" /></p>
<p>The OAuth 2.0 specification is defined in <a href="http://tools.ietf.org/html/rfc6749" target="_blank">[RFC 6749]</a> and it builds on the OAuth 1.0 <a href="http://tools.ietf.org/html/rfc5849" target="_blank">[RFC 5849]</a> deployment experience, as well as additional use cases and extensibility requirements gathered from the wider IETF community. The OAuth 2.0 protocol is not backward-compatible with OAuth 1.0.</p>
<p>The <a href="#req_code">authorization code is obtained</a> by using an authorization server as an intermediary between the client and resource owner. Instead of requesting authorization directly from the resource owner, the client directs the resource owner to an authorization server, which in turn directs the resource owner back to the client with the authorization code.</p>
<p>The authorization code provides some important security benefits, such as the ability to authenticate the client, as well as the transmission of the access token directly to the client without passing it through the resource owner's user-agent and potentially exposing it to others, including the resource owner.</p>
-<p class="figure">Figure: Authorization code flow</p>
+<p align="center"><strong>Figure: Authorization code flow</strong></p>
<p style="text-align: center;"> <img alt="Authorization code flow" src="../../images/oauth2_auth_code.png" /></p>
</li>
<p>In the implicit flow, the client is issued an access token directly (as a result of the resource owner authorization). The grant type is implicit, as no intermediate credentials (such as an authorization code) are issued.</p>
<p>Implicit grants improve the responsiveness and efficiency of some clients (such as a client implemented as an in-browser application), since it reduces the number of round trips required to obtain an access token.</p>
-<p class="figure">Figure: Implicit grant flow</p>
+<p align="center"><strong>Figure: Implicit grant flow</strong></p>
<p style="text-align: center;"> <img alt="Implicit grant flow" src="../../images/oauth2_implicit.png" /></p>
</li>
<p>The resource owner password credentials (such as username and password) can be used directly as an authorization grant to obtain an access token.</p>
<p>Even though this grant type requires direct client access to the resource owner credentials, the resource owner credentials are used for a single request and are exchanged for an access token. This grant type can eliminate the need for the client to store the resource owner credentials for future use, by exchanging the credentials with a long-lived access token or refresh token.</p>
-<p class="figure">Figure: Resource owner password credentials flow</p>
+<p align="center"><strong>Figure: Resource owner password credentials flow</strong></p>
<p style="text-align: center;"> <img alt="Resource owner password credentials flow" src="../../images/oauth2_password.png" /></p>
</li>
<li>Client credentials
<p>The client credentials can be used as an authorization grant when the authorization scope is limited to the protected resources under the control of the client, or to protected resources previously arranged with the authorization server. Client credentials are typically used as an authorization grant when the client is acting on its own behalf (the client is also the resource owner) or is requesting access to protected resources based on an authorization previously arranged with the authorization server.</p>
-<p class="figure">Figure: Client credentials flow</p>
+<p align="center"><strong>Figure: Client credentials flow</strong></p>
<p style="text-align: center;"> <img alt="Client credentials flow" src="../../images/oauth2_client_credentials.png" /></p>
</li></ul>
<p>To enable your application to use the OAuth 2.0 functionality:</p>
<ol>
<li>
-<p>To use the OAuth 2.0 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the OAuth 2.0 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/internet</privilege>
</privileges>
</pre>
</li>
-<li> <p>To use the functions and data types of the OAuth 2.0 API, include the <span style="font-family: Courier New,Courier,monospace"><oauth2.h></span> header file in your application:</p>
+<li> <p>To use the functions and data types of the OAuth 2.0 API, include the <code><oauth2.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <oauth2.h>
</pre>
-<p>To ensure that an OAuth 2.0 function has been executed properly, make sure that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>
+<p>To ensure that an OAuth 2.0 function has been executed properly, make sure that the return is equal to <code>ACCOUNT_ERROR_NONE</code>.</p>
</li>
-<li><p>Declare the necessary global variables and create the manager handle using the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_create()</span> function:</p>
+<li><p>Declare the necessary global variables and create the manager handle using the <code>oauth2_manager_create()</code> function:</p>
<pre class="prettyprint">
static oauth2_manager_h mgr = NULL;
ret = oauth2_manager_create(&mgr)
</pre></li>
-<li>When you no longer need it, free the OAuth 2.0 manager handle with the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_destroy()</span> function:
+<li>When you no longer need it, free the OAuth 2.0 manager handle with the <code>oauth2_manager_destroy()</code> function:
<pre class="prettyprint">
ret = oauth2_manager_destroy(mgr);
<p>To make a request with the OAuth 2.0 manager:</p>
<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace;">oauth2_request_h</span> request handle and use the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_create()</span> function to create the OAuth 2.0 request:
+<li>Create an <code>oauth2_request_h</code> request handle and use the <code>oauth2_request_create()</code> function to create the OAuth 2.0 request:
<pre class="prettyprint">
oauth2_request_h request = NULL;
ret = oauth2_request_get_password(request, &password);
</pre>
</li>
-<li>When you no longer need it, free the request handle with the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_destroy()</span> function:
+<li>When you no longer need it, free the request handle with the <code>oauth2_request_destroy()</code> function:
<pre class="prettyprint">
ret = oauth2_request_destroy(request);
<ul><li id="req_code">Request the authorization code.
<p>The authorization code grant type is used to obtain both access tokens and refresh tokens. It is a redirection-based flow that requires the client to interact with the server and receive the incoming requests (through redirection) from the authorization server.</p>
-<p>To request the authorization code, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_request_authorization_grant()</span> function:</p>
+<p>To request the authorization code, use the <code>oauth2_manager_request_authorization_grant()</code> function:</p>
<pre class="prettyprint">
void
/* Set the application client ID registered in the server */
ret = oauth2_request_set_client_id(request, "app_client_id");
- /* Set the redirect URI for the server to redirect the flow after the authentication */
+ /*
+ Set the redirect URI for the server
+ to redirect the flow after the authentication
+ */
ret = oauth2_request_set_redirection_url(request, "https://developer.tizen.org");
- /* 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);
+ /*
+ 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);
}
</pre>
</li>
<li id="code_token">Request the access token with the authorization code.
<p>In the authorization code grant type, instead of requesting authorization directly from the resource owner, the client directs the resource owner to an authorization server, which in turn directs the resource owner back to the client with the authorization code.</p>
<ol type="a">
-<li><a href="#req_code">Request the authorization code</a> with the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_request_authorization_grant()</span> function. The authorization code is returned in the callback.
+<li><a href="#req_code">Request the authorization code</a> with the <code>oauth2_manager_request_authorization_grant()</code> function. The authorization code is returned in the callback.
<pre class="prettyprint">
void
request_auth_code(void)
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>
-<li>Use the authorization code to request the access token by calling the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_request_access_token()</span> function. The response from the server is returned in a callback function where the access token can be retrieved:
+<li>Use the authorization code to request the access token by calling the <code>oauth2_manager_request_access_token()</code> function. The response from the server is returned in a callback function where the access token can be retrieved:
<pre class="prettyprint">
void
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>
<p>You can request an access token in a single step without obtaining the authorization code explicitly. The code is obtained after the authentication and passed to the server to obtain the access token internally in case of the authorization code grant type. In case of the implicit, resource owner password credentials, and client credentials grant types, you can obtain the access token directly.</p>
-<p>To obtain the access token directly, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_request_token()</span> function. The response from the server is included in the callback.</p>
+<p>To obtain the access token directly, use the <code>oauth2_manager_request_token()</code> function. The response from the server is included in the callback.</p>
<pre class="prettyprint">
void
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");
}
</ul></li>
<li>Refresh the access token.
<p>Refresh tokens are credentials used to obtain access tokens. Refresh tokens are issued to the client by the authorization server and are used to obtain a new access token when the current access token becomes invalid or expires, or to obtain additional access tokens with an identical or narrower scope.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_refresh_access_token()</span> function to refresh an access token. The response from the server is included in the callback.</p>
+<p>Use the <code>oauth2_manager_refresh_access_token()</code> function to refresh an access token. The response from the server is included in the callback.</p>
<pre class="prettyprint">
void
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>
<h2 id="response" name="response" class="items-tit-h2">Managing an OAuth 2.0 Response</h2>
-<p>The response from the server is bundled in the <span style="font-family: Courier New,Courier,monospace;">oauth2_response_h</span> handle and returned in the callbacks, from which all the various response parameters can be obtained.</p>
+<p>The response from the server is bundled in the <code>oauth2_response_h</code> handle and returned in the callbacks, from which all the various response parameters can be obtained.</p>
<p>To manage the OAuth 2.0 response:</p>
oauth2_error_get_custom_data(e_handle, "error", &error_val);
</pre>
</li>
-<li>When you no longer need the it, free the response handle with the <span style="font-family: Courier New,Courier,monospace;">oauth2_response_destroy()</span> function:
+<li>When you no longer need the it, free the response handle with the <code>oauth2_response_destroy()</code> function:
<pre class="prettyprint">
ret = oauth2_response_destroy(response);
<p>You can obtain an access token by using the OAuth 2.0 authorization. The OAuth 2.0 authorization framework enables you to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing you to obtain access on your own behalf. You can also use the FIDO Universal Authentication Framework to authenticate users.</p></li>
-<li><a href="calendar_n.htm">Calendar</a> <strong>in mobile applications only</strong>
+<li><a href="calendar_n.htm">Calendar</a>
<p>You can manage calendars, events, and tasks on a device. You can add, modify, and monitor calendar items, and set reminders for important items. You can also convert calendar items to the vCalendar format.</p></li>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Malware Scanning and Web Protection</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#prerequisites">Prerequisites</a></li>
+ <li><a href="#scanning_malwares">Scanning for Malware</a></li>
+ <li><a href="#checking_url">Checking the URL Reputation</a></li>
+ <li><a href="#managing_engine">Managing Engines</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">CSR API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">CSR API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Malware Scanning and Web Protection</h1>
+
+<p>The Content Screening and Reputation (CSR) framework allows you to screen the content of malicious Web sites and block access to those sites. The CSR framework protects the device and the user by passing the security API calls to an anti-malware engine, which is provided by a security vendor. The framework is also responsible for error handling when there is no anti-malware engine installed.</p>
+
+<p>The main features of the CSR API include:</p>
+ <ul>
+ <li>Content Screening Service
+<p>The service enables caller modules and applications to <a href="#scanning_malwares">scan the content for data, files, and directories</a>. The actual scanning is performed by underlying anti-malware engines, which are provided by a device manufacturer.</p></li>
+ </ul>
+ <ul>
+ <li>Web Protection (Anti Phishing) Service
+<p>The service enables caller modules and applications to <a href="#checking_url">check whether a URL they want to access is risky</a>. The actual operation is performed by an underlying anti-malware engine, which is provided by a device manufacturer.</p></li>
+ </ul>
+
+<p>You can <a href="#managing_engine">manage the anti-malware engines</a> by enabling and disabling, as needed.</p>
+
+ <p align="center"><strong>Figure: CSR framework process</strong></p>
+ <p align="center"><img alt="CSR framework process" src="../../images/csr-framework.png" /></p>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the CSR framework functionality:</p>
+
+<ol>
+<li>To use the CSR API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
+<pre class="prettyprint">
+<privileges>
+ <!--Needed for malware scanning-->
+ <privilege>http://tizen.org/privilege/antivirus.scan</privilege>
+ <!--Needed for URL reputation checks-->
+ <privilege>http://tizen.org/privilege/antivirus.webprotect</privilege>
+ <!--Needed for engine management and judging any detected malware-->
+ <!--Platform-level privilege-->
+ <privilege>http://tizen.org/privilege/antivirus.admin</privilege>
+</privileges>
+</pre>
+</li>
+<li>
+<p>To use the functions and data types of the CSR API, include the <code><csr-content-screening.h></code>, <code><csr-web-protection.h></code>, and <code><csr-engine-manager.h></code> header files in your application:</p>
+<pre class="prettyprint">
+/* Needed for malware scanning */
+#include <csr-content-screening.h>
+
+/* Needed for URL reputation checks */
+#include <csr-web-protection.h>
+
+/* Needed for engine management */
+#include <csr-engine-manager.h>
+</pre></li>
+
+</ol>
+
+
+<h2 id="scanning_malwares" name="scanning_malwares">Scanning for Malware</h2>
+
+<p>To scan for malware:</p>
+<ol>
+
+<li>Create a content screening (CS) context:
+<pre class="prettyprint">
+csr_cs_context_h context;
+int ret;
+
+/* Create a context */
+ret = csr_cs_context_create(&context);
+</pre>
+</li>
+
+<li>Scan for the content:
+<ul>
+<li>Scan in memory.
+<p>Memory scanning is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user's decision.</p>
+<pre class="prettyprint">
+csr_cs_malware_h detected;
+
+/* To use the CSR framework popup (optional) */
+ret = csr_cs_set_ask_user(context, CSR_CS_ASK_USER_YES);
+
+/* Scan for data */
+unsigned char data[100] = {0,}; /* Set your own data for scanning */
+ret = csr_cs_scan_data(context, data, sizeof(data), &detected);
+if (ret != CSR_ERROR_NONE)
+ /* Error handling */
+
+/* Extract result */
+csr_cs_severity_level_e severity;
+char *malware_name;
+char *detailed_url;
+char *file_name;
+
+if (detected != NULL) {
+ ret = csr_cs_malware_get_severity(detected, &severity);
+ ret = csr_cs_malware_get_name(detected, &malware_name);
+ ret = csr_cs_malware_get_detailed_url(detected, &detailed_url);
+ ret = csr_cs_malware_get_user_response(detected, &user_response);
+
+ /* Release the returned C strings using free() */
+}
+</pre>
+</li>
+
+<li>Scan in a file.
+<p>Scanning content in a file is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user's decision.</p>
+<pre class="prettyprint">
+csr_cs_malware_h detected;
+
+/* To use the CSR framework popup (optional) */
+ret = csr_cs_set_ask_user(context, CSR_CS_ASK_USER_YES);
+
+/* Scan in a file */
+const char *file = "/tmp/testfile.txt"; /* Set the target file for scanning */
+ret = csr_cs_scan_file(context, file, &detected);
+if (ret != CSR_ERROR_NONE)
+ /* Error handling */
+</pre>
+</li>
+
+<li>Scan in a directory.
+<p>Scanning content in a directory with a specified directory path is an asynchronous operation. Callbacks can be registered by callback setter functions, and a callback is only called if it is registered.</p>
+<pre class="prettyprint">
+/* Define callback functions */
+void on_detected(csr_cs_malware_h detected, void *userdata)
+{
+ /* Extract detected malware information */
+}
+void on_scanned(const char *file, void *userdata) {}
+void on_error(int ec, void *userdata) {}
+void on_completed(void *userdata) {}
+void on_cancelled(void *userdata) {}
+
+{
+ csr_cs_malware_h detected;
+ /* User-specific data to be returned at callback method */
+ char *user_data = NULL;
+ int ret;
+
+ /* Register callbacks */
+ ret = csr_cs_set_detected_cb(context, on_detected);
+ ret = csr_cs_set_completed_cb(context, on_completed);
+ ret = csr_cs_set_cancelled_cb(context, on_cancelled);
+ ret = csr_cs_set_error_cb(context, on_error);
+ ret = csr_cs_set_file_scanned_cb(context, on_scanned);
+
+ /* Scan asynchronously */
+ const char *dirs[2] = {TEST_DIR1, TEST_DIR2};
+ ret = csr_cs_scan_dirs_async(context, dirs, sizeof(dirs) / sizeof(const char *),
+ user_data); /* user_data can be NULL */
+}
+</pre>
+</li></ul>
+</li>
+
+<li>Get the detected malware information.
+<p>You can retrieve information on detected malware files specified by a file path or directory path. The information for detected malware is stored internally.</p>
+<pre class="prettyprint">
+csr_cs_malware_list_h detected_list;
+size_t size;
+size_t list_size;
+int idx;
+
+const char *dirs[1] = {
+ TEST_DIR
+};
+
+/* Get information on detected malware files specified by file path */
+csr_cs_get_detected_malware(context, "file_path_of_malware_file", &detected);
+
+/* Get information on detected malware files specified by directory path */
+csr_cs_get_detected_malwares(context, dirs, size, &detected_list, &list_size);
+
+for (idx = 0; idx < list_size; idx++) {
+ ret = csr_cs_malware_list_get_malware(detected_list, idx, &detected);
+ /* Get additional information here */
+}
+
+/* Get information on ignored malware files specified by file path */
+csr_cs_get_ignored_malware(context, "file_path_of_malware_file", &detected);
+
+/* Get information on ignored malware files specified by directory path */
+csr_cs_get_ignored_malwares(context, dirs, size, &detected_list, &list_size);
+
+for (idx = 0; idx < list_size; idx++) {
+ ret = csr_cs_malware_list_get_malware(detected_list, idx, &detected);
+ /* Get additional information here */
+}
+</pre>
+</li>
+<li>Judge the detected malware.
+<p>You can judge how a previously scanned and detected malware file is handled. You can either delete the file or ignore or unignore the file.</p>
+<pre class="prettyprint">
+if (detected != NULL) {
+ /* Tag as ignored malware file */
+ ret = csr_cs_judge_detected_malware(context, detected, CSR_CS_ACTION_IGNORE);
+ /* Tag as detected malware file */
+ ret = csr_cs_judge_detected_malware(context, detected, CSR_CS_ACTION_UNIGNORE);
+ /* Delete a malware file */
+ ret = csr_cs_judge_detected_malware(context, detected, CSR_CS_ACTION_REMOVE);
+}
+</pre>
+</li>
+<li>When no longer needed, destroy the content screening (CS) context:
+<pre class="prettyprint">
+ret = csr_cs_context_destroy(context);
+</pre>
+</li>
+</ol>
+
+
+<h2 id="checking_url" name="checking_url">Checking the URL Reputation</h2>
+
+<p>To check the URL reputation:</p>
+<ol>
+<li>Create a Web protection context:
+<pre class="prettyprint">
+csr_wp_context_h context;
+int ret;
+
+/* Create a context */
+ret = csr_wp_context_create(&context);
+</pre>
+</li>
+
+<li>Check the URL reputation against the engine vendor database:
+<pre class="prettyprint">
+csr_wp_check_result_h result;
+int ret;
+
+/* To use the CSR framework popup (optional) */
+ret = csr_wp_set_ask_user(context, CSR_WP_ASK_USER_YES);
+
+/* Check a URL */
+const char *url = "http://www.testurl.com"; /* Set the target URL to check */
+ret = csr_wp_check_url(context, url, &result);
+
+/* Extract result */
+csr_wp_risk_level_e risk;
+char *detailed_url;
+ret = csr_wp_result_get_risk_level(result, &risk);
+ret = csr_wp_result_get_detailed_url(result, &detailed_url);
+ret = csr_wp_result_get_user_response(result, &user_response);
+/* Release the returned C strings using free() */
+</pre>
+</li>
+<li>When no longer needed, destroy the Web protection context:
+<pre class="prettyprint">
+ret = csr_wp_context_destroy(context);
+</pre>
+</li>
+</ol>
+
+
+<h2 id="managing_engine" name="managing_engine">Managing Engines</h2>
+
+
+<p>To get engine information and enable or disable the engine:</p>
+<ul>
+
+<li>Get the current engine handle and extract information from it:
+<pre class="prettyprint">
+csr_engine_h engine;
+char *vendor;
+char *name;
+char *version;
+time_t time;
+csr_activated_e activated;
+int ret;
+
+/* Get the engine handle */
+ret = csr_get_current_engine(CSR_ENGINE_CS, &engine);
+/*
+ Or
+ ret = csr_get_current_engine(CSR_ENGINE_WP, &engine));
+*/
+
+/* Get information */
+ret = csr_engine_get_vendor(engine, &vendor);
+ret = csr_engine_get_name(cs_engine, &name);
+ret = csr_engine_get_version(cs_engine, &version);
+ret = csr_engine_get_latest_update_time(cs_engine, &time);
+ret = csr_engine_get_activated(cs_engine, &activated);
+/* Release the returned C strings using free() */
+
+ret = csr_engine_destroy(engine);
+</pre>
+</li>
+
+<li>Enable or disable an engine:
+<pre class="prettyprint">
+csr_engine_h cs_engine;
+csr_state_e state;
+int ret;
+
+ret = csr_get_current_engine(CSR_ENGINE_CS, &cs_engine);
+
+/* Disable engine */
+ret = csr_engine_set_state(cs_engine, CSR_STATE_DISABLE);
+ret = csr_engine_get_state(cs_engine, &state);
+
+/* Enable engine */
+ret = csr_engine_set_state(cs_engine, CSR_STATE_ENABLE);
+ret = csr_engine_get_state(cs_engine, &state);
+
+ret = csr_engine_destroy(cs_engine);
+</pre>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<p>The following figure illustrates the DPM framework process.</p>
- <p class="figure">Figure: DPM framework process</p>
+ <p align="center"><strong>Figure: DPM framework process</strong></p>
<p align="center"><img alt="DPM framework process" src="../../images/dpm-framework.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Device Policy Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__DPM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__DPM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><dpm/device-policy-manager.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Device Policy Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__DPM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__DPM__MODULE.html">wearable</a> applications), include the <code><dpm/device-policy-manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <dpm/device-policy-manager.h>
</pre>
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 */
}
<p>From Tizen 3.0, some privileges are categorized as privacy-related, and you can switch those privileges on and off based on the user preference. You can change certain privileges' status to allow or deny them at runtime. This means that the application calling a privileged API can be prevented from using it even if the required privilege is declared in its manifest file. Specific APIs can be used to check the privacy-related privilege's current status and get the display name of the privacy that includes the privilege. For example, you can use the APIs to check the privilege's current status before entering a function that requires the privilege, and if the status is off, display a guide message to the user to ask them to go to the device settings and switch the required privacy on.</p>\r
\r
<h2 id="prerequisites">Prerequisites</h2>\r
-<p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><privilege_information.h></span> header file in your application:</p>\r
+<p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <code><privilege_information.h></code> header file in your application:</p>\r
<pre class="prettyprint">\r
#include <privilege_information.h>\r
</pre> \r
<p>To get various privilege information:</p>\r
<ul>\r
\r
-<li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:\r
+<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 = privilege_info_get_display_name("2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &display_name);\r
+int ret =\r
+ 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 <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function:\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 = 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
+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
</pre>\r
</li>\r
\r
-<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function:\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 = privilege_info_get_description("2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &description);\r
+int ret =\r
+ privilege_info_get_description("2.2",\r
+ "http://tizen.org/privilege/application.launch",\r
+ &description);\r
</pre>\r
</li>\r
\r
\r
-<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function:\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 = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB",\r
- "2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &description);\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
</pre>\r
</li>\r
-<li>Get the privacy display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_privacy_display_name()</span> function:\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 = privilege_info_get_privacy_display_name("http://tizen.org/privilege/account.read",\r
- &privacy_display_name);\r
+int ret =\r
+ 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 <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_privacy_privilege_status()</span> function:\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 = privilege_info_get_privacy_privilege_status("http://tizen.org/privilege/account.read",\r
- &status);\r
+int ret =\r
+ privilege_info_get_privacy_privilege_status("http://tizen.org/privilege/account.read",\r
+ &status);\r
</pre>\r
</li>\r
</ul>\r
-<p>The above functions return a <
span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">wearable</a> applications) that indicates the value retrieval result. They also store the requested privilege display name or description, privacy display, and privacy privilege status in their last parameter.</p>
\r+<p>The above functions return a <
code>privilege_info_error_e</code> enum value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html#gae50b814d4efe1b1d7218b6d68cdcadd6">wearable</a> applications) that indicates the value retrieval result. They also store the requested privilege display name or description, privacy display, and privacy privilege status in their last parameter.</p>
\r \r
\r
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
</script>\r
\r
</body>\r
-</html>\r
+</html>
\ No newline at end of file
</li>
</ul>
- <p class="figure">Figure: Key manager process</p>
+ <p align="center"><strong>Figure: Key manager process</strong></p>
<p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
<p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>
<ol>
<li>
-<p>To use the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/keymanager</privilege>
</pre>
</li>
-<li><p>To use the functions and data types of the Key Manager API, include the <span style="font-family: Courier New,Courier,monospace"><ckmc/ckmc-manager.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Key Manager API, include the <code><ckmc/ckmc-manager.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <ckmc/ckmc-manager.h>
</pre></li></ol>
test_key.key_type = CKMC_KEY_NONE; /* Real key type is determined by the key manager */
test_key.password = NULL; /* binary_key is not encrypted with a password */
-store_policy.password = key_password; /* NULL means that the test_key is not encrypted with a per key password */
+/* NULL means that the test_key is not encrypted with a per key password */
+store_policy.password = key_password;
store_policy.extractable = true; /* Key value is extractable */
ret = ckmc_save_key(alias, test_key, store_policy);
/* Private key is encrypted with an additional password */
policy_private_key.password = (char *)"pri_password";
-policy_private_key.extractable = false; /* Key cannot be extracted from the key manager */
+/* Key cannot be extracted from the key manager */
+policy_private_key.extractable = false;
policy_public_key.password = NULL;
policy_public_key.extractable = true;
/* Private key is encrypted with an additional password */
policy_private_key.password = (char *)"pri_password";
-policy_private_key.extractable = false; /* Key cannot be extracted from the key manager */
+/* Key cannot be extracted from the key manager */
+policy_private_key.extractable = false;
policy_public_key.password = NULL;
policy_public_key.extractable = true;
next = current->next;
} while (next != NULL);
-ckmc_cert_list_all_free(cert_chain_list); /* Called when the list is no longer needed */
+/* Called when the list is no longer needed */
+ckmc_cert_list_all_free(cert_chain_list);
</pre></li>
<li><p>Get a certificate chain with aliases of untrusted CA certificates.</p>
ckmc_cert_s c_cert; /* For a user certificate */
ckmc_cert_s c_cert1; /* For an intermediate untrusted CA certificate */
-ckmc_alias_list_s untrustedcerts; /* Linked list of untrusted CA certificate's aliases */
+ckmc_alias_list_s untrustedcerts; /* Linked list of untrusted CA certificate aliases */
ckmc_cert_list_s *cert_chain_list; /* Linked list of a certificate chain */
int cnt = 0;
next = current->next;
} while (next != NULL);
-ckmc_cert_list_all_free(cert_chain_list); /* Called when the list is no longer needed */
+/* Called when the list is no longer needed */
+ckmc_cert_list_all_free(cert_chain_list);
</pre></li></ul>
<h2 id="pkcs" name="pkcs">Loading a Certificate or a PKCS#12 File</h2>
int ret = CKMC_ERROR_NONE;
ckmc_cert_s *pcert;
-/* defined_media_storage_directory can be obtained with the storage_get_directory() function */
+/*
+ defined_media_storage_directory can be obtained
+ with the storage_get_directory() function
+*/
const char *file_name = "<defined_media_storage_directory>/ckmc_test_cert.pem";
ret = ckmc_load_cert_from_file(file_name, &pcert);
int ret = CKMC_ERROR_NONE;
ckmc_pkcs12_s *ppkcs12 = NULL;
-/* defined_media_storage_directory can be obtained with the storage_get_directory() function */
+/*
+ defined_media_storage_directory can be obtained
+ with the storage_get_directory() function
+*/
const char *p12file = "<defined_media_storage_directory>/ckmc_p12_test.p12";
const char *password = "password"; /* PKCS#12 file can be protected by a password */
<li><a href="yaca_n.htm">Cryptographic Operations</a>
<p>You can encrypt and decrypt data with symmetric or asymmetric encryption, and manage keys with YACA (Yet Another Crypto API). You can also digest messages and create digital signatures.</p></li>
+
<li><a href="dpm_n.htm">Device Policy Management</a>
<p>You can create security-aware applications to manage device policies. In enterprise settings, you can provide rich control for IT administrators over employee devices.</p></li>
+
+<li><a href="csr_n.htm">Malware Scanning and Web Protection</a>
+
+<p>You can scan data, files, and directories to detect malware. You can also check the URL reputation before accessing a specific URL.</p></li>
</ul>
<p>For information on how to minimize any accidental introduction of security vulnerabilities in your application, see <a href="security_tip.htm">Security Tips</a> (<strong>in mobile applications only</strong>).</p>
<h2 id="privilege">Using Privileges for API Access Control</h2>
-<p>All native applications have a manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) describing permissions. The manifest file describes SMACK labels and allows the application to get proper privileges.</p>
+<p>All native applications have a manifest file (<code>tizen-manifest.xml</code>) describing permissions. The manifest file describes SMACK labels and allows the application to get proper privileges.</p>
<p>In a mandatory access control system, an application that accesses sensitive resources must acquire proper permissions from the system. In Tizen 2.X, permissions can be granted by loading proper SMACK rules:</p>
<ul>
<p>File sharing is a basic mechanism for interchanging data between application processes. By sharing a data file, the application process can send and receive data:</p>
<ul>
-<li>The Tizen application process can write a file to the path that is returned by the <span style="font-family: Courier New,Courier,monospace">app_get_data_path()</span> function.
+<li>The Tizen application process can write a file to the path that is returned by the <code>app_get_data_path()</code> function.
<p>Because the application data path is created for each application package, the applications in the same package can share files in the data path. This is a totally secure file sharing method, because applications in the same package are trusted applications.</p></li>
-<li>Tizen applications can write a file to the path that is returned by the <span style="font-family: Courier New,Courier,monospace">app_get_shared_data_path()</span> function, and share the file among all other applications in the device.
+<li>Tizen applications can write a file to the path that is returned by the <code>app_get_shared_data_path()</code> function, and share the file among all other applications in the device.
<p>The files in the shared data path can be read by all other applications in the device. Since you cannot control which applications are able to read the file in the shared data path, do not share private information in this way. Sharing data among applications through the shared data path is insecure, and consequently the shared data path is going to be deprecated in the next Tizen release.</p>
-<p>As an alternative to the shared data path, Tizen 2.4 introduced a feature of sharing a file in its data path using application controls. When an application requests an application control, it can specify a URI and the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span> extra key. If you pass the file path to the application control as the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span> extra key, the platform grants temporary read permission to the receiving application. This method is much more secure than sharing a file in the shared data path.</p>
+<p>As an alternative to the shared data path, Tizen 2.4 introduced a feature of sharing a file in its data path using application controls. When an application requests an application control, it can specify a URI and the <code>APP_CONTROL_DATA_PATH</code> extra key. If you pass the file path to the application control as the <code>APP_CONTROL_DATA_PATH</code> extra key, the platform grants temporary read permission to the receiving application. This method is much more secure than sharing a file in the shared data path.</p>
</li>
-<li>To share files among applications that you have developed, use the path that is returned by the <span style="font-family: Courier New,Courier,monospace">app_get_shared_trusted_path()</span> function.
+<li>To share files among applications that you have developed, use the path that is returned by the <code>app_get_shared_trusted_path()</code> function.
<p>The files in the shared trusted path can be read and written by the applications that are developed by the same developer. This is a secure way of sharing files among your applications.</p>
</li></ul>
+<p align="center" class="Table"><strong>Table: File sharing functions</strong></p>
<table>
-<caption>Table: File sharing functions</caption>
<tbody>
<tr>
<th>Function</th>
<th>Security</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_get_data_path()</span></td>
+ <td><code>app_get_data_path()</code></td>
<td>Applications in the same package</td>
<td>Strong</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_get_shared_data_path()</span></td>
+ <td><code>app_get_shared_data_path()</code></td>
<td><ul><li>Read: all application in the device</li>
<li>Write: applications in the same package</li></ul></td>
<td>Weak
<p>Do not use this function if you are not sure about its security.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_get_shared_trusted_path()</span></td>
+ <td><code>app_get_shared_trusted_path()</code></td>
<td>Applications signed with the same certificate</td>
<td>Strong</td>
</tr>
<h3>Message Ports</h3>
<p>The Message Port API <a href="../../../../org.tizen.guides/html/native/app_management/message_port_n.htm">supports one-to-one communication</a> between 2 applications. Tizen also supports trusted communication as an option for a more secure communication between 2 trusted applications.</p>
-<p>When you use the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> and <span style="font-family: Courier New,Courier,monospace">message_port_send_trusted_message()</span> functions, you can make the communication valid only between the applications that are developed by you. Since the platform checks the application author certificate for trusted communications, you can use these functions to make your applications communicate through a more secure channel.</p>
+<p>When you use the <code>message_port_register_trusted_local_port()</code> and <code>message_port_send_trusted_message()</code> functions, you can make the communication valid only between the applications that are developed by you. Since the platform checks the application author certificate for trusted communications, you can use these functions to make your applications communicate through a more secure channel.</p>
<h3>Data Control</h3>
<p>The Data Control API supports <a href="../../../../org.tizen.guides/html/native/app_management/data_control_n.htm">communication between provider and consumer applications</a>. One provider can provide data to many consumers in a structured way, such as SQL or map.</p>
-<p>The consumer can request data from any provider, as long as the consumer knows the provider ID of the provider application. If the provider does not want to provide data to arbitrary consumers, it can check the application ID of the consumer in the callback handlers, such as <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_insert_request_cb()</span> or <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_select_request_cb()</span>. The provider can get the consumer application ID though the <span style="font-family: Courier New,Courier,monospace">data_control_provider_get_client_appid()</span> function, and then determine whether it allows that consumer to access its data.</p>
+<p>The consumer can request data from any provider, as long as the consumer knows the provider ID of the provider application. If the provider does not want to provide data to arbitrary consumers, it can check the application ID of the consumer in the callback handlers, such as <code>data_control_provider_sql_insert_request_cb()</code> or <code>data_control_provider_sql_select_request_cb()</code>. The provider can get the consumer application ID though the <code>data_control_provider_get_client_appid()</code> function, and then determine whether it allows that consumer to access its data.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<ol>
<li>
-<p>To use the functions and data types of the YACA API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__YACA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__YACA__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><yaca_crypto.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_error.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_key.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_digest.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_encrypt.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_seal.h></span>, <span style="font-family: Courier New,Courier,monospace"><yaca_sign.h></span>, and <span style="font-family: Courier New,Courier,monospace"><yaca_simple.h></span> header files in your application:</p>
+<p>To use the functions and data types of the YACA API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__YACA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__YACA__MODULE.html">wearable</a> applications), include the <code><yaca_crypto.h></code>, <code><yaca_error.h></code>, <code><yaca_key.h></code>, <code><yaca_digest.h></code>, <code><yaca_encrypt.h></code>, <code><yaca_seal.h></code>, <code><yaca_sign.h></code>, and <code><yaca_simple.h></code> header files in your application:</p>
<pre class="prettyprint">
/* Needed for general operations */
#include <yaca_crypto.h>
/* Needed for digital signatures */
#include <yaca_sign.h>
-/* Needed for digital signatures, message digests, and encryption with simple functions */
+/*
+ Needed for digital signatures, message digests,
+ and encryption with simple functions
+*/
#include <yaca_simple.h>
/* Needed for message digests */
/* 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 */
/* Error handling */
/*
- The tag verification is performed when you call the final yaca_open_update() function,
- there is no call to the yaca_open_finalize() function
+ Tag verification is done when you call the final yaca_open_update()
+ function, there is no call to the yaca_open_finalize() function
*/
if (yaca_open_update(ctx, enc, enc_len, dec, &written_len) != YACA_ERROR_NONE)
/* Error handling */
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UIX/IME_Sample" target="_blank">IME Sample Description</a></li>
</ul>
</div></div>
<p>The input method editor (IME) is an input panel (keyboard) that lets the user input text and the platform receive the entered data. The user can <a href="#manager">select an IME as their default keyboard in the device Settings application</a>.</p>
- <p>This feature is supported in mobile applications only.</p>
-
<p>You can create a Tizen native IME application that provides a new IME. You can start the IME application life-cycle, interact with the current IME UI state, and retrieve attributes and events.</p>
<p>The main features of the Input Method API include:</p>
<li>Managing the IME life-cycle
<p>The system can have multiple keyboards, and the user can choose which one to use as the default keyboard. The IME application <a href="#start">starts its life-cycle</a> when it is selected as the default keyboard. The following figure shows the IME application life-cycle.</p>
- <p class="figure">Figure: IME application life-cycle</p>
+ <p align="center"><strong>Figure: IME application life-cycle</strong></p>
<p align="center"><img alt="IME application life-cycle" src="../../images/ime_lifecycle.png" /></p>
<p>The IME application runs as follows:</p>
<ol>
-<li>Once the IME application is started, the <span style="font-family: Courier New,Courier,monospace">create()</span> callback function is called.</li>
-<li>When a text input UI control gets the focus, the <span style="font-family: Courier New,Courier,monospace">show()</span> callback function is called.
-<p>The IME application can call Input Method APIs to interact with the UI control. The event callback functions are called when the UI control state changes. When the text input UI control loses the focus, the <span style="font-family: Courier New,Courier,monospace">hide()</span> callback function is called.</p></li>
-<li>When the IME application is finished, the <span style="font-family: Courier New,Courier,monospace">terminate()</span> callback function is called.</li></ol>
+<li>Once the IME application is started, the <code>create()</code> callback function is called.</li>
+<li>When a text input UI control gets the focus, the <code>show()</code> callback function is called.
+<p>The IME application can call Input Method APIs to interact with the UI control. The event callback functions are called when the UI control state changes. When the text input UI control loses the focus, the <code>hide()</code> callback function is called.</p></li>
+<li>When the IME application is finished, the <code>terminate()</code> callback function is called.</li></ol>
</li>
<li>Managing the main loop and event callback functions
-<p>The IME application must implement the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function. It is the main entry point, in which you can <a href="#callback">register event callback functions</a> and call the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function to start the main loop.</p>
-<p>During its life-cycle, the IME application can receive a number of events from the Tizen input service framework through the callback functions. You must register the mandatory <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callbacks. Other callbacks can be registered as required by the specific IME application.</p> </li>
+<p>The IME application must implement the <code>ime_app_main()</code> function. It is the main entry point, in which you can <a href="#callback">register event callback functions</a> and call the <code>ime_run()</code> function to start the main loop.</p>
+<p>During its life-cycle, the IME application can receive a number of events from the Tizen input service framework through the callback functions. You must register the mandatory <code>create()</code>, <code>terminate()</code>, <code>show()</code>, and <code>hide()</code> callbacks. Other callbacks can be registered as required by the specific IME application.</p> </li>
<li>Showing and hiding the keyboard
<p>When an associated text input UI control has the focus, the active keyboard is requested to be shown. When the text input UI control loses the focus, the keyboard is requested to be hidden.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">show()</span> and <span style="font-family: Courier New,Courier,monospace">hide()</span> callback functions are used to manage the keyboard visibility, and the IME application must register both of them when starting the IME main loop.</p>
-<p>The client application can set various configurations for each text input UI control, such as the cursor position, key layout type, return key type, and flags of predictive text. The configurations are delivered to the IME application though the <span style="font-family: Courier New,Courier,monospace">show()</span> callback function, to allow the keyboard to show the correct look to the user.</p></li>
+<p>The <code>show()</code> and <code>hide()</code> callback functions are used to manage the keyboard visibility, and the IME application must register both of them when starting the IME main loop.</p>
+<p>The client application can set various configurations for each text input UI control, such as the cursor position, key layout type, return key type, and flags of predictive text. The configurations are delivered to the IME application though the <code>show()</code> callback function, to allow the keyboard to show the correct look to the user.</p></li>
<li>Using the keyboard option menu
<p>Each keyboard can <a href="#menu">offer its own option menu</a> to allow the user to manage the keyboard settings. Nowadays, most platforms provide the keyboard option menu from the device Settings application or from the keyboard directly.</p>
-<p>You can register callback functions that are called when the keyboard option menu opens or closes. These callback functions can be registered before the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function call in the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function.</p>
+<p>You can register callback functions that are called when the keyboard option menu opens or closes. These callback functions can be registered before the <code>ime_run()</code> function call in the <code>ime_app_main()</code> function.</p>
<p>The device Settings application triggers the callback function to open the keyboard option menu. The keyboard itself can also trigger the callback function to open its option menu.</p></li></ul>
<h2 id="manager">Input Method Manager</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">Input Method Manager</a> is a module used to manage the installed IMEs. You can use it to open the installed IME list or selector menu after your IME application is installed, and guide the user to select the installed IME:</p>
+<p>The Input Method Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications) is a module used to manage the installed IMEs. You can use it to open the installed IME list or selector menu after your IME application is installed, and guide the user to select the installed IME:</p>
<ul>
<li>Showing the IME list
<p>You can <a href="#list">request the installed IME list menu</a> to be opened. If a new IME has been installed, the user can see its name in the IME list, and can use the toggle button to enable the keyboard they want. All keyboards enabled in the IME list are shown in the IME selector to allow the user to select them as the default keyboard.</p>
- <p class="figure">Figure: IME list</p>
+ <p align="center"><strong>Figure: IME list</strong></p>
<p align="center"><img alt="IME list" src="../../images/ime_list.png" /></p>
</li>
<li>Showing the IME selector
<p>You can <a href="#selector">request the IME selector menu</a> to be opened. When the user opens the IME selector menu, it shows all the keyboards enabled in the IME list. The user can change the default keyboard by selecting a new one. By clicking <strong>Select keyboard</strong>, the user can return to the IME list menu to enable a new IME.</p>
- <p class="figure">Figure: IME selector</p>
+ <p align="center"><strong>Figure: IME selector</strong></p>
<p align="center"><img alt="IME selector" src="../../images/ime_selector.png" /></p>
</li>
<li>Checking the IME status
<ol>
<li>
-<p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">Input Method Manager</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<p>To use the Input Method Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
<pre class="prettyprint">
<privileges>
<privilege>http://tizen.org/privilege/imemanager</privilege>
</privileges>
</pre>
</li>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a> API, include the <span style="font-family: Courier New,Courier,monospace"><inputmethod.h></span> header file in your application:
+<li>To use the functions and data types of the Input Method API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">wearable</a> applications), include the <code><inputmethod.h></code> header file in your application:
<pre class="prettyprint">
#include <inputmethod.h>
#include <Elementary.h>
</pre>
</li>
-<li>To use the functions and data types of the Input Method Manager API, include the <span style="font-family: Courier New,Courier,monospace"><inputmethod_manager.h></span> header file in your application:
+<li>To use the functions and data types of the Input Method Manager API, include the <code><inputmethod_manager.h></code> header file in your application:
<pre class="prettyprint">
#include <inputmethod_manager.h>
</pre>
<h2 id="start" name="start">Starting the IME Life-cycle</h2>
<p>To start the IME application life-cycle:</p>
<ol>
-<li>Implement the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function as the main entry point of IME application:
+<li>Implement the <code>ime_app_main()</code> function as the main entry point of IME application:
<pre class="prettyprint">
void ime_app_main(int argc, char **argv);
</pre>
<p>The function is called when the user selects the IME as default from the IME selector menu.</p>
</li>
-<li>Inside the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function, add the required callbacks and call the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function to start the application:
+<li>Inside the <code>ime_app_main()</code> function, add the required callbacks and call the <code>ime_run()</code> function to start the application:
<pre class="prettyprint">
int ime_run(ime_callback_s *basic_cb, void *user_data);
</pre></li>
<ol type="a">
<li>
-<p>You must register the <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callbacks.</p>
-<p>Add the callbacks to the <a href="../../../../org.tizen.native.mobile.apireference/structime__callback__s.html">ime_callback_s</a> structure, and pass the structure as a parameter to the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:</p>
+<p>You must register the <code>create()</code>, <code>terminate()</code>, <code>show()</code>, and <code>hide()</code> callbacks.</p>
+<p>Add the callbacks to the <code>ime_callback_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structime__callback__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structime__callback__s.html">wearable</a> applications), and pass the structure as a parameter to the <code>ime_run()</code> function:</p>
<pre class="prettyprint">
static void create(void *user_data);
void
ime_app_main(int argc, char **argv)
{
- ime_callback_s basic_callback =
- {
+ ime_callback_s basic_callback = {
create, /* When the input panel is created */
terminate, /* When the input panel is terminated */
show, /* When the input panel is shown */
evas_object_hide(ime_win);
}
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">show()</span> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <span style="font-family: Courier New,Courier,monospace">ime_context_get_XXX()</span> functions defined in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file.</p>
+<p>In the <code>show()</code> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <code>ime_context_get_XXX()</code> functions defined in the <code>inputmethod.h</code> header file.</p>
</li>
</ol>
</li>
<ol type="a">
<li>
-<p>You can register optional callbacks with the <span style="font-family: Courier New,Courier,monospace">ime_event_set_XXX_cb()</span> functions provided in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file:</p>
+<p>You can register optional callbacks with the <code>ime_event_set_XXX_cb()</code> functions provided in the <code>inputmethod.h</code> header file:</p>
<pre class="prettyprint">
static int focus_in(int context_id, void *user_data);
void
ime_app_main(int argc, char **argv)
{
- ime_callback_s basic_callback =
- {
+ ime_callback_s basic_callback = {
/* Add the mandatory callbacks */
};
</li>
<li>Define the registered callbacks:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">focus_in()</span> callback is triggered when an associated text input UI control in any application gets the focus. Usually, the <span style="font-family: Courier New,Courier,monospace">focus_in()</span> event is followed by the <span style="font-family: Courier New,Courier,monospace">show()</span> event.
+<li>The <code>focus_in()</code> callback is triggered when an associated text input UI control in any application gets the focus. Usually, the <code>focus_in()</code> event is followed by the <code>show()</code> event.
<pre class="prettyprint">
static int
/* Take action */
}
</pre></li>
-<li>The <span style="font-family: Courier New,Courier,monospace">focus_out()</span> callback is triggered when an associated text input UI control in any application loses the focus. Usually, the <span style="font-family: Courier New,Courier,monospace">focus_out()</span> event is followed by the <span style="font-family: Courier New,Courier,monospace">hide()</span> event.
+<li>The <code>focus_out()</code> callback is triggered when an associated text input UI control in any application loses the focus. Usually, the <code>focus_out()</code> event is followed by the <code>hide()</code> event.
<pre class="prettyprint">
static int
/* Take action */
}
</pre></li>
-<li>The <span style="font-family: Courier New,Courier,monospace">cursor_position_updated()</span> callback is triggered when the position of the cursor in an associated text input UI control changes. You can use this callback to provide, for example, auto-capitalization or predictive text features.
+<li>The <code>cursor_position_updated()</code> callback is triggered when the position of the cursor in an associated text input UI control changes. You can use this callback to provide, for example, auto-capitalization or predictive text features.
<pre class="prettyprint">
static int
<h2 id="menu" name="menu">Making a Keyboard Option Menu</h2>
<p>To make the option menu for the keyboard:</p>
<ol>
-<li>Add the necessary callbacks for reacting to the keyboard option menu opening and closing, before calling the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:
+<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
ime_app_main(int argc, char **argv)
{
- ime_callback_s basic_callback =
- {
+ ime_callback_s basic_callback = {
/* Add the mandatory callbacks */
};
<li>The option menu can be opened in 2 different ways:
<ul>
<li>The device Settings application can open the keyboard option menu from <strong>Settings > Language and input > Keyboard > Keyboard settings</strong>.
-<p>If the user selects the keyboard settings, the <span style="font-family: Courier New,Courier,monospace">option_window_created()</span> callback is executed:</p>
+<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 */
<li>The keyboard can have a specific key button for its option menu, allowing the user to open the option menu directly from the keyboard.
-<p>If the user clicks the key button, you can use the <span style="font-family: Courier New,Courier,monospace">ime_create_option_window()</span> function in the button click callback to open the option menu:</p>
+<p>If the user clicks the key button, you can use the <code>ime_create_option_window()</code> function in the button click callback to open the option menu:</p>
<pre class="prettyprint">
static void
_clicked(void *data, Evas_Object *obj, void *event_info)
ime_create_option_window();
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">ime_create_option_window()</span> function call triggers the <span style="font-family: Courier New,Courier,monospace">option_window_created()</span> callback, in which you can draw the option menu content on the given window.</p>
+<p>The <code>ime_create_option_window()</code> function call triggers the <code>option_window_created()</code> callback, in which you can draw the option menu content on the given window.</p>
</li></ul>
</li>
-<li>To close the option menu, call the <span style="font-family: Courier New,Courier,monospace">ime_destroy_option_window()</span> function. The function call triggers the <span style="font-family: Courier New,Courier,monospace">option_window_destroyed()</span> callback:
+<li>To close the option menu, call the <code>ime_destroy_option_window()</code> function. The function call triggers the <code>option_window_destroyed()</code> callback:
<pre class="prettyprint">
static void
option_window_destroyed(Evas_Object *window, void *user_data)
<h2 id="list" name="list">Showing the IME List</h2>
-<p>To launch the IME list menu to show the installed IMEs, use the <span style="font-family: Courier New,Courier,monospace">ime_manager_show_ime_list()</span> function:</p>
+<p>To launch the IME list menu to show the installed IMEs, use the <code>ime_manager_show_ime_list()</code> function:</p>
<pre class="prettyprint">
void
<h2 id="selector" name="selector">Showing the IME Selector</h2>
-<p>To launch the IME selector menu to allow the user to select the default keyboard, use the <span style="font-family: Courier New,Courier,monospace">ime_manager_show_ime_selector()</span> function:</p>
+<p>To launch the IME selector menu to allow the user to select the default keyboard, use the <code>ime_manager_show_ime_selector()</code> function:</p>
<pre class="prettyprint">
void
<p>To check the current default keyboard or whether a specific IME is enabled, or to get the number of enabled (usable) IMEs:</p>
<ul>
-<li>To check whether a specific IME is enabled, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_is_ime_enabled()</span> function. The first parameter is the application ID of the IME whose status you want to check.
+<li>To check whether a specific IME is enabled, call the <code>ime_manager_is_ime_enabled()</code> function. The first parameter is the application ID of the IME whose status you want to check.
<pre class="prettyprint">
boolean
<p>If the function is successful, it returns 0.</p>
</li>
-<li>To check which IME is currently selected as the default keyboard, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_get_active_ime()</span> function:
+<li>To check which IME is currently selected as the default keyboard, call the <code>ime_manager_get_active_ime()</code> function:
<pre class="prettyprint">
void
<p>If the function is successful, it returns 0.</p>
</li>
-<li>To get the number of enabled (usable) IMEs, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_get_enabled_ime_count()</span> function:
+<li>To get the number of enabled (usable) IMEs, call the <code>ime_manager_get_enabled_ime_count()</code> function:
<pre class="prettyprint">
int
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#basic_stt">Basic STT Processes</a></li>
+ <li><a href="#parameter_stt">STT Parameters</a></li>
<li><a href="#info_stt">STT Information Retrieval</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#set">Setting and Unsetting Callbacks</a></li>
<li><a href="#get">Getting Information</a></li>
<li><a href="#prepare">Connecting and Disconnecting the STT</a></li>
+ <li><a href="#engine">Setting and Getting Options about the STT Engine</a></li>
<li><a href="#option">Setting Options and Controlling Recording</a></li>
</ul>
<p class="toc-title">Related Info</p>
<li>Preparing the STT service for use
<p>You can <a href="#prepare">connect the background STT daemon</a> to be able to operate the STT.</p></li>
<li>Using basic STT processes
-<p>The <a href="#basic_stt">basic processes</a> allow you to set and unset callbacks, control the recording, and set options.</p></li>
+<p>The <a href="#basic_stt">basic processes</a> allow you to set and unset callbacks, control the recording, and set options. You can also <a href="#parameter_stt">set STT parameters</a>.</p></li>
<li>Retrieving STT information
<p>You can <a href="#info_stt">get information</a> that includes, for example, language and state.</p></li>
</ul>
<p>The STT life-cycle is described in the following figure.</p>
- <p class="figure">Figure: STT life-cycle</p>
+ <p align="center"><strong>Figure: STT life-cycle</strong></p>
<p align="center"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
+<h2 id="parameter_stt" name="parameter_stt">STT Parameters</h2>
+<p>You can set the following parameters about the STT:</p>
+<ul>
+<li>Credential
+<p>The credential is a key to verify the authorization about using the STT engine. The necessity of the credential depends on the STT engine. If the STT engine requests the credential, you can set it using the <code>stt_set_credential()</code> function.</p></li>
+<li>Private data
+<p>The private data is a setting parameter for applying keys provided by the STT engine. Using the <code>stt_set_private_data()</code> function, you can set the private data as the corresponding key of the STT engine.</p></li>
+</ul>
+
+
<h2 id="info_stt" name="info_stt">STT Information Retrieval</h2>
<p>You can get the following information about the STT:</p>
<ul>
<li>The default language can be changed by the STT setting an application or by the display language changing. If the display language is changed to a non-supported one, the STT language is changed to UK English.</li></ul></li>
<li>Get a list of the supported languages to check whether the language you want is supported.</li>
<li>Get a list of the supported engines and the selection of current engines. Additional features, such as silence detection and partial result, are provided by specific engines.</li>
+<li>Get the error message when the error callback is invoked.</li>
+<li>Get private data from the STT engine.</li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the STT functionality:</p>
<ol>
-<li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
+<li>To use the functions and data types of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <code><stt.h></code> header file in your application:
<pre class="prettyprint">
#include <stt.h>
</pre>
</li>
<li><p>To use the STT library, create an STT handle.</p>
-<p>The STT handle is used in other STT functions as a parameter. After the handle creation, the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">STT is not thread-safe and depends on the ecore main loop. Implement STT within the ecore main loop and do not use it in a thread.</td>
- </tr>
- </tbody>
- </table>
+<p>The STT handle is used in other STT functions as a parameter. After the handle creation, the STT state changes to <code>STT_STATE_CREATED</code>.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ STT is not thread-safe and depends on the ecore main loop. Implement STT within the ecore main loop and do not use it in a thread.
+ </div>
<pre class="prettyprint">
void
/* Error handling */
}
</pre></li>
-<li><p>When you no longer need the STT library, destroy the STT handle using the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function:</p>
+<li><p>When you no longer need the STT library, destroy the STT handle using the <code>stt_destroy()</code> function:</p>
<pre class="prettyprint">
/* Error handling */
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function in a callback. Within a callback, the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OPERATION_FAILED</span>.</td>
- </tr>
- </tbody>
- </table>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not use the <code>stt_destroy()</code> function in a callback. Within a callback, the <code>stt_destroy()</code> function fails and returns <code>STT_ERROR_OPERATION_FAILED</code>.
+ </div>
</li> </ol>
<h2 id="set" name="set" >Setting and Unsetting Callbacks</h2>
-<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <span style="font-family: Courier New,Courier,monospace;">stt.h</span> header file.</p>
+<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <code>stt.h</code> header file.</p>
<p>To set and unset callbacks:</p>
<ol>
<li><p>The STT provides various callbacks to get the information, such as the recognition result, state changes, language changes, and errors.</p>
-<p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span> state.</p>
+<p>Set the callbacks in the <code>STT_STATE_CREATED</code> state.</p>
<p>You can use the following callbacks:</p>
<ul>
<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 */
}
<li>Recognition result
<p>To get the STT recognition result, set the recognition result callback.</p>
-<p>Within the callback, use the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_detailed_result()</span> function to trigger a result time callback that retrieves the time stamp of the current recognition result.</p>
+<p>Within the callback, use the <code>stt_foreach_detailed_result()</code> function to trigger a result time callback that retrieves the time stamp of the current recognition result.</p>
<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>
</li>
+<li>Engine changed
+<p>If you set the engine change callback for the STT, it is invoked when the engine is changed by the STT:</p>
+<pre class="prettyprint">
+/* Callback */
+void
+engine_changed_cb(stt_h stt, const char* engine_id,
+ const char* language, bool support_silence,
+ bool need_credential, void* user_data)
+{
+ /* Your code */
+}
+
+/* Set */
+void
+set_engine_changed_cb(stt_h stt)
+{
+ int ret;
+ ret = stt_set_engine_changed_cb(stt, engine_changed_cb, NULL);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+
+/* Unset */
+void
+unset_engine_changed_cb(stt_h stt)
+{
+ int ret;
+ ret = stt_unset_engine_changed_cb(stt);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+
<li>Error
<p>When an error occurs, the STT library sends an error message using a callback:</p>
<pre class="prettyprint">
<p>To obtain the current STT state, the list of supported languages, and the current language:</p>
<ul>
-<li>Get the current state using the <span style="font-family: Courier New,Courier,monospace;">stt_get_state()</span> function.
+<li>Get the current state using the <code>stt_get_state()</code> function.
<p>The STT state is changed by various STT functions, and it is applied as a precondition for each function.</p>
<pre class="prettyprint">
void
</pre>
</li>
-<li>Obtain a list of languages supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_languages()</span> function.
-<p>The foreach function triggers a separate callback for each supported language. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported languages.</p>
+<li>Obtain a list of languages supported by the STT using the <code>stt_foreach_supported_languages()</code> function.
+<p>The foreach function triggers a separate callback for each supported language. As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(stt_h stt, const char* language, void* user_data)
</pre>
</li>
-<li>Get the default language using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.
-<p>The STT recognition process works for this default language, if you do not set the language as a parameter of the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function.</p>
+<li>Get the default language using the <code>stt_get_default_language()</code> function.
+<p>The STT recognition process works for this default language, if you do not set the language as a parameter of the <code>stt_start()</code> function.</p>
<pre class="prettyprint">
void
get_default_language(stt_h stt)
<p>You can get a notification about the default language changes by setting a default language changed callback.</p>
</li>
-<li>Obtain a list of engines supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_engines()</span> function.
-<p>The foreach function triggers a separate callback for each supported engine. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported engines.</p>
+<li>Obtain a list of engines supported by the STT using the <code>stt_foreach_supported_engines()</code> function.
+<p>The foreach function triggers a separate callback for each supported engine. As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported engines.</p>
<pre class="prettyprint">
bool
supported_engine_cb(stt_h stt, const char* engine_id, const char* engine_name,
</pre>
</li>
-<li>Get or set the current engine for the STT recognition using the <span style="font-family: Courier New,Courier,monospace;">stt_set_engine()</span> and <span style="font-family: Courier New,Courier,monospace;">stt_get_engine()</span> functions.
+<li>Get or set the current engine for the STT recognition using the <code>stt_set_engine()</code> and <code>stt_get_engine()</code> functions.
<p>The supported language, silence detection, and supported recognition types depend on the STT engine.</p>
<pre class="prettyprint">
/* Get the engine */
</pre>
</li>
-<li>Check whether a recognition type defined in the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file is supported by the current engine.
-<p>The normal recognition type, <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE</span>, means that the whole recognition result is sent at the end of the recognition process. The <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE_PARTIAL</span> recognition type is used to get a partial recognition result.</p>
+<li>Check whether a recognition type defined in the <code><stt.h></code> header file is supported by the current engine.
+<p>The normal recognition type, <code>STT_RECOGNITION_TYPE_FREE</code>, means that the whole recognition result is sent at the end of the recognition process. The <code>STT_RECOGNITION_TYPE_FREE_PARTIAL</code> recognition type is used to get a partial recognition result.</p>
<pre class="prettyprint">
void
check_supported_recognition_type(stt_h stt)
}
</pre>
</li>
+
+<li>Get the error message.
+<p>Call this function during the STT error callback. If not, the error as an operation failure is returned. If the function succeeds, the error message must be released using the <code>free()</code> function, when it is no longer required.</p>
+<pre class="prettyprint">
+void
+error_cb(stt_h stt, stt_error_e reason, void *user_data)
+{
+ int ret;
+ char * err_msg = NULL;
+ ret = stt_get_error_message(stt, &err_msg);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+ if (NULL != err_msg) {
+ /* Memory release */
+ free(err_msg);
+ err_msg = NULL;
+ }
+}
+
+void
+get_error_message(stt_h stt)
+{
+ int ret;
+ ret = stt_set_error_cb(stt, error_cb, NULL);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+
</ul>
<h2 id="prepare" name="prepare">Connecting and Disconnecting the STT</h2>
<p>To operate the STT:</p>
<ol>
-<li><p>After you create the STT handle, connect the background STT daemon with the <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function.</p>
-<p>The function is asynchronous and the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<li><p>After you create the STT handle, connect the background STT daemon with the <code>stt_prepare()</code> function.</p>
+<p>The function is asynchronous and the STT state changes to <code>STT_STATE_READY</code>.</p>
<pre class="prettyprint">
void
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you get the error callback after calling the <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function, STT is not available.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ If you get the error callback after calling the <code>stt_prepare()</code> function, STT is not available.
+ </div>
</li>
<li>
-<p>When the connection is no longer needed, use the <span style="font-family: Courier New,Courier,monospace;">stt_unprepare()</span> function to disconnect the STT, and change the state to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>:</p>
+<p>When the connection is no longer needed, use the <code>stt_unprepare()</code> function to disconnect the STT, and change the state to <code>STT_STATE_CREATED</code>:</p>
<pre class="prettyprint">
void
</li>
</ol>
+<h2 id="engine" name="engine" >Setting and Getting Options about the STT Engine</h2>
+
+<p>To set and get the options about the STT engine:</p>
+<ul>
+<li>Set the credential.
+<p>The credential is a key to verify the authorization about using the STT engine. The necessity of the credential depends on the engine. If the engine requests the credential, you can set it using the <code>stt_set_credential()</code> function:</p>
+<pre class="prettyprint">
+void
+set_credential(stt_h stt, const char* credential)
+{
+ int ret;
+ ret = stt_set_credential(stt, credential);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+
+<li>Set and get the private data.
+<p>The private data is a setting parameter for applying keys provided by the STT engine. Using the <code>stt_set_private_data()</code> function, you can set the private data and use the corresponding key of the engine. To get the private data which corresponds to a specific key from the engine, use the <code>stt_get_private_data()</code> function.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The key and data are determined by the STT engine. To set and get the private data, see the engine instructions.
+</div>
+
+<pre class="prettyprint">
+void
+set_private_data(stt_h stt, const char* key, const char* data)
+{
+ int ret;
+ ret = stt_set_private_data(stt, key, data);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+
+void
+get_private_data(stt_h stt, const char* key, char** data)
+{
+ int ret;
+ ret = stt_get_private_data(stt, key, data);
+ if (STT_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+</ul>
+
+
<h2 id="option" name="option">Setting Options and Controlling Recording</h2>
<p>To set the STT options and control recording:</p>
<ul>
<li>Set the silence detection.
-<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If the silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop the recognition process using the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
-<p>If you set the silence detection as automatic, STT works according to the global STT setting. This option must be set in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
+<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If the silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop the recognition process using the <code>stt_stop()</code> function.</p>
+<p>If you set the silence detection as automatic, STT works according to the global STT setting. This option must be set in the <code>STT_STATE_READY</code> state.</p>
<pre class="prettyprint">
void
set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
</li>
<li>Set or unset the start sound.
-<p>To play a sound before the STT recognition starts, call the <span style="font-family: Courier New,Courier,monospace;">stt_set_start_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The sound file path must be a full path. Only WAV format sound files are supported.</td>
- </tr>
- </tbody>
- </table>
+<p>To play a sound before the STT recognition starts, call the <code>stt_set_start_sound()</code> function in the <code>STT_STATE_READY</code> state.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The sound file path must be a full path. Only WAV format sound files are supported.
+ </div>
<pre class="prettyprint">
void
</li>
<li>Set or unset the stop sound.
-<p>To play a sound when the STT recognition stops, use the <span style="font-family: Courier New,Courier,monospace;">stt_set_stop_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state:</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The sound file path must be a full path. Only WAV format sound files are supported.</td>
- </tr>
- </tbody>
- </table>
+<p>To play a sound when the STT recognition stops, use the <code>stt_set_stop_sound()</code> function in the <code>STT_STATE_READY</code> state:</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ The sound file path must be a full path. Only WAV format sound files are supported.
+ </div>
+
<pre class="prettyprint">
void
<li>Start, stop, and cancel the recognition:
<ul>
- <li><p>To start recording, use the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function.</p>
- <p>The connected STT daemon starts recording, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_RECORDING</span>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function fails, check the error code and take appropriate action.</td>
- </tr>
- </tbody>
- </table>
- <p>The language and recognition type must be supported by the current STT engine. If you set <span style="font-family: Courier New,Courier,monospace;">NULL</span> as the language parameter, the STT default language is used based on the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.</p>
+ <li><p>To start recording, use the <code>stt_start()</code> function.</p>
+ <p>The connected STT daemon starts recording, and the state is changed to <code>STT_STATE_RECORDING</code>.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ If the <code>stt_start()</code> function fails, check the error code and take appropriate action.
+ </div>
+ <p>The language and recognition type must be supported by the current STT engine. If you set <code>NULL</code> as the language parameter, the STT default language is used based on the <code>stt_get_default_language()</code> function.</p>
<pre class="prettyprint">
void
</pre>
</li>
-<li><p>While the STT recording is in process, you can retrieve the current recording volume using the <span style="font-family: Courier New,Courier,monospace;">stt_get_recording_volume()</span> function.</p>
+<li><p>While the STT recording is in process, you can retrieve the current recording volume using the <code>stt_get_recording_volume()</code> function.</p>
<p>The volume value is retrieved periodically with the short-term recorded sound data as dB (decibels). The STT volume normally has a negative value, and 0 is the maximum value.</p>
<pre class="prettyprint">
void
</pre>
</li>
<li>
-<p>To stop the recording and get the recognition result, use the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
-<p>The recording stops and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_PROCESSING</span>. When the recognition result has been processed, the result is sent in the recognition result callback and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<p>To stop the recording and get the recognition result, use the <code>stt_stop()</code> function.</p>
+<p>The recording stops and the state is changed to <code>STT_STATE_PROCESSING</code>. When the recognition result has been processed, the result is sent in the recognition result callback and the state is changed back to <code>STT_STATE_READY</code>.</p>
<pre class="prettyprint">
void
stop(stt_h stt)
</pre>
</li>
<li>
-<p>To cancel the recording without getting the result, use the <span style="font-family: Courier New,Courier,monospace;">stt_cancel()</span> function.</p>
-<p>The state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<p>To cancel the recording without getting the result, use the <code>stt_cancel()</code> function.</p>
+<p>The state changes to <code>STT_STATE_READY</code>.</p>
<pre class="prettyprint">
void
cancel(stt_h stt)
<p>You can use the following text input and voice features in your native applications:</p>
<ul>
-<li><a href="input_method_n.htm">Input Method</a> <strong>in mobile applications only</strong>
+<li><a href="input_method_n.htm">Input Method</a>
<p>You can create an IME (Input Method Editor) application that provides a customized keyboard for the user. You can show and hide the keyboard as needed, and offer a keyboard option menu to allow the user to manage the keyboard settings.</p></li>
<p>You can synthesize text into sound data as utterances and play it. You can also control the playback by pausing, resuming, and stopping it, as needed.</p></li>
-<li><a href="voice_control_n.htm">Voice Control</a> <strong>in mobile applications only</strong>
+<li><a href="voice_control_n.htm">Voice Control</a>
<p>You can allow the user to control the device through voice commands. You can register voice commands, which trigger a callback when the user speaks them. Voice commands registered for EFL-supported UI components can be used to perform component-related actions, such as button clicks.</p></li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#basic_tts">Basic TTS Processes</a></li>
+ <li><a href="#parameter_tts">TTS Parameters</a></li>
<li><a href="#info_tts">TTS Information Retrieval</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li>Set-up
<li><a href="#get">Getting Information</a></li>
<li><a href="#mode">Getting and Setting the Mode</a></li>
<li><a href="#prepare">Connecting and Disconnecting TTS</a></li>
+ <li><a href="#engine">Setting and Getting Options about the TTS Engine</a></li>
</ul>
</li>
<li><a href="#text">Adding Text</a></li>
<li>Preparing the TTS service for use
<p>You can <a href="#prepare">connect the background TTS daemon</a> to be able to operate the TTS.</p></li>
<li>Using basic TTS processes
-<p>The <a href="#basic_tts">basic processes</a> allow you to set and unset callbacks, add text, set the mode, and control the playback.</p></li>
+<p>The <a href="#basic_tts">basic processes</a> allow you to set and unset callbacks, add text, set the mode, and control the playback. You can also <a href="#parameter_tts">set TTS parameters</a>.</p></li>
<li>Retrieving TTS information
<p>You can <a href="#info_tts">get information</a> on the supported voice, and the current state and voice.</p></li>
</ul>
<p>The TTS life-cycle is described in the following figure.</p>
- <p class="figure">Figure: TTS life-cycle</p>
+ <p align="center"><strong>Figure: TTS life-cycle</strong></p>
<p align="center"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
+
+<h2 id="parameter_tts" name="parameter_tts">TTS Parameters</h2>
+<p>You can set the following parameters about the TTS:</p>
+<ul>
+<li>Credential
+<p>The credential is a key to verify the authorization about using the TTS engine. The necessity of the credential depends on the TTS engine. If the TTS engine requests the credential, you can set it using the <code>tts_set_credential()</code> function.</p></li>
+<li>Private data
+<p>The private data is a setting parameter for applying keys provided by the TTS engine. Using the <code>tts_set_private_data()</code> function, you can set the private data as the corresponding key of the TTS engine.</p></li>
+</ul>
+
<h2 id="info_tts" name="info_tts">TTS Information Retrieval</h2>
<p>You can get the following information about the TTS:</p>
</ul>
</li>
<li>Get a list of supported voices to check whether the language and voice type you want are supported.</li>
+<li>Get the error message when the error callback is invoked.</li>
+<li>Get private data from the TTS engine.</li>
</ul>
<p>To enable your application to use the TTS functionality:</p>
<ol>
-<li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<li>To use the functions and data types of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <code><tts.h></code> header file in your application:
<pre class="prettyprint">
#include <tts.h>
</pre>
</li>
<li><p>To use the TTS library, create a TTS handle.</p>
-<p>The TTS handle is used in other TTS functions as a parameter. After the handle creation, the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">TTS is not thread-safe and depends on the ecore main loop. Implement TTS within the ecore main loop and do not use it in a thread.</td>
- </tr>
- </tbody>
- </table>
+<p>The TTS handle is used in other TTS functions as a parameter. After the handle creation, the TTS state changes to <code>TTS_STATE_CREATED</code>.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ TTS is not thread-safe and depends on the ecore main loop. Implement TTS within the ecore main loop and do not use it in a thread.
+ </div>
<pre class="prettyprint">
void
}
</pre>
</li>
-<li><p>When you no longer need the TTS library, destroy the TTS handle using the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function:</p>
+<li><p>When you no longer need the TTS library, destroy the TTS handle using the <code>tts_destroy()</code> function:</p>
/* Error handling */
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function in a callback function. Within a callback, the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">TTS_ERROR_OPERATION_FAILED</span>.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not use the <code>tts_destroy()</code> function in a callback function. Within a callback, the <code>tts_destroy()</code> function fails and returns <code>TTS_ERROR_OPERATION_FAILED</code>.
+ </div>
</li></ol>
<h2 id="set" name="set">Setting and Unsetting Callbacks</h2>
-<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <span style="font-family: Courier New,Courier,monospace;">tts.h</span> header file.</p>
+<p>The enum values, as well as the parameter details, for the callback parameters are defined in the <code>tts.h</code> header file.</p>
<p>To set and unset callbacks:</p>
<ol>
<li><p>The TTS provides various callbacks to get information, such as the state changes and start or completion of an utterance.</p>
-<p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state. </p>
+<p>Set the callbacks in the <code>TTS_STATE_CREATED</code> state. </p>
<p>You can use the following callbacks:</p>
<ul>
<li>State changed
<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>
</li>
+<li>Engine changed
+<p>If you set the engine change callback for the TTS, it is invoked when the engine is changed by the TTS:</p>
+<pre class="prettyprint">
+/* Callback */
+void
+engine_changed_cb(tts_h tts, const char* engine_id, const char* language,
+ int voice_type, bool need_credential, void* user_data)
+{
+ /* Your code */
+}
+
+/* Set */
+void
+set_engine_changed_cb(tts_h tts)
+{
+ int ret;
+ ret = tts_set_engine_changed_cb(tts, engine_changed_cb, NULL);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+
+/* Unset */
+void
+unset_engine_changed_cb(tts_h tts)
+{
+ int ret;
+ ret = tts_unset_engine_changed_cb(tts);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+
<li>Utterance started or completed
<p>If you add text in the TTS, that text is handled as an utterance and it obtains its own ID. After you request the TTS process to start, the text is synthesized by an engine and played out. To get a notification when an utterance is started or completed, set the respective callbacks:</p>
<pre class="prettyprint">
<p>To obtain the current state, the supported voice list, and the current voice:</p>
<ul>
-<li>Get the current state using the <span style="font-family: Courier New,Courier,monospace;">tts_get_state()</span> function.
+<li>Get the current state using the <code>tts_get_state()</code> function.
<p>The TTS state is changed by various TTS functions, and it is applied as a precondition of each function.</p>
<pre class="prettyprint">
void
</pre>
</li>
-<li>Obtain a list of voices supported by the TTS using the <span style="font-family: Courier New,Courier,monospace;">tts_foreach_supported_voices()</span> function.
-<p>The foreach function triggers a separate callback for each supported voice. As long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the foreach function continues to loop over the supported voices.</p>
+<li>Obtain a list of voices supported by the TTS using the <code>tts_foreach_supported_voices()</code> function.
+<p>The foreach function triggers a separate callback for each supported voice. As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported voices.</p>
<pre class="prettyprint">
bool
supported_voice_cb(tts_h tts, const char* language, int voice_type, void* user_data)
</pre>
</li>
-<li>Get the default voice using the <span style="font-family: Courier New,Courier,monospace;">tts_get_default_voice()</span> function.
-<p>The TTS synthesizes the text using the default voice, if you do not set the language and the voice type as parameters of the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function.</p>
+<li>Get the default voice using the <code>tts_get_default_voice()</code> function.
+<p>The TTS synthesizes the text using the default voice, if you do not set the language and the voice type as parameters of the <code>tts_add_text()</code> function.</p>
<pre class="prettyprint">
void
get_default_voice(tts_h tts)
</pre>
<p>You can get a notification about the default voice changes by setting a default voice changed callback.</p>
</li>
+<li>Get the error message.
+<p>Call this function during the TTS error callback. If not, the error as an operation failure is returned. If the function succeeds, the error message must be released using the <code>free()</code> function, when it is no longer required.</p>
+<pre class="prettyprint">
+void
+error_cb(tts_h tts, int utt_id, tts_error_e reason, void* user_data)
+{
+ int ret;
+ char * err_msg = NULL;
+ ret = tts_get_error_message(tts, &err_msg);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+ if (NULL != err_msg) {
+ /* Memory release */
+ free(err_msg);
+ err_msg = NULL;
+ }
+}
+
+void
+get_error_message(tts_h tts)
+{
+ int ret;
+ ret = tts_set_error_cb(tts, error_cb, NULL);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
</ul>
<h2 id="mode" name="mode">Getting and Setting the Mode</h2>
-<p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_DEFAULT</span>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_NOTIFICATION</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_SCREEN_READER</span> modes are mixed with other sound sources, but they are used only for platform-specific features. Do not use them for normal applications.</td>
- </tr>
- </tbody>
- </table>
-<p>Get and set the mode in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state:</p>
+<p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <code>TTS_MODE_DEFAULT</code>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The <code>TTS_MODE_NOTIFICATION</code> and <code>TTS_MODE_SCREEN_READER</code> modes are mixed with other sound sources, but they are used only for platform-specific features. Do not use them for normal applications.
+ </div>
+
+<p>Get and set the mode in the <code>TTS_STATE_CREATED</code> state:</p>
<pre class="prettyprint">
<p>To operate the TTS:</p>
<ol>
-<li><p>After you create the TTS handle, connect the background TTS daemon with the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function.</p>
-<p>The daemon synthesizes the text with the engine and plays the resulting sound data. The function is asynchronous and the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<li><p>After you create the TTS handle, connect the background TTS daemon with the <code>tts_prepare()</code> function.</p>
+<p>The daemon synthesizes the text with the engine and plays the resulting sound data. The function is asynchronous and the TTS state changes to <code>TTS_STATE_READY</code>.</p>
<pre class="prettyprint">
void
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you get the error callback after calling the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function, TTS is not available.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ If you get the error callback after calling the <code>tts_prepare()</code> function, TTS is not available.
+ </div>
</li>
-<li><p>When the connection is no longer needed, use the <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> function to disconnect the TTS and change the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>:</p>
+<li><p>When the connection is no longer needed, use the <code>tts_unprepare()</code> function to disconnect the TTS and change the state to <code>TTS_STATE_CREATED</code>:</p>
<pre class="prettyprint">
void
</li>
</ol>
+<h2 id="engine" name="engine" >Setting and Getting Options about the TTS Engine</h2>
+
+<p>To set and get the options about the TTS engine:</p>
+<ul>
+<li>Set the credential.
+<p>The credential is a key to verify the authorization about using the TTS engine. The necessity of the credential depends on the engine. If the engine requests the credential, you can set it using the <code>tts_set_credential()</code> function:</p>
+<pre class="prettyprint">
+void
+set_credential(tts_h tts, const char* credential)
+{
+ int ret;
+ ret = tts_set_credential(tts, credential);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+
+<li>Set and get the private data.
+<p>The private data is a setting parameter for applying keys provided by the TTS engine. Using the <code>tts_set_private_data()</code> function, you can set the private data and use the corresponding key of the engine. To get the private data which corresponds to a specific key from the engine, use the <code>tts_get_private_data()</code> function.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The key and data are determined by the TTS engine. To set and get the private data, see the engine instructions.
+</div>
+
+<pre class="prettyprint">
+void
+set_private_data(tts_h tts, const char* key, const char* data)
+{
+ int ret;
+ ret = tts_set_private_data(tts, key, data);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+
+void
+get_private_data(tts_h tts, const char* key, char** data)
+{
+ int ret;
+ ret = tts_get_private_data(tts, key, data);
+ if (TTS_ERROR_NONE != ret)
+ /* Error handling */
+}
+</pre>
+</li>
+</ul>
+
<h2 id="text" name="text">Adding Text</h2>
-<p>There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. Those values, and the minimum and maximum limits for the speed, are defined in the <span style="font-family: Courier New,Courier,monospace;">tts.h</span> header file.</p>
+<p>There are defined values, <code>TTS_VOICE_TYPE_AUTO</code> and <code>TTS_VOICE_SPEED_AUTO</code> for following the default TTS setting. Those values, and the minimum and maximum limits for the speed, are defined in the <code>tts.h</code> header file.</p>
<p>To add text:</p>
<ul>
<li>
-<p>You can request the TTS library to read your own text using the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function. The TTS library manages added text using queues, so it is possible to add several texts simultaneously. Each obtained text receives an utterance ID, which is used for synthesizing and playing the sound data.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the added text is too long, some engines need a long time for synthesis. It is recommended to only use proper length text clips.</td>
- </tr>
- </tbody>
- </table>
-
-<p>When you do not set the language and use <span style="font-family: Courier New,Courier,monospace;">NULL</span> for it, the default language is used for synthesizing text.</p>
-
-<p>You can add text at any point after the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function changes the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<p>You can request the TTS library to read your own text using the <code>tts_add_text()</code> function. The TTS library manages added text using queues, so it is possible to add several texts simultaneously. Each obtained text receives an utterance ID, which is used for synthesizing and playing the sound data.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ If the added text is too long, some engines need a long time for synthesis. It is recommended to only use proper length text clips.
+ </div>
+
+<p>When you do not set the language and use <code>NULL</code> for it, the default language is used for synthesizing text.</p>
+
+<p>You can add text at any point after the <code>tts_prepare()</code> function changes the state to <code>TTS_STATE_READY</code>.</p>
<pre class="prettyprint">
void
add_text(tts_h tts)
<li>
<p>There is a length limit for the added text in the engine.</p>
-<p>To retrieve the maximum value, use the <span style="font-family: Courier New,Courier,monospace;">tts_get_max_text_size()</span> function in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state:</p>
+<p>To retrieve the maximum value, use the <code>tts_get_max_text_size()</code> function in the <code>TTS_STATE_READY</code> state:</p>
<pre class="prettyprint">
void
get_maximum_text_size(tts_h tts)
<p>To start, pause, and stop the playback:</p>
<ul>
-<li><p>To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
-<p>The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span>, and the playback continues until you call the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> or the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
-
-<p>If there is no text in the queue, the TTS waits for text to be added in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state before using the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you get the TTS state changed callback in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> state without a TTS function call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.</td>
- </tr>
- </tbody>
- </table>
+<li><p>To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the <code>tts_play()</code> function.</p>
+<p>The state is changed to <code>TTS_STATE_PLAYING</code>, and the playback continues until you call the <code>tts_stop()</code> or the <code>tts_pause()</code> function.</p>
+
+<p>If there is no text in the queue, the TTS waits for text to be added in the <code>TTS_STATE_PLAYING</code> state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to <code>TTS_STATE_READY</code> state before using the <code>tts_stop()</code> function.</p>
+
+
+
+ <div class="note">
+ <strong>Note</strong>
+ If you get the TTS state changed callback in the <code>TTS_STATE_PLAYING</code> state without a TTS function call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.
+ </div>
<pre class="prettyprint">
void
</pre>
</li>
<li>
-<p>To pause the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
-<p>The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PAUSED</span>. To resume playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
+<p>To pause the playback, use the <code>tts_pause()</code> function.</p>
+<p>The state is changed to <code>TTS_STATE_PAUSED</code>. To resume playback, use the <code>tts_play()</code> function.</p>
<pre class="prettyprint">
void
pause(tts_h tts)
</pre>
</li>
<li>
-<p>To stop the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function.</p>
-<p>All the texts in the queue are removed, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<p>To stop the playback, use the <code>tts_stop()</code> function.</p>
+<p>All the texts in the queue are removed, and the state is changed to <code>TTS_STATE_READY</code>.</p>
<pre class="prettyprint">
void
stop(tts_h tts)
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UIX/Voice_Control" target="_blank">Voice Control Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UIX/Voice_Control_Elm" target="_blank">Voice Control Elm Sample Description</a></li>
</ul>
<p>Voice control features allow the user to control the device through their voice. You can register <a href="#voice">general voice commands</a>, which trigger a callback when the user speaks them. You can also register <a href="#elementary">voice commands for EFL-supported UI components</a> to perform component-related actions, such as button clicks.</p>
- <p>This feature is supported in mobile applications only.</p>
-
<h2 id="voice">Voice Control Service</h2>
<p>You can recognize the sound data recorded by the user and send the result as a predefined command using the Voice control service.</p>
<p>The recognition result is sent through a registered callback function.</p>
<p>If the registered command is duplicated or the user speaks multiple commands, the recognition result can contain multiple results. If you set duplicated commands, the Voice control service can reject the command. The rejection is shown in the result event.</p></li>
<li>When no longer needed, unprepare and deinitialize the voice control.
-<p>You must disconnect the voice control service and deinitialize the voice control using the <span style="font-family: Courier New,Courier,monospace">vc_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> functions.</p></li></ol>
+<p>You must disconnect the voice control service and deinitialize the voice control using the <code>vc_unprepare()</code> and <code>vc_deinitialize()</code> functions.</p></li></ol>
<p>The following figure illustrates the voice control life-cycle states.</p>
- <p class="figure">Figure: Voice control (left) and Voice control service (right) life-cycle states</p>
+ <p align="center"><strong>Figure: Voice control (left) and Voice control service (right) life-cycle states</strong></p>
<p align="center"><img alt="Voice control and Voice control service life-cycle states" src="../../images/voice_control.png" /></p>
<p>You can register voice commands for EFL-supported UI components to allow the user to interact with visible UI components inside the application using their voice. The Voice control elementary library recognizes spoken commands from registered UI components. </p>
<p>The following figure illustrates the application screen when the Voice control elementary features are enabled. When the screen is updated, any UI components that have a registered command and hint are shown with a tooltip (hint). When the user speaks the hint, the callback function of the action related to the UI component is executed.</p>
-<p class="figure">Figure: Voice command hints on the screen</p>
+<p align="center"><strong>Figure: Voice command hints on the screen</strong></p>
<p align="center"><img alt="Voice command hints on the screen" src="../../images/voice_control_elm_screen.png" /></p>
<p>You have no need to consider how to recognize voice commands or start and stop the recognition process. A preloaded voice application handles the process automatically. You just need to set the command and hint on every EFL elementary component on which you want to use the voice command.</p>
<p>When the user speaks a command corresponding to a visible EFL elementary component on the screen, the recognized command is sent to the Voice control elementary library from the Voice control service, and the action mapped to the component is executed. For example, if the component is a button, the action can be a button click.</p>
- <p class="figure">Figure: Voice command process</p>
+ <p align="center"><strong>Figure: Voice command process</strong></p>
<p align="center"><img alt="Voice command process" src="../../images/voice_control_elm.png" /></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The detailed implementation of the preloaded voice application (how to trigger and recognize the user speaking) can differ according to the device (mobile, wearable, or TV).</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ The detailed implementation of the preloaded voice application (how to trigger and recognize the user speaking) can differ according to the device (mobile, wearable, or TV).
+ </div>
<p>The main features of the Voice control elementary API include:</p>
<p>You can <a href="#language">set and unset a callback</a> to get notifications when the system or application language changes.</p>
<p>The following table lists the EFL UI components that support voice commands, and the actions supported by each component and already defined in the configuration file. Note that the label component only supports the hint without any action command.</p>
+
+<p align="center" class="Table"><strong>Table: UI components and their actions</strong></p>
<table>
-<caption>Table: UI components and their actions</caption>
<tbody>
<tr>
<th rowspan="2">UI component</th>
</li>
<li>When no longer needed, destroy the handle and deinitialize the Voice control elementary library.</li></ol>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Set the commands and hints on visible EFL elementary UI components only. When the visible components on the screen change, the commands and hints must also change.</td>
- </tr>
- </tbody>
- </table>
+ <div class="note">
+ <strong>Note</strong>
+ Set the commands and hints on visible EFL elementary UI components only. When the visible components on the screen change, the commands and hints must also change.
+ </div>
<h2 id="prerequisites">Prerequisites</h2>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a> API, include the <span style="font-family: Courier New,Courier,monospace"><voice_control.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Voice control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">wearable</a> applications), include the <code><voice_control.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <voice_control.h>
</pre>
</li>
-<li>Initialize the voice control with the <span style="font-family: Courier New,Courier,monospace">vc_initialize()</span> function:
+<li>Initialize the voice control with the <code>vc_initialize()</code> function:
<pre class="prettyprint">
void
initialize_voice_control()
/* Error handling */
}
</pre>
-<p>If the function call is successful, the voice control state changes to <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The voice control feature is not thread-safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.</td>
- </tr>
- </tbody>
- </table>
+<p>If the function call is successful, the voice control state changes to <code>VC_STATE_INITIALIZED</code>.</p>
+
+
+ <div class="note">
+ <strong>Note</strong>
+ The voice control feature is not thread-safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.
+ </div>
</li>
-<li>Prepare the Voice control service with the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function, which connects the background Voice control daemon. The daemon records and recognizes audio data and converts sound to text.
+<li>Prepare the Voice control service with the <code>vc_prepare()</code> function, which connects the background Voice control daemon. The daemon records and recognizes audio data and converts sound to text.
<pre class="prettyprint">
/* Error handling */
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function is asynchronous, and when the preparation succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span>. If the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function fails, the error callback is triggered.</p>
+<p>The <code>vc_prepare()</code> function is asynchronous, and when the preparation succeeds, the voice control state changes from <code>VC_STATE_INITIALIZED</code> to <code>VC_STATE_READY</code>. If the <code>vc_prepare()</code> function fails, the error callback is triggered.</p>
</li>
<li>When the voice control is no longer needed, unprepare and deinitialize it:
<pre class="prettyprint">
}
</pre>
-<p>When the <span style="font-family: Courier New,Courier,monospace">vc_unprepare()</span> function succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function in a callback. Within a callback, the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace">VC_ERROR_OPERATION_FAILED</span>.</td>
- </tr>
- </tbody>
- </table>
+<p>When the <code>vc_unprepare()</code> function succeeds, the voice control state changes from <code>VC_STATE_READY</code> to <code>VC_STATE_INITIALIZED</code>.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ Do not call the <code>vc_deinitialize()</code> function in a callback. Within a callback, the <code>vc_deinitialize()</code> function fails and returns <code>VC_ERROR_OPERATION_FAILED</code>.
+ </div>
</li>
-<li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary</a> API, include the <span style="font-family: Courier New,Courier,monospace"><voice_control_elm.h></span> header file in your application:
+<li>To use the functions and data types of the Voice control elementary API (in <a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">wearable</a> applications), include the <code><voice_control_elm.h></code> header file in your application:
<pre class="prettyprint">
#include <voice_control_elm.h>
</pre>
</li>
-<li>Initialize the Voice control elementary library with the <span style="font-family: Courier New,Courier,monospace">vc_elm_initialize()</span> function:
+<li>Initialize the Voice control elementary library with the <code>vc_elm_initialize()</code> function:
<pre class="prettyprint">
void
initialize_voice_control_elm()
</pre>
</li>
<li>Create a handle for each UI component for which you want to set a command and hint.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_object()</span> function to create a handle for <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances, and the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_item()</span> function for <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instances.</p>
+<p>Use the <code>vc_elm_create_object()</code> function to create a handle for <code>Evas_Object</code> instances, and the <code>vc_elm_create_item()</code> function for <code>Elm_Object_Item</code> instances.</p>
<pre class="prettyprint">
void
create_vc_elm_handler()
</ol>
<h2 id="callback" name="callback">Managing Callbacks</h2>
-<p>The callback functions are defined in the <span style="font-family: Courier New,Courier,monospace">voice_control_common.h</span> header file, where you can find more information about them.</p>
+<p>The callback functions are defined in the <code>voice_control_common.h</code> header file, where you can find more information about them.</p>
<p>To set and unset callbacks to get notifications about recognition results, state changes, and errors:</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Set and unset all callbacks when the voice control state is <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ Set and unset all callbacks when the voice control state is <code>VC_STATE_INITIALIZED</code>.
+ </div>
<ul>
<li>Set the state change callback to be invoked when the voice control state changes:
<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></li>
<li>Set the recognition result callback to be invoked when a voice command is recognized.
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the recognition result produces a reject event, the Voice control service has rejected the recognized command. Make sure that the command does not conflict with other commands and there are not duplicated commands.</td>
- </tr>
- </tbody>
- </table>
-<p>To get the command, use the Voice control APIs with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list</span> parameter, which is a list of recognized commands. The <span style="font-family: Courier New,Courier,monospace">result</span> parameter contains the recognized text.</p>
+ <div class="note">
+ <strong>Note</strong>
+ If the recognition result produces a reject event, the Voice control service has rejected the recognized command. Make sure that the command does not conflict with other commands and there are not duplicated commands.
+ </div>
+
+<p>To get the command, use the Voice control APIs with the <code>vc_cmd_list</code> parameter, which is a list of recognized commands. The <code>result</code> parameter contains the recognized text.</p>
<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;
<ul>
<li>
-<p>Get the current voice control state using the <span style="font-family: Courier New,Courier,monospace">vc_get_state()</span> function.</p>
+<p>Get the current voice control state using the <code>vc_get_state()</code> function.</p>
<p>The voice control state changes according to function calls when the voice control is, for example, initialized and prepared.</p>
<pre class="prettyprint">
void
}
</pre></li>
<li>
-<p>Get the current voice control service state using the <span style="font-family: Courier New,Courier,monospace">vc_get_service_state()</span> function.</p>
+<p>Get the current voice control service state using the <code>vc_get_service_state()</code> function.</p>
<p>The user controls the voice control service state. In a general scenario:</p>
-<ol><li>The user starts recording for recognition by using a voice application, button, or voice trigger. If the start is successful, the voice control service state changes to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_RECORDING</span>.</li>
-<li>After recording, the service state changes to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_PROCESSING</span> for recognition processing.</li>
-<li>After recognition is completed, the service state returns to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_READY</span>.</li></ol>
-<p>If the application uses continuous recognition, the voice control service state can be changed from <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_PROCESSING</span> directly to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_RECORDING</span>.</p>
+<ol><li>The user starts recording for recognition by using a voice application, button, or voice trigger. If the start is successful, the voice control service state changes to <code>VC_SERVICE_STATE_RECORDING</code>.</li>
+<li>After recording, the service state changes to <code>VC_SERVICE_STATE_PROCESSING</code> for recognition processing.</li>
+<li>After recognition is completed, the service state returns to <code>VC_SERVICE_STATE_READY</code>.</li></ol>
+<p>If the application uses continuous recognition, the voice control service state can be changed from <code>VC_SERVICE_STATE_PROCESSING</code> directly to <code>VC_SERVICE_STATE_RECORDING</code>.</p>
<pre class="prettyprint">
void
}
</pre></li>
<li>Get the supported languages with a foreach function that triggers a separate callback for each language.
-<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported languages.</p>
+<p>As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(const char* language, void* user_data)
/* Error handling */
}
</pre></li>
-<li>Get the current language with the <span style="font-family: Courier New,Courier,monospace">vc_get_current_language()</span> function. The voice control recognition works for the current (default) language. Use the language change callback to be notified of language changes.
+<li>Get the current language with the <code>vc_get_current_language()</code> function. The voice control recognition works for the current (default) language. Use the language change callback to be notified of language changes.
<pre class="prettyprint">
void
<ol>
<li>Create a command list with a command list handle.
-<p>The command list can include many commands, which have a command text and type. The list can have both the <span style="font-family: Courier New,Courier,monospace">VC_COMMAND_TYPE_FOREGROUND</span> and <span style="font-family: Courier New,Courier,monospace">VC_COMMAND_TYPE_BACKGROUND</span> type commands. The foreground commands are valid when the application is in a visible state and the background commands are valid when the application is in a visible or invisible state.</p>
+<p>The command list can include many commands, which have a command text and type. The list can have both the <code>VC_COMMAND_TYPE_FOREGROUND</code> and <code>VC_COMMAND_TYPE_BACKGROUND</code> type commands. The foreground commands are valid when the application is in a visible state and the background commands are valid when the application is in a visible or invisible state.</p>
<p>You can access the command list after you set it to the voice control and when you get the recognition result. </p>
<pre class="prettyprint">
</pre>
</li>
<li>Add the command to the command list.
-<p>If necessary, you can also remove commands from the command list. After you remove a command, if you no longer use it, destroy the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</p>
+<p>If necessary, you can also remove commands from the command list. After you remove a command, if you no longer use it, destroy the command handle with the <code>vc_cmd_destroy()</code> function.</p>
<pre class="prettyprint">
void
add_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
<p>To retrieve the commands you have added to the command list:</p>
<ul>
-<li>You can use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_foreach_commands()</span> function to get each command within a callback function:
+<li>You can use the <code>vc_cmd_list_foreach_commands()</code> function to get each command within a callback function:
<pre class="prettyprint">
bool
__vc_get_command_cb(vc_cmd_h vc_command, void* user_data)
}
</pre>
</li>
-<li>You can use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function to get the current command in an output parameter.
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When you get the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function, do not release it. To release the command handle, call the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_remove()</span> function before the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</td>
- </tr>
- </tbody>
- </table>
+<li>You can use the <code>vc_cmd_list_get_current()</code> function to get the current command in an output parameter.
+
+
+ <div class="note">
+ <strong>Note</strong>
+ When you get the command handle with the <code>vc_cmd_list_get_current()</code> function, do not release it. To release the command handle, call the <code>vc_cmd_list_remove()</code> function before the <code>vc_cmd_destroy()</code> function.
+ </div>
<pre class="prettyprint">
void
get_commands(vc_cmd_list_h vc_cmd_list)
</pre>
</li>
<li>When no longer needed, unset the command list, and destroy the command and command list handles.
-<p>When you destroy the command list, all the commands in the command list are not automatically released. If you no longer need the commands, set the second parameter of the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_destroy()</span> function to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<p>When you destroy the command list, all the commands in the command list are not automatically released. If you no longer need the commands, set the second parameter of the <code>vc_cmd_list_destroy()</code> function to <code>true</code>.</p>
<pre class="prettyprint">
/* Unset the command list */
void
<ul>
<li>
-<p>Get the current Voice control elementary language using the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_current_language()</span> function:</p>
+<p>Get the current Voice control elementary language using the <code>vc_elm_get_current_language()</code> function:</p>
<pre class="prettyprint">
void
get_language()
}
</pre></li>
<li>Get the languages supported by the Voice control elementary library with a foreach function that triggers a separate callback for each language.
-<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported languages.</p>
+<p>As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported languages.</p>
<pre class="prettyprint">
bool
supported_language_cb(const char *language, void* user_data)
}
</pre></li>
<li>Get the UI components supported by the Voice control elementary library with a foreach function that triggers a separate callback for each UI component.
-<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported UI components.</p>
+<p>As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported UI components.</p>
<pre class="prettyprint">
void
widget_cb(const char *widget, void *user_data)
}
</pre></li>
<li>Get the actions supported by the Voice control elementary library for specific UI components with a foreach function that triggers a separate callback for each action.
-<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the foreach function continues to loop over the supported actions.</p>
-<p>To translate an action to corresponding command parameters, use the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_action_command()</span> function.</p>
+<p>As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported actions.</p>
+<p>To translate an action to corresponding command parameters, use the <code>vc_elm_get_action_command()</code> function.</p>
<pre class="prettyprint">
void
action_cb(const char *action, void *user_data)
set_supported_action_cb()
{
int ret;
- /* Elm_Button is an example, it can be obtained using vc_elm_foreach_supported_widgets callback */
+ /*
+ Elm_Button is an example, it can be obtained
+ using vc_elm_foreach_supported_widgets callback
+ */
ret = vc_elm_foreach_supported_actions("Elm_Button", action_cb, NULL);
if (VC_ELM_ERROR_NONE != ret)
/* Error handling */
}
</pre>
-<p>You can get the current hint location using the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_command_hint_direction()</span> and <span style="font-family: Courier New,Courier,monospace">vc_elm_get_command_hint_offset()</span> functions:</p>
+<p>You can get the current hint location using the <code>vc_elm_get_command_hint_direction()</code> and <code>vc_elm_get_command_hint_offset()</code> functions:</p>
<pre class="prettyprint">
void
get_hint_direction(vc_elm_h &handler)
<h2 id="types" name="types">Actor Types</h2>
-<p class="figure">Figure: Actor types</p>
+<p align="center"><strong>Figure: Actor types</strong></p>
<p align="center"><img alt="Actor types" src="../../../images/actor_types.png"/></p>
<p>Actor has the following concrete types:</p>
<ul>
<li><strong>UI Components</strong> are used to organize the application appearance. For more information, see <a href="ui_components_n.htm">UI Components</a>.</li>
-<li><strong>Camera actor</strong> determines which view of the whole virtual 3D world is rendered on the screen. By default, it is best suited for 2D applications, so you do not need to care about it in this case. For more information, see the <
span style="font-family: Courier New,Courier,monospace;">Dali::CameraActor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a> applications).</li>
+<li><strong>Camera actor</strong> determines which view of the whole virtual 3D world is rendered on the screen. By default, it is best suited for 2D applications, so you do not need to care about it in this case. For more information, see the <
code>Dali::CameraActor</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a> applications).</li>
-<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. For more information, see the <
span style="font-family: Courier New,Courier,monospace;">Dali::Layer</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a> applications).</li>
+<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. For more information, see the <
code>Dali::Layer</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a> applications).</li>
</ul>
<li><strong>Parent origin</strong>
<p>This Vector3 property defines a point within the parent actor's area.</p>
-<p class="figure">Figure: Parent origin</p>
+<p align="center"><strong>Figure: Parent origin</strong></p>
<p align="center"><img alt="Parent origin" src="../../../images/parent_origin.png"/></p>
-<p>The default is top-left (<span style="font-family: Courier New,Courier,monospace;">Dali::ParentOrigin::TOP_LEFT</span>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetParentOrigin()</span> function.</p>
+<p>The default is top-left (<code>Dali::ParentOrigin::TOP_LEFT</code>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
+<p>For more information, see the <code>Dali::Actor::SetParentOrigin()</code> function.</p>
</li>
<li><strong>Anchor point</strong>
<p>This Vector3 property defines a point within the child actor area.</p>
-<p class="figure">Figure: Anchor point</p>
+<p align="center"><strong>Figure: Anchor point</strong></p>
<p align="center"><img alt="Anchor point" src="../../../images/anchor_point.png"/></p>
-<p>The default is center (<span style="font-family: Courier New,Courier,monospace;">Dali::AnchorPoint::CENTER</span>), which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetAnchorPoint()</span> function.</p>
+<p>The default is center (<code>Dali::AnchorPoint::CENTER</code>), which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p>
+<p>For more information, see the <code>Dali::Actor::SetAnchorPoint()</code> function.</p>
</li>
<li><strong>Position</strong>
<p>This is the position vector between the parent origin and anchor point.</p>
-<p class="figure">Figure: Position</p>
+<p align="center"><strong>Figure: Position</strong></p>
<p align="center"><img alt="Position" src="../../../images/actor_position.png"/></p>
<p>Therefore by default, an actor's position indicates the vector to its center from the top-left corner of its parent.</p>
<li>An actor added directly to the stage with position (X = stageWidth*0.5, Y = stageHeight*0.5) appears in the center of the screen.</li>
<li>An actor with the position (X = actorWidth*0.5, Y = actorWidth*0.5) appears at the top-left corner of the screen.</li>
</ul>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetPosition()</span> function.</p>
+<p>For more information, see the <code>Dali::Actor::SetPosition()</code> function.</p>
</li>
</ul>
<h2 id="event" name="event">Event Handling for Actors</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p>
-
+<p>The <code>Dali::Actor</code> class provides following event signals:</p>
+<p align="center" class="Table"><strong>Table: Event signals</strong></p>
<table>
- <caption>
- Table: Event signals
- </caption>
<tbody>
<tr>
<th>Event signal</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+ <td><code>TouchedSignal()</code></td>
<td>This signal is emitted when a touch input is received.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+ <td><code>HoveredSignal()</code></td>
<td>This signal is emitted when a hover input is received.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
+ <td><code>WheelEventSignal()</code></td>
<td>This signal is emitted when a wheel event is received.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OnStageSignal()</span></td>
+ <td><code>OnStageSignal()</code></td>
<td>This signal is emitted after the actor has been connected to the stage.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OffStageSignal()</span></td>
+ <td><code>OffStageSignal()</code></td>
<td>This signal is emitted after the actor has been disconnected from the stage.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OnRelayoutSignal()</span></td>
+ <td><code>OnRelayoutSignal()</code></td>
<td>This signal is emitted after the size has been set on the actor during relayout.</td>
</tr>
</tbody>
<p>You can use animation to allow your objects to move around and change their properties for a specified duration.</p>
-<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The <
span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class can be used to animate the <a href="properties_n.htm#attributes">animatable properties</a> of any number of objects.</p>
+<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The <
code>Dali::Animation</code> class can be used to animate the <a href="properties_n.htm#attributes">animatable properties</a> of any number of objects.</p>
<p>DALi animations <a href="multi_threaded_n.htm#animations">occur in a dedicated thread</a>. This allows animations to run smoothly, regardless of the time taken to process the input, events, and other factors in the application code.</p>
<p>The following figure illustrates the animation components.</p>
-<p class="figure">Figure: DALi animation components</p>
+<p align="center"><strong>Figure: DALi animation components</strong></p>
<p align="center"><img alt="DALi animation components" src="../../../images/animation_components.png"/></p>
<p>To animate the properties within DALi, you can use 2 distinct functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: Property animates TO the value in the given time.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: Property animates BY the value in the given time (which means that it animates to a value that is the sum of the starting position and the given value).</li>
+ <li><code>AnimateTo()</code>: Property animates TO the value in the given time.</li>
+ <li><code>AnimateBy()</code>: Property animates BY the value in the given time (which means that it animates to a value that is the sum of the starting position and the given value).</li>
</ul>
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> instances are at the position 10.0f, 10.0f, 0.0f at the start of the animation.</p>
+<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>
<p>After the animation is created, you can play it:</p>
<ul>
-<li>To play the animation, use the <span style="font-family: Courier New,Courier,monospace;">Play()</span> function:
+<li>To play the animation, use the <code>Play()</code> function:
<pre class="prettyprint">
animation.Play();
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Play()</span> function is not a synchronous function. It returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>
+<p>The <code>Play()</code> function is not a synchronous function. It returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>
</li>
<li>To pause or stop the animation:
<pre class="prettyprint">
</pre></li></ul>
<h2 id="notifications" name="notifications">Using Notifications</h2>
-<p>Using DALi's signal framework, the application can be notified when the animation finishes. The <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class supports "fire and forget" behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:</p>
+<p>Using DALi's signal framework, the application can be notified when the animation finishes. The <code>Dali::Animation</code> class supports "fire and forget" behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
// in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
// 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
<h2 id="alpha" name="alpha">Using Alpha Functions</h2>
-<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <
span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">wearable</a> applications).</p>
+<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <
code>Dali::AlphaFunction::BuiltinFunction</code> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">wearable</a> applications).</p>
<pre class="prettyprint">
animation.SetDefaultAlphaFunction( Dali::AlphaFunction::EASE_IN );
</pre>
AlphaFunction alphaFunction( &MyAlphaFunction );
animation.SetDefaultAlphaFunction( alphaFunction );
</pre>
-<p>You can specify a different alpha function for each animate call within the <span style="font-family: Courier New,Courier,monospace;">Animation</span> object:</p>
+<p>You can specify a different alpha function for each animate call within the <code>Animation</code> object:</p>
<pre class="prettyprint">
animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ),
Vector3( 10.0f, 50.0f, 0.0f ), Dali::AlphaFunction::EASE_IN );
<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>
<pre class="prettyprint">
animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
</pre>
-<p>When you play the animation, DALi animates the position of <span style="font-family: Courier New,Courier,monospace;">actor1</span> between the specified key frames. The <span style="font-family: Courier New,Courier,monospace;">actor1</span> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>
-<p>The advantage of specifying a key frame at 0% is that regardless of where the <span style="font-family: Courier New,Courier,monospace;">actor1</span> is, it starts from position (10.0f, 10.0f, 10.0f). If <span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span> is used, the start position is the <span style="font-family: Courier New,Courier,monospace;">actor1</span>'s current position.</p>
+<p>When you play the animation, DALi animates the position of <code>actor1</code> between the specified key frames. The <code>actor1</code> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>
+<p>The advantage of specifying a key frame at 0% is that regardless of where the <code>actor1</code> is, it starts from position (10.0f, 10.0f, 10.0f). If <code>AnimateTo()</code> is used, the start position is the <code>actor1</code>'s current position.</p>
<h2 id="path" name="path">Path Animation</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class can be used to animate the position and orientation of actors.</p>
+<p>The <code>Dali::Path</code> class can be used to animate the position and orientation of actors.</p>
<p>The black points in the following figure are points where the DALi logo travels to. The red points are the control points which express the curvature of the path on the black points.</p>
-<p class="figure">Figure: Path animation</p>
+<p align="center"><strong>Figure: Path animation</strong></p>
<p align="center"><img alt="Path animation" src="../../../images/path_animation.png"/></p>
<p>The following code presents the black points:</p>
path.AddPoint( Vector3( 90.0f, 50.0f, 0.0f ) );
path.AddPoint( Vector3( 10.0f, 90.0f, 0.0f ) );
</pre>
-<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Path::AddControlPoint</span>. The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class can also auto-generate the control points for you.</p>
+<p>The control points can be added manually using <code>Path::AddControlPoint</code>. The <code>Dali::Path</code> class can also auto-generate the control points for you.</p>
<pre class="prettyprint">
path.GenerateControlPoints( 0.25f );
</pre>
-<p>Here 0.25f represents the curvature of the path you require. For more information, see the <
span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>
-<p>To animate <span style="font-family: Courier New,Courier,monospace;">actor1</span> along this path, use the following function:</p>
+<p>Here 0.25f represents the curvature of the path you require. For more information, see the <
code>GenerateControlPoints()</code> function in the <code>Dali::Path</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>
+<p>To animate <code>actor1</code> along this path, use the following function:</p>
<pre class="prettyprint">
animation.Animate( actor1, path, Vector3::ZERO );
</pre>
<div id="container"><div id="contents"><div class="content">
<h1>Buttons</h1>
-<p>A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span>, <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span>, and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span>. The base class for the button controls is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> class.</p>
+<p>A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as <code>PushButton</code>, <code>CheckBoxButton</code>, and <code>RadioButton</code>. The base class for the button controls is <code>Dali::Toolkit::Button</code>. The <code>Button</code> class provides the <code>disabled</code> property and the <code>clicked</code> signal. The following table lists the basic signals provided by the <code>Dali::Toolkit::Button</code> class.</p>
+<p align="center" class="Table"><strong>Table: <code>Dali::Toolkit::Button</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> input signals
- </caption>
<tbody>
<tr>
<th>Input signal</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PressedSignal()</span></td>
+ <td><code>PressedSignal()</code></td>
<td>Emitted when the button is pressed.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ReleasedSignal()</span></td>
+ <td><code>ReleasedSignal()</code></td>
<td>Emitted when the button is released.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ClickedSignal()</span></td>
+ <td><code>ClickedSignal()</code></td>
<td>Emitted when the button is clicked.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">StateChangedSignal()</span></td>
+ <td><code>StateChangedSignal()</code></td>
<td>Emitted when the button state is changed.
</td>
</tr>
<h2 id="PushButton" name="PushButton">PushButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::PushButton</span> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.</p>
+<p>The <code>Dali::Toolkit::PushButton</code> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.</p>
-<p class="figure">Figure: PushButton</p>
+<p align="center"><strong>Figure: PushButton</strong></p>
<p align="center"><img alt="PushButton" src="../../../images/push_button.png"/></p>
-<p>A push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:</p>
+<p>A push button emits a <code>Button::PressedSignal()</code> signal when the button is pressed, a <code>Button::ClickedSignal()</code> signal when clicked, and a <code>Button::ReleasedSignal()</code> signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBoxButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::CheckBoxButton</span> class provides a check box button, which can be checked or unchecked.</p>
+<p>The <code>Dali::Toolkit::CheckBoxButton</code> class provides a check box button, which can be checked or unchecked.</p>
-<p class="figure">Figure: CheckBoxButton</p>
+<p align="center"><strong>Figure: CheckBoxButton</strong></p>
<p align="center"><img alt="CheckBoxButton" src="../../../images/checkbox_button.png"/></p>
-<p>A checkbox button emits all 4 button input signals, but usually you can just use the <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to be notified when the button changes its state to selected or unselected. The following code shows an example of a basic checkbox button:</p>
+<p>A checkbox button emits all 4 button input signals, but usually you can just use the <code>Button::StateChangedSignal()</code> signal to be notified when the button changes its state to selected or unselected. The following code shows an example of a basic checkbox button:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
<h2 id="RadioButton" name="RadioButton">RadioButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>
+<p>The <code>Dali::Toolkit::RadioButton</code> class provides a radio button with 2 states: selected and unselected.</p>
-<p class="figure">Figure: RadioButton</p>
+<p align="center"><strong>Figure: RadioButton</strong></p>
<p align="center"><img alt="RadioButton" src="../../../images/radio_button.png"/></p>
-<p>Usually, radio buttons are grouped. When they have the same parent, 2 or more radio buttons are located in the same group. In each group, only 1 radio button can be selected at a given time. You can use the <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check which radio button is selected. The following code shows an example of a basic radio button:</p>
+<p>Usually, radio buttons are grouped. When they have the same parent, 2 or more radio buttons are located in the same group. In each group, only 1 radio button can be selected at a given time. You can use the <code>Button::StateChangedSignal()</code> signal to check which radio button is selected. The following code shows an example of a basic radio button:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
<p>Constraints are used to modify the property of an actor (<strong>target property</strong>), based on other properties of the same actor; properties of the actor's parent; or properties of another actor altogether (<strong>property input or constraint source</strong>), when the modification needs to be at runtime. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions or functors are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance (<strong>constraint function</strong>).</p>
-<p class="figure">Figure: Conceptual diagram for the DALi constraint system</p>
+<p align="center"><strong>Figure: Conceptual diagram for the DALi constraint system</strong></p>
<p align="center"><img alt="Conceptual diagram for the DALi constraint system" src="../../../images/constraint-concept.png" /></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> );
<p>Multiple constraints can be applied to the same actor at the same time. The order in which constraints are applied is important as this is the order in which they are processed in the update thread.</p>
<p>Constraints are applied after animations have been applied. This means that constraints override the values set by animations. Constraints are not applied to off-stage actors.</p>
-<p>Not all properties can be used as a constraint input. To check whether a property can be a constraint input, use the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAConstraintInput()</span> function.</p>
+<p>Not all properties can be used as a constraint input. To check whether a property can be a constraint input, use the <code>Dali::Handle::IsPropertyAConstraintInput()</code> function.</p>
<h2 id="source" name="source">Constraint Source</h2>
<p>Certain properties can be used as input sources to the constraint. The constraint takes these values, optionally performs a calculation on them (if using a custom functor), and writes the result to the specified property of the target actor.</p>
<p>A constraint input source can be one of the following types:</p>
<ul>
-<li><strong>Local source</strong> (use <span style="font-family: Courier New,Courier,monospace;">Dali::LocalSource</span>)
+<li><strong>Local source</strong> (use <code>Dali::LocalSource</code>)
<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor's orientation can be used as a constraint input source:</p>
<pre class="prettyprint">
ConstraintSource source( LocalSource( Actor::Property::ORIENTATION ) );
</pre>
</li>
-<li><strong>Parent source</strong> (use <span style="font-family: Courier New,Courier,monospace;">Dali::ParentSource</span>)
+<li><strong>Parent source</strong> (use <code>Dali::ParentSource</code>)
<p>A parent source is based on properties of the actor's parent. For example, a parent's position can be used as a constraint input source:</p>
<pre class="prettyprint">
ConstraintSource source( ParentSource( Actor::Property::POSITION ) );
</pre>
</li>
-<li><strong>Other handle source</strong> (use <span style="font-family: Courier New,Courier,monospace;">Dali::Source</span>)
+<li><strong>Other handle source</strong> (use <code>Dali::Source</code>)
<p>You can base your source on the properties of another handle altogether. For example, a sibling actor's color can be used as a constraint input source:</p>
<pre class="prettyprint">
ConstraintSource source( Source( anotherHandle, Actor::Property::COLOR ) );
<pre class="prettyprint">
void Function( PropertyType &current, const PropertyInputContainer &inputs );
</pre>
-<p>In this function, the <span style="font-family: Courier New,Courier,monospace;">current</span> parameter is a reference to the target property type, such as <span style="font-family: Courier New,Courier,monospace;">float</span>, <span style="font-family: Courier New,Courier,monospace;">Vector2</span>, or <span style="font-family: Courier New,Courier,monospace;">Vector3</span>. This is an in or out parameter. It represents the current value of the property and the expectation is that it is modified by the function to the desired value.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">inputs</span> parameter holds all the constraint input sources. Each element is a pointer to the property input and can be accessed using the indexing operator <span style="font-family: Courier New,Courier,monospace;">[ ]</span>. The order in which the sources are added is the order in which the property inputs are sorted in the container.</p>
+<p>In this function, the <code>current</code> parameter is a reference to the target property type, such as <code>float</code>, <code>Vector2</code>, or <code>Vector3</code>. This is an in or out parameter. It represents the current value of the property and the expectation is that it is modified by the function to the desired value.</p>
+<p>The <code>inputs</code> parameter holds all the constraint input sources. Each element is a pointer to the property input and can be accessed using the indexing operator <code>[ ]</code>. The order in which the sources are added is the order in which the property inputs are sorted in the container.</p>
<pre class="prettyprint">
constraint.AddSource( LocalSource( Actor::Property::POSITION ) );
constraint.AddSource( LocalSource( Actor::Property::SIZE ) );
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 ) );
}
</pre>
-<p>For more information, see the <
span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
+<p>For more information, see the <
code>New()</code> function in the <code>Dali::Constraint</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
<h3>Using Functors as Constraint Functions</h3>
};
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">MyConstraintFunctor()</span> functor can be applied to the <span style="font-family: Courier New,Courier,monospace;">control</span> as follows:</p>
+<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 <span style="font-family: Courier New,Courier,monospace;">MyConstraintFunctor()</span> functor can be used also with another constraint with a different distance. Instead of using the default functor (<span style="font-family: Courier New,Courier,monospace;">operator()</span>), another function can be declared in the class or struct and used as the constraint function. For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class.</p>
+<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>
<ul><li>Equal to constraint
-<p>The built-in <span style="font-family: Courier New,Courier,monospace;">Dali::EqualToConstraint()</span> function can be used if you only need to set a property equal to another property:</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>Here the <span style="font-family: Courier New,Courier,monospace;">actor</span>'s position is set to equal the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>.</p>
+<p>Here the <code>actor</code>'s position is set to equal the position of <code>anotherActor</code>.</p>
</li>
<li>Relative to constraint
-<p>The built-in <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraint()</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraintFloat()</span> functions can be used if you only need to set a property relative to another property:</p>
+<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>
-<p>Here the <span style="font-family: Courier New,Courier,monospace;">actor</span>'s position is relative to the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span> (multiplied by a given scale). If <span style="font-family: Courier New,Courier,monospace;">anotherActor</span> is at (10.0f, 20.0f, 30.0f), <span style="font-family: Courier New,Courier,monospace;">actor</span> is at (20.0f, 40.0f, 60.0f).</p></li></ul>
+<p>Here the <code>actor</code>'s position is relative to the position of <code>anotherActor</code> (multiplied by a given scale). If <code>anotherActor</code> is at (10.0f, 20.0f, 30.0f), <code>actor</code> is at (20.0f, 40.0f, 60.0f).</p></li></ul>
<h2 id="remove" name="remove">Removing Constraints</h2>
actor.RemoveConstraints();
</pre>
</li>
-<li>To remove all constraints with the tag from an actor (the tag can be set using the <span style="font-family: Courier New,Courier,monospace;">SetTag()</span> function):
+<li>To remove all constraints with the tag from an actor (the tag can be set using the <code>SetTag()</code> function):
<pre class="prettyprint">
actor.RemoveConstraints( tag );
</pre>
<h2 id="when" name="when">Constraint Usage Tips</h2>
<p>Constraints are designed as a way of modifying properties that cannot be modified by any existing built-in functionality, such as animations, size negotiation, parent anchor, or origin settings. As they allow you to execute your own code within the update thread, DALi can no longer guarantee the timeliness of this code, or how optimized it can be.</p>
-<p>Generally, do not use constraints with the <span style="font-family: Courier New,Courier,monospace;">size</span> property as constraining the size and size negotiation are mutually exclusive. The following table provides example use cases for when and when not to use a constraint.</p>
+<p>Generally, do not use constraints with the <code>size</code> property as constraining the size and size negotiation are mutually exclusive. The following table provides example use cases for when and when not to use a constraint.</p>
+<p align="center" class="Table"><strong>Table: Constraint use examples</strong></p>
<table>
- <caption>
- Table: Constraint use examples
- </caption>
<tbody>
<tr>
<th>Requirement</th>
</tr>
<tr>
<td>Need an actor to appear centered around the bottom-right corner of its parent.</td>
- <td>Use the <
span style="font-family: Courier New,Courier,monospace;">Dali::ParentOrigin</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ParentOrigin.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ParentOrigin.html">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">Dali::AnchorPoint</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1AnchorPoint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1AnchorPoint.html">wearable</a> applications) namespaces.
+ <td>Use the <
code>Dali::ParentOrigin</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ParentOrigin.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ParentOrigin.html">wearable</a> applications) and <code>Dali::AnchorPoint</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1AnchorPoint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1AnchorPoint.html">wearable</a> applications) namespaces.
<p>For more information, see <a href="actors_n.htm#position">Positioning Actors</a>.</p></td>
</tr>
<tr>
<td>Need to lay out a series of controls with various alignment requirements.</td>
- <td>Use either <
span style="font-family: Courier New,Courier,monospace;">ParentOrigin</span> and <span style="font-family: Courier New,Courier,monospace;">AnchorPoint</span> settings, or the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TableView</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">wearable</a> applications).</td>
+ <td>Use either <
code>ParentOrigin</code> and <code>AnchorPoint</code> settings, or the <code>Dali::Toolkit::TableView</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">wearable</a> applications).</td>
</tr>
<tr>
<td>Need to automatically modify the position property of one actor based on the position property of another actor that is neither a parent or a child.</td>
<div id="container"><div id="contents"><div class="content">
<h1>Control</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class is the base class for all UI components in DALi. With this class, you can, for example, manage the background color and images for UI components.</p>
+<p>The <code>Dali::Toolkit::Control</code> class is the base class for all UI components in DALi. With this class, you can, for example, manage the background color and images for UI components.</p>
<h2 id="background-color" name="background-color">Setting the Background Color</h2>
control.SetBackgroundColor( Color::RED );
</pre>
-<p class="figure">Figure: Control object with a red background</p>
+<p align="center"><strong>Figure: Control object with a red background</strong></p>
<p align="center"><img alt="Control object with a red background" src="../../../images/background_control_color.png"/></p>
<p>You can handle all existing controls similarly. For example, to set the background color for a TextLabel:</p>
label.SetBackgroundColor( Dali::Color::RED );
</pre>
-<p class="figure">Figure: TextLabel object with a red background</p>
+<p align="center"><strong>Figure: TextLabel object with a red background</strong></p>
<p align="center"><img alt="TextLabel object with a red background" src="../../../images/background_textlabel.png"/></p>
control.SetBackgroundImage( image );
</pre>
-<p class="figure">Figure: Control object with a background image</p>
+<p align="center"><strong>Figure: Control object with a background image</strong></p>
<p align="center"><img alt="Control object with a background image" src="../../../images/background_image.png"/></p>
<p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with the default camera.</p>
-<p class="figure">Figure: DALi coordinate system</p>
+<p align="center"><strong>Figure: DALi coordinate system</strong></p>
<p align="center"><img alt="DALi coordinate system" src="../../../images/actor_coordinates.png"/></p>
<h3>Camera</h3>
<li><strong>DALi Toolkit</strong>
<p>This module provides UI components and various effects on top of the DALi core.</p></li>
</ul>
-<p class="figure">Figure: Layer diagram for DALi modules</p>
+<p align="center"><strong>Figure: Layer diagram for DALi modules</strong></p>
<p align="center"><img alt="Layer diagram for DALi modules" src="../../../images/dali_modules.png" /></p>
<h2 id="create" name="create">Creating a DALi Application</h2>
<p align="center"><img alt="Create a DALi project" src="../../../images/tizen_project_dali.png" /></p>
</li>
-<li>The new project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio. If you open the <span style="font-family: Courier New,Courier,monospace;">src/basicuiwithdali.cpp</span> file, you can see the source code of the basic DALi application:
+<li>The new project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio. If you open the <code>src/basicuiwithdali.cpp</code> file, you can see the source code of the basic DALi application:
<pre class="prettyprint">
#include <dali-toolkit/dali-toolkit.h>
using namespace Dali;
using namespace Dali::Toolkit;
-// This example shows how to create and display Hello World using a simple TextLabel
+// This example shows how to create and display Hello World
+// using a simple TextLabel
class HelloWorldExample : public ConnectionTracker
{
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 );
}
<li>Initialize the DALi application:
<ul><li>
-<p>To use the DALi APIs, you only need to include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> file. It includes the header files of DALi Core and DALi Adaptor as well as DALi Toolkit.</p>
+<p>To use the DALi APIs, you only need to include the <code>dali-toolkit.h</code> file. It includes the header files of DALi Core and DALi Adaptor as well as DALi Toolkit.</p>
<pre class="prettyprint">
#include <dali-toolkit/dali-toolkit.h>
</pre>
-<p>Using the following 2 using-directives can be convenient, because all DALi APIs are contained in either the <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:</p>
+<p>Using the following 2 using-directives can be convenient, because all DALi APIs are contained in either the <code>Dali</code> or <code>Dali::Toolkit</code> namespace:</p>
<pre class="prettyprint">
using namespace Dali;
using namespace Dali::Toolkit;
</li>
<li>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
+<p>The <
code>Dali::Application</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
-<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>
+<p>Create a <code>Dali::Application</code> instance:</p>
<pre class="prettyprint">
Application application = Application::New( &argc, &argv );
</pre></li>
<li>
<p>Several signals can be connected to keep you informed when certain platform-related activities occur, and ensure that, upon system events, DALi is called in a thread-safe manner.</p>
-<p>To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way for starting a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals (for more information, see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a>). The <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample</span> class is used in other code samples in the Tizen DALi documentation.</p>
+<p>To manage signal connection safely, DALi provides the <code>Dali::ConnectionTracker</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way for starting a DALi application is to create a class derived from the <code>Dali::ConnectionTracker</code> class and use its member functions as callback functions for DALi signals (for more information, see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a>). The <code>HelloWorldExample</code> class is used in other code samples in the Tizen DALi documentation.</p>
-<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can use the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">DALi::Application::InitSignal()</span> function:</p>
+<p>After getting the initialized signal from the <code>Dali::Application</code> instance, you can use the DALi APIs for building the scene graph. Connect the <code>HelloWorldExample::Create()</code> callback to the <code>DALi::Application::InitSignal()</code> function:</p>
<pre class="prettyprint">
mApplication.InitSignal().Connect( this, &HelloWorldExample::Create );
</li>
<li>Create an actor and add it to the stage:
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> UI component (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.</p>
+<p>The <code>Dali::Toolkit::TextLabel</code> UI component (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string. To display the <code>TextLabel</code> component, add it to a stage. The <code>stage</code> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.</p>
<pre class="prettyprint">
Stage stage = Stage::GetCurrent();
stage.Add( textLabel );
</pre>
-<p>The above code additionally sets the background color of the <span style="font-family: Courier New,Courier,monospace;">stage</span> and the anchor point, a point defining a position of a child actor from its parent, of the <span style="font-family: Courier New,Courier,monospace;">textLabel</span>. The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
+<p>The above code additionally sets the background color of the <code>stage</code> and the anchor point, a point defining a position of a child actor from its parent, of the <code>textLabel</code>. The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <code>TextLabel</code> component is removed from the stage, it remains alive through the reference.</p>
</li>
<li>Connect to input signals:
stage.GetRootLayer().TouchSignal().Connect( this, &HelloWorldExample::OnTouch );
stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
</pre>
-<p>Any key inputs and touches on the stage are handled by 2 callback functions, <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnKeyEvent</span> and <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span>.</p>
+<p>Any key inputs and touches on the stage are handled by 2 callback functions, <code>HelloWorldExample::OnKeyEvent</code> and <code>HelloWorldExample::OnTouch</code>.</p>
-<p>Note that the first parameter of the <
span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span> callback (<span style="font-family: Courier New,Courier,monospace;">actor</span>) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications). This is due to the <a href="handle_n.htm">handle/body pattern</a> widely used in DALi.</p>
+<p>Note that the first parameter of the <
code>HelloWorldExample::OnTouch</code> callback (<code>actor</code>) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the <code>Dali::BaseHandle</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications). This is due to the <a href="handle_n.htm">handle/body pattern</a> widely used in DALi.</p>
<pre class="prettyprint">
bool OnTouch( Actor actor, const TouchData& touch )
</li></ol>
<p>The following figure illustrates the basic DALi application running on a Tizen emulator.</p>
- <p class="figure">Figure: Basic DALi application</p>
+ <p align="center"><strong>Figure: Basic DALi application</strong></p>
<p align="center"><img alt="Basic DALi application" src="../../../images/hello_world_dali.png" /></p>
<p>The concept of signal and slots were introduced by Qt for communication between objects, and it inspires DALi.</p>
-<p class="figure">Figure: Schematic example of signal-slot connections</p>
+<p align="center"><strong>Figure: Schematic example of signal-slot connections</strong></p>
<p align="center"><img alt="Schematic example of signal-slot connections" src="../../../images/signal_slot.png"/></p>
<p>In the figure, signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.</p>
</ul>
<h2 id="touch" name="touch">Touch Data</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications) provides the <span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>
+<p>The <code>Dali::Actor</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications) provides the <code>TouchSignal()</code> function to inform the application that a user touches the actor. It is defined as follows:</p>
<pre class="prettyprint">
typedef Signal<bool ( Actor, const TouchData& )> TouchDataSignalType;
TouchDataSignalType& TouchSignal();</pre>
-<p>This means that a slot of the following type can be connected to the return value of the <span style="font-family: Courier New,Courier,monospace;">Actor::TouchSignal()</span> function:</p>
+<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 <span style="font-family: Courier New,Courier,monospace;">true</span> 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>
+<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>
-<p>Each point on the screen being or having been touched is represented by the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchPoint</span> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>
+<p>Each point on the screen being or having been touched is represented by the <code>Dali::TouchPoint</code> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>
-<p>A collection of touch points at a specific moment in time is collated into the <
span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TouchData.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TouchData.html">wearable</a> applications). When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
+<p>A collection of touch points at a specific moment in time is collated into the <
code>Dali::TouchData</code> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TouchData.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TouchData.html">wearable</a> applications). When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
<p>The following example shows how a connection to a touch event signal can be established:</p>
<p>The stage is the top-most root object, so it can receive application-wide key events.</p>
-<p>DALi provides its own key codes for several special keys, such as <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span> or <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span>. The following table lists the available DALi key codes.</p>
+<p>DALi provides its own key codes for several special keys, such as <code>DALI_KEY_ESCAPE</code> or <code>DALI_KEY_BACK</code>. The following table lists the available DALi key codes.</p>
+<p align="center" class="Table"><strong>Table: DALi key codes</strong></p>
<table>
- <caption>
- Table: DALi key codes
- </caption>
<tbody>
<tr>
<th>Key codes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_INVALID</span></td>
+ <td><code>DALI_KEY_INVALID</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span></td>
+ <td><code>DALI_KEY_ESCAPE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACKSPACE</span></td>
+ <td><code>DALI_KEY_BACKSPACE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_UP</span></td>
+ <td><code>DALI_KEY_CURSOR_UP</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_LEFT</span></td>
+ <td><code>DALI_KEY_CURSOR_LEFT</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_RIGHT</span></td>
+ <td><code>DALI_KEY_CURSOR_RIGHT</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_DOWN</span></td>
+ <td><code>DALI_KEY_CURSOR_DOWN</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span></td>
+ <td><code>DALI_KEY_BACK</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CAMERA</span></td>
+ <td><code>DALI_KEY_CAMERA</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CONFIG</span></td>
+ <td><code>DALI_KEY_CONFIG</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_POWER</span></td>
+ <td><code>DALI_KEY_POWER</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE</span></td>
+ <td><code>DALI_KEY_PAUSE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CANCEL</span></td>
+ <td><code>DALI_KEY_CANCEL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_CD</span></td>
+ <td><code>DALI_KEY_PLAY_CD</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_STOP_CD</span></td>
+ <td><code>DALI_KEY_STOP_CD</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE_CD</span></td>
+ <td><code>DALI_KEY_PAUSE_CD</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_NEXT_SONG</span></td>
+ <td><code>DALI_KEY_NEXT_SONG</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PREVIOUS_SONG</span></td>
+ <td><code>DALI_KEY_PREVIOUS_SONG</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_REWIND</span></td>
+ <td><code>DALI_KEY_REWIND</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_FASTFORWARD</span></td>
+ <td><code>DALI_KEY_FASTFORWARD</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MEDIA</span></td>
+ <td><code>DALI_KEY_MEDIA</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_PAUSE</span></td>
+ <td><code>DALI_KEY_PLAY_PAUSE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MUTE</span></td>
+ <td><code>DALI_KEY_MUTE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MENU</span></td>
+ <td><code>DALI_KEY_MENU</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOME</span></td>
+ <td><code>DALI_KEY_HOME</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOMEPAGE</span></td>
+ <td><code>DALI_KEY_HOMEPAGE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_WEBPAGE</span></td>
+ <td><code>DALI_KEY_WEBPAGE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MAIL</span></td>
+ <td><code>DALI_KEY_MAIL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SCREENSAVER</span></td>
+ <td><code>DALI_KEY_SCREENSAVER</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_UP</span></td>
+ <td><code>DALI_KEY_BRIGHTNESS_UP</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_DOWN</span></td>
+ <td><code>DALI_KEY_BRIGHTNESS_DOWN</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SOFT_KBD</span></td>
+ <td><code>DALI_KEY_SOFT_KBD</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_QUICK_PANEL</span></td>
+ <td><code>DALI_KEY_QUICK_PANEL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_TASK_SWITCH</span></td>
+ <td><code>DALI_KEY_TASK_SWITCH</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_APPS</span></td>
+ <td><code>DALI_KEY_APPS</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SEARCH</span></td>
+ <td><code>DALI_KEY_SEARCH</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOICE</span></td>
+ <td><code>DALI_KEY_VOICE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_LANGUAGE</span></td>
+ <td><code>DALI_KEY_LANGUAGE</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_UP</span></td>
+ <td><code>DALI_KEY_VOLUME_UP</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_DOWN</span></td>
+ <td><code>DALI_KEY_VOLUME_DOWN</code></td>
</tr>
</tbody>
</table>
<p>These signals are provided by the following classes:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>
-
+<li><code>Dali::Actor</code>
+<p align="center" class="Table"><strong>Table: <code>Dali::Actor</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> input signals
- </caption>
<tbody>
<tr>
<th>Input signals</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span></td>
+ <td><code>TouchSignal()</code></td>
<td>Emitted when touch input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Actor actor, const TouchData& touch );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Actor actor, const TouchData& touch );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+ <td><code>HoveredSignal()</code></td>
<td>Emitted when hover input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Actor actor, const HoverEvent& event );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Actor actor, const HoverEvent& event );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
+ <td><code>WheelEventSignal()</code></td>
<td>Emitted when wheel event is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Actor actor, const WheelEvent& event );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Actor actor, const WheelEvent& event );</code></p></td>
</tr>
</tbody>
</table>
</li>
<li>
-<
span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">wearable</a> applications)
+<
code>Dali::Stage</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">wearable</a> applications)
+<p align="center" class="Table"><strong>Table: <code>Dali::Stage</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> input signals
- </caption>
<tbody>
<tr>
<th>Input signals</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span></td>
+ <td><code>TouchSignal()</code></td>
<td>Emitted when touch input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( const TouchData& data )</span></p></td>
+ <p>Callback: <code>void YourCallbackName( const TouchData& data )</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+ <td><code>HoveredSignal()</code></td>
<td>Emitted when hover input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( const TouchEvent& event );</span></p></td>
+ <p>Callback: <code>void YourCallbackName( const TouchEvent& event );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
+ <td><code>KeyEventSignal()</code></td>
<td>Emitted when a key event is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( const KeyEvent& event );</span></p></td>
+ <p>Callback: <code>void YourCallbackName( const KeyEvent& event );</code></p></td>
</tr>
</tbody>
</table>
-<p>Only events are passed to the callbacks since only a single stage instance can exist in DALi application. The callback return types are <span style="font-family: Courier New,Courier,monospace;">void</span> because the stage has no parent to pass events to, even though it does not consume the events.</p>
+<p>Only events are passed to the callbacks since only a single stage instance can exist in DALi application. The callback return types are <code>void</code> because the stage has no parent to pass events to, even though it does not consume the events.</p>
</li>
<li>
-<
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications)
+<
code>Dali::Toolkit::Control</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications)
+<p align="center" class="Table"><strong>Table: <code>Dali::Toolkit::Control</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> input signals
- </caption>
<tbody>
<tr>
<th>Input signals</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
+ <td><code>KeyEventSignal()</code></td>
<td>Emitted when a key event is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Control control, const KeyEvent& event );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Control control, const KeyEvent& event );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusGainedSignal()</span></td>
+ <td><code>KeyInputFocusGainedSignal()</code></td>
<td>Emitted when the control gets key input focus.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Control control );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Control control );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusLostSignal()</span></td>
+ <td><code>KeyInputFocusLostSignal()</code></td>
<td>Emitted when the control loses key input focus, which can be due to it being gained by another control or actor or just cleared from this control as no longer required.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Control control );</span></p></td>
+ <p>Callback: <code>bool YourCallbackName( Control control );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal(), HoveredSignal(), KeyEventSignal()</span></td>
- <td>Same as the ones supported by <span style="font-family: Courier New,Courier,monospace;">Actor</span>.
+ <td><code>TouchSignal(), HoveredSignal(), KeyEventSignal()</code></td>
+ <td>Same as the ones supported by <code>Actor</code>.
</td>
</tr>
</tbody>
</table>
-<p>The key event signal is provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> classes, not by the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class. The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class is not designed to get key events. To receive key events, an actor must be an instance of the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class or one of its subclasses.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class can also receive touch, hover, and wheel events as it inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class.</p>
+<p>The key event signal is provided by the <code>Dali::Stage</code> and <code>Dali::Toolkit::Control</code> classes, not by the <code>Dali::Actor</code> class. The <code>Dali::Actor</code> class is not designed to get key events. To receive key events, an actor must be an instance of the <code>Dali::Toolkit::Control</code> class or one of its subclasses.</p>
+<p>The <code>Dali::Toolkit::Control</code> class can also receive touch, hover, and wheel events as it inherits from the <code>Dali::Actor</code> class.</p>
</li>
<li>
-<
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">wearable</a> applications)
+<
code>Dali::Toolkit::KeyboardFocusManager</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">wearable</a> applications)
+<p align="center" class="Table"><strong>Table: <code>Dali::Toolkit::KeyboardFocusManager</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> input signals
- </caption>
<tbody>
<tr>
<th>Input signals</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PreFocusChangeSignal()</span></td>
+ <td><code>PreFocusChangeSignal()</code></td>
<td>Emitted before the focus is going to be changed.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">Actor YourCallbackName( Actor currentFocusedActor, Actor proposedActorToFocus, Control::KeyboardFocus::Direction direction );</span></p></td>
+ <p>Callback: <code>Actor YourCallbackName( Actor currentFocusedActor, Actor proposedActorToFocus, Control::KeyboardFocus::Direction direction );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FocusChangedSignal()</span></td>
+ <td><code>FocusChangedSignal()</code></td>
<td>Emitted after the current focused actor has been changed.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( Actor originalFocusedActor, Actor currentFocusedActor );</span></p></td>
+ <p>Callback: <code>void YourCallbackName( Actor originalFocusedActor, Actor currentFocusedActor );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FocusGroupChangedSignal()</span></td>
+ <td><code>FocusGroupChangedSignal()</code></td>
<td>Emitted when the focus group has been changed.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( Actor currentFocusedActor, bool forward );</span></p></td>
+ <p>Callback: <code>void YourCallbackName( Actor currentFocusedActor, bool forward );</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FocusedActorEnterKeySignal()</span></td>
+ <td><code>FocusedActorEnterKeySignal()</code></td>
<td>Emitted when the current focused actor has the enter key pressed on it.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( Actor enterPressedActor );</span></p></td>
+ <p>Callback: <code>void YourCallbackName( Actor enterPressedActor );</code></p></td>
</tr>
</tbody>
</table>
-<p><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> provides the functionality of handling keyboard navigation and maintaining the 2-dimensional keyboard focus chain. Dissimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that is why this signal is provided by the specific focus managing class.</p>
+<p><code>Dali::Toolkit::KeyboardFocusManager</code> provides the functionality of handling keyboard navigation and maintaining the 2-dimensional keyboard focus chain. Dissimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that is why this signal is provided by the specific focus managing class.</p>
</li>
</ul>
<p>The following DALi classes provide signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Window</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Timer</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::RenderTask</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ObjectRegistry</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PropertyNotification</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::View</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::GaussianBlurViewSignal</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Scrollable</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> </li>
+<li><code>Dali::Window</code> </li>
+<li><code>Dali::Application</code> </li>
+<li><code>Dali::Timer</code> </li>
+<li><code>Dali::Actor</code> </li>
+<li><code>Dali::Image</code> </li>
+<li><code>Dali::ResourceImage</code> </li>
+<li><code>Dali::LongPressGestureDetector</code> </li>
+<li><code>Dali::TapGestureDetector</code> </li>
+<li><code>Dali::PanGestureDetector</code> </li>
+<li><code>Dali::PinchGestureDetector</code> </li>
+<li><code>Dali::RenderTask</code> </li>
+<li><code>Dali::Stage</code> </li>
+<li><code>Dali::ObjectRegistry</code> </li>
+<li><code>Dali::PropertyNotification</code> </li>
+<li><code>Dali::Animation</code> </li>
+<li><code>Dali::Toolkit::Button</code> </li>
+<li><code>Dali::Toolkit::Control</code> </li>
+<li><code>Dali::Toolkit::TextField</code> </li>
+<li><code>Dali::Toolkit::View</code> </li>
+<li><code>Dali::Toolkit::GaussianBlurViewSignal</code> </li>
+<li><code>Dali::ScrollBar</code> </li>
+<li><code>Dali::Toolkit::Scrollable</code> </li>
+<li><code>Dali::Toolkit::ScrollView</code> </li>
+<li><code>Dali::Toolkit::AccessibilityFocusManager</code> </li>
+<li><code>Dali::Toolkit::KeyboardFocusManager</code> </li>
</ul>
<p>For the signals of each class and their usage, see the DALi API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__dali.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__dali.html">wearable</a> applications).</p>
<h2 id="gesture" name="gesture">Gestures</h2>
-<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <
span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1GestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1GestureDetector.html">wearable</a> applications) analyzes a stream of touch events and attempts to determine the intention of the user. </p>
+<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <
code>Dali::GestureDetector</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1GestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1GestureDetector.html">wearable</a> applications) analyzes a stream of touch events and attempts to determine the intention of the user. </p>
<p>If an actor is attached to a gesture detector and the detector recognizes a user intention (detects a predefined pattern in a stream of touch events), the actor emits a detected gesture signal to the application.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Instances of gesture detectors must not be local variables, because gestures cannot be detected after they are destroyed.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Instances of gesture detectors must not be local variables, because gestures cannot be detected after they are destroyed.
+</div>
<p>DALi currently supports following gesture detectors:</p>
<ul>
-<li><
span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">wearable</a> applications) detects when the user does a long-press action.</li>
-<li><
span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">wearable</a> applications) detects when the user does a tap action.</li>
-<li><
span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">wearable</a> applications) detects when the user moves 2 fingers towards or away from each other.</li>
-<li><
span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">wearable</a> applications) detects when the user moves one or more fingers in the same direction.</li>
+<li><
code>Dali::LongPressGestureDetector</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">wearable</a> applications) detects when the user does a long-press action.</li>
+<li><
code>Dali::TapGestureDetector</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">wearable</a> applications) detects when the user does a tap action.</li>
+<li><
code>Dali::PinchGestureDetector</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">wearable</a> applications) detects when the user moves 2 fingers towards or away from each other.</li>
+<li><
code>Dali::PanGestureDetector</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">wearable</a> applications) detects when the user moves one or more fingers in the same direction.</li>
</ul>
<p>The following example shows how an application can be notified of a pan gesture:</p>
<p>If you have a pair of a connected signal (for example, a button clicked signal) and a slot (for example, a toolbar object having the callback for the signal), and one of them (the button or the toolbar) is deleted without any notification, the application crashes when the signal is emitted or the slot tries to disconnect the signal.</p>
-<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <
span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
+<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <
code>Dali::ConnectionTracker</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
-<p>Due to this mechanism, all the DALi sample codes start with a controller class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. This is a safe and typical way of making a DALi application. You can, of course, create other structures using the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class.</p>
+<p>Due to this mechanism, all the DALi sample codes start with a controller class derived from the <code>Dali::ConnectionTracker</code> class. This is a safe and typical way of making a DALi application. You can, of course, create other structures using the <code>Dali::ConnectionTracker</code> class.</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>FlexContainer</h1>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::FlexContainer</span> class provides a control that implements a subset of the <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module Level 1 specification (defined by W3C)</a>.</p>
+<p>The <
code>Dali::Toolkit::FlexContainer</code> class provides a control that implements a subset of the <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module Level 1 specification (defined by W3C)</a>.</p>
<p>The flexible box (flexbox) is a CSS3 Web layout model, which allows responsive elements within a container, automatically arranged to different size screens or devices. The following figure illustrates the various directions and terms applied to a flex container with the "flex direction" defined as "row".</p>
-<p class="figure">Figure: Flex container terms</p>
+<p align="center"><strong>Figure: Flex container terms</strong></p>
<p align="center"><img alt="Flex container terms" src="../../../images/dali_flexcontainer1.png"/></p>
<h2 id="create">Creating a Flexbox Layout with FlexContainer</h2>
-<p>The following basic example shows how to create a gallery-like flexbox layout using the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::FlexContainer</span> object.</p>
+<p>The following basic example shows how to create a gallery-like flexbox layout using the <code>Dali::Toolkit::FlexContainer</code> object.</p>
-<p class="figure">Figure: Flex container example</p>
+<p align="center"><strong>Figure: Flex container example</strong></p>
<p align="center"><img alt="Flex container example" src="../../../images/dali_flexcontainer_demo.png"/></p>
<ol>
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>
-<li>To make the buttons and title display horizontally and be vertically aligned to the center of the toolbar, set the toolbar flex direction to "row" and set its <span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span> property to center.
-<p>Set the <span style="font-family: Courier New,Courier,monospace;">FLEX</span> property to make the toolbar and the actual content share the height of the main container, so that the toolbar occupies 10 percent of the whole vertical space and the content occupies the rest of the vertical space.</p>
+<li>To make the buttons and title display horizontally and be vertically aligned to the center of the toolbar, set the toolbar flex direction to "row" and set its <code>ALIGN_ITEMS</code> property to center.
+<p>Set the <code>FLEX</code> property to make the toolbar and the actual content share the height of the main container, so that the toolbar occupies 10 percent of the whole vertical space and the content occupies the rest of the vertical space.</p>
<pre class="prettyprint">
// 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";
<p>You can modify the flex container appearance and behavior through the following properties:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">CONTENT_DIRECTION</span>
+<li><code>CONTENT_DIRECTION</code>
<p>This property specifies the primary direction in which content is ordered on a line.</p>
-<p class="figure">Figure: CONTENT_DIRECTION LTR</p>
+<p align="center"><strong>Figure: CONTENT_DIRECTION LTR</strong></p>
<p align="center"><img alt="CONTENT_DIRECTION LTR" src="../../../images/dali_flexcontainer_content-direction-ltr.png"/></p>
-<p class="figure">Figure: CONTENT_DIRECTION RTL</p>
+<p align="center"><strong>Figure: CONTENT_DIRECTION RTL</strong></p>
<p align="center"><img alt="CONTENT_DIRECTION RTL" src="../../../images/dali_flexcontainer_content-direction-rtl.png"/></p>
-
+
+<p align="center" class="Table"><strong>Table: CONTENT_DIRECTION values</strong></p>
<table>
-<caption>Table: CONTENT_DIRECTION values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INHERIT</span></td>
+ <td><code>INHERIT</code></td>
<td>Inherits the parent's direction</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LTR</span></td>
+ <td><code>LTR</code></td>
<td>From left to right</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">RTL</span></td>
+ <td><code>RTL</code></td>
<td>From right to left</td>
</tr>
</tbody>
</table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FLEX_DIRECTION</span>
+<li><code>FLEX_DIRECTION</code>
<p>This property specifies the direction of the main axis, which determines the direction in which the flex items are laid out.</p>
-<p class="figure">Figure: FLEX_DIRECTION</p>
+<p align="center"><strong>Figure: FLEX_DIRECTION</strong></p>
<p align="center"><img alt="FLEX_DIRECTION" src="../../../images/dali_flexcontainer_flex-direction.png"/></p>
+<p align="center" class="Table"><strong>Table: FLEX_DIRECTION values</strong></p>
<table>
-<caption>Table: FLEX_DIRECTION values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">COLUMN</span></td>
+ <td><code>COLUMN</code></td>
<td>Flex items are laid out vertically as a column</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">COLUMN_REVERSE</span></td>
+ <td><code>COLUMN_REVERSE</code></td>
<td>Flex items are laid out vertically as a column, but in a reverse order</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ROW</span></td>
+ <td><code>ROW</code></td>
<td>Flex items are laid out horizontally as a row</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ROW_REVERSE</span></td>
+ <td><code>ROW_REVERSE</code></td>
<td>Flex items are laid out horizontally as a row, but in a reverse order</td>
</tr>
</tbody>
</table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FLEX_WRAP</span>
+<li><code>FLEX_WRAP</code>
<p>This property specifies whether the flex items must wrap if there is not enough room for them on 1 flex line.</p>
-<p class="figure">Figure: FLEX_WRAP</p>
+<p align="center"><strong>Figure: FLEX_WRAP</strong></p>
<p align="center"><img alt="FLEX_WRAP" src="../../../images/dali_flexcontainer_flex-wrap.png"/></p>
+<p align="center" class="Table"><strong>Table: FLEX_WRAP values</strong></p>
<table>
-<caption>Table: FLEX_WRAP values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">NO_WRAP</span></td>
+ <td><code>NO_WRAP</code></td>
<td>Flex items laid out in a single line (shrunk to fit the flex container along the main axis)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">WRAP</span></td>
+ <td><code>WRAP</code></td>
<td>Flex items laid out in multiple lines, if needed</td>
</tr>
</tbody>
</table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_CONTENT</span>
+<li><code>JUSTIFY_CONTENT</code>
<p>This property specifies the alignment of flex items when they do not use all available space on the main axis.</p>
-<p class="figure">Figure: JUSTIFY_CONTENT</p>
+<p align="center"><strong>Figure: JUSTIFY_CONTENT</strong></p>
<p align="center"><img alt="JUSTIFY_CONTENT" src="../../../images/dali_flexcontainer_justify-content.png"/></p>
+<p align="center" class="Table"><strong>Table: JUSTIFY_CONTENT values</strong></p>
<table>
-<caption>Table: JUSTIFY_CONTENT values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_FLEX_START</span></td>
+ <td><code>JUSTIFY_FLEX_START</code></td>
<td>Items are positioned at the beginning of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_CENTER</span></td>
+ <td><code>JUSTIFY_CENTER</code></td>
<td>Items are positioned at the center of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_FLEX_END</span></td>
+ <td><code>JUSTIFY_FLEX_END</code></td>
<td>Items are positioned at the end of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_SPACE_BETWEEN</span></td>
+ <td><code>JUSTIFY_SPACE_BETWEEN</code></td>
<td>Items are positioned with equal space between the lines</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_SPACE_AROUND</span></td>
+ <td><code>JUSTIFY_SPACE_AROUND</code></td>
<td>Items are positioned with equal space before, between, and after the lines</td>
</tr>
</tbody>
</table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span>
+<li><code>ALIGN_ITEMS</code>
<p>This property specifies the alignment of flex items when they do not use all available space on the cross axis.</p>
-<p class="figure">Figure: ALIGN_ITEMS</p>
+<p align="center"><strong>Figure: ALIGN_ITEMS</strong></p>
<p align="center"><img alt="ALIGN_ITEMS" src="../../../images/dali_flexcontainer_align-items.png"/></p>
+<p align="center" class="Table"><strong>Table: ALIGN_ITEMS values</strong></p>
<table>
-<caption>Table: ALIGN_ITEMS values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_START</span></td>
+ <td><code>ALIGN_FLEX_START</code></td>
<td>Items are aligned at the beginning of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_CENTER</span></td>
+ <td><code>ALIGN_CENTER</code></td>
<td>Items are aligned at the center of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_END</span></td>
+ <td><code>ALIGN_FLEX_END</code></td>
<td>Items are aligned at the end of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_STRETCH</span></td>
+ <td><code>ALIGN_STRETCH</code></td>
<td>Items are stretched to fit the container</td>
</tr>
</tbody>
</table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_CONTENT</span>
+<li><code>ALIGN_CONTENT</code>
<p>This property specifies the alignment of flex lines when they do not use all available space on the cross axis, so only works when there are multiple lines.</p>
-<p class="figure">Figure: ALIGN_CONTENT</p>
+<p align="center"><strong>Figure: ALIGN_CONTENT</strong></p>
<p align="center"><img alt="ALIGN_CONTENT" src="../../../images/dali_flexcontainer_align-content.png"/></p>
+<p align="center" class="Table"><strong>Table: ALIGN_CONTENT values</strong></p>
<table>
-<caption>Table: ALIGN_CONTENT values</caption>
<tbody>
<tr>
<th>Property value</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_START</span></td>
+ <td><code>ALIGN_FLEX_START</code></td>
<td>Items are aligned at the beginning of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_CENTER</span></td>
+ <td><code>ALIGN_CENTER</code></td>
<td>Items are aligned at the center of the container</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_END</span></td>
+ <td><code>ALIGN_FLEX_END</code></td>
<td>Items are aligned at the end of the container</td>
</tr>
</tbody>
<p>The flex item properties are non-animatable properties registered dynamically to each child that is to be added to the flex container, and once added, their values cannot be changed. When an actor is added to the flex container, these properties are checked to decide how to lay out the actor inside the flex container.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">FLEX</span>
+<li><code>FLEX</code>
-<p>By default, the items in the flex container are not flexible. If set, this property makes the item flexible, which means the item can alter its width and height in order to receive the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes are proportional to the specified flex factor. Flex items do not shrink below their minimum size (if set using the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetMinimumSize()</span> function).</p>
+<p>By default, the items in the flex container are not flexible. If set, this property makes the item flexible, which means the item can alter its width and height in order to receive the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes are proportional to the specified flex factor. Flex items do not shrink below their minimum size (if set using the <code>Dali::Actor::SetMinimumSize()</code> function).</p>
-<p class="figure">Figure: FLEX</p>
+<p align="center"><strong>Figure: FLEX</strong></p>
<p align="center"><img alt="FLEX" src="../../../images/dali_flexcontainer_flex.png"/></p>
<p>The following example shows how the items achieve the proportion of free space as illustrated in the above figure:</p>
// 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();
flexContainer.Add( item5 );
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_SELF</span>
+<li><code>ALIGN_SELF</code>
-<p>This property specifies how the item aligns along the cross axis. If set, this property overrides the default alignment for all items defined by the container's <span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span> property.</p>
-<p class="figure">Figure: ALIGN_SELF</p>
+<p>This property specifies how the item aligns along the cross axis. If set, this property overrides the default alignment for all items defined by the container's <code>ALIGN_ITEMS</code> property.</p>
+<p align="center"><strong>Figure: ALIGN_SELF</strong></p>
<p align="center"><img alt="ALIGN_SELF" src="../../../images/dali_flexcontainer_align-self.png"/></p>
<p>The following example shows how the items achieve the alignment on the cross axis as illustrated in the above figure:</p>
// 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 );
-// 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::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 );
// 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
flexContainer.Add( item4 );
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FLEX_MARGIN</span>
+<li><code>FLEX_MARGIN</code>
<p>Each flex item inside the flex container is treated as a box (in CSS term) that is made up of:</p>
<li>Flex margin: The space outside the border
</li>
</ul>
-<p class="figure">Figure: FLEX_MARGIN</p>
+<p align="center"><strong>Figure: FLEX_MARGIN</strong></p>
<p align="center"><img alt="FLEX_MARGIN" src="../../../images/dali_flexcontainer_flex-margin.png"/></p>
<p>In DALi, the size of the flex item = content size + padding + border. The flex margin specifies the space around the flex item.</p>
// 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>
<p>DALi widely adopts the handle/body pattern (also known as the pimpl pattern), which separates the implementation details (body class) from its interface (handle class).</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications) is a base class for handle classes in DALi. It additionally provides smart-pointer semantics, which manage internal objects with reference counts. Most of the classes in the DALi public API are handle classes, which means they inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class.</p>
+<p>The <code>Dali::BaseHandle</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications) is a base class for handle classes in DALi. It additionally provides smart-pointer semantics, which manage internal objects with reference counts. Most of the classes in the DALi public API are handle classes, which means they inherit from the <code>Dali::BaseHandle</code> class.</p>
<p>The handle/body pattern structure is beneficial for both DALi users and developers:</p>
<ul>
<li><strong>Easier memory management</strong>
- <p>Each internal implementation class (body class) contains a single reference count object, which can be initialized with the static "New" functions in the DALi public API. This means that C++ new/delete operators do not have to be used in your code. (The internal body classes inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseObject</span> class, but you do not need to use this class directly.)</p>
+ <p>Each internal implementation class (body class) contains a single reference count object, which can be initialized with the static "New" functions in the DALi public API. This means that C++ new/delete operators do not have to be used in your code. (The internal body classes inherit from the <code>Dali::BaseObject</code> class, but you do not need to use this class directly.)</p>
</li>
<li><strong>Better encapsulation</strong>
<p>The danger of API/ABI breaks is reduced, since the implementation of a class can be changed without modifying the public API, thus without recompiling code using the public API. This can also reduce the build time.</p>
void AnimationTest::Initialize()
{
- mAnimation = Animation::New( 10.0f ); // Reference count is 1, the animation object stays alive when the function returns
+ // Reference count is 1, the animation object stays alive when the function returns
+ mAnimation = Animation::New( 10.0f );
}
void AnimationTest::SetAnimation( Animation anim )
{
- mAnimation = anim; // Reference count of the original animation decreased, 'anim' is referenced instead
- // If nobody else had a reference on the initial animation, the object is destroyed
+ // Reference count of the original animation decreased,
+ // 'anim' is referenced instead
+ // If nobody else had a reference on the initial animation,
+ // the object is destroyed
+ mAnimation = anim;
}
</pre>
}
// Exit the code block
// At this stage, the text label is still alive
-// You do not keep the handle to the text label, but it can be retrieved from the container
+// You do not keep the handle to the text label,
+// but it can be retrieved from the container
</pre>
</li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>ImageView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> component displays an image.</p>
+<p>The <code>Dali::Toolkit::ImageView</code> component displays an image.</p>
-<p class="figure">Figure: ImageView</p>
+<p align="center"><strong>Figure: ImageView</strong></p>
<p align="center"><img alt="ImageView" src="../../../images/image_view.png"/></p>
<h2 id="create" name="create">Creating an ImageView</h2>
-<p>The image view is constructed by passing a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ImageView</span> object:</p>
+<p>The image view is constructed by passing a <code>Dali::Image</code> object. The <code>Dali::Image</code> is an abstract base class with multiple derived classes, and the <code>Dali::ResourceImage</code> class is used for <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <code>ImageView</code> object:</p>
<pre class="prettyprint">
ImageView imageView = ImageView::New( myImageURL );
<h2 id="change" name="change">Changing the Image</h2>
-<p>The image object can be changed later on by calling the <span style="font-family: Courier New,Courier,monospace;">ImageView::SetImage()</span> function:</p>
+<p>The image object can be changed later on by calling the <code>ImageView::SetImage()</code> function:</p>
<pre class="prettyprint">
imageView.SetImage( newImage );
<div id="container"><div id="contents"><div class="content">
<h1>ItemView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
+<p>The <code>Dali::Toolkit::ItemView</code> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
-<p class="figure">Figure: ItemView layouts</p>
+<p align="center"><strong>Figure: ItemView layouts</strong></p>
<table >
<tbody>
</tr>
</tbody>
</table>
-<p>You can also create your own custom layout by inheriting from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemLayout</span> class.</p>
+<p>You can also create your own custom layout by inheriting from the <code>Dali::Toolkit::ItemLayout</code> class.</p>
<h2 id="factory" name="factory">Implementing ItemFactory</h2>
-<p>To create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> instance, you must create your own <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class by deriving from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemFactory</span> class and providing its instance to the <span style="font-family: Courier New,Courier,monospace;">ItemView::New()</span> function. <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> is an abstract class having 2 pure virtual member functions to create items and get the number of created items. The following basic example shows how to implement an <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class:</p>
+<p>To create a <code>Dali::Toolkit::ItemView</code> instance, you must create your own <code>ItemFactory</code> class by deriving from the <code>Dali::Toolkit::ItemFactory</code> class and providing its instance to the <code>ItemView::New()</code> function. <code>ItemFactory</code> is an abstract class having 2 pure virtual member functions to create items and get the number of created items. The following basic example shows how to implement an <code>ItemFactory</code> class:</p>
<pre class="prettyprint">
class MyFactory : public ItemFactory
virtual Actor NewItem( unsigned int itemId )
{
- // Create the actor representing the item based on the itemId
+ // Create the actor representing
+ // the item based on the itemId
return ImageView::New( MY_IMAGE_PATHS[itemId] );
}
};
</pre>
-<p>The overridden functions in the derived class are called by the <span style="font-family: Courier New,Courier,monospace;">ItemView</span> object.</p>
+<p>The overridden functions in the derived class are called by the <code>ItemView</code> object.</p>
<h2 id="create" name="create">Creating an ItemView</h2>
-<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> object:</p>
+<p>The following basic example shows how to create a <code>Dali::Toolkit::ItemView</code> object:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
<p>DALi provides rule-based layout management (size negotiation), which is used to allocate the actor sizes on the stage based on the dependency rules between the actors.</p>
<h2 id="dimension" name="dimension">Dimensions</h2>
-<p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <
span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dali::Dimension::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">wearable</a> applications) specifies the available dimensions as bit fields:</p>
+<p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <
code>Dimension</code> parameter. The <code>Dali::Dimension::Type</code> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">wearable</a> applications) specifies the available dimensions as bit fields:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>
+<li><code>Dimension::WIDTH</code></li>
+<li><code>Dimension::HEIGHT</code></li>
</ul>
-<p>If a function can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p>
+<p>If a function can process width and height at the same time, the <code>Dimension::ALL_DIMENSIONS</code> mask can be specified.</p>
<h2 id="resize" name="resize">Resize Policies</h2>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::ResizePolicy::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">wearable</a> applications) specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
+<p>The <
code>Dali::ResizePolicy::Type</code> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">wearable</a> applications) specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
+<p align="center" class="Table"><strong>Table: Resizing rules</strong></p>
<table>
- <caption>
- Table: Resizing rules
- </caption>
<tbody>
<tr>
<th>Resize policy</th>
<th>Illustration</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>
- <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>
+ <td><code>ResizePolicy::FIXED</code></td>
+ <td>Use this option to maintain a specific size as set by the <code>SetSize()</code> function. This is the default for all actors.</td>
<td style="text-align:center;"><img alt="captured screen2" src="../../../images/fixed.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>
+ <td><code>ResizePolicy::USE_NATURAL_SIZE</code></td>
<td>Use this option for objects, such as images or text, to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>
<td style="text-align:center;"><img alt="captured screen2" src="../../../images/use_natural_size.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>
+ <td><code>ResizePolicy::FILL_TO_PARENT</code></td>
<td>The size of the actor is similar to its parent's size with proportionate filling considered.</td>
<td style="text-align:center;"><img alt="captured screen2" src="../../../images/fill_to_parent.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>
- <td>The size of the actor is similar to its parent's size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>
+ <td><code>ResizePolicy::SIZE_RELATIVE_TO_PARENT</code></td>
+ <td>The size of the actor is similar to its parent's size with a relative scale. Use the <code>SetSizeModeFactor()</code> function to specify the ratio.</td>
<td style="text-align:center;"></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>
- <td>The size of the actor is similar to its parent's size with a fixed offset using the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function.</td>
+ <td><code>ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</code></td>
+ <td>The size of the actor is similar to its parent's size with a fixed offset using the <code>SetSizeModeFactor()</code> function.</td>
<td style="text-align:center;"></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>
+ <td><code>ResizePolicy::FIT_TO_CHILDREN</code></td>
<td>The size of the actor is scaled around the size of its children. For example, the height of a pop-up can be resized according to its content.</td>
<td style="text-align:center;"><img alt="captured screen2" src="../../../images/fit_to_children.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>
+ <td><code>ResizePolicy::DIMENSION_DEPENDENCY</code></td>
<td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>
<td style="text-align:center;"><img alt="captured screen2" src="../../../images/dimension_dependency.png" /></td>
</tr>
<h3>Specifying Size Policies</h3>
-<p>Actors have different size policies by default. For example, the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image view, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p>
+<p>Actors have different size policies by default. For example, the <code>Dali::Toolkit::ImageView</code> is set to <code>USE_NATURAL_SIZE</code>. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the <code>SetSize()</code> function is used with sizes other than 0 on the image view, the current resize policy is overridden by the <code>FIXED</code> policy and the actor takes the specified size.</p>
-<p>You can specify how an actor is size-negotiated using the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p>
+<p>You can specify how an actor is size-negotiated using the <code>SetResizePolicy()</code> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p>
-<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">control</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has the <span style="font-family: Courier New,Courier,monospace;">imageView</span> added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> in both dimensions. This creates the <span style="font-family: Courier New,Courier,monospace;">control</span> that fills the space of its parent in the width dimension and fits its child in the height dimension. As the <span style="font-family: Courier New,Courier,monospace;">imageView</span> child is using its natural size, the height of the <span style="font-family: Courier New,Courier,monospace;">control</span> fits the height of the child image.</p>
+<p>The following example shows the <code>control</code> with its width set to <code>ResizePolicy::FILL_TO_PARENT</code> and its height set to <code>ResizePolicy::FIT_TO_CHILDREN</code>. It has the <code>imageView</code> added to it with an explicit call to <code>USE_NATURAL_SIZE</code> in both dimensions. This creates the <code>control</code> that fills the space of its parent in the width dimension and fits its child in the height dimension. As the <code>imageView</code> child is using its natural size, the height of the <code>control</code> fits the height of the child image.</p>
<pre class="prettyprint">
Control control = Control::New();
<p>The following figure shows the before and after layouts for this code example.</p>
-<p class="figure">Figure: Before and after setting the resize policy</p>
+<p align="center"><strong>Figure: Before and after setting the resize policy</strong></p>
<p align="center"><img alt="Before and after setting the resize policy" src="../../../images/before_resize.png"/> <img alt="Before and after setting the resize policy" src="../../../images/after_resize.png"/></p>
<h3>Adjusting the Negotiated Size</h3>
-<p>When an actor must maintain the aspect ratio of its natural size, use the <
span style="font-family: Courier New,Courier,monospace;">SetSizeScalePolicy()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Dali::SizeScalePolicy::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">wearable</a> applications). This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
+<p>When an actor must maintain the aspect ratio of its natural size, use the <
code>SetSizeScalePolicy()</code> function with the <code>Dali::SizeScalePolicy::Type</code> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">wearable</a> applications). This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
<p>You can use the following resize policies:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>
+<li><code>SizeScalePolicy::USE_SIZE_SET</code>
<p>This is the default policy.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>
+<li><code>SizeScalePolicy::FIT_WITH_ASPECT_RATIO</code>
<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>
+<li><code>SizeScalePolicy::FILL_WITH_ASPECT_RATIO</code>
<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>
</ul>
<h3>Using Actors in Containers</h3>
-<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor with the <span style="font-family: Courier New,Courier,monospace;">SetPadding()</span> function. The padding specifies the left, right, bottom, and top padding value.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Beware of infinite dependency loops!
-<p>For example, when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, an infinite loop occurs.</p>
-<p>Similarly, consider a situation where a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. If the parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width, and the child's width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>
-<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates the actors 0 sizes.</p> </td>
- </tr>
- </tbody>
- </table>
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor with the <code>SetPadding()</code> function. The padding specifies the left, right, bottom, and top padding value.</p>
+<div class="note">
+ <strong>Note</strong>
+ Beware of infinite dependency loops!
+<p>For example, when the resize policy of a parent actor is set to <code>ResizePolicy::FIT_TO_CHILDREN</code> with a child that has a resize policy of <code>ResizePolicy::FILL_TO_PARENT</code>, an infinite loop occurs.</p>
+<p>Similarly, consider a situation where a parent actor has a width policy of <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with a height policy of <code>ResizePolicy::FIT_TO_CHILDREN</code>. If the parent has a single child with a height policy <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with width, and the child's width policy is <code>ResizePolicy::FILL_TO_PARENT</code>, a loop occurs.</p>
+<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates the actors 0 sizes.</p>
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Model3dView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Model3dView</span> is a control for displaying static 3D content. It is capable of reading <span style="font-family: Courier New,Courier,monospace;">.obj</span> and <span style="font-family: Courier New,Courier,monospace;">.mtl</span> files, and up to 3 textures, with a single light and 3 simple illumination types.</p>
+<p>The <code>Dali::Toolkit::Model3dView</code> is a control for displaying static 3D content. It is capable of reading <code>.obj</code> and <code>.mtl</code> files, and up to 3 textures, with a single light and 3 simple illumination types.</p>
-<p>The OBJ or <span style="font-family: Courier New,Courier,monospace;">.obj</span> (object) file is a geometry definition file format and the MTL or <span style="font-family: Courier New,Courier,monospace;">.mtl</span> (material) file contains one or more material definitions, each of which includes the color, texture, and reflection map of individual materials.</p>
+<p>The OBJ or <code>.obj</code> (object) file is a geometry definition file format and the MTL or <code>.mtl</code> (material) file contains one or more material definitions, each of which includes the color, texture, and reflection map of individual materials.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> control automatically scales the loaded geometry to fit within its size boundary.</p>
+<p>The <code>Model3dView</code> control automatically scales the loaded geometry to fit within its size boundary.</p>
<h2 id="create">Creating a Model3dView</h2>
-<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Model3dView</span> object:</p>
+<p>The following basic example shows how to create a <code>Dali::Toolkit::Model3dView</code> object:</p>
<pre class="prettyprint">
-// You must define the path to the geometry and material files, and the images directory
+// You must define the path to the geometry and
+// material files, and the images directory
Model3dView model3dView = Model3dView::New( MODEL_FILE, MATERIAL_FILE, IMAGE_PATH );
model3dView.SetParentOrigin( ParentOrigin::CENTER );
model3dView.SetAnchorPoint( AnchorPoint::CENTER );
<h2 id="property">Modifying Model3dView Properties</h2>
-<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> appearance and behavior through its properties. To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The resource properties require absolute references as their paths. However, the root resource path for your application can be obtained through the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function of the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications), and relative paths can be appended to that root path. If you want to use relative paths, you must specify them in your build files.</td>
- </tr>
- </tbody>
- </table>
+<p>You can modify the <code>Model3dView</code> appearance and behavior through its properties. To change a property from its default value, use the <code>SetProperty()</code> function.</p>
+
+ <div class="note">
+ <strong>Note</strong>
+ The resource properties require absolute references as their paths. However, the root resource path for your application can be obtained through the <code>app_get_resource_path()</code> function of the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications), and relative paths can be appended to that root path. If you want to use relative paths, you must specify them in your build files.
+ </div>
-<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> properties.</p>
+<p>The following table lists the available <code>Model3dView</code> properties.</p>
+<p align="center" class="Table"><strong>Table: Model3dView properties</strong></p>
<table>
- <caption>Table: Model3dView properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Descriptions</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GEOMETRY_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>GEOMETRY_URL</code></td>
+ <td><code>String</code></td>
<td>Location of the geometry resource (the OBJ file)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MATERIAL_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>MATERIAL_URL</code></td>
+ <td><code>String</code></td>
<td>Location of the material resource (the MTL file) to render the object with a material</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">IMAGES_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>IMAGES_URL</code></td>
+ <td><code>String</code></td>
<td>Location of the images directory</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ILLUMINATION_TYPE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td><code>ILLUMINATION_TYPE</code></td>
+ <td><code>Integer</code></td>
<td>Type of illumination</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE0_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>TEXTURE0_URL</code></td>
+ <td><code>String</code></td>
<td>Path to the first texture (diffuse texture)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE1_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>TEXTURE1_URL</code></td>
+ <td><code>String</code></td>
<td>Path to the second texture (normal map)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE2_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>TEXTURE2_URL</code></td>
+ <td><code>String</code></td>
<td>Path to the third texture (gloss texture)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LIGHT_POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector3</span></td>
+ <td><code>LIGHT_POSITION</code></td>
+ <td><code>Vector3</code></td>
<td>Coordinates of the light</td>
</tr>
</tbody>
</table>
-<p>The MTL material file references the texture files using a relative path. The <span style="font-family: Courier New,Courier,monospace;">IMAGES_URL</span> property is used to define the location of the root of this path. The textures are set automatically when the material URL is loaded.</p>
+<p>The MTL material file references the texture files using a relative path. The <code>IMAGES_URL</code> property is used to define the location of the root of this path. The textures are set automatically when the material URL is loaded.</p>
<h2 id="model">Specifying the Illumination Model</h2>
<p>The following table illustrates the available illumination models.</p>
+ <p align="center" class="Table"><strong>Table: Available illumination models</strong></p>
<table>
- <caption>
- Table: Available illumination models</caption>
<tbody>
<tr>
<th>Illumination type</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE</span></td>
+ <td><code>DIFFUSE</code></td>
<td>Render the model with simple lighting using the actor color</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_TEXTURE</span></td>
+ <td><code>DIFFUSE_WITH_TEXTURE</code></td>
<td>Render the model with specular highlighting on the supplied diffuse and gloss textures</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_NORMAL_MAP</span></td>
+ <td><code>DIFFUSE_WITH_NORMAL_MAP</code></td>
<td>Render the model with specular highlighting with the supplied diffuse, gloss, and normal map textures</td>
</tr>
</tbody>
</table>
-<p>Each of the illumination models takes account of the light position, which can be specified using the <span style="font-family: Courier New,Courier,monospace;">Model3dView::Property::LIGHT_POSITION</span> property. To position the light in front of the 3D model, give it a positive Z value.</p>
+<p>Each of the illumination models takes account of the light position, which can be specified using the <code>Model3dView::Property::LIGHT_POSITION</code> property. To position the light in front of the 3D model, give it a positive Z value.</p>
-<p>The following figure illustrates the illumination models: <span style="font-family: Courier New,Courier,monospace;">DIFFUSE</span> (top left), <span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_TEXTURE</span> (top right), and <span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_NORMAL_MAP</span> (bottom).</p>
+<p>The following figure illustrates the illumination models: <code>DIFFUSE</code> (top left), <code>DIFFUSE_WITH_TEXTURE</code> (top right), and <code>DIFFUSE_WITH_NORMAL_MAP</code> (bottom).</p>
-<p class="figure">Figure: Illumination models</p>
+<p align="center"><strong>Figure: Illumination models</strong></p>
<p align="center"><img alt="DIFFUSE model" src="../../../images/dali_model1.png"/> <img alt="DIFFUSE_WITH_TEXTURE model" src="../../../images/dali_model2.png"/></p>
<p align="center"><img alt="DIFFUSE_WITH_NORMAL_MAP model" src="../../../images/dali_model3.png"/></p>
<li><strong>Resource thread</strong>: Loads images and decodes them into bitmaps.</li>
</ul>
-<p class="figure">Figure: DALi thread architecture</p>
+<p align="center"><strong>Figure: DALi thread architecture</strong></p>
<p align="center"><img alt="DALi thread architecture" src="../../../images/dali_threads.png"/></p>
<p>The following figure shows an actor hierarchy, in which one of the actors is being animated. The green objects in are created by the application code, while the blue private objects are used in the dedicated render thread.</p>
-<p class="figure">Figure: Actor hierarchy with an animation</p>
+<p align="center"><strong>Figure: Actor hierarchy with an animation</strong></p>
<p align="center"><img alt="Actor hierarchy with an animation" src="../../../images/multi_threading2.png"/></p>
<h3 id="read" name="read">Reading an Animated Value</h3>
<p>When a property is animatable, it can only be modified in the render thread. The value returned from a getter function is the value used when the previous frame was rendered.</p>
-<p>For example, the <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function returns the position in which the actor was last rendered. Since the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function is asynchronous, a call to <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function does not immediately return the same value.</p>
+<p>For example, the <code>GetCurrentPosition()</code> function returns the position in which the actor was last rendered. Since the <code>SetPosition()</code> function is asynchronous, a call to <code>GetCurrentPosition()</code> function does not immediately return the same value.</p>
<pre class="prettyprint">
Actor actor = Actor::New();
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>
<h3 id="set" name="set">Setting a Property during an Animation</h3>
-<p>When a property is being animated, the animation overrides all values set with other functions, such as the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</p>
+<p>When a property is being animated, the animation overrides all values set with other functions, such as the <code>SetPosition()</code> function.</p>
-<p class="figure">Figure: Actor hierarchy with an animated property</p>
+<p align="center"><strong>Figure: Actor hierarchy with an animated property</strong></p>
<p align="center"><img alt="Actor hierarchy with an animated property" src="../../../images/multi_threading.png"/></p>
<p>The order of execution in the render thread is:</p>
<ol>
-<li>Process the message and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</li>
-<li>Apply the animation and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</li>
+<li>Process the message and call the <code>SetPosition()</code> function.</li>
+<li>Apply the animation and call the <code>SetPosition()</code> function.</li>
<li>Render the frame.</li>
</ol>
<div id="container"><div id="contents"><div class="content">
<h1>Properties</h1>
-<p>A property is a value used by an object. It can be modified or read using the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetProperty()</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::SetProperty()</span> functions.</p>
+<p>A property is a value used by an object. It can be modified or read using the <code>Dali::Handle::GetProperty()</code> or <code>Dali::Handle::SetProperty()</code> functions.</p>
<p>The difference between properties and ordinary C++ member variables is that a property can be dynamically added to or removed from an existing object at runtime, enabling more flexible, script-like programming with DALi.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications) provides functions to manage properties. Because of this, the DALi classes that inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (most of classes that you use) have a number of predefined properties and can have any number of user-defined custom properties.
+<p>The <code>Dali::Handle</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications) provides functions to manage properties. Because of this, the DALi classes that inherit from the <code>Dali::Handle</code> class (most of classes that you use) have a number of predefined properties and can have any number of user-defined custom properties.
</p>
<h2 id="access" name="access">Accessing Property Values</h2>
- <p>Property values of an object can usually be accessed in 2 ways: by its class member functions or by property getters and setters (<span style="font-family: Courier New,Courier,monospace;">GetProperty()</span> and <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class).</p>
- <p>For example, the following table lists the predefined properties of the <
span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications).</p>
+ <p>Property values of an object can usually be accessed in 2 ways: by its class member functions or by property getters and setters (<code>GetProperty()</code> and <code>SetProperty()</code> function of the <code>Dali::Handle</code> class).</p>
+ <p>For example, the following table lists the predefined properties of the <
code>Dali::Actor</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications).</p>
+<p align="center" class="Table"><strong>Table: Dali::Actor properties</strong></p>
<table>
- <caption>
- Table: Dali::Actor properties
- </caption>
<tbody>
<tr>
<th>Property index (enumeration)</th>
<th>Member functions</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentPosition()</span> / <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span></td>
+ <td><code>Dali::Actor::POSITION</code></td>
+ <td><code>Dali::Actor::GetCurrentPosition()</code> / <code>SetPosition()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentOrientation()</span> / <span style="font-family: Courier New,Courier,monospace;">SetOrientation()</span></td>
+ <td><code>Dali::Actor::ORIENTATION</code></td>
+ <td><code>Dali::Actor::GetCurrentOrientation()</code> / <code>SetOrientation()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentSize()</span> / <span style="font-family: Courier New,Courier,monospace;">SetSize()</span></td>
+ <td><code>Dali::Actor::SIZE</code></td>
+ <td><code>Dali::Actor::GetCurrentSize()</code> / <code>SetSize()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentColor()</span> / <span style="font-family: Courier New,Courier,monospace;">SetColor()</span></td>
+ <td><code>Dali::Actor::COLOR</code></td>
+ <td><code>Dali::Actor::GetCurrentColor()</code> / <code>SetColor()</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetName()</span> / <span style="font-family: Courier New,Courier,monospace;">SetName()</span></td>
+ <td><code>Dali::Actor::NAME</code></td>
+ <td><code>Dali::Actor::GetName()</code> / <code>SetName()</code></td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
Actor actor = Actor::New();
actor.SetProperty( Actor::Property::NAME, "test actor" );
-std::cout << actor.GetProperty( Actor::Property::NAME ) << std::endl; // "test actor"
-std::cout << actor.GetProperty<std::string>( Actor::Property::NAME ) << std::endl; // "test actor"
-std::cout << actor.GetProperty( Actor::Property::NAME ).Get<std::string>() << std::endl; // "test actor"
+// "test actor"
+std::cout << actor.GetProperty( Actor::Property::NAME ) << std::endl;
+// "test actor"
+std::cout << actor.GetProperty<std::string>( Actor::Property::NAME ) << std::endl;
+// "test actor"
+std::cout << actor.GetProperty( Actor::Property::NAME ).Get<std::string>() << std::endl;
</pre>
<h3>Registering User-defined Custom Properties to Objects</h3>
-<p>Properties can be registered and deregistered at runtime using the functions of the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class. This enables script-like programming in the DALi application, such as adding custom member data to an instance of a DALi class without subclassing the class or maintaining another pool of custom data.</p>
-<p>For example, you can set your own custom data to <span style="font-family: Courier New,Courier,monospace;">PushButton</span> objects and use them later when the buttons are clicked:</p>
+<p>Properties can be registered and deregistered at runtime using the functions of the <code>Dali::Handle</code> class. This enables script-like programming in the DALi application, such as adding custom member data to an instance of a DALi class without subclassing the class or maintaining another pool of custom data.</p>
+<p>For example, you can set your own custom data to <code>PushButton</code> objects and use them later when the buttons are clicked:</p>
<pre class="prettyprint">
void Create( Application& application )
{
// Register a custom property having button index
// Store the property index so you can look it up later
- // Note: This is much faster than looking the property up by property name and must be used if possible
- // As all control types are the same (PushButtons), the indices to the unique custom property are all same
+ // Note: This is much faster than looking the property up by property name
+ // and must be used if possible
+ // As all control types are the same (PushButtons),
+ // the indices to the unique custom property are all same
Property::Value data( i );
mCustomDataIndex = button.RegisterProperty( "custom-data", data );
<h3>Animating Objects</h3>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">wearable</a> applications) is used to <a href="animation_n.htm">animate the properties</a> of any number of objects.</p>
+<p>The <
code>Dali::Animation</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">wearable</a> applications) is used to <a href="animation_n.htm">animate the properties</a> of any number of objects.</p>
-<p>For example, the following code animates the value of the <span style="font-family: Courier New,Courier,monospace;">POSITION</span> property of a radio button to (100.0, 200.0, 0.0) for 2 seconds:</p>
+<p>For example, the following code animates the value of the <code>POSITION</code> property of a radio button to (100.0, 200.0, 0.0) for 2 seconds:</p>
<pre class="prettyprint">
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>
<h3>Imposing Constraints on Objects</h3>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications) is used to <a href="constraints_n.htm">modify the property of an object based on other properties of other objects</a>.</p>
+<p>The <
code>Dali::Constraint</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications) is used to <a href="constraints_n.htm">modify the property of an object based on other properties of other objects</a>.</p>
-<p>For example, the following code makes the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of an actor the same as the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of its parent actor:</p>
+<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>
<ul>
<li>Index: Enumeration number indicating the property. The property index is usually used to access properties.</li>
- <li>Type: Type of the property. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyType()</span> function.</li>
+ <li>Type: Type of the property. Retrieved with the <code>Dali::Handle::GetPropertyType()</code> function.</li>
- <li>Name: Name of the property. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyName()</span> function.</li>
+ <li>Name: Name of the property. Retrieved with the <code>Dali::Handle::GetPropertyName()</code> function.</li>
- <li>Writable: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property value can be written. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyWritable()</span> function.</li>
+ <li>Writable: If <code>true</code>, the property value can be written. Retrieved with the <code>Dali::Handle::IsPropertyWritable()</code> function.</li>
- <li>Animatable: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property can be animated using the <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAnimatable()</span> function.</li>
+ <li>Animatable: If <code>true</code>, the property can be animated using the <code>Dali::Animation</code> class. Retrieved with the <code>Dali::Handle::IsPropertyAnimatable()</code> function.</li>
- <li>Constraint-Input: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property can be used as constraint input. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAConstraintInput()</span> function.</li>
+ <li>Constraint-Input: If <code>true</code>, the property can be used as constraint input. Retrieved with the <code>Dali::Handle::IsPropertyAConstraintInput()</code> function.</li>
</ul>
-<p>The following table lists the type and name attributes of the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> properties.</p>
-
+<p>The following table lists the type and name attributes of the <code>Dali::Actor</code> properties.</p>
+<p align="center" class="Table"><strong>Table: Dali::Actor property attributes</strong></p>
<table>
- <caption>
- Table: Dali::Actor property attributes
- </caption>
<tbody>
<tr>
<th>Property index (enumeration)</th>
<th>Property name</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
+ <td><code>Dali::Actor::POSITION</code></td>
<td>Vector3</td>
<td>"position"</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
+ <td><code>Dali::Actor::ORIENTATION</code></td>
<td>Quaternion</td>
<td>"orientation"</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
+ <td><code>Dali::Actor::SIZE</code></td>
<td>Vector3</td>
<td>"size"</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
+ <td><code>Dali::Actor::COLOR</code></td>
<td>Vector4</td>
<td>"color"</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
+ <td><code>Dali::Actor::NAME</code></td>
<td>std::string</td>
<td>"name"</td>
</tr>
</tbody>
</table>
-<p>For more information about properties, see the API reference of each class. For example, for the <
span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::Property</span> struct (in <a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Actor_1_1Property.html">wearable</a> applications). For information on the supported property types, see <span style="font-family: Courier New,Courier,monospace;">Dali::Property::Type</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">Dali::PropertyTypes</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1PropertyTypes.html">wearable</a> applications).</p>
+<p>For more information about properties, see the API reference of each class. For example, for the <
code>Dali::Actor</code> class, see the <code>Dali::Actor::Property</code> struct (in <a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Actor_1_1Property.html">wearable</a> applications). For information on the supported property types, see <code>Dali::Property::Type</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">wearable</a> applications) and <code>Dali::PropertyTypes</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1PropertyTypes.html">wearable</a> applications).</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>DALi provides stereoscopic viewing modes, and supports the following viewing modes:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">MONO</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span></li>
+<li><code>MONO</code></li>
+<li><code>STEREO_HORIZONTAL</code></li>
+<li><code>STEREO_VERTICAL</code></li>
</ul>
-<p><span style="font-family: Courier New,Courier,monospace;">MONO</span> is the default viewing mode. When using the <span style="font-family: Courier New,Courier,monospace;">MONO</span> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>
+<p><code>MONO</code> is the default viewing mode. When using the <code>MONO</code> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> and <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as "parallel axis asymmetric frustum perspective projection" and is illustrated in the following figure.</p>
+<p>The <code>STEREO_HORIZONTAL</code> and <code>STEREO_VERTICAL</code> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as "parallel axis asymmetric frustum perspective projection" and is illustrated in the following figure.</p>
-<p class="figure">Figure: Stereoscopic projection</p>
+<p align="center"><strong>Figure: Stereoscopic projection</strong></p>
<p align="center"><img alt="Stereoscopic projection" src="../../../images/stereo_projection.png"/></p>
<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be "into" the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>
<p>To view stereoscopic images correctly, each image must be presented to each eye independently. There are devices on the market for this, such as a head-mounted display, which is a display device worn in the head that has 2 small displays, one for each eye. A cheaper alternative to this often expensive device is the Google cardboard viewer.</p>
-<p class="figure">Figure: Google cardboard viewer</p>
+<p align="center"><strong>Figure: Google cardboard viewer</strong></p>
<p align="center"><img alt="Google cardboard viewer" src="../../../images/google_cardboard.png"/></p>
<p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>
<h2 id="stereo" name="stereo">Stereoscopic Rendering in DALi</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>
+<p>The <code>STEREO_HORIZONTAL</code> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <code>STEREO_VERTICAL</code> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>
-<p>To define the viewing mode to be used, use the <span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Application</span> class, passing the mode as a parameter. You can query the view mode being used by calling the <span style="font-family: Courier New,Courier,monospace;">GetViewMode()</span> function. To define the separation between the left and right cameras, use the <span style="font-family: Courier New,Courier,monospace;">SetStereoBase()</span> function, passing the distance in millimeters as a parameter. This distance can be queried using the <span style="font-family: Courier New,Courier,monospace;">GetStereoBase()</span> function. You can also set the viewing mode and offset at initialization time using 2 command line arguments for this purpose: <span style="font-family: Courier New,Courier,monospace;">-view-mode</span> (or <span style="font-family: Courier New,Courier,monospace;">-v</span>) and <span style="font-family: Courier New,Courier,monospace;">0</span> for <span style="font-family: Courier New,Courier,monospace;">MONO</span>, <span style="font-family: Courier New,Courier,monospace;">1</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span>, <span style="font-family: Courier New,Courier,monospace;">2</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span>, and <span style="font-family: Courier New,Courier,monospace;">-stereo-base</span> (or <span style="font-family: Courier New,Courier,monospace;">-s</span>) and the separation in millimeters.</p>
+<p>To define the viewing mode to be used, use the <code>SetViewMode()</code> function of the <code>Application</code> class, passing the mode as a parameter. You can query the view mode being used by calling the <code>GetViewMode()</code> function. To define the separation between the left and right cameras, use the <code>SetStereoBase()</code> function, passing the distance in millimeters as a parameter. This distance can be queried using the <code>GetStereoBase()</code> function. You can also set the viewing mode and offset at initialization time using 2 command line arguments for this purpose: <code>-view-mode</code> (or <code>-v</code>) and <code>0</code> for <code>MONO</code>, <code>1</code> for <code>STEREO_HORIZONTAL</code>, <code>2</code> for <code>STEREO_VERTICAL</code>, and <code>-stereo-base</code> (or <code>-s</code>) and the separation in millimeters.</p>
<h2 id="restrictions" name="restrictions">Restrictions</h2>
<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>
-<li>Stereo render tasks render everything added to the stage's root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <span style="font-family: Courier New,Courier,monospace;">SetExclusive()</span> function defined in the render task.</li>
+<li>Stereo render tasks render everything added to the stage's root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <code>SetExclusive()</code> function defined in the render task.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">DALi stereoscopic viewing mode is still under development, and may not be mature enough for commercialized applications at the moment. For example, distortion correction is not supported yet. Tizen continues to improve the stereoscopic mode to give you a chance to provide more exciting and immersive user experience to your customers.
- </td>
- </tr>
- </tbody>
-</table>
-
-
+<div class="note">
+ <strong>Note</strong>
+ DALi stereoscopic viewing mode is still under development, and may not be mature enough for commercialized applications at the moment. For example, distortion correction is not supported yet. Tizen continues to improve the stereoscopic mode to give you a chance to provide more exciting and immersive user experience to your customers.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ol>
<li>Create the shader source code:
<ol type="a">
-<li>You must create a shader suitable for drawing lines. The vector (x,y) position for each point on the line is passed using the <span style="font-family: Courier New,Courier,monospace">aPosition</span> attribute. The vertex shader transforms this to match the size and position of an actor.
+<li>You must create a shader suitable for drawing lines. The vector (x,y) position for each point on the line is passed using the <code>aPosition</code> attribute. The vertex shader transforms this to match the size and position of an actor.
<pre class="prettyprint">
const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
</li>
<li>Create geometry.
-<p>Specify a vertex format matching the shader attributes: the format is specified using a list of string/value pairs in a <span style="font-family: Courier New,Courier,monospace">Property::Map</span>. The vertex format and data (in this case 2 points) are stored in a <span style="font-family: Courier New,Courier,monospace">PropertyBuffer</span>. Finally, a <span style="font-family: Courier New,Courier,monospace">LINES</span>-type <span style="font-family: Courier New,Courier,monospace">Geometry</span> object is created.</p>
+<p>Specify a vertex format matching the shader attributes: the format is specified using a list of string/value pairs in a <code>Property::Map</code>. The vertex format and data (in this case 2 points) are stored in a <code>PropertyBuffer</code>. Finally, a <code>LINES</code>-type <code>Geometry</code> object is created.</p>
<pre class="prettyprint">
Property::Map vertexFormat;
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>
-<p>You can also call the <span style="font-family: Courier New,Courier,monospace;">Actor::SetColor(Color::RED)</span> function to get a more colorful end result, as shown in the following figure.</p>
+<p>You can also call the <code>Actor::SetColor(Color::RED)</code> function to get a more colorful end result, as shown in the following figure.</p>
-<p class="figure">Figure: Triangle</p>
+<p align="center"><strong>Figure: Triangle</strong></p>
<p align="center"><img alt="Triangle" src="../../../images/dali_rendering_triangle.png"/></p>
<h2 id="cube">Drawing a Cube</h2>
<ol>
<li>Create the shader source code:
<ol type="a">
-<li>The <span style="font-family: Courier New,Courier,monospace;">aPosition</span> attribute must be changed to <span style="font-family: Courier New,Courier,monospace;">vec3</span>, since the cube has 3 dimensions:
+<li>The <code>aPosition</code> attribute must be changed to <code>vec3</code>, since the cube has 3 dimensions:
<pre class="prettyprint">
const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
);
</pre>
</li>
-<li>Each face of the cube is given a different color using the <span style="font-family: Courier New,Courier,monospace;">vColor</span> varying:
+<li>Each face of the cube is given a different color using the <code>vColor</code> varying:
<pre class="prettyprint">
const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
</li>
<li>Create the cube geometry.
-<p>The vertex format is extended to match the shader. Each of the 6 cube faces requires 4 vertices (24 in total). Each vertex consists of a <span style="font-family: Courier New,Courier,monospace;">vec3</span> and RGB color component.</p>
+<p>The vertex format is extended to match the shader. Each of the 6 cube faces requires 4 vertices (24 in total). Each vertex consists of a <code>vec3</code> and RGB color component.</p>
<pre class="prettyprint">
Property::Map vertexFormat;
vertexFormat["aPosition"] = Property::VECTOR3;
-vertexFormat["aColor"] = Property::VECTOR3;
+vertexFormat["aColor"] = Property::VECTOR3;
PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
struct Vertex
</li>
<li>Create a renderer.
-<p>There is no <span style="font-family: Courier New,Courier,monospace;">SetColor()</span> function needed for the actor, since you are not using the <span style="font-family: Courier New,Courier,monospace;">uColor</span> uniform. Face culling is enabled to hide the backward facing sides of the cube.</p>
+<p>There is no <code>SetColor()</code> function needed for the actor, since you are not using the <code>uColor</code> uniform. Face culling is enabled to hide the backward facing sides of the cube.</p>
<pre class="prettyprint">
Shader shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER );
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>
<h2 id="image" name="image">Loading Image Files</h2>
-<p>You can load an image file with the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> class by specifying its location:</p>
+<p>You can load an image file with the <code>ResourceImage</code> class by specifying its location:</p>
<pre class="prettyprint">
Dali::ResourceImage image = Dali::ResourceImage::New( "/my-path/my-image.png" );
<p>The currently supported image types are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">jpeg</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">gif</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">bmp</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">wbmp</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ico</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ktx</span></li>
+<li><code>png</code></li>
+<li><code>jpeg</code></li>
+<li><code>gif</code></li>
+<li><code>bmp</code></li>
+<li><code>wbmp</code></li>
+<li><code>ico</code></li>
+<li><code>ktx</code></li>
</ul>
<p>The currently supported URL schemes are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">http</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">https</span></li>
+<li><code>http</code></li>
+<li><code>https</code></li>
</ul>
<h3>Asynchronous Loading</h3>
-<p>Resources are loaded in separate threads, which means that when you call the <span style="font-family: Courier New,Courier,monospace;">ResourceImage::New()</span> function, it returns immediately.</p>
+<p>Resources are loaded in separate threads, which means that when you call the <code>ResourceImage::New()</code> function, it returns immediately.</p>
-<p>The application can connect to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage::LoadingFinishedSignal()</span> signal to get notified when the image has loaded:</p>
+<p>The application can connect to the <code>Dali::ResourceImage::LoadingFinishedSignal()</code> signal to get notified when the image has loaded:</p>
<pre class="prettyprint">
class ResourceImageController : public ConnectionTracker
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 );
<h3>Load Time Resizing</h3>
-<p>An application loading images from an external source often wants to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. The <
span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode</span> namespace (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1FittingMode.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1FittingMode.html">wearable</a> applications) provides 4 algorithms, which can be used to fit an image to a desired rectangle, a desired width, or a desired height.</p>
+<p>An application loading images from an external source often wants to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. The <
code>Dali::FittingMode</code> namespace (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1FittingMode.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1FittingMode.html">wearable</a> applications) provides 4 algorithms, which can be used to fit an image to a desired rectangle, a desired width, or a desired height.</p>
<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 <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> 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 <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> creator function as shown above.</p>
+<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>The fitting modes and suggested use cases are as follows:</p>
-
+<p align="center" class="Table"><strong>Table: Fitting mode use cases</strong></p>
<table>
- <caption>
- Table: Fitting mode use cases
- </caption>
<tbody>
<tr>
<th>Fitting mode</th>
<th>Suggested use case</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::SHRINK_TO_FIT</span></td>
+ <td><code>Dali::FittingMode::SHRINK_TO_FIT</code></td>
<td>Full-screen image display: limit the loaded image resolution to the device resolution, but show all of the image.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::SCALE_TO_FILL</span></td>
+ <td><code>Dali::FittingMode::SCALE_TO_FILL</code></td>
<td>Thumbnail gallery grid: limit the loaded image resolution to the screen tile, filling the whole tile but losing a few pixels to match the tile shape.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::FIT_WIDTH</span></td>
+ <td><code>Dali::FittingMode::FIT_WIDTH</code></td>
<td>Image columns: limit the loaded image resolution to the column width.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::FIT_HEIGHT</span></td>
+ <td><code>Dali::FittingMode::FIT_HEIGHT</code></td>
<td>Image rows: limit the loaded image resolution to the row height.</td>
</tr>
</tbody>
<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>
<h2 id="buffer" name="buffer">Using a Buffer Image</h2>
-<p>A <
span style="font-family: Courier New,Courier,monospace;">Dali::BufferImage</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">wearable</a> applications) represents an image resource in the form of pixel buffer data. The application can write to this buffer as required and the image is updated on the screen:</p>
+<p>A <
code>Dali::BufferImage</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">wearable</a> applications) represents an image resource in the form of pixel buffer data. The application can write to this buffer as required and the image is updated on the screen:</p>
<pre class="prettyprint">
// Create a 200 by 200 pixel buffer with a color-depth of 32-bits (with alpha)
<div id="container"><div id="contents"><div class="content">
<h1>ScrollView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.</p>
+<p>The <code>Dali::Toolkit::ScrollView</code> class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.</p>
-<p>The following figure shows example layouts using the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>.</p>
+<p>The following figure shows example layouts using the <code>ScrollView</code>.</p>
-<p class="figure">Figure: ScrollView</p>
- <p align="center"><img alt="ScrollView" src="../../../images/scrollview.png"/></p>
+<p align="center"><strong>Figure: ScrollView</strong></p>
+ <p align="center"><img alt="ScrollView" width="450" src="../../../images/scrollview.png"/></p>
-<p>A scroll view emits a <span style="font-family: Courier New,Courier,monospace;">ScrollView::SnapStartedSignal()</span> signal when the scroll view has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
+<p>A scroll view emits a <code>ScrollView::SnapStartedSignal()</code> signal when the scroll view has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
<h2 id="create" name="create">Creating a ScrollView</h2>
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> object:</p>
+<p>The following example shows how to create a <code>Dali::Toolkit::ScrollView</code> object:</p>
<pre class="prettyprint">
-// This sample code is for the HelloWorldExample class
-// in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
+// This sample code is for the HelloWorldExample
+//
class in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
void HelloWorldExample::Create( Application& application )
{
// Create a ScrollView instance
scrollView.SetParentOrigin( ParentOrigin::CENTER );
Stage::GetCurrent().Add( scrollView );
- // Set the size of scrollView; it covers the entire stage
+ // Set the size of scrollView;
+ // it covers the entire stage
Size size = Stage::GetCurrent().GetSize();
scrollView.SetSize( size );
// ScrollView contents are now draggable
- // To enforce horizontal-only scrolling, the Y axis ruler can be disabled
+ // To enforce horizontal-only scrolling,
+ // the Y axis ruler can be disabled
RulerPtr rulerY = new DefaultRuler();
rulerY->Disable();
scrollView.SetRulerY( rulerY );
- // To enable snapping, a FixedRuler can be applied to the X axis,
- // with snap points spaced to the width of the stage
+ // To enable snapping, a FixedRuler can be
+ // applied to the X axis,with snap
+ // points spaced to the width of the stage
RulerPtr rulerX1 = new FixedRuler( size.width );
scrollView.SetRulerX( rulerX1 );
- // Domain can be applied to rulers to prevent scrolling beyond this boundary
- // In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled
+ // Domain can be applied to rulers to prevent
+ // scrolling beyond this boundary
+ // 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>
<h2 id="ruler" name="ruler">Using Ruler, RulerDomain, and Wrap</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::RulerDomain</span> class specifies the minimum and maximum values of a ruler.</p>
+<p>The <code>Dali::Toolkit::Ruler</code> abstract class defines the scroll axes. The <code>Dali::Toolkit::RulerDomain</code> class specifies the minimum and maximum values of a ruler.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain.</p>
+<p>The <code>Dali::Toolkit::ScrollView</code> class provides a wrap mode for <code>ScrollView</code> contents. When enabled, the <code>ScrollView</code> contents are wrapped over the x/y domain.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the ruler, ruler domain, and wrap modes. The following table shows <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior according to the combination.</p>
+<p>The <code>ScrollView</code> behavior depends on a combination of the ruler, ruler domain, and wrap modes. The following table shows <code>ScrollView</code> behavior according to the combination.</p>
-<p class="figure">Figure: Ruler, ruler domain, and wrap modes</p>
+<p align="center"><strong>Figure: Ruler, ruler domain, and wrap modes</strong></p>
<p align="center"><img alt="Ruler, ruler domain, and wrap modes" src="../../../images/scrollview_ruler.png"/></p>
-
+<p align="center" class="Table"><strong>Table: Scrollview behavior in the ruler, ruler domain, and wrap mode</strong></p>
<table>
- <caption>
- Table: Scrollview behavior in the ruler, ruler domain, and wrap mode</caption>
<tbody>
<tr>
<th>Ruler</th>
</tr>
</tbody>
</table>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Actors within a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> are controlled by constraints. If you apply constraints to these actors externally, undefined behavior can occur. Since applying additional constraints can conflict with the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> constraints, place the actors within container actors. The container actors are affected by the constraints.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Actors within a <code>ScrollView</code> are controlled by constraints. If you apply constraints to these actors externally, undefined behavior can occur. Since applying additional constraints can conflict with the <code>ScrollView</code> constraints, place the actors within container actors. The container actors are affected by the constraints.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Slider</h1>
-<p>The slider is a control used to indicate a value within a specific range. The user can drag a handle left or right to set the current value between a specified minimum and maximum. The base class for the slider control is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span>.</p>
+<p>The slider is a control used to indicate a value within a specific range. The user can drag a handle left or right to set the current value between a specified minimum and maximum. The base class for the slider control is <code>Dali::Toolkit::Slider</code>.</p>
-<p class="figure">Figure: Slider</p>
+<p align="center"><strong>Figure: Slider</strong></p>
<p align="center"><img alt="Slider" src="../../../images/dali_slider.png"/></p>
<p>The slider has 2 important elements:</p>
<ul>
<li>The handle is the indicator sliding within the range
-<p>You can draw the handle using the <span style="font-family: Courier New,Courier,monospace;">HANDLE_VISUAL</span> property.</p></li>
+<p>You can draw the handle using the <code>HANDLE_VISUAL</code> property.</p></li>
<li>The track is the bar along which the handle moves.
-<p>The slider draws the track using 2 distinct images. The region between the start of the track and the handle is the progress region, and you can draw it using the <span style="font-family: Courier New,Courier,monospace;">PROGRESS_VISUAL</span> property. The region between the handle and the end of the track is drawn using the <span style="font-family: Courier New,Courier,monospace;">TRACK_VISUAL</span> property.</p></li>
+<p>The slider draws the track using 2 distinct images. The region between the start of the track and the handle is the progress region, and you can draw it using the <code>PROGRESS_VISUAL</code> property. The region between the handle and the end of the track is drawn using the <code>TRACK_VISUAL</code> property.</p></li>
</ul>
-<p>The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> class.</p>
+<p>The following table lists the basic signals provided by the <code>Dali::Toolkit::Slider</code> class.</p>
+<p align="center" class="Table"><strong>Table: <code>Dali::Toolkit::Slider</code> input signals</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> input signals</caption>
<tbody>
<tr>
<th>Input signal</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ValueChangedSignal()</span></td>
+ <td><code>ValueChangedSignal()</code></td>
<td>Emitted when the slider value changes.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SlidingFinishedSignal()</span></td>
+ <td><code>SlidingFinishedSignal()</code></td>
<td>Emitted when the sliding is finished.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MarkReachedSignal()</span></td>
+ <td><code>MarkReachedSignal()</code></td>
<td>Emitted when the slider handle reaches a mark.</td>
</tr>
</tbody>
<h2 id="create">Creating a Slider</h2>
-<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> object:</p>
+<p>The following basic example shows how to create a <code>Dali::Toolkit::Slider</code> object:</p>
<pre class="prettyprint">
Slider slider = Slider::New();
<p>You can modify the slider appearance and behavior through its properties.</p>
-<p>To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function:</p>
+<p>To change a property from its default value, use the <code>SetProperty()</code> function:</p>
<pre class="prettyprint">
// To set the basic values, use SetProperty()
<p>The following table lists the available slider properties.</p>
+<p align="center" class="Table"><strong>Table: Slider properties</strong></p>
<table>
- <caption>
- Table: Slider properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LOWER_BOUND</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>LOWER_BOUND</code></td>
+ <td><code>Float</code></td>
<td>Minimum value of the track</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">UPPER_BOUND</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>UPPER_BOUND</code></td>
+ <td><code>Float</code></td>
<td>Maximum value of the track</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VALUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>VALUE</code></td>
+ <td><code>Float</code></td>
<td>Initial value of the slider</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TRACK_VISUAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>TRACK_VISUAL</code></td>
+ <td><code>Property::Map</code></td>
<td>Appearance of the track between the handle and the end of the track</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HANDLE_VISUAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>HANDLE_VISUAL</code></td>
+ <td><code>Property::Map</code></td>
<td>Appearance of the handle</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PROGRESS_VISUAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>PROGRESS_VISUAL</code></td>
+ <td><code>Property::Map</code></td>
<td>Appearance of the progress region of the track</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">POPUP_VISUAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>POPUP_VISUAL</code></td>
+ <td><code>Property::Map</code></td>
<td>Appearance of the slider pop-up</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">POPUP_ARROW_VISUAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>POPUP_ARROW_VISUAL</code></td>
+ <td><code>Property::Map</code></td>
<td>Appearance of the pop-up arrow</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DISABLED_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>DISABLED_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Color when the slider is disabled</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VALUE_PRECISION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td><code>VALUE_PRECISION</code></td>
+ <td><code>Integer</code></td>
<td>Precision of the floating point of the value</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHOW_POPUP</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td><code>SHOW_POPUP</code></td>
+ <td><code>Bool</code></td>
<td>Whether the slider shows pop-up</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHOW_VALUE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td><code>SHOW_VALUE</code></td>
+ <td><code>Bool</code></td>
<td>Whether the slider shows the value</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MARKS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Array</span></td>
+ <td><code>MARKS</code></td>
+ <td><code>Property::Array</code></td>
<td>Array of the marks</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SNAP_TO_MARKS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td><code>SNAP_TO_MARKS</code></td>
+ <td><code>Bool</code></td>
<td>Whether the handle snaps to the marks</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MARK_TOLERANCE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>MARK_TOLERANCE</code></td>
+ <td><code>Float</code></td>
<td>Percentage of the slider width for which snapping to the marks occur</td>
</tr>
</tbody>
<h2 id="customize">Customizing the Slider Appearance</h2>
<p>The slider provides a set of default images, which are used automatically if you do not specify anything else.</p>
-<p>If you want to customize the slider appearance, you can assign your own images using the <span style="font-family: Courier New,Courier,monospace;">Property::Map</span> class. You can set the size and image of the track, handle, progress region, popup, and popup arrow.</p>
+<p>If you want to customize the slider appearance, you can assign your own images using the <code>Property::Map</code> class. You can set the size and image of the track, handle, progress region, popup, and popup arrow.</p>
<p>The following example shows how to customize the handle:</p>
<p>You can specify how each application component looks by using a stylesheet with the JSON file format:</p>
<ul>
-<li>Application-specific resources must be installed into a particular directory, and you can access them in the stylesheet indirectly through the <
span style="font-family: Courier New,Courier,monospace;">APPLICATION_RESOURCE_PATH</span> constant, which has the value returned by the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function. For more information on the resource directory, see the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function in the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications).
+<li>Application-specific resources must be installed into a particular directory, and you can access them in the stylesheet indirectly through the <
code>APPLICATION_RESOURCE_PATH</code> constant, which has the value returned by the <code>app_get_resource_path()</code> function. For more information on the resource directory, see the <code>app_get_resource_path()</code> function in the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications).
</li>
<li>You can style particular controls or sub-groups of controls by specifying their style name programmatically.</li>
<li>Styles can be inherited and tweaked, so you can create minor updates to existing styles with very little code.</li>
-<li>The platform can change the default system font family and logical size. This is handled by the default stylesheets, but it is possible to override this behavior in your own stylesheets. You can also listen to the style manager's <span style="font-family: Courier New,Courier,monospace;">StyleChangedSignal()</span> in order to determine when the platform style has changed.</li>
+<li>The platform can change the default system font family and logical size. This is handled by the default stylesheets, but it is possible to override this behavior in your own stylesheets. You can also listen to the style manager's <code>StyleChangedSignal()</code> in order to determine when the platform style has changed.</li>
</ul>
<h2 id="stylesheet">Stylesheet Loading</h2>
-<p>The stylesheet is usually supplied at the application start-up or through the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::StyleManager</span> API:</p>
+<p>The stylesheet is usually supplied at the application start-up or through the <code>Dali::Toolkit::StyleManager</code> API:</p>
<ul>
-<li>At the start-up, use the <span style="font-family: Courier New,Courier,monospace;">Dali::Application::New()</span> function:
+<li>At the start-up, use the <code>Dali::Application::New()</code> function:
<pre class="prettyprint">
int main( int argc, char** argv )
{
}
</pre>
</li>
-<li>During runtime, use the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::StyleManager::ApplyTheme()</span> function:
+<li>During runtime, use the <code>Dali::Toolkit::StyleManager::ApplyTheme()</code> function:
<pre class="prettyprint">
StyleManager::Get().ApplyTheme( "stylesheet.json" );
</pre>
</li></ul>
-<p>When the stylesheet is loaded, it is automatically merged with the default DALi toolkit stylesheet, and applied to each <span style="font-family: Courier New,Courier,monospace;">Control</span> instance.</p>
+<p>When the stylesheet is loaded, it is automatically merged with the default DALi toolkit stylesheet, and applied to each <code>Control</code> instance.</p>
<h2 id="format">Stylesheet Format</h2>
<p>A style sheet has several top level <strong>sections</strong>, which are named JSON objects. The following table lists the available sections.</p>
+<p align="center" class="Table"><strong>Table: Stylesheet sections</strong></p>
<table>
- <caption>Table: Stylesheet sections</caption>
<tbody>
<tr>
<th>Section</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">constants</span></td>
+ <td><code>constants</code></td>
<td>An object containing a map of tokens that are replaced in JSON value strings.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">includes</span></td>
+ <td><code>includes</code></td>
<td>An array of filenames to include and merge.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">mappings</span></td>
+ <td><code>mappings</code></td>
<td>An object containing a map of keys to property maps. These maps replace the key as a value when converting to DALi properties.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">styles</span></td>
+ <td><code>styles</code></td>
<td>An object containing a map of style names to property maps. These property maps contain key-value pairs with the key matching a DALi property name for the object being styled, and the value is an appropriate type for that property.</td>
</tr>
</tbody>
<h3>Constants Section</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;">constants</span> section contains string constants that can be used by any string value in the current stylesheet or included stylesheets. The following table lists the predefined constants.</p>
+<p>The <code>constants</code> section contains string constants that can be used by any string value in the current stylesheet or included stylesheets. The following table lists the predefined constants.</p>
+<p align="center" class="Table"><strong>Table: Predefined constants</strong></p>
<table>
- <caption>Table: Predefined constants</caption>
<tbody>
<tr>
<th>Constant</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">APPLICATION_RESOURCE_PATH</span></td>
- <td>This points to the application-specific resource path returned by the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function.</td>
+ <td><code>APPLICATION_RESOURCE_PATH</code></td>
+ <td>This points to the application-specific resource path returned by the <code>app_get_resource_path()</code> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PACKAGE_PATH</span></td>
+ <td><code>PACKAGE_PATH</code></td>
<td>This points to the DALi toolkit resource path.</td>
</tr>
</tbody>
</table>
-<p>Constants can also be set programmatically by using the <span style="font-family: Courier New,Courier,monospace;">StyleManager::SetStyleConstant()</span> function. However, the function only works after the <span style="font-family: Courier New,Courier,monospace;">Application::New()</span> function has been called, so it does not affect stylesheets loaded in the <span style="font-family: Courier New,Courier,monospace;">Application::New()</span> function.</p>
+<p>Constants can also be set programmatically by using the <code>StyleManager::SetStyleConstant()</code> function. However, the function only works after the <code>Application::New()</code> function has been called, so it does not affect stylesheets loaded in the <code>Application::New()</code> function.</p>
-<p>The constants can be used in any string value in the JSON files, delimited by '{' and '}' characters. In the following example, the <span style="font-family: Courier New,Courier,monospace;">IMAGE_DIR</span> constant is defined within the stylesheet, and is used to access the <span style="font-family: Courier New,Courier,monospace;">unselectedStateImage</span> image path in the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::PushButton</span> control:</p>
+<p>The constants can be used in any string value in the JSON files, delimited by '{' and '}' characters. In the following example, the <code>IMAGE_DIR</code> constant is defined within the stylesheet, and is used to access the <code>unselectedStateImage</code> image path in the <code>Dali::Toolkit::PushButton</code> control:</p>
<pre class="prettyprint">
{
<h3>Includes Section</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;">includes</span> section allows inclusion of other JSON files into the stylesheet. Note that since this section is a JSON array, it is delimited by square brackets ('[' and ']').</p>
+<p>The <code>includes</code> section allows inclusion of other JSON files into the stylesheet. Note that since this section is a JSON array, it is delimited by square brackets ('[' and ']').</p>
<p>The content of the included files are merged with the other content of the current stylesheet. If more than one included file supplies values for a particular key-value pair, then the last file has the highest priority.</p>
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">include/first-include.json</span> and <span style="font-family: Courier New,Courier,monospace;">include/second-include.json</span> files are loaded. These include files can also include other files, and use constants defined in this top-level stylesheet.</p>
+<p>In the following example, the <code>include/first-include.json</code> and <code>include/second-include.json</code> files are loaded. These include files can also include other files, and use constants defined in this top-level stylesheet.</p>
<pre class="prettyprint">
{
<h3>Mappings Section</h3>
-<p>To reduce the number of repeated key-values, you can use the <span style="font-family: Courier New,Courier,monospace;">mappings</span> section. It contains an object of key-value pairs, where the value is any valid JSON type (so can also form a tree).</p>
+<p>To reduce the number of repeated key-values, you can use the <code>mappings</code> section. It contains an object of key-value pairs, where the value is any valid JSON type (so can also form a tree).</p>
<p>If a value in any section is a JSON string delimited by '<' and '>', it is checked against the keys in the mapping section, and the value is replaced by the mapping.</p>
-<p>In the following example, the confirmation popup's <span style="font-family: Courier New,Courier,monospace;">backingColor</span> property value becomes the JSON array representing RGBA values, which is converted internally into a <span style="font-family: Courier New,Courier,monospace;">Dali::Vector4</span> when it is applied to an object:</p>
+<p>In the following example, the confirmation popup's <code>backingColor</code> property value becomes the JSON array representing RGBA values, which is converted internally into a <code>Dali::Vector4</code> when it is applied to an object:</p>
<pre class="prettyprint">
{
<h3>Styles Section</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> section is the main section of the stylesheet. Each key in this JSON object is a style name, which is used to match against control instances in your application:</p>
+<p>The <code>styles</code> section is the main section of the stylesheet. Each key in this JSON object is a style name, which is used to match against control instances in your application:</p>
<ul>
-<li>By default, a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class's name is also its style name. For finer control, you can programmatically set a style name for a given control using the <span style="font-family: Courier New,Courier,monospace;">Control::SetStyleName()</span> function. In the following example, the slider control handle text label has been given the style name <span style="font-family: Courier New,Courier,monospace;">SliderHandleTextLabel</span>. This means that for any instance of the slider, the handle label style can be specified independently of any other label.</li>
-<li>For each entry in the <span style="font-family: Courier New,Courier,monospace;">styles</span> section, the children of the entry are the property names of the matching control. In the following example, <span style="font-family: Courier New,Courier,monospace;">showPopup</span> is the name of a property in the slider. For more information on the properties of a specific control, see its API Reference.</li>
-<li>Each control has a <span style="font-family: Courier New,Courier,monospace;">background</span> property, which can specify a visual. In addition, properties named <span style="font-family: Courier New,Courier,monospace;">visual</span>, such as those in the following example, specify a visual.</li>
+<li>By default, a <code>Dali::Toolkit::Control</code> class's name is also its style name. For finer control, you can programmatically set a style name for a given control using the <code>Control::SetStyleName()</code> function. In the following example, the slider control handle text label has been given the style name <code>SliderHandleTextLabel</code>. This means that for any instance of the slider, the handle label style can be specified independently of any other label.</li>
+<li>For each entry in the <code>styles</code> section, the children of the entry are the property names of the matching control. In the following example, <code>showPopup</code> is the name of a property in the slider. For more information on the properties of a specific control, see its API Reference.</li>
+<li>Each control has a <code>background</code> property, which can specify a visual. In addition, properties named <code>visual</code>, such as those in the following example, specify a visual.</li>
</ul>
<p>The following example switches on the value label of the handle and the popup tooltip, and changes the visuals of the slider control to use the specified 9-patch images with the given sizes. It changes the property of the slider handle text label to alter the color of the text, and changes the background of the slider to show a gradient fill.</p>
"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]]
+ "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": {
<p>Setting an explicit font size for text controls is generally considered to be a bad idea: the Tizen platform offers 5 levels of logical font size that can be set by the user, and the stylesheet can be used on multiple devices with different screen sizes and resolutions.</p>
-<p>To handle the logical to point size conversion after a settings change, the style manager appends <span style="font-family: Courier New,Courier,monospace;">FontSize</span> and the logical value ("0"-"4") to each style name during the update, and uses that style in preference to the control class name or style name if it can find it in the style sheet.</p>
+<p>To handle the logical to point size conversion after a settings change, the style manager appends <code>FontSize</code> and the logical value ("0"-"4") to each style name during the update, and uses that style in preference to the control class name or style name if it can find it in the style sheet.</p>
-<p>This means that you can specify alternative mappings for particular text labels. The following example shows how to map the alternative logical sizes, if you have a text label that has a style name of <span style="font-family: Courier New,Courier,monospace;">FolderLabel</span>:</p>
+<p>This means that you can specify alternative mappings for particular text labels. The following example shows how to map the alternative logical sizes, if you have a text label that has a style name of <code>FolderLabel</code>:</p>
<pre class="prettyprint">
{
</li>
<li>Using style inheritance
-<p>It is possible to "inherit" properties from one style into another by specifying the style names in a <span style="font-family: Courier New,Courier,monospace;">styles</span> array. More than 1 style can be merged in this way. The inherited styles are first merged in order, and then any properties that follow are merged on top.</p>
+<p>It is possible to "inherit" properties from one style into another by specifying the style names in a <code>styles</code> array. More than 1 style can be merged in this way. The inherited styles are first merged in order, and then any properties that follow are merged on top.</p>
<p>In the following example, the ColorSlider inherits all of the properties from the slider entry, and changes the background to a gradient:</p>
"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]]
+ "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]]
}
}
}
</li>
<li>Using alternative color representations
-<p>For style properties that explicitly map to a known DALi property with the <span style="font-family: Courier New,Courier,monospace;">Vector4</span> type, the style system can deduce that the map can also represent a color. In this case, the style system also accepts alternative color representations.</p>
+<p>For style properties that explicitly map to a known DALi property with the <code>Vector4</code> type, the style system can deduce that the map can also represent a color. In this case, the style system also accepts alternative color representations.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This type deduction does not work in the visual property maps where there is no explicit mapping.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ This type deduction does not work in the visual property maps where there is no explicit mapping.
+</div>
-<p>The usual representation is a <span style="font-family: Courier New,Courier,monospace;">Vector4</span> with its components mapped to the R, G, B and A components in the range of 0-1:</p>
+<p>The usual representation is a <code>Vector4</code> with its components mapped to the R, G, B and A components in the range of 0-1:</p>
<pre class="prettyprint">
{
}
</pre>
-<p>For example, in the following text label example, the <span style="font-family: Courier New,Courier,monospace;">textColor</span> is a known property of <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>, so it can use an alternative color format, in this case, the HTML #code:</p>
+<p>For example, in the following text label example, the <code>textColor</code> is a known property of <code>TextLabel</code>, so it can use an alternative color format, in this case, the HTML #code:</p>
<pre class="prettyprint">
{
<p>You can render an SVG image on screen with DALi with both C++ and JSON. You can render an image in 2 ways:</p>
<ul>
-<li>Use the SVG URL to create an <
span style="font-family: Courier New,Courier,monospace">ImageView</span> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ImageView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ImageView.html">wearable</a> applications).
+<li>Use the SVG URL to create an <
code>ImageView</code> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ImageView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ImageView.html">wearable</a> applications).
<p>You can show the SVG image in a C++ file or, without using C++, write the JSON representations in a style sheet.</p>
] }
</pre>
</li>
-<li>Create a control, generate a property map with the SVG URL as the <span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span> key value, and set it to <span style="font-family: Courier New,Courier,monospace;">Control::Property::BACKGROUND</span>.
+<li>Create a control, generate a property map with the SVG URL as the <code>ImageVisual::Property::URL</code> key value, and set it to <code>Control::Property::BACKGROUND</code>.
<p>You can show the SVG image in a C++ file or, without using C++, write the JSON representations in a style sheet.</p>
<div id="container"><div id="contents"><div class="content">
<h1>TableView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>
+<p>The <code>Dali::Toolkit::TableView</code> class is a layout container for aligning child actors in a grid like layout. <code>TableView</code> constraints the x and y position and width and height of the child actors.</p>
-<p class="figure">Figure: TableView</p>
+<p align="center"><strong>Figure: TableView</strong></p>
<p align="center"><img alt="TableView" src="../../../images/tableview.png"/></p>
<h2 id="create" name="create">Creating a TableView</h2>
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span> object:</p>
+<p>The following example shows how to create a <code>TableView</code> object:</p>
<pre class="prettyprint">
// This sample code is for the HelloWorldExample class
<div id="container"><div id="contents"><div class="content">
<h1>TextEditor</h1>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> class provides a control that allows multi-line text editing. It is similar to the <a href="textfield_n.htm">TextField</a> control, where a different formatting can be applied to different parts of the text. You can change, for example, the font color, font style, point size, and font family.</p>
+<p>The <
code>Dali::Toolkit::TextEditor</code> class provides a control that allows multi-line text editing. It is similar to the <a href="textfield_n.htm">TextField</a> control, where a different formatting can be applied to different parts of the text. You can change, for example, the font color, font style, point size, and font family.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> also supports markup, and text can be scrolled vertically within it.</p>
+<p>The <code>TextEditor</code> also supports markup, and text can be scrolled vertically within it.</p>
-<p class="figure">Figure: TextEditor</p>
- <p align="center"><img alt="TextEditor" src="../../../images/dali_texteditor.png"/></p>
+<p align="center"><strong>Figure: TextEditor</strong></p>
+ <p align="center"><img width="450" alt="TextEditor" src="../../../images/dali_texteditor.png"/></p>
-<p>The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> class.</p>
+<p>The following table lists the basic signals provided by the <code>Dali::Toolkit::TextEditor</code> class.</p>
+<p align="center" class="Table"><strong>Table: <code>Dali::Toolkit::TextEditor</code> input signals</strong></p>
<table>
- <caption>Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> input signals</caption>
<tbody>
<tr>
<th>Input signal</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TextChangedSignal()</span></td>
+ <td><code>TextChangedSignal()</code></td>
<td>Emitted when the text changes.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">InputStyleChangedSignal()</span></td>
+ <td><code>InputStyleChangedSignal()</code></td>
<td>Emitted when the input style is updated as a consequence of a change in the cursor position.</td>
</tr>
</tbody>
<h2 id="create">Creating a TextEditor</h2>
-<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> object:</p>
+<p>The following basic example shows how to create a <code>Dali::Toolkit::TextEditor</code> object:</p>
<pre class="prettyprint">
TextEditor editor = TextEditor::New();
<h2 id="property">Modifying TextEditor Properties</h2>
-<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> appearance and behavior through its properties. To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function.</p>
+<p>You can modify the <code>TextEditor</code> appearance and behavior through its properties. To change a property from its default value, use the <code>SetProperty()</code> function.</p>
-<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> properties.</p>
+<p>The following table lists the available <code>TextEditor</code> properties.</p>
+<p align="center" class="Table"><strong>Table: TextEditor properties</strong></p>
<table>
- <caption>Table: TextEditor properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td><code>RENDERING_BACKEND</code></td>
+ <td><code>Integer</code></td>
<td>Type or rendering (suc as bitmap-based)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>TEXT</code></td>
+ <td><code>String</code></td>
<td>Text to display in the UTF-8 format</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>TEXT_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Text color</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>FONT_FAMILY</code></td>
+ <td><code>String</code></td>
<td>Requested font family</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>FONT_STYLE</code></td>
+ <td><code>String</code></td>
<td>Requested font style</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>POINT_SIZE</code></td>
+ <td><code>Float</code></td>
<td>Size of font in points</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
- <td>Text horizontal alignment. The possible values are <span style="font-family: Courier New,Courier,monospace;">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace;">CENTER</span>, <span style="font-family: Courier New,Courier,monospace;">END</span>.</td>
+ <td><code>HORIZONTAL_ALIGNMENT</code></td>
+ <td><code>String</code></td>
+ <td>Text horizontal alignment. The possible values are <code>BEGIN</code>, <code>CENTER</code>, <code>END</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>SCROLL_THRESHOLD</code></td>
+ <td><code>Float</code></td>
<td>Vertical scrolling occurs if the cursor is within the threshold area next to the control border.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>SCROLL_SPEED</code></td>
+ <td><code>Float</code></td>
<td>Scroll speed in pixels per second</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>PRIMARY_CURSOR_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Color to apply to the primary cursor</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>SECONDARY_CURSOR_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Color to apply to the secondary cursor</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Boolean</span></td>
+ <td><code>ENABLE_CURSOR_BLINK</code></td>
+ <td><code>Boolean</code></td>
<td>Whether the cursor blinks</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>CURSOR_BLINK_INTERVAL</code></td>
+ <td><code>Float</code></td>
<td>Time interval in seconds between the cursor on and off states</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>CURSOR_BLINK_DURATION</code></td>
+ <td><code>Float</code></td>
<td>Cursor stops blinking after this number of seconds (if non-zero)</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_WIDTH</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td><code>CURSOR_WIDTH</code></td>
+ <td><code>Integer</code></td>
<td>Cursor width</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>GRAB_HANDLE_IMAGE</code></td>
+ <td><code>String</code></td>
<td>Image to display for the grab handle</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>GRAB_HANDLE_PRESSED_IMAGE</code></td>
+ <td><code>String</code></td>
<td>Image to display when the grab handle is pressed</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_LEFT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_IMAGE_LEFT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display for the left selection handle</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_IMAGE_RIGHT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display for the right selection handle</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_PRESSED_IMAGE_LEFT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display when the left selection handle is pressed</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display when the right selection handle is pressed</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_MARKER_IMAGE_LEFT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_MARKER_IMAGE_LEFT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display for the left selection handle marker</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_MARKER_IMAGE_RIGHT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td><code>SELECTION_HANDLE_MARKER_IMAGE_RIGHT</code></td>
+ <td><code>Property::Map</code></td>
<td>Image to display for the right selection handle marker</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>SELECTION_HIGHLIGHT_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Color of the selection highlight</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Rectangle</span></td>
+ <td><code>DECORATION_BOUNDING_BOX</code></td>
+ <td><code>Rectangle</code></td>
<td>Decorations (such as handles) are positioned within this area on the screen</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_MARKUP</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Boolean</span></td>
+ <td><code>ENABLE_MARKUP</code></td>
+ <td><code>Boolean</code></td>
<td>Whether the markup processing is enabled</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td><code>INPUT_COLOR</code></td>
+ <td><code>Vector4</code></td>
<td>Color of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_FONT_FAMILY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_FONT_FAMILY</code></td>
+ <td><code>String</code></td>
<td>Font family of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_FONT_STYLE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_FONT_STYLE</code></td>
+ <td><code>String</code></td>
<td>Font style of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_POINT_SIZE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>INPUT_POINT_SIZE</code></td>
+ <td><code>Float</code></td>
<td>Font size of the new input text in points</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LINE_SPACING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>LINE_SPACING</code></td>
+ <td><code>Float</code></td>
<td>Default extra space between lines in points</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_LINE_SPACING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td><code>INPUT_LINE_SPACING</code></td>
+ <td><code>Float</code></td>
<td>Extra space between lines in points. It affects the whole paragraph where the new input text is inserted.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>UNDERLINE</code></td>
+ <td><code>String</code></td>
<td>Default underline parameters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_UNDERLINE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_UNDERLINE</code></td>
+ <td><code>String</code></td>
<td>Underline parameters of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>SHADOW</code></td>
+ <td><code>String</code></td>
<td>Default shadow parameters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_SHADOW</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_SHADOW</code></td>
+ <td><code>String</code></td>
<td>Shadow parameters of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">EMBOSS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>EMBOSS</code></td>
+ <td><code>String</code></td>
<td>Default emboss parameters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_EMBOSS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_EMBOSS</code></td>
+ <td><code>String</code></td>
<td>Emboss parameters of the new input text</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>OUTLINE</code></td>
+ <td><code>String</code></td>
<td>Default outline parameters</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_OUTLINE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td><code>INPUT_OUTLINE</code></td>
+ <td><code>String</code></td>
<td>Outline parameters of the new input text</td>
</tr>
</tbody>
<div id="container"><div id="contents"><div class="content">
<h1>TextField</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> class is a control providing a single-line editable text field.</p>
+<p>The <code>Dali::Toolkit::TextField</code> class is a control providing a single-line editable text field.</p>
-<p class="figure">Figure: TextField</p>
+<p align="center"><strong>Figure: TextField</strong></p>
<p align="center"><img alt="TextField" src="../../../images/textfield.png"/></p>
<h2 id="create" name="create">Creating a TextField</h2>
-<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> class can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span> when the cursor is visible.</p>
+<p>Before text has been entered, the <code>Dali::Toolkit::TextField</code> class can display a placeholder text. An alternative placeholder can be displayed when the <code>TextField</code> has keyboard focus. For example, a <code>TextField</code> used to enter a username can initially show the text <code>Unknown Name</code>, and the text <code>Enter Name.</code> when the cursor is visible.</p>
<pre class="prettyprint">
TextField field = TextField::New();
Stage::GetCurrent().Add( field );
</pre>
-<p>When the <span style="font-family: Courier New,Courier,monospace;">TextField</span> is tapped, it automatically gets the keyboard focus. Key events enter the text, and the placeholder text is removed. After text has been entered, it can be retrieved from the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property.</p>
+<p>When the <code>TextField</code> is tapped, it automatically gets the keyboard focus. Key events enter the text, and the placeholder text is removed. After text has been entered, it can be retrieved from the <code>TEXT</code> property.</p>
<pre class="prettyprint">
Property::Value fieldText = field.GetProperty( TextField::Property::TEXT );
<h2 id="align" name="align">Aligning Text</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> class displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>
+<p>The <code>Dali::Toolkit::TextField</code> class displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>
<pre class="prettyprint">
-field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
+// "CENTER" or "END"
+field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" );
</pre>
<h2 id="decorations" name="decorations">Using Decorations</h2>
-<p>For text decorations, the following <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class properties are available.</p>
-
+<p>For text decorations, the following <code>TextLabel</code> class properties are available.</p>
+<p align="center" class="Table"><strong>Table: <code>TextField</code> properties</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">TextField</span> properties
- </caption>
<tbody>
<tr>
<th>Property</th>
<th>Animatable</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
+ <td><code>RENDERING_BACKEND</code></td>
<td>Integer</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
+ <td><code>TEXT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT</span></td>
+ <td><code>PLACEHOLDER_TEXT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_FOCUSED</span></td>
+ <td><code>PLACEHOLDER_TEXT_FOCUSED</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
+ <td><code>FONT_FAMILY</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
+ <td><code>FONT_STYLE</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
+ <td><code>POINT_SIZE</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MAX_LENGTH</span></td>
+ <td><code>MAX_LENGTH</code></td>
<td>Integer</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">EXCEED_POLICY</span></td>
+ <td><code>EXCEED_POLICY</code></td>
<td>Integer</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
+ <td><code>HORIZONTAL_ALIGNMENT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
+ <td><code>VERTICAL_ALIGNMENT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">COLOR</span></td>
+ <td><code>COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
+ <td><code>SHADOW_OFFSET</code></td>
<td>Vector2</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
+ <td><code>SHADOW_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>
+ <td><code>PRIMARY_CURSOR_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>
+ <td><code>SECONDARY_CURSOR_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>
+ <td><code>ENABLE_CURSOR_BLINK</code></td>
<td>Boolean</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>
+ <td><code>CURSOR_BLINK_INTERVAL</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>
+ <td><code>CURSOR_BLINK_DURATION</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>
+ <td><code>GRAB_HANDLE_IMAGE</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>
+ <td><code>GRAB_HANDLE_PRESSED_IMAGE</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>
+ <td><code>SCROLL_THRESHOLD</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>
+ <td><code>SCROLL_SPEED</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>
+ <td><code>SELECTION_HANDLE_IMAGE_RIGHT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>
+ <td><code>SELECTION_HANDLE_PRESSED_IMAGE_LEFT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>
+ <td><code>SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>
+ <td><code>SELECTION_HIGHLIGHT_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>
+ <td><code>DECORATION_BOUNDING_BOX</code></td>
<td>Rectangle</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">INPUT_METHOD_SETTINGS</span></td>
+ <td><code>INPUT_METHOD_SETTINGS</code></td>
<td>Map</td>
<td>Yes</td>
<td>No</td>
</tbody>
</table>
-<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. An alternative color can be used for placeholder text by setting the <span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, these properties do not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextField</span>.</p>
+<p>To change the color of the text, use the <code>TEXT_COLOR</code> property. An alternative color can be used for placeholder text by setting the <code>PLACEHOLDER_TEXT_COLOR</code> property. Unlike the <code>Actor::COLOR</code> property, these properties do not affect child actors added to the <code>TextField</code>.</p>
<pre class="prettyprint">
field.SetProperty( TextField::Property::TEXT_COLOR, Color::CYAN );
<div id="container"><div id="contents"><div class="content">
<h1>TextLabel</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
+<p>The <code>Dali::Toolkit::TextLabel</code> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
-<p class="figure">Figure: TextLabel</p>
+<p align="center"><strong>Figure: TextLabel</strong></p>
<p align="center"><img alt="TextLabel" src="../../../images/textlabel.png"/></p>
<h2 id="create" name="create">Creating a TextLabel</h2>
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> instance:</p>
+<p>The following example shows how to create a <code>TextLabel</code> instance:</p>
<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>
<h2 id="select" name="select">Selecting Fonts</h2>
-<p>By default, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> automatically selects a suitable font from the platform. Note that the selected font may not support all characters in your input text. For example, Latin fonts often do not provide Arabic glyphs.</p>
+<p>By default, the <code>TextLabel</code> automatically selects a suitable font from the platform. Note that the selected font may not support all characters in your input text. For example, Latin fonts often do not provide Arabic glyphs.</p>
-<p>Alternatively, you can request a font using the <span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span>, <span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span>, and <span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span> properties:</p>
+<p>Alternatively, you can request a font using the <code>FONT_FAMILY</code>, <code>FONT_STYLE</code>, and <code>POINT_SIZE</code> properties:</p>
<pre class="prettyprint">
label.SetProperty( TextLabel::Property::FONT_FAMILY, "HelveticaNue" );
label.SetProperty( TextLabel::Property::POINT_SIZE, 12.0f );
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> falls back to using the default font if the requested font does not support the required scripts.</p>
+<p>The <code>TextLabel</code> falls back to using the default font if the requested font does not support the required scripts.</p>
<h2 id="align" name="align">Aligning Text</h2>
-<p>Wrapping can be enabled using the <span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span> property:</p>
+<p>Wrapping can be enabled using the <code>MULTI_LINE</code> property:</p>
<pre class="prettyprint">
label.SetProperty( TextLabel::Property::MULTI_LINE, true );
<p>The text can be aligned horizontally to the beginning, end, or center of the available area:</p>
<pre class="prettyprint">
-label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
+// "CENTER" or "END"
+label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "BEGIN" );
</pre>
<h2 id="size" name="size">Managing the Layout</h2>
-<p>There are several resize policies commonly used with <span style="font-family: Courier New,Courier,monospace;">TextLabels</span>.
+<p>There are several resize policies commonly used with <code>TextLabels</code>.
The following examples show the actual size by setting a colored background, whilst the black area represents the size of the parent control.</p>
<h3 id="font" name="font">Natural Size Policy</h3>
-<p>In its natural size, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>
+<p>In its natural size, the <code>TextLabel</code> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>
<pre class="prettyprint">
TextLabel label = TextLabel::New( "Hello World" );
<h3 id="height" name="height">Height-for-width Policy</h3>
-<p>To lay out text labels vertically, a fixed (maximum) width must be provided by the parent control. Each <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> reports the desired height for the given width. The following example uses <span style="font-family: Courier New,Courier,monospace;">TableView</span> as the parent:</p>
+<p>To lay out text labels vertically, a fixed (maximum) width must be provided by the parent control. Each <code>TextLabel</code> reports the desired height for the given width. The following example uses <code>TableView</code> as the parent:</p>
<pre class="prettyprint">
TableView parent = TableView::New( 3, 1 );
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 );
<h2 id="decoration" name="decoration">Using Decorations</h2>
-<p>For text decorations, <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> provides several properties.</p>
-
+<p>For text decorations, <code>TextLabel</code> provides several properties.</p>
+<p align="center" class="Table"><strong>Table: <code>TextLabel</code> properties</strong></p>
<table>
- <caption>
- Table: <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> properties
- </caption>
<tbody>
<tr>
<th>Property</th>
<th>Animatable</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
+ <td><code>RENDERING_BACKEND</code></td>
<td>Integer</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
+ <td><code>TEXT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
+ <td><code>FONT_FAMILY</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
+ <td><code>FONT_STYLE</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
+ <td><code>POINT_SIZE</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span></td>
+ <td><code>MULTI_LINE</code></td>
<td>Boolean</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
+ <td><code>HORIZONTAL_ALIGNMENT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
+ <td><code>VERTICAL_ALIGNMENT</code></td>
<td>String</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>
+ <td><code>TEXT_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
+ <td><code>SHADOW_OFFSET</code></td>
<td>Vector2</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
+ <td><code>SHADOW_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span></td>
+ <td><code>UNDERLINE_ENABLED</code></td>
<td>Boolean</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span></td>
+ <td><code>UNDERLINE_COLOR</code></td>
<td>Vector4</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span></td>
+ <td><code>UNDERLINE_HEIGHT</code></td>
<td>Float</td>
<td>Yes</td>
<td>No</td>
<h3 id="color" name="color">Color</h3>
-<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, this does not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>.</p>
+<p>To change the color of the text, use the <code>TEXT_COLOR</code> property. Unlike the <code>Actor::COLOR</code> property, this does not affect child actors added to the <code>TextLabel</code>.</p>
<pre class="prettyprint">
label.SetProperty( TextLabel::Property::TEXT, "Red Text" );
<h3 id="drop" name="drop">Drop Shadow</h3>
-<p>To add a drop shadow to the text, set the <span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span> property with a non-zero values. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span> property.</p>
+<p>To add a drop shadow to the text, set the <code>SHADOW_OFFSET</code> property with a non-zero values. The color can also be selected using the <code>SHADOW_COLOR</code> property.</p>
<pre class="prettyprint">
stage.SetBackgroundColor( Color::BLUE );
<h3 id="underlining" name="underlining">Underlining</h3>
-<p>The text can be underlined by setting the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span> property. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span> property.</p>
+<p>The text can be underlined by setting the <code>UNDERLINE_ENABLED</code> property. The color can also be selected using the <code>UNDERLINE_COLOR</code> property.</p>
<pre class="prettyprint">
label1.SetProperty( TextLabel::Property::TEXT, "Text with Underline" );
label2.SetProperty( TextLabel::Property::UNDERLINE_COLOR, Color::GREEN );
</pre>
-<p>By default, the underline height is based on the font metrics. This can be overridden using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span> property:</p>
+<p>By default, the underline height is based on the font metrics. This can be overridden using the <code>UNDERLINE_HEIGHT</code> property:</p>
<pre class="prettyprint">
label1.SetProperty( TextLabel::Property::UNDERLINE_HEIGHT, 1.0f );
<div id="container"><div id="contents"><div class="content">
<h1>Touch Data</h1>
-<p>DALi informs you with a callback when the user touches the screen and when the touch ends. The information is encapsulated in the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class, which is a collection of points at a specific moment in time. When a multi-touch event occurs, each point represents the points that are currently being touched or the points where a touch has stopped.</p>
+<p>DALi informs you with a callback when the user touches the screen and when the touch ends. The information is encapsulated in the <code>Dali::TouchData</code> class, which is a collection of points at a specific moment in time. When a multi-touch event occurs, each point represents the points that are currently being touched or the points where a touch has stopped.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class replaces the old deprecated <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> struct. It contains functions for retrieving the information that the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> struct provided, but also adds the radius, touch pressure, and angle information.</p>
+<p>The <code>Dali::TouchData</code> class replaces the old deprecated <code>Dali::TouchEvent</code> struct. It contains functions for retrieving the information that the <code>Dali::TouchEvent</code> struct provided, but also adds the radius, touch pressure, and angle information.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class in a container.
- <p>As the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class is a handle to an internal object, it must not be copied (or used in a container) as all that happens is that the handle is copied to the same object, and the internal object can change unexpectedly. If the data must be stored in the application, save only the required data (retrieved using the class functions).</p></td>
- </tr>
- </tbody>
- </table>
-
+ <div class="note">
+ <strong>Note</strong>Do not use the <code>Dali::TouchData</code> class in a container.
+ <p>As the <code>Dali::TouchData</code> class is a handle to an internal object, it must not be copied (or used in a container) as all that happens is that the handle is copied to the same object, and the internal object can change unexpectedly. If the data must be stored in the application, save only the required data (retrieved using the class functions).</p>
+ </div>
-<p>The first point that the user touches is the primary point and the one that is used for hit-testing. Hit-testing is the process of determining whether a user-controlled cursor (such as a mouse cursor or touch-point) intersects a given graphical object drawn on the screen. There are many different algorithms that can be used for hit-testing, with different performance or accuracy outcomes. For more information on DALi hit-testing, see the Detailed Description for the <
span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html#details">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html#details">wearable</a> applications).</p>
+<p>The first point that the user touches is the primary point and the one that is used for hit-testing. Hit-testing is the process of determining whether a user-controlled cursor (such as a mouse cursor or touch-point) intersects a given graphical object drawn on the screen. There are many different algorithms that can be used for hit-testing, with different performance or accuracy outcomes. For more information on DALi hit-testing, see the Detailed Description for the <
code>Dali::Actor</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html#details">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html#details">wearable</a> applications).</p>
<h2 id="detecting">Detecting Touches on Actors</h2>
</pre>
</li>
<li>Connect to the required actor's touch signal (this is normally done when the init signal is received).
-<p>Ensure that your <span style="font-family: Courier New,Courier,monospace;">MyApplication</span> class is set up to connect to signals, and that it inherits from the <span style="font-family: Courier New,Courier,monospace;">ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). The <span style="font-family: Courier New,Courier,monospace;">ConnectionTracker</span> provides a way of automatically disconnecting from the connected signals when the application dies. This is more useful for application objects that exist only temporarily.</p>
+<p>Ensure that your <code>MyApplication</code> class is set up to connect to signals, and that it inherits from the <code>ConnectionTracker</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). The <code>ConnectionTracker</code> provides a way of automatically disconnecting from the connected signals when the application dies. This is more useful for application objects that exist only temporarily.</p>
<pre class="prettyprint">
Actor actor = Actor::New();
actor.TouchSignal().Connect( this, &MyApplication::OnTouch );
</pre>
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace;">Connect()</span> function (<span style="font-family: Courier New,Courier,monospace;">this</span>) refers to an object of the <span style="font-family: Courier New,Courier,monospace;">MyApplication*</span> class. The <span style="font-family: Courier New,Courier,monospace;">Connect()</span> function connects between <span style="font-family: Courier New,Courier,monospace;">this</span> and the <span style="font-family: Courier New,Courier,monospace;">OnTouch()</span> member function.</p>
+<p>The first parameter of the <code>Connect()</code> function (<code>this</code>) refers to an object of the <code>MyApplication*</code> class. The <code>Connect()</code> function connects between <code>this</code> and the <code>OnTouch()</code> member function.</p>
</li></ol>
</li>
<li>Implement the touch handler.
<p>When your touch handler is called, you can retrieve a lot of information about how the user has interacted with your actor:</p>
<ul>
-<li>To retrieve the point count (the total number of points in the touch data), and the state of a specific point, use the <span style="font-family: Courier New,Courier,monospace;">GetPointCount()</span> and <span style="font-family: Courier New,Courier,monospace;">GetState()</span> functions:
+<li>To retrieve the point count (the total number of points in the touch data), and the state of a specific point, use the <code>GetPointCount()</code> and <code>GetState()</code> functions:
<pre class="prettyprint">
bool MyApplication::OnTouch( Actor actor, TouchData& touch )
}
</pre>
</li>
-<li>To retrieve the time the touch occurred, use the <span style="font-family: Courier New,Courier,monospace;">GetTime()</span> function.
+<li>To retrieve the time the touch occurred, use the <code>GetTime()</code> function.
<p>You can also get the ID of the device that a particular touch originated from. It is useful when multiple touch points are pressed or released.</p>
<pre class="prettyprint">
int32_t touchDeviceId = touchData.GetDeviceId( 0 );
</pre>
</li>
-<li>To retrieve the hit actor (the actor that was underneath a specific point), use the <span style="font-family: Courier New,Courier,monospace;">GetHitActor()</span> function. The hit actor can be useful, as it can be a child of the actor that has been given as a parameter.
+<li>To retrieve the hit actor (the actor that was underneath a specific point), use the <code>GetHitActor()</code> function. The hit actor can be useful, as it can be a child of the actor that has been given as a parameter.
<pre class="prettyprint">
Actor hitActor = touchData.GetHitActor( 0 );
</pre>
</li>
-<li>To retrieve the local hit actor and screen positions, use the <span style="font-family: Courier New,Courier,monospace;">GetLocalPosition()</span> and <span style="font-family: Courier New,Courier,monospace;">GetScreenPosition()</span> functions. The function returns the coordinates relative to the top-left of the hit actor or screen at the specific point.
+<li>To retrieve the local hit actor and screen positions, use the <code>GetLocalPosition()</code> and <code>GetScreenPosition()</code> functions. The function returns the coordinates relative to the top-left of the hit actor or screen at the specific point.
<pre class="prettyprint">
const Vector2& screen = touchData.GetScreenPosition( 0 );
const Vector2& local = touchData.GetLocalPosition( 0 );
</pre>
</li>
-<li>To retrieve the pressure with which the user touched the screen, use the <span style="font-family: Courier New,Courier,monospace;">GetPressure()</span> function.
+<li>To retrieve the pressure with which the user touched the screen, use the <code>GetPressure()</code> function.
<p>The pressure range starts at 0.0f and normal pressure is defined as 1.0f. A value between 0.0f and 1.0f means light pressure has been applied, whereas a value greater than 1.0f means that more pressure than normal has been applied.</p>
<pre class="prettyprint">
float touchPressure = touchData.GetPressure( 0 );
</pre>
</li>
-<li>To retrieve the radius of the touch point, use the <span style="font-family: Courier New,Courier,monospace;">GetRadius()</span> or <span style="font-family: Courier New,Courier,monospace;">GetEllipseRadius()</span> function. The first returns a <span style="font-family: Courier New,Courier,monospace;">float</span> which is the average of both the horizontal and the vertical radii of the pressed point, while the second returns a <span style="font-family: Courier New,Courier,monospace;">Vector2</span> which stores both the horizontal and the vertical radii of the pressed point.
+<li>To retrieve the radius of the touch point, use the <code>GetRadius()</code> or <code>GetEllipseRadius()</code> function. The first returns a <code>float</code> which is the average of both the horizontal and the vertical radii of the pressed point, while the second returns a <code>Vector2</code> which stores both the horizontal and the vertical radii of the pressed point.
<pre class="prettyprint">
float averageRadius = touchData.GetRadius( 0 );
const Vector2& ellipseRadii = touchData.GetEllipseRadius( 0 );
</pre>
</li>
-<li>To retrieve the angle of the user's finger when touching the screen, use the <span style="font-family: Courier New,Courier,monospace;">GetAngle()</span> function. The return value is the angle relative to the Y axis.
+<li>To retrieve the angle of the user's finger when touching the screen, use the <code>GetAngle()</code> function. The return value is the angle relative to the Y axis.
<pre class="prettyprint">
Degree angle = touchData.GetAngle( 0 );
<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, text controls, image view, flex container, model3dview, slider, and video view.</p>
-<p class="figure">Figure: DALi UI components</p>
+<p align="center"><strong>Figure: DALi UI components</strong></p>
<p align="center"><img alt="DALi UI components" src="../../../images/ui_controls.png"/></p>
+ <p align="center"><img alt="DALi UI components" src="../../../images/ui_controls2.png"/></p>
<p>The following table lists the available UI components.</p>
-
+<p align="center" class="Table"><strong>Table: DALi UI components</strong></p>
<table>
- <caption>
- Table: DALi UI components
- </caption>
<tbody>
<tr>
<th>Control</th>
<tr>
<td><a href="buttons_n.htm">Buttons</a></td>
<td>A push button that can be pressed, a checkbox button that can be checked/unchecked, and a radio button that only one option can be selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">Button, PushButton, CheckBoxButton, RadioButton</span></td>
+ <td><code>Button</code>, <code>PushButton</code>, <code>CheckBoxButton</code>, <code>RadioButton</code></td>
</tr>
<tr>
<td><a href="itemview_n.htm">ItemView</a></td>
<td>An item view that renders item sets in a scrollable layout.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">ItemView, ItemFactory, ItemLayout, Scrollable</span></td>
+ <td><code>ItemView</code>, <code>ItemFactory</code>, <code>ItemLayout</code>, <code>Scrollable</code></td>
</tr>
<tr>
<td><a href="scrollview_n.htm">ScrollView</a></td>
<td>A scroll view to provide scrollable view.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">ScrollView, Scrollable, ScrollViewEffect, ScrollViewPagePathEffect</span></td>
+ <td><code>ScrollView</code>, <code>Scrollable</code>, <code>ScrollViewEffect</code>, <code>ScrollViewPagePathEffect</code></td>
</tr>
<tr>
<td><a href="tableview_n.htm">TableView</a></td>
<td>A table view that can align child actors in a grid like layout.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">TableView</span></td>
+ <td><code>TableView</code></td>
</tr>
<tr>
<td><a href="textfield_n.htm">TextField</a></td>
<td>A text field that provides a single-line editable text.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">TextField</span></td>
+ <td><code>TextField</code></td>
</tr>
<tr>
<td><a href="textlabel_n.htm">TextLabel</a></td>
<td>A text label that renders a short text string.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">TextLabel</span></td>
+ <td><code>TextLabel</code></td>
</tr>
<tr>
<td><a href="texteditor_n.htm">TextEditor</a></td>
<td>A text field that provides a multi-line editable text.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">TextEditor</span></td>
+ <td><code>TextEditor</code></td>
</tr>
<tr>
<td><a href="imageview_n.htm">ImageView</a></td>
<td>An image view that renders an image.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageView</span></td>
+ <td><code>ImageView</code></td>
</tr>
<tr>
<td><a href="flexcontainer_n.htm">FlexContainer</a></td>
<td>A layout model that allows responsive elements within a container, automatically arranged to different size screens or devices.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">FlexContainer</span></td>
+ <td><code>FlexContainer</code></td>
</tr>
<tr>
<td><a href="model3dview_n.htm">Model3dView</a></td>
<td>A model view that displays static 3D content.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">Model3dView</span></td>
+ <td><code>Model3dView</code></td>
</tr>
<tr>
<td><a href="slider_n.htm">Slider</a></td>
<td>A control that indicates a modifiable value within a specific range.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">Slider</span></td>
+ <td><code>Slider</code></td>
</tr>
<tr>
<td><a href="videoview_n.htm">VideoView</a></td>
<td>A video view that controls and displays video playback.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">VideoView</span></td>
+ <td><code>VideoView</code></td>
</tr>
</tbody>
</table>
-<p>The base class for the components is <
span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
+<p>The base class for the components is <
code>Dali::Toolkit::Control</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
<p>You can <a href="styling_n.htm">customize the look of the UI components with stylesheets</a>. For a reusable rendering logic that can be used by all UI components, take advantage of <a href="visuals_n.htm">DALi visuals</a>.</p>
<p>The following figure illustrates the hierarchy of the UI components.</p>
-<p class="figure">Figure: DALi UI component hierarchy</p>
+<p align="center"><strong>Figure: DALi UI component hierarchy</strong></p>
<p align="center"><img alt="DALi UI component hierarchy" src="../../../images/ui_control_hierarchy.png"/></p>
<div id="container"><div id="contents"><div class="content">
<h1>VideoView</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::VideoView</span> is a control for video playback and display. It provides minimum functions for playback (play, pause, stop, forward, and backward). Some options, such as volume, can be controlled through the control properties. For the VideoView to work, a video plugin is needed. The Tizen 3.0 platform includes the required Dali video plugin.</p>
+<p>The <code>Dali::Toolkit::VideoView</code> is a control for video playback and display. It provides minimum functions for playback (play, pause, stop, forward, and backward). Some options, such as volume, can be controlled through the control properties. For the VideoView to work, a video plugin is needed. The Tizen 3.0 platform includes the required Dali video plugin.</p>
-<p class="figure">Figure: VideoView</p>
+<p align="center"><strong>Figure: VideoView</strong></p>
<p align="center"><img alt="VideoView" src="../../../images/dali_videoview.png"/></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The VideoView control does not use any privileges APIs on its own. However, if you use video files in a specific device storage, the application can require privileges to access the storage. For more information, see the Player API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications).</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ The VideoView control does not use any privileges APIs on its own. However, if you use video files in a specific device storage, the application can require privileges to access the storage. For more information, see the Player API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications).
+ </div>
-<p>The <span style="font-family: Courier New,Courier,monospace;">VideoView</span> class provides the <span style="font-family: Courier New,Courier,monospace;">FinishedSignal()</span>, which is emitted when the video playback is finished. The related callback can support some basic actions.</p>
+<p>The <code>VideoView</code> class provides the <code>FinishedSignal()</code>, which is emitted when the video playback is finished. The related callback can support some basic actions.</p>
<pre class="prettyprint">
void Create( Application& application )
<h2 id="create">Creating a VideoView</h2>
-<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::VideoView</span> object:</p>
+<p>The following basic example shows how to create a <code>Dali::Toolkit::VideoView</code> object:</p>
<pre class="prettyprint">
class VideoViewController: public ConnectionTracker
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can set the video file to be played in the <span style="font-family: Courier New,Courier,monospace;">VideoView::New()</span> function, or by modifying <span style="font-family: Courier New,Courier,monospace;">VIDEO</span> property with <span style="font-family: Courier New,Courier,monospace;">SetProperty( VideoView::Property::VIDEO, "videofile2.mp4" )</span>.</td>
- </tr>
- </tbody>
- </table>
+
+ <div class="note">
+ <strong>Note</strong>
+ You can set the video file to be played in the <code>VideoView::New()</code> function, or by modifying <code>VIDEO</code> property with <code>SetProperty( VideoView::Property::VIDEO, "videofile2.mp4" )</code>.
+ </div>
<h2 id="property">Modifying VideoView Properties</h2>
-<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">VideoView</span> appearance and behavior through its properties.</p>
+<p>You can modify the <code>VideoView</code> appearance and behavior through its properties.</p>
-<p>To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function:</p>
+<p>To change a property from its default value, use the <code>SetProperty()</code> function:</p>
<pre class="prettyprint">
Property::Map oldMap;
mView.SetProperty( VideoView::Property::VOLUME, newMap );
</pre>
-<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">VideoView</span> properties.</p>
+<p>The following table lists the available <code>VideoView</code> properties.</p>
+<p align="center" class="Table"><strong>Table: VideoView properties</strong></p>
<table>
- <caption>Table: VideoView properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VIDEO</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">String</span> or <span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
- <td>Video file URL string. This property can also provide additional features, such as a custom shader, by <span style="font-family: Courier New,Courier,monospace;">Property::Map</span>.</td>
+ <td><code>VIDEO</code></td>
+ <td><code>String</code> or <code>Property::Map</code></td>
+ <td>Video file URL string. This property can also provide additional features, such as a custom shader, by <code>Property::Map</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">LOOPING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td><code>LOOPING</code></td>
+ <td><code>Bool</code></td>
<td>Whether the playback loops</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MUTED</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td><code>MUTED</code></td>
+ <td><code>Bool</code></td>
<td>Whether the playback is muted</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">VOLUME</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
- <td>Playback volume. The <span style="font-family: Courier New,Courier,monospace;">Property::Map</span> must get left and right volume scalar as a float type.</td>
+ <td><code>VOLUME</code></td>
+ <td><code>Property::Map</code></td>
+ <td>Playback volume. The <code>Property::Map</code> must get left and right volume scalar as a float type.</td>
</tr>
</tbody>
</table>
<div id="container"><div id="contents"><div class="content">
<h1>Visuals</h1>
-<p>You can create a reusable rendering logic, which can be used by all controls, by using DALi visuals. The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Visual</span> instance (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Visual.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Visual.html">wearable</a> applications) can control rendering the content as when using control properties. First, you set the type of Visual, and then you render the content with each visual property.</p>
+<p>You can create a reusable rendering logic, which can be used by all controls, by using DALi visuals. The <code>Dali::Toolkit::Visual</code> instance (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Toolkit_1_1Visual.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Toolkit_1_1Visual.html">wearable</a> applications) can control rendering the content as when using control properties. First, you set the type of Visual, and then you render the content with each visual property.</p>
<p>DALi provides the following visuals:</p>
<li><a href="#wireframe">Wireframe</a></li>
</ul>
-<p>The controls can provide properties that allow you to specify the visual type (<span style="font-family: Courier New,Courier,monospace;">visualType</span>). You set visual properties through a property map. The <span style="font-family: Courier New,Courier,monospace;">visualType</span> field in the property map specifies the visual to use or create. The visual type is required to avoid ambiguity as multiple visuals can be capable of rendering the same content.</p>
+<p>The controls can provide properties that allow you to specify the visual type (<code>visualType</code>). You set visual properties through a property map. The <code>visualType</code> field in the property map specifies the visual to use or create. The visual type is required to avoid ambiguity as multiple visuals can be capable of rendering the same content.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Control::Property::BACKGROUND</span> is an example of a property which takes in a property map to create a visual.</p>
+<p>The <code>Control::Property::BACKGROUND</code> is an example of a property which takes in a property map to create a visual.</p>
<h2 id="color">Color Visual</h2>
<p>The color visual renders a solid color to the control's quad.</p>
-<p class="figure">Figure: Color visual</p>
+<p align="center"><strong>Figure: Color visual</strong></p>
<p align="center"><img alt="Color visual" src="../../../images/dali_color_visual.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::COLOR</span> or <span style="font-family: Courier New,Courier,monospace;">"COLOR"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::COLOR</code> or <code>"COLOR"</code>.</p>
+<p align="center" class="Table"><strong>Table: Image visual properties</strong></p>
<table>
- <caption>Table: Image visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ColorVisual::Property::MIX_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">mixColor</span></td>
+ <td><code>ColorVisual::Property::MIX_COLOR</code></td>
+ <td><code>mixColor</code></td>
<td>VECTOR4</td>
<td>Yes</td>
<td>The solid color is required.</td>
<p>The gradient visual renders a smooth transition of colors to the control's quad. Both linear (left in the following figure) and radial (right in the following figure) gradients are supported.</p>
-<p class="figure">Figure: Gradient visual</p>
+<p align="center"><strong>Figure: Gradient visual</strong></p>
<p align="center"><img alt="Gradient visual linear" src="../../../images/dali_gradient_visual_linear.png"/> <img alt="Gradient visual radial" src="../../../images/dali_gradient_visual_radial.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::GRADIENT</span> or <span style="font-family: Courier New,Courier,monospace;">"GRADIENT"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::GRADIENT</code> or <code>"GRADIENT"</code>.</p>
+<p align="center" class="Table"><strong>Table: Gradient visual properties</strong></p>
<table>
- <caption>Table: Gradient visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::START_POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">startPosition</span></td>
+ <td><code>GradientVisual::Property::START_POSITION</code></td>
+ <td><code>startPosition</code></td>
<td>VECTOR2</td>
<td>For linear only</td>
<td>The start position of the linear gradient.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::END_POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">endPosition</span></td>
+ <td><code>GradientVisual::Property::END_POSITION</code></td>
+ <td><code>endPosition</code></td>
<td>VECTOR2</td>
<td>For linear only</td>
<td>The end position of the linear gradient.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::CENTER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">center</span></td>
+ <td><code>GradientVisual::Property::CENTER</code></td>
+ <td><code>center</code></td>
<td>VECTOR2</td>
<td>For radial only</td>
<td>The center point of the radial gradient.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::RADIUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">radius</span></td>
+ <td><code>GradientVisual::Property::RADIUS</code></td>
+ <td><code>radius</code></td>
<td>FLOAT</td>
<td>For radial only</td>
<td>The size of the radius.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::STOP_OFFSET</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">stopOffset</span></td>
+ <td><code>GradientVisual::Property::STOP_OFFSET</code></td>
+ <td><code>stopOffset</code></td>
<td>ARRAY of FLOAT</td>
<td>No</td>
<td>All the stop offsets. If not supplied, the default is 0.0 and 1.0.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::STOP_COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">stopColor</span></td>
+ <td><code>GradientVisual::Property::STOP_COLOR</code></td>
+ <td><code>stopColor</code></td>
<td>ARRAY of FLOAT</td>
<td>Yes</td>
<td>The color at the stop offsets. At least 2 are required to show a gradient.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::UNITS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">units</span></td>
+ <td><code>GradientVisual::Property::UNITS</code></td>
+ <td><code>units</code></td>
<td>INTEGER or STRING</td>
<td>No</td>
<td>The coordinate system.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::SPREAD_METHOD</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">spreadMethod</span></td>
+ <td><code>GradientVisual::Property::SPREAD_METHOD</code></td>
+ <td><code>spreadMethod</code></td>
<td>INTEGER or STRING</td>
<td>No</td>
<td>Indicates what happens if a gradient starts or ends inside bounds.</td>
</table>
<ul>
-<li>If the <span style="font-family: Courier New,Courier,monospace;">stopOffset</span> and <span style="font-family: Courier New,Courier,monospace;">stopColor</span> arrays do not have the same number of elements, the minimum of the 2 is used as the stop points.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">units</span> are used to define the coordinate system for the attributes:
+<li>If the <code>stopOffset</code> and <code>stopColor</code> arrays do not have the same number of elements, the minimum of the 2 is used as the stop points.</li>
+<li>The <code>units</code> are used to define the coordinate system for the attributes:
<ul>
<li>Start (x1, y1) and end (x2 and y2) points of a line, if using a linear gradient.</li>
<li>Center point (cx, cy) and radius (r) of a circle, if using a radial gradient.</li>
</ul>
+<p align="center" class="Table"><strong>Table: Unit values</strong></p>
<table>
-<caption>Table: Unit values</caption>
<tbody>
<tr>
<th>Enumeration</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Units::OBJECT_BOUNDING_BOX</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">OBJECT_BOUNDING_BOX</span></td>
+ <td><code>GradientVisual::Units::OBJECT_BOUNDING_BOX</code></td>
+ <td><code>OBJECT_BOUNDING_BOX</code></td>
<td>Default. Uses the normals for the start, end, and center points, so that the top-left is (-0.5, -0.5) and bottom-right is (0.5, 0.5).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Units::USER_SPACE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">USER_SPACE</span></td>
+ <td><code>GradientVisual::Units::USER_SPACE</code></td>
+ <td><code>USER_SPACE</code></td>
<td>Uses the user coordinates for the start, end, and center points, so that in a 200 by 200 control, top-left is (0, 0) and bottom-right is (200, 200).</td>
</tr>
</tbody>
</table>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">spreadMethod</span> indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.
+<li>The <code>spreadMethod</code> indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.
+<p align="center" class="Table"><strong>Table: Spread method values</strong></p>
<table>
-<caption>Table: Spread method values</caption>
<tbody>
<tr>
<th>Enumeration</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::PAD</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">PAD</span></td>
+ <td><code>GradientVisual::SpreadMethod::PAD</code></td>
+ <td><code>PAD</code></td>
<td>Default. Uses the terminal colors of the gradient to fill the remainder of the quad.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::REFLECT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">REFLECT</span></td>
+ <td><code>GradientVisual::SpreadMethod::REFLECT</code></td>
+ <td><code>REFLECT</code></td>
<td>Reflects the gradient pattern start-to-end, end-to-start, start-to-end, and so on, until the quad is filled.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::REPEAT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">REPEAT</span></td>
+ <td><code>GradientVisual::SpreadMethod::REPEAT</code></td>
+ <td><code>REPEAT</code></td>
<td>Repeats the gradient pattern start-to-end, start-to-end, start-to-end, and so on, until the quad is filled.</td>
</tr>
</tbody>
</table>
</li>
-<li>The gradient type is determined by the properties specified in the property map; for example, if both <span style="font-family: Courier New,Courier,monospace;">START_POSITION</span> and <span style="font-family: Courier New,Courier,monospace;">END_POSITION</span> are given, a linear gradient is shown, and if both <span style="font-family: Courier New,Courier,monospace;">CENTER</span> and <span style="font-family: Courier New,Courier,monospace;">RADIUS</span> are given, a radial gradient is shown.
+<li>The gradient type is determined by the properties specified in the property map; for example, if both <code>START_POSITION</code> and <code>END_POSITION</code> are given, a linear gradient is shown, and if both <code>CENTER</code> and <code>RADIUS</code> are given, a radial gradient is shown.
</li></ul>
<p><strong>Usage:</strong></p>
<p>The normal image visual renders a raster image (such as JPG or PNG) into the control's quad.</p>
-<p class="figure">Figure: Normal image visual</p>
+<p align="center"><strong>Figure: Normal image visual</strong></p>
<p align="center"><img alt="Normal image visual" src="../../../images/dali_image_visual_normal.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
+<p align="center" class="Table"><strong>Table: Normal image visual properties</strong></p>
<table>
-<caption>Table: Normal image visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td><code>ImageVisual::Property::URL</code></td>
+ <td><code>url</code></td>
<td>STRING</td>
<td>Yes</td>
<td>The URL of the image.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::FITTING_MODE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">fittingMode</span></td>
+ <td><code>ImageVisual::Property::FITTING_MODE</code></td>
+ <td><code>fittingMode</code></td>
<td>INTEGER or STRING</td>
<td>No</td>
<td>Fitting options, used when resizing images to fit the desired dimensions.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::SAMPLING_MODE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">samplingMode</span></td>
+ <td><code>ImageVisual::Property::SAMPLING_MODE</code></td>
+ <td><code>samplingMode</code></td>
<td>INTEGER or STRING</td>
<td>No</td>
<td>Filtering options, used when resizing images to the sample original pixels.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::DESIRED_WIDTH</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">desiredWidth</span></td>
+ <td><code>ImageVisual::Property::DESIRED_WIDTH</code></td>
+ <td><code>desiredWidth</code></td>
<td>INTEGER</td>
<td>No</td>
<td>The desired image width. Actual image width is used, if not specified.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::DESIRED_HEIGHT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">desiredHeight</span></td>
+ <td><code>ImageVisual::Property::DESIRED_HEIGHT</code></td>
+ <td><code>desiredHeight</code></td>
<td>INTEGER</td>
<td>No</td>
<td>The desired image height. Actual image height is used, if not specified.</td>
<p>The n-patch image visual renders an n-patch or a 9-patch image into the control's quad.</p>
-<p class="figure">Figure: N-patch image visual</p>
+<p align="center"><strong>Figure: N-patch image visual</strong></p>
<p align="center"><img alt="N-patch image visual" src="../../../images/dali_image_visual_nPatch.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
+<p align="center" class="Table"><strong>Table: N-patch image visual properties</strong></p>
<table>
-<caption>Table: N-patch image visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td><code>ImageVisual::Property::URL</code></td>
+ <td><code>url</code></td>
<td>STRING</td>
<td>Yes</td>
<td>The URL of the n-patch image.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::BORDER_ONLY</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">borderOnly</span></td>
+ <td><code>ImageVisual::Property::BORDER_ONLY</code></td>
+ <td><code>borderOnly</code></td>
<td>BOOLEAN</td>
<td>No</td>
- <td>If <span style="font-family: Courier New,Courier,monospace;">true</span>, only draws the borders.</td>
+ <td>If <code>true</code>, only draws the borders.</td>
</tr>
</tbody>
</table>
<li>Clip path</li>
</ul>
-<p class="figure">Figure: SVG image visual</p>
+<p align="center"><strong>Figure: SVG image visual</strong></p>
<p align="center"><img alt="SVG image visual" src="../../../images/dali_image_visual_svg.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
+<p align="center" class="Table"><strong>Table: SVG image visual properties</strong></p>
<table>
-<caption>Table: SVG image visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td><code>ImageVisual::Property::URL</code></td>
+ <td><code>url</code></td>
<td>STRING</td>
<td>Yes</td>
<td>The URL of the image.</td>
<p>The border visual renders a solid color as an internal border to the control's quad.</p>
-<p class="figure">Figure: Border visual</p>
+<p align="center"><strong>Figure: Border visual</strong></p>
<p align="center"><img alt="Border visual" src="../../../images/dali_border_visual.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::BORDER</span> or <span style="font-family: Courier New,Courier,monospace;">"BORDER"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::BORDER</code> or <code>"BORDER"</code>.</p>
+<p align="center" class="Table"><strong>Table: Border visual properties</strong></p>
<table>
-<caption>Table: Border visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">borderColor</span></td>
+ <td><code>BorderVisual::Property::COLOR</code></td>
+ <td><code>borderColor</code></td>
<td>VECTOR4</td>
<td>Yes</td>
<td>The color of the border.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::SIZE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">borderSize</span></td>
+ <td><code>BorderVisual::Property::SIZE</code></td>
+ <td><code>borderSize</code></td>
<td>FLOAT</td>
<td>Yes</td>
<td>The width of the border (in pixels).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::ANTI_ALIASING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">antiAliasing</span></td>
+ <td><code>BorderVisual::Property::ANTI_ALIASING</code></td>
+ <td><code>antiAliasing</code></td>
<td>BOOLEAN</td>
<td>No</td>
<td>Whether anti-aliasing of the border is required.</td>
<h2 id="mesh">Mesh Visual</h2>
-<p>The mesh visual renders a mesh using a <span style="font-family: Courier New,Courier,monospace;">.obj</span> file, optionally with textures provided by a <span style="font-family: Courier New,Courier,monospace;">.mtl</span> file. The mesh is scaled to fit the control.</p>
+<p>The mesh visual renders a mesh using a <code>.obj</code> file, optionally with textures provided by a <code>.mtl</code> file. The mesh is scaled to fit the control.</p>
-<p class="figure">Figure: Mesh visual</p>
+<p align="center"><strong>Figure: Mesh visual</strong></p>
<p align="center"><img alt="Mesh visual" src="../../../images/dali_mesh_visual.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::MESH</span> or <span style="font-family: Courier New,Courier,monospace;">"MESH"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::MESH</code> or <code>"MESH"</code>.</p>
+<p align="center" class="Table"><strong>Table: Mesh visual properties</strong></p>
<table>
-<caption>Table: Mesh visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::OBJECT_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">objectUrl</span></td>
+ <td><code>MeshVisual::Property::OBJECT_URL</code></td>
+ <td><code>objectUrl</code></td>
<td>STRING</td>
<td>Yes</td>
- <td>The location of the <span style="font-family: Courier New,Courier,monospace;">.obj</span> file.</td>
+ <td>The location of the <code>.obj</code> file.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::MATERIAL_URL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">materialUrl</span></td>
+ <td><code>MeshVisual::Property::MATERIAL_URL</code></td>
+ <td><code>materialUrl</code></td>
<td>STRING</td>
<td>No</td>
- <td>The location of the <span style="font-family: Courier New,Courier,monospace;">.mtl</span> file. Leave blank for a textureless object.</td>
+ <td>The location of the <code>.mtl</code> file. Leave blank for a textureless object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::TEXTURES_PATH</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">texturesPath</span></td>
+ <td><code>MeshVisual::Property::TEXTURES_PATH</code></td>
+ <td><code>texturesPath</code></td>
<td>STRING</td>
<td>If using material</td>
<td>The path to the directory the textures (including gloss and normal) are stored in.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::SHADING_MODE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">shadingMode</span></td>
+ <td><code>MeshVisual::Property::SHADING_MODE</code></td>
+ <td><code>shadingMode</code></td>
<td>INTEGER or STRING</td>
<td>No</td>
<td>The type of the shading mode that the mesh uses.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::USE_MIPMAPPING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">useMipmapping</span></td>
+ <td><code>MeshVisual::Property::USE_MIPMAPPING</code></td>
+ <td><code>useMipmapping</code></td>
<td>BOOLEAN</td>
<td>No</td>
- <td>Whether to use mipmaps for textures. By default, <span style="font-family: Courier New,Courier,monospace;">true</span>.</td>
+ <td>Whether to use mipmaps for textures. By default, <code>true</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::USE_SOFT_NORMALS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">useSoftNormals</span></td>
+ <td><code>MeshVisual::Property::USE_SOFT_NORMALS</code></td>
+ <td><code>useSoftNormals</code></td>
<td>BOOLEAN</td>
<td>No</td>
- <td>Whether to average normals at each point to smooth textures. By default, <span style="font-family: Courier New,Courier,monospace;">true</span>.</td>
+ <td>Whether to average normals at each point to smooth textures. By default, <code>true</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::LIGHT_POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">lightPosition</span></td>
+ <td><code>MeshVisual::Property::LIGHT_POSITION</code></td>
+ <td><code>lightPosition</code></td>
<td>VECTOR3</td>
<td>No</td>
<td>The position, in stage space, of the point light that applies lighting to the model.</td>
</table>
<ul>
-<li>When specifying the <span style="font-family: Courier New,Courier,monospace;">shadingMode</span>, if anything the mode requires is missing, a simpler mode that can be handled with what has been supplied is used instead.
+<li>When specifying the <code>shadingMode</code>, if anything the mode requires is missing, a simpler mode that can be handled with what has been supplied is used instead.
+<p align="center" class="Table"><strong>Table: Shading mode values</strong></p>
<table>
-<caption>Table: Shading mode values</caption>
<tbody>
<tr>
<th>Enumeration</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURELESS_WITH_DIFFUSE_LIGHTING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURELESS_WITH_DIFFUSE_LIGHTING</span></td>
+ <td><code>MeshVisual::ShaderType::TEXTURELESS_WITH_DIFFUSE_LIGHTING</code></td>
+ <td><code>TEXTURELESS_WITH_DIFFUSE_LIGHTING</code></td>
<td>Simplest. One color that is lit by ambient and diffuse lighting.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURED_WITH_SPECULAR_LIGHTING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURED_WITH_SPECULAR_LIGHTING</span></td>
+ <td><code>MeshVisual::ShaderType::TEXTURED_WITH_SPECULAR_LIGHTING</code></td>
+ <td><code>TEXTURED_WITH_SPECULAR_LIGHTING</code></td>
<td>Uses only the visual image textures provided with specular lighting in addition to ambient and diffuse lighting.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</span></td>
+ <td><code>MeshVisual::ShaderType::TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</code></td>
+ <td><code>TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</code></td>
<td>Uses all textures provided including a gloss, normal, and texture map along with specular, ambient, and diffuse lighting.</td>
</tr>
</tbody>
<p>The primitive visual renders a simple 3D shape, such as a cube or sphere. The shape is scaled to fit the control. The shapes are generated with clockwise winding and back-face culling on by default.</p>
-<p class="figure">Figure: Primitive visual</p>
+<p align="center"><strong>Figure: Primitive visual</strong></p>
<p align="center"><img alt="Primitive visual" src="../../../images/dali_primitive_visual1.png"/></p>
-<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::PRIMITIVE</span> or <span style="font-family: Courier New,Courier,monospace;">"PRIMITIVE"</span>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::PRIMITIVE</code> or <code>"PRIMITIVE"</code>.</p>
+<p align="center" class="Table"><strong>Table: Primitive visual properties</strong></p>
<table>
-<caption>Table: Primitive visual properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Range</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SHAPE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">shape</span></td>
+ <td><code>PrimitiveVisual::Property::SHAPE</code></td>
+ <td><code>shape</code></td>
<td>INTEGER or STRING</td>
<td>The specific shape to render.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::SPHERE</span> or <span style="font-family: Courier New,Courier,monospace;">"SPHERE"</span></td>
+ <td><code>PrimitiveVisual::Shape::SPHERE</code> or <code>"SPHERE"</code></td>
<td>See the <a href="#shapes">Shape values</a> table.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::COLOR</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">shapeColor</span></td>
+ <td><code>PrimitiveVisual::Property::COLOR</code></td>
+ <td><code>shapeColor</code></td>
<td>VECTOR4</td>
<td>The color of the shape.</td>
<td>(0.5, 0.5, 0.5, 1.0)</td>
<td>0.0 - 1.0 for each</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SLICES</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ <td><code>PrimitiveVisual::Property::SLICES</code></td>
+ <td><code>slices</code></td>
<td>INTEGER</td>
<td>The number of slices as you go around the shape.</td>
<td>128</td>
<td>1 - 255</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::STACKS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">stacks</span></td>
+ <td><code>PrimitiveVisual::Property::STACKS</code></td>
+ <td><code>stacks</code></td>
<td>INTEGER</td>
<td>The number of stacks as you go down the shape.</td>
<td>128</td>
<td>1 - 255</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_TOP_RADIUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">scaleTopRadius</span></td>
+ <td><code>PrimitiveVisual::Property::SCALE_TOP_RADIUS</code></td>
+ <td><code>scaleTopRadius</code></td>
<td>FLOAT</td>
<td>The scale of the radius of the top circle of a conical frustrum.</td>
<td>1.0</td>
<td>>= 0.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span></td>
+ <td><code>PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS</code></td>
+ <td><code>scaleBottomRadius</code></td>
<td>FLOAT</td>
<td>The scale of the radius of the bottom circle of a conical frustrum.</td>
<td>1.5</td>
<td>>= 0.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_HEIGHT</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">scaleHeight</span></td>
+ <td><code>PrimitiveVisual::Property::SCALE_HEIGHT</code></td>
+ <td><code>scaleHeight</code></td>
<td>FLOAT</td>
<td>The scale of the height of a conic.</td>
<td>3.0</td>
<td>> 0.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_RADIUS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">scaleRadius</span></td>
+ <td><code>PrimitiveVisual::Property::SCALE_RADIUS</code></td>
+ <td><code>scaleRadius</code></td>
<td>FLOAT</td>
<td>The scale of the radius of a cylinder.</td>
<td>1.0</td>
<td>> 0.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_DIMENSIONS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">scaleDimension</span></td>
+ <td><code>PrimitiveVisual::Property::SCALE_DIMENSIONS</code></td>
+ <td><code>scaleDimension</code></td>
<td>VECTOR3</td>
<td>The dimensions of a cuboid. Scales in the same fashion as a 9-patch image.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">Vector3::ONE</span></td>
+ <td><code>Vector3::ONE</code></td>
<td>> 0.0 for each</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::BEVEL_PERCENTAGE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">bevelPercentage</span></td>
+ <td><code>PrimitiveVisual::Property::BEVEL_PERCENTAGE</code></td>
+ <td><code>bevelPercentage</code></td>
<td>FLOAT</td>
<td>Defines how beveled the cuboid must be, based on the smallest dimension.</td>
<td>0.0 (no bevel)</td>
<td>0.0 - 1.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::BEVEL_SMOOTHNESS</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">bevelSmoothness</span></td>
+ <td><code>PrimitiveVisual::Property::BEVEL_SMOOTHNESS</code></td>
+ <td><code>bevelSmoothness</code></td>
<td>FLOAT</td>
<td>Defines how smooth the beveled edges must be.</td>
<td>0.0 (sharp edges)</td>
<td>0.0 - 1.0</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::LIGHT_POSITION</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">lightPosition</span></td>
+ <td><code>PrimitiveVisual::Property::LIGHT_POSITION</code></td>
+ <td><code>lightPosition</code></td>
<td>VECTOR3</td>
<td>The position, in stage space, of the point light that applies lighting to the model.</td>
<td>(Offset outwards from the center of the screen.)</td>
</tbody>
</table>
-<ul><li>You can select from 6 <span style="font-family: Courier New,Courier,monospace;">shape</span> values, some of which are simplified specializations of another.
+<ul><li>You can select from 6 <code>shape</code> values, some of which are simplified specializations of another.
+<p align="center" class="Table"><strong>Table: Shape values</strong></p>
<table id="shapes">
- <caption>Table: Shape values</caption>
<tbody>
<tr>
<th>Enumeration</th>
<th>Parameters</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::SPHERE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">SPHERE</span></td>
+ <td><code>PrimitiveVisual::Shape::SPHERE</code></td>
+ <td><code>SPHERE</code></td>
<td>Default</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span>, <span style="font-family: Courier New,Courier,monospace;">stacks</span></td>
+ <td><code>color</code>, <code>slices</code>, <code>stacks</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CONICAL_FRUSTRUM</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">CONICAL_FRUSTRUM</span></td>
+ <td><code>PrimitiveVisual::Shape::CONICAL_FRUSTRUM</code></td>
+ <td><code>CONICAL_FRUSTRUM</code></td>
<td>The area bound between 2 circles (basically, a cone with the tip removed)</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleTopRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ <td><code>color</code>, <code>scaleTopRadius</code>, <code>scaleBottomRadius</code>, <code>scaleHeight</code>, <code>slices</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CONE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">CONE</span></td>
+ <td><code>PrimitiveVisual::Shape::CONE</code></td>
+ <td><code>CONE</code></td>
<td>Equivalent to a conical frustrum with the top radius of zero.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ <td><code>color</code>, <code>scaleBottomRadius</code>, <code>scaleHeight</code>, <code>slices</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CYLINDER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">CYLINDER</span></td>
+ <td><code>PrimitiveVisual::Shape::CYLINDER</code></td>
+ <td><code>CYLINDER</code></td>
<td>Equivalent to a conical frustrum with equal radii for the top and bottom circles.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ <td><code>color</code>, <code>scaleRadius</code>, <code>scaleHeight</code>, <code>slices</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CUBE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">CUBE</span></td>
+ <td><code>PrimitiveVisual::Shape::CUBE</code></td>
+ <td><code>CUBE</code></td>
<td>Equivalent to a beveled cube with a bevel percentage of zero.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span></td>
+ <td><code>color</code>, <code>scaleDimensions</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::OCTAHEDRON</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">OCTAHEDRON</span></td>
+ <td><code>PrimitiveVisual::Shape::OCTAHEDRON</code></td>
+ <td><code>OCTAHEDRON</code></td>
<td>Equivalent to a beveled cube with a bevel percentage of 1.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span></td>
+ <td><code>color</code>, <code>scaleDimensions</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::BEVELLED_CUBE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">BEVELLED_CUBE</span></td>
+ <td><code>PrimitiveVisual::Shape::BEVELLED_CUBE</code></td>
+ <td><code>BEVELLED_CUBE</code></td>
<td>A cube/cuboid with all edges flattened to some degree.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span>, <span style="font-family: Courier New,Courier,monospace;">bevelPercentage</span>, <span style="font-family: Courier New,Courier,monospace;">bevelSmoothness</span></td>
+ <td><code>color</code>, <code>scaleDimensions</code>, <code>bevelPercentage</code>, <code>bevelSmoothness</code></td>
</tr>
</tbody>
</table>
<h2 id="wireframe">Wireframe Visual</h2>
-<p>The wireframe visual renders a wireframe around a control's quad. It is mainly used for debugging and is the visual that replaces all other visuals when <strong>Visual Debug Rendering</strong> is switched on. To switch <strong>Visual Debug Rendering</strong> on, set the <span style="font-family: Courier New,Courier,monospace;">DALI_DEBUG_RENDERING</span> environment variable to 1 before launching the DALi application.</p>
-
-<p class="figure">Figure: Wireframe visual</p>
+<p>The wireframe visual renders a wireframe around a control's quad. It is mainly used for debugging and is the visual that replaces all other visuals when <strong>Visual Debug Rendering</strong> is switched on. To switch <strong>Visual Debug Rendering</strong> on, set the <code>DALI_DEBUG_RENDERING</code> environment variable to 1 before launching the DALi application.</p>
+
+<p align="center"><strong>Figure: Wireframe visual</strong></p>
<p align="center"><img alt="Wireframe visual" src="../../../images/dali_wireframe_visual.png"/></p>
-<p>The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::WIREFRAME</span> or <span style="font-family: Courier New,Courier,monospace;">"WIREFRAME"</span>.</p>
+<p>The visual type is <code>Visual::WIREFRAME</code> or <code>"WIREFRAME"</code>.</p>
<p><strong>Usage:</strong></p>
<p>The following figure shows the general view of the accessibility framework architecture for Tizen 3.0.</p>
-<p class="figure">Figure: Accessibility framework architecture</p>
+<p align="center"><strong>Figure: Accessibility framework architecture</strong></p>
<p align="center"><img alt="Accessibility framework architecture" src="../../../images/accessibility-framework-architecture.png" /></p>
<p>The following figure and table show the component model of the accessibility framework architecture for Tizen 3.0 and the related components.</p>
-<p class="figure">Figure: Component model</p>
-<p align="center"><img alt="Component model" src="../../../images/accessibility-framework-architecture-component-model.png" /></p>
-
+<p align="center"><strong>Figure: Component model</strong></p>
+<p align="center"><img alt="Component model" src="../../../images/accessibility-framework-architecture-component-model.png" /></p>
+
+<p align="center" class="Table"><strong>Table: Components</strong></p>
<table>
-<caption>Table: Components</caption>
<tbody>
<tr>
<th>Component name</th>
<p>The following figure shows the EFL Elementary ATSPI implementation architecture.</p>
-<p class="figure">Figure: Implementation architecture</p>
+<p align="center"><strong>Figure: Implementation architecture</strong></p>
<p align="center"><img alt="Implementation architecture" src="../../../images/elm-atspi-architecture.png" /></p>
<h2>Operational Model of the Screen Reader</h2>
<p>The general outline of the screen reader navigation operation recognizes gestures based on multi-touch pointer events. It queries the accessibility object tree of the active application, and determines which UI element must be highlighted and read.</p>
<p>The following figure shows the operational model.</p>
-<p class="figure">Figure: Screen reader operational model</p>
+<p align="center"><strong>Figure: Screen reader operational model</strong></p>
<p align="center"><img alt="Screen reader operational model" src="../../../images/screen-reader-navigation-operation-model.png" /></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<li>Select <strong>Accessibility > Screen Reader</strong>.</li>
<li>Enable the <strong>Screen Reader (TTS)</strong> setting.</li></ol>
-<p class="figure">Figure: Enabling the screen reader</p>
+<p align="center"><strong>Figure: Enabling the screen reader</strong></p>
<p align="center"><img alt="Enabling the screen reader" src="../../../images/ui-controls.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility-screen-reader.png" /></p>
<p>Once the screen reader is enabled, you can configure it by setting the speech rate and the language:</p>
<ol><li>In the built-in Settings application, select <strong>Language and Input > TTS</strong>.</li>
<li>Select the preferred speech rate by hovering one finger over the <strong>Speech rate</strong> scale. The sample voice output is produced at a corresponding speech rate.</li></ol>
-<p class="figure">Figure: Setting the speech rate</p>
+<p align="center"><strong>Figure: Setting the speech rate</strong></p>
<p align="center"><img alt="Setting the speech rate" src="../../../images/settings.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input-tts.png" /></p>
</li>
<li>
<h2 id="font_size" name="font_size">Setting the Font Size</h2>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Changing the font size in the accessibility settings overrides the font size in all applications.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Changing the font size in the accessibility settings overrides the font size in all applications.
+</div>
+
<p>To change the system font size:</p>
<ol><li>In the built-in Settings application, select <strong>Display > Font</strong>.</li>
<li>Select the font size:
-<p class="figure">Figure: Changing the font size</p>
+<p align="center"><strong>Figure: Changing the font size</strong></p>
<p align="center"><img alt="Changing the font size" src="../../../images/settings.png" /> <img alt="Changing the font size" src="../../../images/settings-display.png" /> <img alt="Changing the font size" src="../../../images/settings-display-fonts.png" /></p>
<p>You can use the mobile native <a href="https://developer.tizen.org/development/sample/native/UI/UI_Components" target="_blank">UI Components</a> sample application provided within the Tizen Studio to see how the most important accessibility features are implemented in practice. The sample application contains an AT-SPI2 compliant screen reader, which you can use to test the accessibility features in a device. Enable the screen reader by running the sample application and selecting <strong>Accessibility > Screen Reader > Screen Reader (TTS)</strong>.</p>
<p>In the Tizen 2.4 release, the screen reader is available only inside the UI Components application. This means that when the UI Components application is terminated or paused and sent to the background, the screen reader is automatically disabled, and when the UI Components application is restored, the screen reader is enabled.</p>
-<p class="figure">Figure: UI Components sample application</p>
+<p align="center"><strong>Figure: UI Components sample application</strong></p>
<p align="center"><img src="../../../images/ui-controls.png" alt="UI Components sample application" /> <img src="../../../images/ui-controls-accessibility.png" alt="UI Components sample application" /> <img src="../../../images/ui-controls-accessibility-screen-reader.png" alt="Screen reader" /></p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If reading of any arbitrary text directly from the application needs to be synchronized with the screen reader voice output, you must use the Tizen platform TTS API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), which is also used by the screen reader.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ If reading of any arbitrary text directly from the application needs to be synchronized with the screen reader voice output, you must use the Tizen platform TTS API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), which is also used by the screen reader.
+</div>
<h3>Making UI Components Readable</h3>
<ul>
<li>Label:
-<p>The label on the component is, for example, <strong>Ok</strong> or <strong>Cancel</strong> (in case of a button). The label maps to the <span style="font-family: Courier New,Courier,monospace">name</span> property of the AT-SPI2 object and is equivalent to the result of the <span style="font-family: Courier New,Courier,monospace">elm_object_text_get()</span> function. The property can be also overwritten using the <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_name_set()</span> function.</p>
+<p>The label on the component is, for example, <strong>Ok</strong> or <strong>Cancel</strong> (in case of a button). The label maps to the <code>name</code> property of the AT-SPI2 object and is equivalent to the result of the <code>elm_object_text_get()</code> function. The property can be also overwritten using the <code>elm_atspi_accessible_name_set()</code> function.</p>
</li>
<li>Traits:
-<p>The traits are the component type or role, for example, <span style="font-family: Courier New,Courier,monospace">"Button"</span> (in case of a button). The trait maps to the <span style="font-family: Courier New,Courier,monospace">role</span> property of the AT-SPI2 object.</p>
+<p>The traits are the component type or role, for example, <code>"Button"</code> (in case of a button). The trait maps to the <code>role</code> property of the AT-SPI2 object.</p>
</li>
<li>State:
-<p>The value or status of the component is, for example, <span style="font-family: Courier New,Courier,monospace">"Disabled"</span> (in case of a disabled button).</p>
+<p>The value or status of the component is, for example, <code>"Disabled"</code> (in case of a disabled button).</p>
</li>
<li>Description (optional attribute):
-<p>The hint or guide to explain the component is, for example, "This button closes your application" (in case of a button). The description maps to the <span style="font-family: Courier New,Courier,monospace">description</span> property of the AT-SPI2 object.</p>
+<p>The hint or guide to explain the component is, for example, "This button closes your application" (in case of a button). The description maps to the <code>description</code> property of the AT-SPI2 object.</p>
</li>
</ul>
<p>The following table lists the functions you can use to set EFL Elementary UI component information to be read by the screen reader, and to support internationalization (i18n) for the information.</p>
+<p align="center" class="Table"><strong>Table: Functions for making UI components readable</strong></p>
<table>
- <caption>Table: Functions for making UI components readable</caption>
<tbody>
<tr>
<th>Function</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">void elm_atspi_accessible_name_set(Elm_Interface_Atspi_Accessible *obj, const char *text)</span></td>
+ <td><code>void elm_atspi_accessible_name_set(Elm_Interface_Atspi_Accessible *obj, const char *text)</code></td>
<td>Set a text of an object.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary object</li>
- <li><span style="font-family: Courier New,Courier,monospace">text</span>: New accessible name for the object</li>
+ <li><code>obj</code>: Elementary object</li>
+ <li><code>text</code>: New accessible name for the object</li>
</ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">void elm_atspi_accessible_role_set(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Role role)</span></td>
+ <td><code>void elm_atspi_accessible_role_set(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Role role)</code></td>
<td>Set the accessible role.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary object</li>
- <li><span style="font-family: Courier New,Courier,monospace">role</span>: New accessible role for the object</li>
+ <li><code>obj</code>: Elementary object</li>
+ <li><code>role</code>: New accessible role for the object</li>
</ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">void elm_atspi_accessible_description_set(Elm_Interface_Atspi_Accessible *obj, const char *text)</span></td>
+ <td><code>void elm_atspi_accessible_description_set(Elm_Interface_Atspi_Accessible *obj, const char *text)</code></td>
<td>Set the accessible description.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary object</li>
- <li><span style="font-family: Courier New,Courier,monospace">text</span>: Description text for the object</li>
+ <li><code>obj</code>: Elementary object</li>
+ <li><code>text</code>: Description text for the object</li>
</ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">void elm_atspi_accessible_translation_domain_set(Elm_Interface_Atspi_Accessible *obj, const char *domain)</span></td>
+ <td><code>void elm_atspi_accessible_translation_domain_set(Elm_Interface_Atspi_Accessible *obj, const char *domain)</code></td>
<td>Bind the translation domain to the accessible object.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary object</li>
- <li><span style="font-family: Courier New,Courier,monospace">domain</span>: Translation domain (name space for translation keys)</li>
+ <li><code>obj</code>: Elementary object</li>
+ <li><code>domain</code>: Translation domain (name space for translation keys)</li>
</ul>
</td>
</tr>
- <p class="figure">Figure: Readable components in the UI Components sample</p>
+ <p align="center"><strong>Figure: Readable components in the UI Components sample</strong></p>
<p align="center"><img src="../../../images/ui-controls-accessibility-screen-reader-ui-description.png" alt="Readable components in the UI Components sample" />
</p>
<p>The Elementary library sets the default information (label, traits, state) for the components, except for an icon and image. You can override the default information in various ways:</p>
<ul>
<li>Button with a custom name
- <p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function to define a custom name.</p>
+ <p>Use the <code>elm_object_text_set()</code> function to define a custom name.</p>
<pre class="prettyprint">
/* File: src/accessibility/screen_reader/description.c */
</li>
<li>Button with an internationalized description
- <p>Use the <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_description_set()</span> function to define a description. To make multiple language versions available define the actual description strings in PO files and use the <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_translation_domain_set()</span> function to bind the translation domain to the component.</p>
+ <p>Use the <code>elm_atspi_accessible_description_set()</code> function to define a description. To make multiple language versions available define the actual description strings in PO files and use the <code>elm_atspi_accessible_translation_domain_set()</code> function to bind the translation domain to the component.</p>
<pre class="prettyprint">
/* File: CMakeLists.txt */
elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
</pre>
- <p>If the user highlights the button and the display language is set to English (US), the screen reader says "Test Name, button, one finger double tap to activate" (it reads out the component custom name, default trait, and description from the <span style="font-family: Courier New,Courier,monospace">en_US.po</span> file). If the display language is changed, the description string from the relevant PO file is used.</p>
+ <p>If the user highlights the button and the display language is set to English (US), the screen reader says "Test Name, button, one finger double tap to activate" (it reads out the component custom name, default trait, and description from the <code>en_US.po</code> file). If the display language is changed, the description string from the relevant PO file is used.</p>
</li>
<li>Button with an accessible name
- <p>Use the <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_name_set()</span> function to define an accessible name.</p>
+ <p>Use the <code>elm_atspi_accessible_name_set()</code> function to define an accessible name.</p>
<pre class="prettyprint">
/* File: src/accessibility/screen_reader/description.c */
elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
</pre>
-<p>If the user highlights the button, the screen reader says "Button accessibility name, button" (it reads out the component accessible name from the <span style="font-family: Courier New,Courier,monospace">en_US.po</span> file and the default trait). If the display language is changed, the accessible name string from the relevant PO file is used.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_name_set()</span> function overrides the custom name set earlier with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+<p>If the user highlights the button, the screen reader says "Button accessibility name, button" (it reads out the component accessible name from the <code>en_US.po</code> file and the default trait). If the display language is changed, the accessible name string from the relevant PO file is used.</p>
+<p>The <code>elm_atspi_accessible_name_set()</code> function overrides the custom name set earlier with the <code>elm_object_text_set()</code> function.</p>
</li>
</ul>
-<p>You can also create a custom reading of multi-style components. Sometimes, it is necessary to have different voice output depending on the style assigned to the UI component. The <span style="font-family: Courier New,Courier,monospace">default</span> style is handled "out of the box" by the accessibility framework, but you must handle any alternative styles on the application side. The elementary checkbox component and Tizen 2.4 UX guideline for the screen reader offer a good example of alternative styles:</p>
+<p>You can also create a custom reading of multi-style components. Sometimes, it is necessary to have different voice output depending on the style assigned to the UI component. The <code>default</code> style is handled "out of the box" by the accessibility framework, but you must handle any alternative styles on the application side. The elementary checkbox component offers a good example of alternative styles:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span> style in a checkbox:
+<li><code>default</code> style in a checkbox:
<p>The reading must be "<label>, <state>", where <label> is a text assigned to the checkbox and <state> is read as "selected" or "not selected", depending on the checkbox state.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">favorite</span> style in a checkbox:
+<li><code>favorite</code> style in a checkbox:
<p>The reading must be "Favorite button, <state>", where <state> is read as "selected" or "not selected", depending on the checkbox state.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">on&off</span> style in a checkbox:
+<li><code>on&off</code> style in a checkbox:
<p>The reading must be "On/off button, <state>", where <state> is read as "on" or "off", depending on the checkbox state.</p></li>
</ul>
-<p>The following source code snippet demonstrates how to handle the <span style="font-family: Courier New,Courier,monospace">favorite</span> and <span style="font-family: Courier New,Courier,monospace">on&off</span> checkbox styles in the application source code:</p>
+<p>The following source code snippet demonstrates how to handle the <code>favorite</code> and <code>on&off</code> checkbox styles in the application source code:</p>
<pre class="prettyprint">
/* File: src/check.c */
<h3>Setting the UI Reading Order</h3>
<p>The following table lists the functions you can use to customize the order in which the screen reader covers the UI components on the screen.</p>
+
+<p align="center" class="Table"><strong>Table: Functions for setting the reading order</strong></p>
<table>
- <caption>Table: Functions for setting the reading order</caption>
<tbody>
<tr>
<th>Function</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Eina_Bool elm_atspi_accessible_relationship_append(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Relation_Type type, const Elm_Interface_Atspi_Accessible *relation_object)</span></td>
+ <td><code>Eina_Bool elm_atspi_accessible_relationship_append(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Relation_Type type, const Elm_Interface_Atspi_Accessible *relation_object)</code></td>
<td>Append the relation to the relation set of a certain object or component object.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary accessible object (relation source)</li>
- <li><span style="font-family: Courier New,Courier,monospace">type</span>: Type of the ATSPI relation</li>
- <li><span style="font-family: Courier New,Courier,monospace">relation_object</span>: Relation target object</li>
+ <li><code>obj</code>: Elementary accessible object (relation source)</li>
+ <li><code>type</code>: Type of the ATSPI relation</li>
+ <li><code>relation_object</code>: Relation target object</li>
</ul>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">void elm_atspi_accessible_relationship_remove(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Relation_Type type, const Elm_Interface_Atspi_Accessible *relation_object)</span></td>
+ <td><code>void elm_atspi_accessible_relationship_remove(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Relation_Type type, const Elm_Interface_Atspi_Accessible *relation_object)</code></td>
<td>Remove the relation from the relation set of a certain object or component object.
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">obj</span>: Elementary accessible object (relation source)</li>
- <li><span style="font-family: Courier New,Courier,monospace">type</span>: Type of the ATSPI relation</li>
- <li><span style="font-family: Courier New,Courier,monospace">relation_object</span>: Relation target object</li>
+ <li><code>obj</code>: Elementary accessible object (relation source)</li>
+ <li><code>type</code>: Type of the ATSPI relation</li>
+ <li><code>relation_object</code>: Relation target object</li>
</ul>
</td>
</tr>
<p>The following figure illustrates the UI reading order example in the UI Components sample application. In the top part of the screen, the components have been ordered explicitly by the developer by setting the ATSPI standard relations between accessible objects corresponding to these components. In the bottom part of the screen, the components have no relation-based navigation set at all. This results in the natural reading order of the UI elements maintained implicitly by the screen reader itself. The natural reading order is a heuristic based on the UI elements' geometrical position on the screen (top to bottom, and left to right reading direction).</p>
-<p class="figure">Figure: UI reading order in the UI Components sample</p>
+<p align="center"><strong>Figure: UI reading order in the UI Components sample</strong></p>
<p align="center"><img src="../../../images/ui-controls-accessibility-screen-reader-ui-reading-order.png" alt="UI reading order in the UI Components sample" />
</p>
-<p>The following code illustrates how the customized reading order for the top part of the screen has been implemented. The component relations are defined with <span style="font-family: Courier New,Courier,monospace">ATSPI_RELATION_FLOWS_TO</span> and <span style="font-family: Courier New,Courier,monospace">ATSPI_RELATION_FLOWS_FROM</span> parameters. In addition to the normal relations used when navigating forward, inverse relations are defined as well to ensure proper behavior when navigating backward.</p>
+<p>The following code illustrates how the customized reading order for the top part of the screen has been implemented. The component relations are defined with <code>ATSPI_RELATION_FLOWS_TO</code> and <code>ATSPI_RELATION_FLOWS_FROM</code> parameters. In addition to the normal relations used when navigating forward, inverse relations are defined as well to ensure proper behavior when navigating backward.</p>
<p>You can have various independent relation-based navigation chains on one screen. Each relation-based navigation chain is resolved locally and has priority over the default navigation order maintained by the screen reader. When one of the ends of a relation-based navigation chain is reached, the highlight frame goes forward along to the actual navigation direction to the closest component in the default navigation order. It omits interim components of the relation-based navigation chains. In this example, when the navigation command "next" is called from the <strong>c</strong> button, the highlight frame goes from the <strong>c</strong> button to the <strong>Default reading order</strong> label.</p>
btnA = elm_button_add(layout);
elm_object_text_set(btnA, "a");
-/* Inform the assistive technology that UI information must be presented in following order (btnA is by-passed) */
+/*
+ Inform the assistive technology that UI information
+ must be presented in following order (btnA is by-passed)
+*/
elm_atspi_accessible_relationship_append(labelCustom, ELM_ATSPI_RELATION_FLOWS_TO, btnD);
elm_atspi_accessible_relationship_append(btnD, ELM_ATSPI_RELATION_FLOWS_TO, btnE);
elm_atspi_accessible_relationship_append(btnE, ELM_ATSPI_RELATION_FLOWS_TO, btnB);
elm_atspi_accessible_relationship_append(btnD, ELM_ATSPI_RELATION_FLOWS_FROM, labelCustom);
</pre>
-<p>Navigation relations can also be used to exclude some components from the sequential navigation (for example, they are not reachable using the "next" or "previous" navigation commands triggered on 1-finger flicks). In the example, the <strong>a</strong> button was by-passed by setting a navigation relation between the <strong>Custom reading order</strong> label and the <strong>d</strong> button. However, the <strong>a</strong> button can still be reached by direct navigation (1-finger single tap or 1-finger hover). To entirely exclude the component from navigation (including direct navigation), set the <span style="font-family: Courier New,Courier,monospace">ATSPI_ROLE_REDUNDANT_OBJECT</span> role for the component using the <span style="font-family: Courier New,Courier,monospace">elm_atspi_accessible_role_set()</span> function.</p>
+<p>Navigation relations can also be used to exclude some components from the sequential navigation (for example, they are not reachable using the "next" or "previous" navigation commands triggered on 1-finger flicks). In the example, the <strong>a</strong> button was by-passed by setting a navigation relation between the <strong>Custom reading order</strong> label and the <strong>d</strong> button. However, the <strong>a</strong> button can still be reached by direct navigation (1-finger single tap or 1-finger hover). To entirely exclude the component from navigation (including direct navigation), set the <code>ATSPI_ROLE_REDUNDANT_OBJECT</code> role for the component using the <code>elm_atspi_accessible_role_set()</code> function.</p>
<h3>Customizing the Highlight Frame</h3>
<p>The accessibility framework provides a highlight frame around the currently selected or focused UI component, and you can customize its size, shape, and color. The following code snippets demonstrate how to adjust the style of the highlight frame from the default yellow style (left in the figure) to a custom red style (right in the figure).</p>
-<p class="figure">Figure: Highlight frame in the UI Components sample</p>
+<p align="center"><strong>Figure: Highlight frame in the UI Components sample</strong></p>
<p align="center"><img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-1.png" /> <img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-2.png" /></p>
<p>The following code snippets has been simplified to make the example clearer. Irrelevant code has been omitted, and long variables and resource names have been shortened to avoid line wrapping. The full version of the source code is available in the following files:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">CMakeLists.txt</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">edc_resource/accessibility/screen_reader/custom_frame.edc</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">edc_resource/default/inc/my_button_header.edc</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">edc_resource/default/my_button.edc</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">inc/main.h</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/images/btn_style_nor.png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/images/btn_style_sel.png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/images/core_dropdown_label_icon_arrow.png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/images/custom_highlight.png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/images/custom_highlight2.png</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">res/ui-controls.edc</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">src/accessibility/screen_reader.c</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">src/accessibility/screen_reader/custom_frame.c</span></li>
+<li><code>CMakeLists.txt</code></li>
+<li><code>edc_resource/accessibility/screen_reader/custom_frame.edc</code></li>
+<li><code>edc_resource/default/inc/my_button_header.edc</code></li>
+<li><code>edc_resource/default/my_button.edc</code></li>
+<li><code>inc/main.h</code></li>
+<li><code>res/images/btn_style_nor.png</code></li>
+<li><code>res/images/btn_style_sel.png</code></li>
+<li><code>res/images/core_dropdown_label_icon_arrow.png</code></li>
+<li><code>res/images/custom_highlight.png</code></li>
+<li><code>res/images/custom_highlight2.png</code></li>
+<li><code>res/ui-controls.edc</code></li>
+<li><code>src/accessibility/screen_reader.c</code></li>
+<li><code>src/accessibility/screen_reader/custom_frame.c</code></li>
</ul>
-<p>In the <span style="font-family: Courier New,Courier,monospace">edc_resource/default/my_button.edc</span> file, define the custom style for the component. In this example, the highlight frame for the button is changed.</p>
+<p>In the <code>edc_resource/default/my_button.edc</code> file, define the custom style for the component. In this example, the highlight frame for the button is changed.</p>
<ol>
-<li>Mark that the component can render the accessibility highlight frame by setting value of the <span style="font-family: Courier New,Courier,monospace">access_highlight</span> property to <span style="font-family: Courier New,Courier,monospace">on</span>.</li>
-<li>Register the <span style="font-family: Courier New,Courier,monospace">c_h_2.png</span> graphical resource, which contains the custom frame image.</li>
-<li>Define a new <span style="font-family: Courier New,Courier,monospace">highlight</span> part with 2 states: <span style="font-family: Courier New,Courier,monospace">default</span> and <span style="font-family: Courier New,Courier,monospace">visible</span>. In the <span style="font-family: Courier New,Courier,monospace">default</span> state, use the resource registered in the previous step to set the value of the <span style="font-family: Courier New,Courier,monospace">image.normal</span> property.</li>
+<li>Mark that the component can render the accessibility highlight frame by setting value of the <code>access_highlight</code> property to <code>on</code>.</li>
+<li>Register the <code>c_h_2.png</code> graphical resource, which contains the custom frame image.</li>
+<li>Define a new <code>highlight</code> part with 2 states: <code>default</code> and <code>visible</code>. In the <code>default</code> state, use the resource registered in the previous step to set the value of the <code>image.normal</code> property.</li>
<li>Program both states to show or hide the accessibility highlight frame on signals:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm,action,access_highlight,show</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm,action,access_highlight,hide</span></li></ul>
+<li><code>elm,action,access_highlight,show</code></li>
+<li><code>elm,action,access_highlight,hide</code></li></ul>
</li>
</ol>
}
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">src/accessibility/screen_reader/custom_frame.c</span> file, assign the style defined above to the button component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function, where the second parameter is the last segment of the <span style="font-family: Courier New,Courier,monospace">elm/button/base/custom2</span> group name defined in the EDC file.</p>
+<p>In the <code>src/accessibility/screen_reader/custom_frame.c</code> file, assign the style defined above to the button component using the <code>elm_object_style_set()</code> function, where the second parameter is the last segment of the <code>elm/button/base/custom2</code> group name defined in the EDC file.</p>
<pre class="prettyprint">
static Evas_Object*
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Mobile Wearable</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
</ul>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except where noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a background component in your application:</p>
<ol>
-<li>Add a background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function:
+<li>Add a background with the <code>elm_bg_add()</code> function:
<pre class="prettyprint">
Evas_Object *bg;
</li>
<li>Set the appearance of the background:
<ul>
-<li>Set a color to the background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function:
+<li>Set a color to the background using the <code>elm_bg_color_set()</code> function:
<pre class="prettyprint">
elm_bg_color_set(bg, 64, 127, 256);
</pre>
</li>
-<li>Set an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function:
+<li>Set an Edje group as a background using the <code>elm_bg_file_set()</code> function:
<pre class="prettyprint">
elm_bg_file_set(bg, "/path/to/the/edje", "group name");
</pre>
</li>
-<li>Set an image file as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function.
+<li>Set an image file as a background using the <code>elm_bg_file_set()</code> function.
<p>In case of an image background, you can set additional <a href="#bg_options">options</a>.</p>
<pre class="prettyprint">
elm_bg_file_set(bg, "/path/to/the/image", NULL);
<p>The following example shows a simple use case of the background component.</p>
+<p align="center" class="Table"><strong>Example: Background use case</strong></p>
<table border="0">
-<caption>Example: Background use case</caption>
-
<tbody>
<tr>
<td>
elm_object_content_set(bg, box);
label = elm_label_add(box);
-elm_object_text_set(label, "overlay swallow part") ;
+elm_object_text_set(label, "overlay swallow part");
evas_object_show(label);
elm_box_pack_end(box,label);
-elm_naviframe_item_push(nf, "Background", NULL, NULL, bg, NULL );
+elm_naviframe_item_push(nf, "Background", NULL, NULL, bg, NULL);
</pre>
</td>
<td>
<h2 id="bg_options">Options</h2>
-<p>When you set an image, you can set a few background options using the <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span> function.</p>
+<p>When you set an image, you can set a few background options using the <code>elm_bg_option_set()</code> function.</p>
<p>The following modes are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: Centers the background image.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: Scales the background image, retaining the aspect ratio.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: Stretches the background image to fill the UI component's area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: Tiles the background image at its original size.</li>
+<li><code>ELM_BG_OPTION_CENTER</code>: Centers the background image.</li>
+<li><code>ELM_BG_OPTION_SCALE</code>: Scales the background image, retaining the aspect ratio.</li>
+<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component's area.</li>
+<li><code>ELM_BG_OPTION_TILE</code>: Tiles the background image at its original size.</li>
</ul>
+
+<p align="center" class="Table"><strong>Table: Background options</strong></p>
<table>
-<caption>Table: Background options</caption>
<tbody>
<tr>
-<th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span></th>
-<th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span></th>
+<th><code>ELM_BG_OPTION_CENTER</code></th>
+<th><code>ELM_BG_OPTION_SCALE</code></th>
+ <th><code>ELM_BG_OPTION_STRETCH</code></th>
+ <th><code>ELM_BG_OPTION_TILE</code></th>
</tr>
<tr>
<td><p align="center"><img alt="Center" src="../../../images/bg_option_center.png" /></p></td>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Background styles</strong></p>
<table>
-<caption>Table: Background styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Description</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">default</span></td>
-<td rowspan="2"><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span><p><span style="font-family: Courier New,Courier,monospace">(alias:overlay)</span></p></td>
+<td><code>default</code></td>
+<td rowspan="2"><code>elm.swallow.content</code><p><code>(alias:overlay)</code></p></td>
<td>Default background style with an overlay swallow part on the top.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">transparent</span></td>
+<td><code>transparent</code></td>
<td>Transparent background style with overlay swallow part on the top.</td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To use a background component in your application:</p>
<ol>
-<li>Add a background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function:
+<li>Add a background with the <code>elm_bg_add()</code> function:
<pre class="prettyprint">
Evas_Object *bg;
</li>
<li>Set the appearance of the background:
<ul>
-<li>Set a color to the background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function:
+<li>Set a color to the background using the <code>elm_bg_color_set()</code> function:
<pre class="prettyprint">
elm_bg_color_set(bg, 64, 127, 256);
</pre>
</li>
-<li>Set an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function:
+<li>Set an Edje group as a background using the <code>elm_bg_file_set()</code> function:
<pre class="prettyprint">
elm_bg_file_set(bg, "/path/to/the/edje", "group name");
</pre>
</li>
-<li>Set an image file as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function.
+<li>Set an image file as a background using the <code>elm_bg_file_set()</code> function.
<p>In case of an image background, you can set additional <a href="#bg_options">options</a>.</p>
<pre class="prettyprint">
elm_bg_file_set(bg, "/path/to/the/image", NULL);
<p>The following example shows a simple use case of the background component.</p>
+<p align="center" class="Table"><strong>Example: Background use case</strong></p>
<table border="0">
-<caption>Example: Background use case</caption>
<tbody>
<tr>
elm_object_content_set(bg, box);
label = elm_label_add(box);
-elm_object_text_set(label, "overlay swallow part") ;
+elm_object_text_set(label, "overlay swallow part");
evas_object_show(label);
elm_box_pack_end(box,label);
</table>
<h2 id="bg_options">Options</h2>
-<p>When you set an image, you can set a few background options using the <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span> function.</p>
+<p>When you set an image, you can set a few background options using the <code>elm_bg_option_set()</code> function.</p>
<p>The following modes are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: Centers the background image.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: Scales the background image, retaining the aspect ratio.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: Stretches the background image to fill the UI component's area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: Tiles the background image at its original size.</li>
+<li><code>ELM_BG_OPTION_CENTER</code>: Centers the background image.</li>
+<li><code>ELM_BG_OPTION_SCALE</code>: Scales the background image, retaining the aspect ratio.</li>
+<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component's area.</li>
+<li><code>ELM_BG_OPTION_TILE</code>: Tiles the background image at its original size.</li>
</ul>
+<p align="center" class="Table"><strong>Table: Background options</strong></p>
<table>
-<caption>Table: Background options</caption>
<tbody>
<tr>
-<th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span></th>
-<th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span></th>
+<th><code>ELM_BG_OPTION_CENTER</code></th>
+<th><code>ELM_BG_OPTION_SCALE</code></th>
+ <th><code>ELM_BG_OPTION_STRETCH</code></th>
+ <th><code>ELM_BG_OPTION_TILE</code></th>
</tr>
<tr>
<td><p align="center"><img alt="Center" src="../../../images/rect_bg_option_center.png" /></p></td>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Background styles</strong></p>
<table>
-<caption>Table: Background styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Description</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">default</span></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span><p><span style="font-family: Courier New,Courier,monospace">(alias:overlay)</span></p></td>
+<td><code>default</code></td>
+<td><code>elm.swallow.content</code><p><code>(alias:overlay)</code></p></td>
<td>Default background style with an overlay swallow part on the top.</td>
</tr>
</tbody>
</table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a button component in your application:</p>
<ol>
- <li>Add a button with the <span style="font-family: Courier New,Courier,monospace">elm_button_add()</span> function:
+ <li>Add a button with the <code>elm_button_add()</code> function:
<pre class="prettyprint">
Evas_Object *button;
</li>
<li>Set a <a href="#style">style</a> and fill the button with a text or an image according to the style:
<ul>
- <li>Set a style to the button with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+ <li>Set a style to the button with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(button, "circle");
</pre>
</li>
- <li>Set a label to the button with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function, if the style supports a text part.
+ <li>Set a label to the button with the <code>elm_object_text_set()</code> function, if the style supports a text part.
<pre class="prettyprint">
elm_object_text_set(button, "Home");
</pre>
</li>
- <li>Set an image object to the button with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function, if the style supports a swallow part.
+ <li>Set an image object to the button with the <code>elm_object_part_content_set()</code> function, if the style supports a swallow part.
<pre class="prettyprint">
Evas_Object *icon;
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
<p>The following example shows a simple use case of the button component.</p>
+ <p align="center" class="Table"><strong>Example: Button use case</strong></p>
<table border="0">
- <caption>Example: Button use case</caption>
<tbody>
<tr>
<td>
<h2 id="feature">Features</h2>
-<p>You can use the autorepeat feature in your application. Once a button is pressed, a <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is emitted repeatedly until the button is released.</p>
+<p>You can use the autorepeat feature in your application. Once a button is pressed, a <code>repeated</code> signal is emitted repeatedly until the button is released.</p>
<ul>
<li><p>To disable the autorepeat feature:</p>
</pre>
</li>
<li>
-<p>To set the initial timeout before the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is emitted:</p>
+<p>To set the initial timeout before the <code>repeated</code> signal is emitted:</p>
<pre class="prettyprint">
elm_button_autorepeat_initial_timeout_set(button, 5.0);
</pre>
</li>
<li>
-<p>To set the interval between 2 <span style="font-family: Courier New,Courier,monospace">repeated</span> signals:</p>
+<p>To set the interval between 2 <code>repeated</code> signals:</p>
<pre class="prettyprint">
elm_button_autorepeat_gap_timeout_set(button, 0.5);
</pre>
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Button styles</strong></p>
<table>
- <caption>Table: Button styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/button/base/default" src="../../../images/button_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>default</code></td>
+ <td><code>icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">circle</span></td>
+ <td><code>circle</code></td>
<td align="center"><img alt="elm/button/base/circle" src="../../../images/button_circle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>default</code></td>
+ <td><code>icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">editfield_clear</span></td>
+ <td><code>editfield_clear</code></td>
<td align="center"><img alt="elm/button/base/editfield_clear" src="../../../images/button_editfield_clear.png" /></td>
<td>N/A</td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bottom</span></td>
+ <td><code>bottom</code></td>
<td align="center"><img alt="elm/button/base/bottom" src="../../../images/bottom.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>default</code></td>
+ <td><code>icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">icon_reorder</span></td>
+ <td><code>icon_reorder</code></td>
<td></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">icon_expand_add</span></td>
+ <td><code>icon_expand_add</code></td>
<td></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">icon_expand_delete</span></td>
+ <td><code>icon_expand_delete</code></td>
<td align="center"><img alt="elm/button/base/icon_expand_delete" src="../../../images/icon_expand_delete.png" /></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/title_left</span></td>
+ <td><code>naviframe/title_left</code></td>
<td align="center"><img alt="elm/button/base/naviframe/title_left" src="../../../images/button_title_left.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/title_right</span></td>
+ <td><code>naviframe/title_right</code></td>
<td align="center"><img alt="elm/button/base/naviframe/title_right" src="../../../images/button_title_right.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/back_btn/default</span></td>
+ <td><code>naviframe/back_btn/default</code></td>
<td align="center"><img alt="elm/button/base/naviframe/back_btn/default" src="../../../images/button_back_btn.png" /></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">dropdown</span></td>
+ <td><code>dropdown</code></td>
<td align="center"><img alt="elm/button/base/dropdown" src="../../../images/button_dropdown.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">contacts</span> (Tizen 2.3 only style)</td>
+ <td><code>contacts</code> (Tizen 2.3 only style)</td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/title_done</span> (Tizen 2.3 only style)</td>
+ <td><code>naviframe/title_done</code> (Tizen 2.3 only style)</td>
<td align="center"><img alt="elm/button/base/naviframe/title_done" src="../../../images/button_title_done_23.png" /></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/title_cancel</span> (Tizen 2.3 only style)</td>
+ <td><code>naviframe/title_cancel</code> (Tizen 2.3 only style)</td>
<td align="center"><img alt="elm/button/base/naviframe/title_cancel" src="../../../images/button_title_cancel_23.png" /></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/drawers</span> (Tizen 2.3 only style)</td>
+ <td><code>naviframe/drawers</code> (Tizen 2.3 only style)</td>
<td></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">option</span> (Tizen-2.3 only style)</td>
+ <td><code>option</code> (Tizen-2.3 only style)</td>
<td></td>
<td>N/A</td>
<td>N/A</td>
<p>You can register callback functions connected to the following signals for a button object.</p>
+ <p align="center" class="Table"><strong>Table: Button callback signals</strong></p>
<table>
- <caption>Table: Button callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The button is clicked (press and release).</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">repeated</span></td>
+ <td><code>repeated</code></td>
<td>The button is pressed without releasing it.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressed</span></td>
+ <td><code>pressed</code></td>
<td>The button is pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unpressed</span></td>
+ <td><code>unpressed</code></td>
<td>The button is released after being pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Button.html">Button</a> API.</p>
-<p class="figure">Figure: Button component</p>
+<p align="center"><strong>Figure: Button component</strong></p>
<p align="center"><img alt="Button component" src="../../../images/button_wn.png" /></p>
-<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><strong>Figure: Button hierarchy</strong></p>
<p align="center"><img alt="Button hierarchy" src="../../../images/button_tree.png" /></p>
<h2 id="add">Adding a Button Component</h2>
-<p>To create a button, use the <span style="font-family: Courier New,Courier,monospace">elm_button_add()</span> function:</p>
+<p>To create a button, use the <code>elm_button_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *button;
Evas_Object *parent;
<p>You can add an icon or text inside the button:</p>
<ul>
-<li>To add an icon, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name:
+<li>To add an icon, use the <code>elm_object_part_content_set()</code> function with the <code>icon</code> part name:
<pre class="prettyprint">
Evas_Object *ic;
elm_object_part_content_set(button, "icon", ic);
</pre></li>
-<li>To add text to the label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:
+<li>To add text to the label, use the <code>elm_object_text_set()</code> function:
<pre class="prettyprint">
elm_object_text_set(button, "Click me!");
<p>You can set a style for the button:</p>
<ul><li><p>The following styles are available for a rectangular screen:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">green</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">orange</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
+ <li><code>default</code></li>
+ <li><code>green</code></li>
+ <li><code>orange</code></li>
+ <li><code>red</code></li>
+ <li><code>nextdepth</code></li>
</ul></li>
<li>
<p>The following styles are available for a circular screen:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+ <li><code>default</code></li>
+ <li><code>bottom</code></li>
</ul></li></ul>
<pre class="prettyprint">
<p>To receive notifications about the button events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The button is clicked (press/release).</li>
- <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The button is pressed without releasing it.</li>
- <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The button is pressed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The button is released after being pressed.</li>
+ <li><code>clicked</code>: The button is clicked (press/release).</li>
+ <li><code>repeated</code>: The button is pressed without releasing it.</li>
+ <li><code>pressed</code>: The button is pressed.</li>
+ <li><code>unpressed</code>: The button is released after being pressed.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>In all cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>In all cases, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<p>To register and define a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
{
<h2 id="autorepeat">Using the Autorepeat Feature</h2>
-<p>The autorepeat feature means that the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is called repeatedly while the user keeps the button pressed.</p>
+<p>The autorepeat feature means that the <code>repeated</code> signal is called repeatedly while the user keeps the button pressed.</p>
<p>To manage the autorepeat feature:</p>
<ul>
</pre>
</li>
<li>
-<p>You can set the initial timeout before the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal is emitted.</p>
+<p>You can set the initial timeout before the <code>repeated</code> signal is emitted.</p>
<p>To set the timeout to 5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_initial_timeout_set(button, 5.0);
</pre>
</li>
<li>
-<p>You can set the interval between 2 <span style="font-family: Courier New,Courier,monospace">repeated</span> signals.</p>
+<p>You can set the interval between 2 <code>repeated</code> signals.</p>
<p>To set the interval to 0.5 seconds:</p>
<pre class="prettyprint">
elm_button_autorepeat_gap_timeout_set(button, 0.5);
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>This feature is supported in mobile applications only.</p>
-<p class="figure">Figure: Calendar component</p>
+<p align="center"><strong>Figure: Calendar component</strong></p>
<p align="center"><img alt="Calendar component" src="../../../images/calendar.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>To use a calendar component in your application:</p>
<ol>
- <li>Add a calendar with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_add()</span> function.</li>
- <li>Select the month to display with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_selected_time_set()</span> function:
+ <li>Add a calendar with the <code>elm_calendar_add()</code> function.</li>
+ <li>Select the month to display with the <code>elm_calendar_selected_time_set()</code> function:
<pre class="prettyprint">
Evas_Object *calendar;
elm_calendar_first_day_of_week_set(calendar, ELM_DAY_MONDAY);
</pre></li>
-<li><p>Modify the names of the weekdays using the <span style="font-family: Courier New,Courier,monospace">elm_calendar_weekdays_names_set()</span> function:</p>
+<li><p>Modify the names of the weekdays using the <code>elm_calendar_weekdays_names_set()</code> function:</p>
<pre class="prettyprint">
const char *weekname[7] = {"A", "B", "C", "D", "E", "F", "G"};
elm_calendar_weekdays_names_set(calendar, &weekname);
</pre></li>
-<li>Mark holidays with the <span style="font-family: Courier New,Courier,monospace">elm_calendar_mark_add()</span> function.
+<li>Mark holidays with the <code>elm_calendar_mark_add()</code> function.
<p>The following example shows how to mark a Sunday as holiday:</p>
<pre class="prettyprint">
struct tm *sunday = gmtime(&the_time);
</pre></li></ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(calendar, "changed", changed_cb, data);
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Calendar styles</strong></p>
<table>
-<caption>Table: Calendar styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/check/base/default</span></td>
+ <td><code>elm/check/base/default</code></td>
<td align="center"><img alt="elm/check/base/default" src="../../../images/calendar_style.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a calendar object.</p>
+ <p align="center" class="Table"><strong>Table: Calendar callback signals</strong></p>
<table border="1">
- <caption>Table: Calendar callback signals</caption>
<colgroup>
<col /><col />
</colgroup>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The selected date is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a check component in your application:</p>
<ol>
- <li>Add a check component with the <span style="font-family: Courier New,Courier,monospace;">elm_check_add()</span> function:
+ <li>Add a check component with the <code>elm_check_add()</code> function:
<pre class="prettyprint">
Evas_Object *check;
</li>
<li>Set a <a href="#style">style</a> and fill the check component with a text or an image according to the style:
<ul>
- <li>Set a style to the check component with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+ <li>Set a style to the check component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(check, "favorite");
</pre>
</li>
- <li>Set a label to the check component with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span> function:
+ <li>Set a label to the check component with the <code>elm_object_text_set()</code> or <code>elm_object_part_text_set()</code> function:
<pre class="prettyprint">
/* Default style */
elm_object_text_set(check, "Check");
elm_object_part_text_set(check, "off", "False");
</pre>
</li>
- <li>Set an icon to the button with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function and pass the <span style="font-family: Courier New,Courier,monospace">icon</span> part name as a parameter.
+ <li>Set an icon to the button with the <code>elm_object_part_content_set()</code> function and pass the <code>icon</code> part name as a parameter.
<pre class="prettyprint">
Evas_Object *icon;
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(check, "changed", changed_cb, data);
<p>The following example shows a simple use case of the check component.</p>
-<table border="0">
- <caption>Example: Check use case</caption>
+ <p align="center" class="Table"><strong>Example: Check use case</strong></p>
+<table border="0">
<tbody>
<tr>
<td>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Check styles</strong></p>
<table>
- <caption>Table: Check styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/check/base/default" src="../../../images/check_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>default</code></td>
+ <td><code>icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">favorite</span></td>
+ <td><code>favorite</code></td>
<td align="center"><img alt="elm/check/base/favorite" src="../../../images/check_favorite.png" /></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td><code>on&off</code></td>
<td align="center"><img alt="elm/check/base/on&off" src="../../../images/check_on_off.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">on</span>
- <p><span style="font-family: Courier New,Courier,monospace">off</span></p></td>
+ <td><code>on</code>
+ <p><code>off</code></p></td>
<td>N/A</td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a check object.</p>
+ <p align="center" class="Table"><strong>Table: Check callback signals</strong></p>
<table>
- <caption>Table: Check callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The check component value changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To use a check component in your application:</p>
<ol>
-<li>Add a check component with the <span style="font-family: Courier New,Courier,monospace;">elm_check_add()</span> function:
+<li>Add a check component with the <code>elm_check_add()</code> function:
<pre class="prettyprint">
Evas_Object *check;
</li>
<li>Set a <a href="#style">style</a> and fill the check component with a text or an image according to the style:
<ul>
-<li>Set a style to the check component with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+<li>Set a style to the check component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(check, "popup");
</pre>
</li>
-<li>Set a label to the check component with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function:
+<li>Set a label to the check component with the <code>elm_object_text_set()</code> function:
<pre class="prettyprint">
/* Default style */
elm_object_text_set(check, "Check");
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(check, "changed", changed_cb, data);
</ol>
<p>The following example shows a simple use case of the check component.</p>
+ <p align="center" class="Table"><strong>Example: Check use case</strong></p>
<table border="0">
- <caption>Example: Check use case</caption>
<tbody>
<tr>
<td>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Check styles for rectangular devices</strong></p>
<table>
- <caption>Table: Check styles for rectangular devices</caption>
<tbody>
<tr>
<th>Style</th>
<th>Text part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/check/base/default" src="../../../images/rect_default_popup.png" /></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td><code>on&off</code></td>
<td align="center"><img alt="elm/check/base/on&off" src="../../../images/rect_onoff.png" /></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">popup</span></td>
+ <td><code>popup</code></td>
<td align="center"><img alt="elm/check/base/popup" src="../../../images/rect_default_popup.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
</tr>
</table>
+ <p align="center" class="Table"><strong>Table: Check styles for circular devices</strong></p>
<table>
- <caption>Table: Check styles for circular devices</caption>
<tbody>
<tr>
<th>Style</th>
<th>Text part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/check/base/default" src="../../../images/circle_default.png" /></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td><code>on&off</code></td>
<td align="center"><img alt="elm/check/base/on&off" src="../../../images/circle_onoff.png" /></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">small popup</span></td>
+ <td><code>small popup</code></td>
<td align="center"><img alt="elm/check/base/popup" src="../../../images/circle_small_popup.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
</tr>
</tbody>
</table>
<p>You can register callback functions connected to the following signals for a check object.</p>
<table>
- <caption>Table: Check callback signals</caption>
+ <p align="center" class="Table"><strong>Table: Check callback signals</strong></p>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The check component value changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The circle datetime component extends the <a href="component_datetime_wn.htm">datetime</a> component (<span style="font-family: Courier New,Courier,monospace">elm_datetime</span>) by visualizing the selected field. If a rotary event is activated by the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span>function, the circle datetime increases or decreases the value of the selected field in the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component through the clockwise or counter-clockwise rotary event.</p>
+<p>The circle datetime component extends the <a href="component_datetime_wn.htm">datetime</a> component (<code>elm_datetime</code>) by visualizing the selected field. If a rotary event is activated by the <code>eext_rotary_object_event_activated_set()</code>function, the circle datetime increases or decreases the value of the selected field in the <code>elm_datetime</code> component through the clockwise or counter-clockwise rotary event.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
-<p class="figure">Figure: Circle datetime component</p>
-<p align="center"><img alt="Circle datetime component" src="../../../images/circle_datetime.png" /></p>
+<p align="center"><strong>Figure: Circle datetime component</strong></p>
+<p align="center"><img alt="Circle datetime component" width="450" src="../../../images/circle_datetime.png" /></p>
<h2 id="add">Adding a Circle Datetime Component</h2>
-<p>To create a circle datetime component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function:</p>
+<p>To create a circle datetime component, use the <code>eext_circle_object_datetime_add()</code> function:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as the first parameter.</li>
-<li>If a <a href="component_circ_surface_wn.htm">circle surface</a> is passed as the second parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface. If you pass <span style="font-family: Courier New,Courier,monospace">NULL</span> instead of a circle surface, the new circle object is managed and rendered by itself.</li></ul>
+<li>The <code>elm_datetime</code> handle must be passed as the first parameter.</li>
+<li>If a <a href="component_circ_surface_wn.htm">circle surface</a> is passed as the second parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface. If you pass <code>NULL</code> instead of a circle surface, the new circle object is managed and rendered by itself.</li></ul>
<pre class="prettyprint">
Evas_Object *datetime;
Evas_Object *circle_datetime;
circle_datetime = eext_circle_object_datetime_add(datetime, surface);
</pre>
-<p>The circle datetime component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<p>The circle datetime component is created with the <code>default</code> style.</p>
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate or deactivate the circle datetime, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<p>To activate or deactivate the circle datetime, use the <code>eext_rotary_object_event_activated_set()</code> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive rotary events.</p>
+<p>If the second parameter is <code>EINA_TRUE</code>, the circle datetime can receive rotary events.</p>
<h2 id="property">Configuring the Circle Properties</h2>
<ul><li>
<p>You can modify the circle object within the circle datetime component using the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+<li><code>eext_circle_object_line_width_set()</code></li>
+<li><code>eext_circle_object_line_width_get()</code></li>
+<li><code>eext_circle_object_radius_set()</code></li>
+<li><code>eext_circle_object_radius_get()</code></li>
+<li><code>eext_circle_object_color_set()</code></li>
+<li><code>eext_circle_object_color_get()</code></li>
+<li><code>eext_circle_object_disabled_set()</code></li>
+<li><code>eext_circle_object_disabled_get()</code></li>
</ul></li>
-<li><p>You can modify the circle datetime <span style="font-family: Courier New,Courier,monospace">default</span> item, which draws the marker.</p>
-<p>To change the item properties, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p> </li></ul>
+<li><p>You can modify the circle datetime <code>default</code> item, which draws the marker.</p>
+<p>To change the item properties, use the <code>eext_circle_object_item_XXX()</code> functions.</p> </li></ul>
<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The circle genlist component is used to visualize and utilize the scroll effect for the <a href="component_genlist_wn.htm">genlist</a> component (<span style="font-family: Courier New,Courier,monospace">elm_genlist</span>). While the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
+<p>The circle genlist component is used to visualize and utilize the scroll effect for the <a href="component_genlist_wn.htm">genlist</a> component (<code>elm_genlist</code>). While the <code>elm_genlist</code> component provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
-<p class="figure">Figure: Circle genlist component</p>
-<p align="center"><img alt="Circle genlist component" src="../../../images/circle_genlist.png" /></p>
+<p align="center"><strong>Figure: Circle genlist component</strong></p>
+<p align="center"><img alt="Circle genlist component" width="450" src="../../../images/circle_genlist.png" /></p>
<h2 id="add">Adding a Circle Genlist Component</h2>
-<p>To create a circle genlist component, use the <
span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function. Pass a genlist and <a href="component_circ_surface_wn.htm">circle surface</a> to the function as parameters.</p>
+<p>To create a circle genlist component, use the <
code>eext_circle_object_genlist_add()</code> function. Pass a genlist and <a href="component_circ_surface_wn.htm">circle surface</a> to the function as parameters.</p>
<pre class="prettyprint">
Evas_Object *genlist;
Evas_Object *circle_genlist;
<h2 id="configure">Configuring the Circle Genlist</h2>
-<p>To set the circle genlist scroller policy, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function. The <a href="../../../../../org.tizen.native.wearable.apireference/group__Scroller.html#gae4532876fde43d8d37fc9440a1e36a84">Elm_Scroller_Policy</a> enumerator defines the available scroller policies.</p>
+<p>To set the circle genlist scroller policy, use the <code>eext_circle_object_genlist_scroller_policy_set()</code> function. The scroller policy can be:</p>
+<ul>
+<li><code>ELM_SCROLLER_POLICY_AUTO</code>: Scrollbar is made visible if it is needed, and otherwise kept hidden.</li>
+<li><code>ELM_SCROLLER_POLICY_ON</code>: Scrollbar is always visible.</li>
+<li><code>ELM_SCROLLER_POLICY_OFF</code>: Scrollbar is always hidden.</li>
+</ul>
<p>The following example sets the horizontal scrollbar off and the vertical scrollbar always on:</p>
<pre class="prettyprint">
eext_circle_object_genlist_scroller_policy_set(circle_genlist,
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate or deactivate the circle genlist, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<p>To activate or deactivate the circle genlist, use the <code>eext_rotary_object_event_activated_set()</code> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive rotary events.</p>
+<p>If the second parameter is <code>EINA_TRUE</code>, the circle genlist can receive rotary events.</p>
<h2 id="property">Configuring the Circle Properties</h2>
<ul><li>
<p>You can modify the circle object within the circle genlist component using the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+<li><code>eext_circle_object_line_width_set()</code></li>
+<li><code>eext_circle_object_line_width_get()</code></li>
+<li><code>eext_circle_object_radius_set()</code></li>
+<li><code>eext_circle_object_radius_get()</code></li>
+<li><code>eext_circle_object_color_set()</code></li>
+<li><code>eext_circle_object_color_get()</code></li>
+<li><code>eext_circle_object_disabled_set()</code></li>
+<li><code>eext_circle_object_disabled_get()</code></li>
</ul></li>
-<li><p>You can modify the circle genlist item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<li><p>You can modify the circle genlist item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
<p>The circle genlist has the following items:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a vertical scroll bar.</li>
-<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+<li><code>default</code>: Default circle item that draws a vertical scroll bar.</li>
+<li><code>vertical,scroll,bg</code>: Vertical scroll background circle item.</li>
</ul></li></ul>
<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<h2 id="add">Adding a Circle Object Component</h2>
-<p>To create a circle object component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function:</p>
+<p>To create a circle object component, use the <code>eext_circle_object_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
<p>When creating a circle object, you can select whether the circle object is rendered by itself or by the <a href="component_circ_surface_wn.htm">circle surface</a>:</p>
<ul><li>If the circle surface is passed as the second parameter, a circle object connected with a circle surface is created, and it is rendered by the circle surface.</li>
-<li>If <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as the second parameter, the new circle object is managed and rendered by itself.</li></ul>
+<li>If <code>NULL</code> is passed as the second parameter, the new circle object is managed and rendered by itself.</li></ul>
<p>To create a circle object without a circle surface, and show it in a size of 360 x 360:</p>
<pre class="prettyprint">
<li>Set the maximum and minimum value:
<ul>
<li>
-<p>To set the minimum and maximum values of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function.</p>
+<p>To set the minimum and maximum values of the circle object, use the <code>eext_circle_object_value_min_max_set()</code> function.</p>
<p>In the following example, a circle object with a surface is created and its minimum and maximum values are set to 0.0 and 10.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
</pre>
-<p>To get the current minimum and maximum values of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
+<p>To get the current minimum and maximum values of the circle object, use the <code>eext_circle_object_value_min_max_get()</code> function.</p>
</li>
<li>
-<p>To set the value of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Similar to the above example, the following example creates a circle object with the minimum and maximum values of 0.0 and 10.0 degrees:</p>
+<p>To set the value of a certain item in a circle object, use the <code>eext_circle_object_item_angle_min_max_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_value_min_max_set()</code> function. Similar to the above example, the following example creates a circle object with the minimum and maximum values of 0.0 and 10.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
</pre>
-<p>To get the current minimum and maximum values of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
+<p>To get the current minimum and maximum values of the item, use the <code>eext_circle_object_item_value_min_max_get()</code> function.</p>
</li>
</ul>
</li>
<li>Set the value:
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The value cannot be lower than the minimum value or higher than the maximum value.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The value cannot be lower than the minimum value or higher than the maximum value.
+</div>
<ul>
<li>
-<p>To set the value of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.</p>
+<p>To set the value of the circle object, use the <code>eext_circle_object_value_set()</code> function.</p>
<p>In the following example, a circle object with a surface is created and its value is set to 5.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_value_set(circle_obj, 5.0);
</pre>
-<p>To get the current value of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<p>To get the current value of the circle object, use the <code>eext_circle_object_value_get()</code> function.</p>
</li>
<li>
-<p>To set the value of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its value to 5.0 degrees:</p>
+<p>To set the value of a certain item in a circle object, use the <code>eext_circle_object_item_value_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_value_set()</code> function. Similar to the above example, the following example creates a circle object with a surface and sets its value to 5.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_value_set(circle_obj, "default", 5.0);
</pre>
-<p>To get the current value of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
+<p>To get the current value of the item, use the <code>eext_circle_object_item_value_get()</code> function.</p>
</li>
</ul></li></ul>
<li>Set the angle:
<ul>
<li>
-<p>To set the angle of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function.</p>
+<p>To set the angle of the circle object, use the <code>eext_circle_object_angle_set()</code> function.</p>
<p>In the following example, a circle object with a surface is created and its angle is set to 45.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_angle_set(circle_obj, 45.0);
</pre>
-<p>To get the current angle of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
+<p>To get the current angle of a circle object, use the <code>eext_circle_object_angle_get()</code> function.</p>
</li>
<li>
-<p>To set the angle of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its angle to 45.0 degrees:</p>
+<p>To set the angle of a certain item in a circle object, use the <code>eext_circle_object_item_angle_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_angle_set()</code> function. Similar to the above example, the following example creates a circle object with a surface and sets its angle to 45.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
</pre>
-<p>To get the current angle of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
+<p>To get the current angle of the item, use the <code>eext_circle_object_item_angle_get()</code> function.</p>
</li>
</ul>
</li>
<li>Set the angle offset:
<ul>
<li>
-<p>To set the angle offset of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function.</p>
+<p>To set the angle offset of the circle object, use the <code>eext_circle_object_angle_offset_set()</code> function.</p>
<p>In the following example, a circle object with a 45.0 degree angle is created and its angle offset is set to 30.0 degrees. As a result, the circle object has an arch of a 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees.</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
eext_circle_object_angle_set(circle_obj, 45.0);
eext_circle_object_angle_offset_set(circle_obj, 30.0);
</pre>
-<p>To get the current angle offset of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
+<p>To get the current angle offset of a circle object, use the <code>eext_circle_object_angle_offset_get()</code> function.</p>
</li>
<li>
-<p>To set the angle offset of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following example works the same way as the above example:</p>
+<p>To set the angle offset of a certain item in a circle object, use the <code>eext_circle_object_item_angle_offset_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_angle_offset_set()</code> function. The following example works the same way as the above example:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
</pre>
-<p>To get the current angle of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
+<p>To get the current angle of the item, use the <code>eext_circle_object_item_angle_offset_get()</code> function.</p>
</li>
</ul>
</li>
<li>Set the minimum and maximum angles:
<ul>
<li>
-<p>To set the minimum and maximum angles of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function.</p>
+<p>To set the minimum and maximum angles of the circle object, use the <code>eext_circle_object_angle_min_max_set()</code> function.</p>
<p>In the following example, a circle object with a surface is created and its minimum and maximum angles are set to 0.0 and 90.0 degrees:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
</pre>
-<p>To get the current minimum and maximum angles of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
+<p>To get the current minimum and maximum angles of the circle object, use the <code>eext_circle_object_angle_min_max_get()</code> function.</p>
</li>
<li>
-<p>To set the minimum and maximum angles of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Similar to the above example, the following example creates a circle object with the minimum and maximum angles of 0.0 and 90.0:</p>
+<p>To set the minimum and maximum angles of a certain item in a circle object, use the <code>eext_circle_object_item_angle_min_max_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_angle_min_max_set()</code> function. Similar to the above example, the following example creates a circle object with the minimum and maximum angles of 0.0 and 90.0:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
</pre>
-<p>To get the current minimum and maximum angles of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
+<p>To get the current minimum and maximum angles of the item, use the <code>eext_circle_object_item_angle_min_max_get()</code> function.</p>
</li>
</ul></li></ul>
<li>Set the line width:
<ul>
<li>
-<p>To set the line width of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function.</p>
+<p>To set the line width of the circle object, use the <code>eext_circle_object_line_width_set()</code> function.</p>
<p>In the following example, a circle object with a surface is created and its line width is set to 20:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_line_width_set(circle_obj, 20);
</pre>
-<p>To get the current line width of a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
+<p>To get the current line width of a circle object, use the <code>eext_circle_object_line_width_get()</code> function.</p>
</li>
<li>
-<p>To set the line width of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its line width to 20:</p>
+<p>To set the line width of a certain item in a circle object, use the <code>eext_circle_object_item_line_width_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_line_width_set()</code> function. Similar to the above example, the following example creates a circle object with a surface and sets its line width to 20:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_line_width_set(circle_obj, "default", 20);
</pre>
-<p>To get the current line width of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
+<p>To get the current line width of the item, use the <code>eext_circle_object_item_line_width_get()</code> function.</p>
</li>
</ul></li>
<li>Set the color:
<ul>
<li>
-<p>To set the color of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function.</p>
+<p>To set the color of the circle object, use the <code>eext_circle_object_color_set()</code> function.</p>
<p>To set the color, the red, green, blue, and alpha values in a range from 0 to 255 must be passed. In the following example, a circle object with a surface is created and its color is set to red:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
</pre>
-<p>To get the current color of circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
+<p>To get the current color of circle object, use the <code>eext_circle_object_color_get()</code> function.</p>
</li>
<li>
-<p>To set the color of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. Similar to the above example, the following example creates a circle object with a surface and sets its color to red:</p>
+<p>To set the color of a certain item in a circle object, use the <code>eext_circle_object_item_color_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_color_set()</code> function. Similar to the above example, the following example creates a circle object with a surface and sets its color to red:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_value_set(circle_obj, "default", 255, 0, 0, 255);
</pre>
-<p>To get the current color of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
+<p>To get the current color of the item, use the <code>eext_circle_object_item_color_get()</code> function.</p>
</li>
</ul></li>
<li>Set the radius:
<ul>
<li>
-<p>To set the radius of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function.</p>
+<p>To set the radius of the circle object, use the <code>eext_circle_object_radius_set()</code> function.</p>
<p>In the following example, a circle object with a radius of 50.0 is created:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_radius_set(circle_obj, 50.0);
</pre>
-<p>To get the current radius of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
+<p>To get the current radius of the circle object, use the <code>eext_circle_object_radius_get()</code> function.</p>
</li>
<li>
-<p>To set the radius of a certain item in a circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function.</p>
-<p>If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, the function works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Similar to the above example, the following example creates a circle object with a radius of 50.0:</p>
+<p>To set the radius of a certain item in a circle object, use the <code>eext_circle_object_item_radius_set()</code> function.</p>
+<p>If the name of the item is passed as <code>default</code>, the function works the same way as the <code>eext_circle_object_radius_set()</code> function. Similar to the above example, the following example creates a circle object with a radius of 50.0:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
</pre>
-<p>To get the current radius of the item, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
+<p>To get the current radius of the item, use the <code>eext_circle_object_item_radius_get()</code> function.</p>
</li>
</ul></li></ul>
<h2 id="disable">Disabling the Circle Object</h2>
-<p>To disable the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function:</p>
+<p>To disable the circle object, use the <code>eext_circle_object_disabled_set()</code> function:</p>
<pre class="prettyprint">
Evas_Object *circle_obj;
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
</pre>
-<p>To enable a disabled circle object, use the same function with the <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> parameter.</p>
+<p>To enable a disabled circle object, use the same function with the <code>EINA_FALSE</code> parameter.</p>
-<p>To get the current disabled status of the circle object, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
+<p>To get the current disabled status of the circle object, use the <code>eext_circle_object_disabled_get()</code> function.</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The more option component is a wearable circular UI component. The more option handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> functions, because the more option handle is an <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object.</p>
+<p>The more option component is a wearable circular UI component. The more option handle can use the <code>elm_layout</code> functions, because the more option handle is an <code>elm_layout</code> object.</p>
<p>The basic view of the more option contains a cue button (shown on the left in the following figure). When the cue button is clicked, the selector view opens from the cue location (shown on the right in the figure). When the back motion is done in the selector view, the selector view disappears.</p>
-<p>The selector view can emit events when an item or the selector are clicked, and it can receive a rotary event. However, you do not need to call the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function to activate the rotary event, since the function is called automatically according to the <span style="font-family: Courier New,Courier,monospace">elm_panel</span> state.</p>
+<p>The selector view can emit events when an item or the selector are clicked, and it can receive a rotary event. However, you do not need to call the <code>eext_rotary_object_event_activated_set()</code> function to activate the rotary event, since the function is called automatically according to the <code>elm_panel</code> state.</p>
-<p class="figure">Figure: More option component</p>
-<p align="center"><img alt="More option component" src="../../../images/more_option.png" /></p>
+<p align="center"><strong>Figure: More option component</strong></p>
+<p align="center"><img alt="More option component" width="450" src="../../../images/more_option.png" /></p>
<h2 id="add">Adding a More Option Component</h2>
-<p>To create a more option component, use the <span style="font-family: Courier New,Courier,monospace">eext_more_option_add()</span> function:</p>
+<p>To create a more option component, use the <code>eext_more_option_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *more_option = NULL;
<p>To add an item:</p>
<ol>
-<li>Append the new item with the <span style="font-family: Courier New,Courier,monospace">eext_more_option_item_append()</span> function:
+<li>Append the new item with the <code>eext_more_option_item_append()</code> function:
<pre class="prettyprint">
{
Evas_Object *img = NULL;
/* Append item */
- Eext_Object_Item *item = eext_more_option_item_append(parent);
+ Eext_Object_Item *item = eext_more_option_item_append(parent);
</pre></li>
<li>Configure the item (for more information, see <a href="#configure">Configuring the More Option and Items</a>).
<p>To configure the more option cue button direction, and the text and content of various more option parts:</p>
<ul>
-<li>Configure the direction of the cue button with the <span style="font-family: Courier New,Courier,monospace">eext_more_option_direction_set()</span> function. The second parameter defines the cue button direction, which can be one of the following values:
+<li>Configure the direction of the cue button with the <code>eext_more_option_direction_set()</code> function. The second parameter defines the cue button direction, which can be one of the following values:
-<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_TOP</span>: Cue button is at the top.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_BOTTOM</span>: Cue button is at the bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_LEFT</span>: Cue button is on the left.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_RIGHT</span>: Cue button is on the right (default value).</li></ul>
+<ul><li><code>EEXT_MORE_OPTION_DIRECTION_TOP</code>: Cue button is at the top.</li>
+<li><code>EEXT_MORE_OPTION_DIRECTION_BOTTOM</code>: Cue button is at the bottom.</li>
+<li><code>EEXT_MORE_OPTION_DIRECTION_LEFT</code>: Cue button is on the left.</li>
+<li><code>EEXT_MORE_OPTION_DIRECTION_RIGHT</code>: Cue button is on the right (default value).</li></ul>
<p>To set the cue button on the right:</p>
<pre class="prettyprint">
<li>For each more option item, configure the main and sub text, and the item icon. The main and sub texts are shown in the selector when the item is selected.
<p>The following table shows the configurable more option parts.</p>
+<p align="center" class="Table"><strong>Table: Configurable more option parts</strong></p>
<table>
-<caption>Table: Configurable more option parts</caption>
<tbody>
<tr>
<th>Part</th>
<th>View</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_text_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_domain_translatable_part_text_set()</span></p></td>
+ <td><code>selector,main_text</code></td>
+ <td><code>eext_more_option_item_part_text_set()</code>
+ <p><code>eext_more_option_item_domain_translatable_part_text_set()</code></p></td>
<td><p align="center"><img alt="main_text" src="../../../images/more_option_main.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_text_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_domain_translatable_part_text_set()</span></p></td>
+ <td><code>selector,sub_text</code></td>
+ <td><code>eext_more_option_item_part_text_set()</code>
+ <p><code>eext_more_option_item_domain_translatable_part_text_set()</code></p></td>
<td><p align="center"><img alt="sub_text" src="../../../images/more_option_sub.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,icon</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_content_set()</span></td>
+ <td><code>item,icon</code></td>
+ <td><code>eext_more_option_item_part_content_set()</code></td>
<td><p align="center"><img alt="Item content" src="../../../images/more_option_item.png" /></p></td>
</tr>
</tbody></table>
<h2 id="callback">Using the More Option Callbacks</h2>
<p>To receive notifications about the more option events, listen to the following signals:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: The item is selected.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: An already selected item is selected again or a selector has been selected.</li>
-<li><span style="font-family: Courier New,Courier,monospace">more,option,opened</span>: The layout with the rotary selector is shown.</li>
-<li><span style="font-family: Courier New,Courier,monospace">more,option,closed</span>: The layout with the rotary selector is hidden.</li></ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>In all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">more,option,opened</span> signal:</p>
+<ul><li><code>item,selected</code>: The item is selected.</li>
+<li><code>item,clicked</code>: An already selected item is selected again or a selector has been selected.</li>
+<li><code>more,option,opened</code>: The layout with the rotary selector is shown.</li>
+<li><code>more,option,closed</code>: The layout with the rotary selector is hidden.</li></ul>
+
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>In all these signals, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
+
+<p>To register and define a callback for the <code>more,option,opened</code> signal:</p>
<pre class="prettyprint">
{
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To use a circle progressbar component in your application:</p>
<ol>
<li>
-<p>To create a circle progressbar component, use the <
span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter to render the progressbar.</p>
+<p>To create a circle progressbar component, use the <
code>eext_circle_object_progressbar_add()</code> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter to render the progressbar.</p>
<pre class="prettyprint">
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>
<p>Before using the circle progressbar, set its value details:</p>
<ul>
-<li>To set the minimum and maximum values, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function.
+<li>To set the minimum and maximum values, use the <code>eext_circle_object_value_min_max_set()</code> function.
</li>
-<li>To set the current value, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function.
+<li>To set the current value, use the <code>eext_circle_object_value_set()</code> function.
</li>
</ul>
<p>In the following example, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0:</p>
</li>
</ol>
<p>The following example shows a simple use case of the circle progressbar component.</p>
+ <p align="center" class="Table"><strong>Example: Circle progressbar use case</strong></p>
<table border="0">
- <caption>Example: Circle progressbar use case</caption>
<tbody>
<tr>
<td>
<li>
<p>You can modify the circle object within the circle progressbar component using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+ <li><code>eext_circle_object_value_min_max_set()</code></li>
+ <li><code>eext_circle_object_value_min_max_get()</code></li>
+ <li><code>eext_circle_object_value_set()</code></li>
+ <li><code>eext_circle_object_value_get()</code></li>
+ <li><code>eext_circle_object_angle_min_max_set()</code></li>
+ <li><code>eext_circle_object_angle_min_max_get()</code></li>
+ <li><code>eext_circle_object_angle_offset_set()</code></li>
+ <li><code>eext_circle_object_angle_offset_get()</code></li>
+ <li><code>eext_circle_object_angle_set()</code></li>
+ <li><code>eext_circle_object_angle_get()</code></li>
+ <li><code>eext_circle_object_line_width_set()</code></li>
+ <li><code>eext_circle_object_line_width_get()</code></li>
+ <li><code>eext_circle_object_radius_set()</code></li>
+ <li><code>eext_circle_object_radius_get()</code></li>
+ <li><code>eext_circle_object_color_set()</code></li>
+ <li><code>eext_circle_object_color_get()</code></li>
+ <li><code>eext_circle_object_disabled_set()</code></li>
+ <li><code>eext_circle_object_disabled_get()</code></li>
</ul>
</li>
<li>
- <p>You can modify the circle progressbar item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+ <p>You can modify the circle progressbar item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
<p>The circle progressbar has the following items:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the progressbar.</li>
- <li><span style="font-family: Courier New,Courier,monospace">bg</span>: Progress bar background circle item.</li>
+ <li><code>default</code>: Default circle item that draws the progressbar.</li>
+ <li><code>bg</code>: Progress bar background circle item.</li>
</ul>
</li>
</ul>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>The rotary selector component is optimized for wearable circular devices. It is composed of a selector and multiple items surrounding the selector. The rotary selector can be used to select an item or to move to the next or previous page through a rotary event.</p>
-<p>The rotary selector handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> functions, because the rotary selector handle is an <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object.</p>
+<p>The rotary selector handle can use the <code>elm_layout</code> functions, because the rotary selector handle is an <code>elm_layout</code> object.</p>
-<p class="figure">Figure: Rotary selector component</p>
+<p align="center"><strong>Figure: Rotary selector component</strong></p>
<p align="center"><img alt="Rotary selector component" src="../../../images/rotary_selector.png" /></p>
<h2 id="add">Adding a Rotary Selector Component</h2>
-<p>To create a rotary selector, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_add()</span> function:</p>
+<p>To create a rotary selector, use the <code>eext_rotary_selector_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *rotary_selector;
Evas_Object *parent;
</pre>
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate or deactivate the rotary selector, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<p>To activate or deactivate the rotary selector, use the <code>eext_rotary_object_event_activated_set()</code> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(rotary_selector, EINA_TRUE);
</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the rotary selector can receive rotary events.</p>
+<p>If the second parameter is <code>EINA_TRUE</code>, the rotary selector can receive rotary events.</p>
<h2 id="item">Adding Rotary Selector Items</h2>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">A maximum of 11 items can be displayed in one page of the rotary selector. Any exceeding items are arranged in the next page.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ A maximum of 11 items can be displayed in one page of the rotary selector. Any exceeding items are arranged in the next page.
+</div>
<p>To add an item:</p>
<ol>
-<li>Append the new item with the <span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_append()</span> function:
+<li>Append the new item with the <code>eext_rotary_selector_item_append()</code> function:
<pre class="prettyprint">
Eext_Object_Item * item;
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 table shows the functions you can use to set the main and sub text of an item.</p>
+<p align="center" class="Table"><strong>Table: Item texts</strong></p>
<table>
-<caption>Table: Item texts</caption>
<tbody>
<tr>
<th>Text</th>
<th>View</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_text_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_domain_translatable_part_text_set()</span></p></td>
+ <td><code>selector,main_text</code></td>
+ <td><code>eext_rotary_selector_item_part_text_set()</code>
+ <p><code>eext_rotary_selector_item_domain_translatable_part_text_set()</code></p></td>
<td><p align="center"><img alt="main_text" src="../../../images/rotary_selector_main_text.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_text_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_domain_translatable_part_text_set()</span></p></td>
+ <td><code>selector,sub_text</code></td>
+ <td><code>eext_rotary_selector_item_part_text_set()</code>
+ <p><code>eext_rotary_selector_item_domain_translatable_part_text_set()</code></p></td>
<td><p align="center"><img alt="sub_text" src="../../../images/rotary_selector_sub_text.png" /></p></td>
</tr>
</tbody></table></li></ol>
<p>You can configure the color and content of various rotary selector parts.</p>
<p>The following table shows the configurable rotary selector parts.</p>
+<p align="center" class="Table"><strong>Table: Configurable rotary selector parts</strong></p>
<table>
-<caption>Table: Configurable rotary selector parts</caption>
<tbody>
<tr>
<th>Part</th>
<th>View</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></td>
+ <td><code>selector,main_text</code></td>
+ <td><code>eext_rotary_selector_item_part_color_set()</code></td>
<td><p align="center"><img alt="main_text" src="../../../images/rotary_selector_main.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></td>
+ <td><code>selector,sub_text</code></td>
+ <td><code>eext_rotary_selector_item_part_color_set()</code></td>
<td><p align="center"><img alt="sub_text" src="../../../images/rotary_selector_sub.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,icon</span>
- <p><span style="font-family: Courier New,Courier,monospace">item,bg_image</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_content_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></p></td>
+ <td><code>item,icon</code>
+ <p><code>item,bg_image</code></p></td>
+ <td><code>eext_rotary_selector_item_part_content_set()</code>
+ <p><code>eext_rotary_selector_item_part_color_set()</code></p></td>
<td><p align="center"><img alt="Item content" src="../../../images/rotary_selector_item.png" /></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selector,icon</span>
- <p><span style="font-family: Courier New,Courier,monospace">selector,content</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">selector,bg_image</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_content_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_color_set()</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_content_get()</span></p></td>
+ <td><code>selector,icon</code>
+ <p><code>selector,content</code></p>
+ <p><code>selector,bg_image</code></p></td>
+ <td><code>eext_rotary_selector_part_content_set()</code>
+ <p><code>eext_rotary_selector_part_color_set()</code></p>
+ <p><code>eext_rotary_selector_part_content_get()</code></p></td>
<td><p align="center"><img alt="Selector content" src="../../../images/rotary_selector_selector.png" /></p></td>
</tr>
</tbody></table>
<ul><li>The available selector states are:
-<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL</span>: Selector is in a normal state.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_SELECTOR_STATE_PRESSED</span>: Selector is in a pressed state.</li></ul>
+<ul><li><code>EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL</code>: Selector is in a normal state.</li>
+<li><code>EEXT_ROTARY_SELECTOR_SELECTOR_STATE_PRESSED</code>: Selector is in a pressed state.</li></ul>
<p>For example, to set the selector color for a normal state selector:</p>
<pre class="prettyprint">
100, 100, 100, 255);
</pre></li>
<li>The available selector item states are:
-<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL</span>: Item is in a normal state.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_ITEM_STATE_PRESSED</span>: Item is in a pressed state.</li></ul>
+<ul><li><code>EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL</code>: Item is in a normal state.</li>
+<li><code>EEXT_ROTARY_SELECTOR_ITEM_STATE_PRESSED</code>: Item is in a pressed state.</li></ul>
<p>For example, to set the item color for a normal state item:</p>
<pre class="prettyprint">
<h2 id="callback">Using the Rotary Selector Callbacks</h2>
<p>To receive notifications about the rotary selector events, listen to the following signals:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: The item is selected.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: The item is clicked.</li></ul>
+<ul><li><code>item,selected</code>: The item is selected.</li>
+<li><code>item,clicked</code>: The item is clicked.</li></ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>In both these signals, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">item,clicked</span> signal:</p>
+<p>To register and define a callback for the <code>item,clicked</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(rotary_selector, "item,clicked", item_clicked_cb, data);
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>The circle scroller component changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</p>
-<p>The circle scroller wraps the <a href="container_scroller_n.htm">scroller</a> component (<span style="font-family: Courier New,Courier,monospace">elm_scroller</span>) internally to draw a circular scroller to the edge of the circular screen. This means that you can use the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and functions, excluding the <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> functions.</p>
+<p>The circle scroller wraps the <a href="container_scroller_n.htm">scroller</a> component (<code>elm_scroller</code>) internally to draw a circular scroller to the edge of the circular screen. This means that you can use the <code>elm_scroller</code> callbacks and functions, excluding the <code>elm_scroller_policy_set()</code> and <code>elm_scroller_policy_get()</code> functions.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
-<p class="figure">Figure: Circle scroller component</p>
-<p align="center"><img alt="Circle scroller component" src="../../../images/circle_scroller.png" /></p>
+<p align="center"><strong>Figure: Circle scroller component</strong></p>
+<p align="center"><img alt="Circle scroller component" width="450" src="../../../images/circle_scroller.png" /></p>
<h2 id="add">Adding a Circle Scroller Component</h2>
-<p>To create a circle scroller component, use the <
span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. Pass a <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component as the first parameter and a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.</p>
+<p>To create a circle scroller component, use the <
code>eext_circle_object_scroller_add()</code> function. Pass a <code>elm_scroller</code> component as the first parameter and a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.</p>
<pre class="prettyprint">
Evas_Object *scroller;
Evas_Object *circle_scroller;
circle_scroller = eext_circle_object_scroller_add(scroller, surface);
</pre>
-<p>The circle scroller component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<p>The circle scroller component is created with the <code>default</code> style.</p>
<h2 id="configure">Configuring the Circle Scroller</h2>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> functions to configure a circle scroller, except for the <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> functions.</p>
+<p>You can use the <code>elm_scroller</code> functions to configure a circle scroller, except for the <code>elm_scroller_policy_set()</code> and <code>elm_scroller_policy_get()</code> functions.</p>
-<p>To set the circle scroller policy, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> function. The <a href="../../../../../org.tizen.native.wearable.apireference/group__Scroller.html#gae4532876fde43d8d37fc9440a1e36a84">Elm_Scroller_Policy</a> enumerator defines the available scroller policies.</p>
+<p>To set the circle scroller policy, use the <code>eext_circle_object_scroller_policy_set()</code> function. The scroller policy can be:</p>
+<ul>
+<li><code>ELM_SCROLLER_POLICY_AUTO</code>: Scrollbar is made visible if it is needed, and otherwise kept hidden.</li>
+<li><code>ELM_SCROLLER_POLICY_ON</code>: Scrollbar is always visible.</li>
+<li><code>ELM_SCROLLER_POLICY_OFF</code>: Scrollbar is always hidden.</li>
+</ul>
<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 <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> function.</p>
+<p>To get the current scroller policy, use the <code>eext_circle_object_scroller_policy_get()</code> function.</p>
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate or deactivate the circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<p>To activate or deactivate the circle scroller, use the <code>eext_rotary_object_event_activated_set()</code> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive rotary events.</p>
+<p>If the second parameter is <code>EINA_TRUE</code>, the circle scroller can receive rotary events.</p>
<h2 id="property">Configuring the Circle Properties</h2>
<ul><li>
<p>You can modify the circle object within the circle scroller component using the following functions:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+ <li><code>eext_circle_object_line_width_set()</code></li>
+ <li><code>eext_circle_object_line_width_get()</code></li>
+ <li><code>eext_circle_object_radius_set()</code></li>
+ <li><code>eext_circle_object_radius_get()</code></li>
+ <li><code>eext_circle_object_color_set()</code></li>
+ <li><code>eext_circle_object_color_get()</code></li>
+ <li><code>eext_circle_object_disabled_set()</code></li>
+ <li><code>eext_circle_object_disabled_get()</code></li>
</ul></li>
-<li><p>You can modify the circle scroller item properties with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p>
+<li><p>You can modify the circle scroller item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
<p>The circle scroller has the following items:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroller.</li>
- <li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroller background circle item.</li>
- <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroller circle item.</li>
- <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span>: Horizontal scroller background circle item.</li>
+ <li><code>default</code>: Default circle item that draws the vertical scroller.</li>
+ <li><code>vertical,scroll,bg</code>: Vertical scroller background circle item.</li>
+ <li><code>horizontal,scroll,bar</code>: Horizontal scroller circle item.</li>
+ <li><code>horizontal,scroll,bg</code>: Horizontal scroller background circle item.</li>
</ul></li></ul>
<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<h1>Circle Slider</h1>
-<p>The circle slider UI component changes corresponding to rotary events. The circle slider not only extends the UI feature of the <a href="component_slider_wn.htm">slider</a> component (<
span style="font-family: Courier New,Courier,monospace">elm_slider</span>), but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in the circular design. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
+<p>The circle slider UI component changes corresponding to rotary events. The circle slider not only extends the UI feature of the <a href="component_slider_wn.htm">slider</a> component (<
code>elm_slider</code>), but also replaces the functionalities of the <code>elm_slider</code> in the circular design. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
<p>This feature is supported in wearable applications only.</p>
<p>To use a circle slider component in your application:</p>
<ol>
-<li>To create a circle slider component, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function. Pass a circle surface as the second parameter.
+<li>To create a circle slider component, use the <code>eext_circle_object_slider_add()</code> function. Pass a circle surface as the second parameter.
<pre class="prettyprint">
-Evas_Object *slider = NULL ;
+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>.
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>value,changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, NULL);
</li>
</ol>
<p>The following example shows a simple use case of the circle slider component.</p>
+ <p align="center" class="Table"><strong>Example: Circle slider use case</strong></p>
<table border="0">
- <caption>Example: Circle slider use case</caption>
<tbody>
<tr>
<td>
<h2 id="feature">Features</h2>
<p>You can modify the circle slider properties using the following functions.</p>
+ <p align="center" class="Table"><strong>Table: Circle slider properties</strong></p>
<table id="items">
- <caption>Table: Circle slider properties</caption>
<tbody>
<tr>
<th>Functions</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></p>
+ <td><code>eext_circle_object_value_set()</code>
+ <p><code>eext_circle_object_value_get()</code></p>
</td>
<td>Set and get the value of the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></p>
+ <td><code>eext_circle_object_angle_min_max_set()</code>
+ <p><code>eext_circle_object_angle_min_max_get()</code></p>
</td>
<td>Set and get the minimum and maximum angle for the item of the circle object. </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></p>
+ <td><code>eext_circle_object_angle_offset_set()</code>
+ <p><code>eext_circle_object_angle_offset_get()</code></p>
</td>
<td>Set and get the angle offset of the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></p>
+ <td><code>eext_circle_object_angle_set()</code>
+ <p><code>eext_circle_object_angle_get()</code></p>
</td>
<td>Set and get the angle in degree of the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></p>
+ <td><code>eext_circle_object_line_width_set()</code>
+ <p><code>eext_circle_object_line_width_get()</code></p>
</td>
<td>Set and get the line width of the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></p>
+ <td><code>eext_circle_object_radius_set()</code>
+ <p><code>eext_circle_object_radius_get()</code></p>
</td>
<td>Set and get circle radius of the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></p>
+ <td><code>eext_circle_object_color_set()</code>
+ <p><code>eext_circle_object_color_get()</code></p>
</td>
<td>Set and get the color of circle line and font in the circle object.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span>
- <p><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></p>
+ <td><code>eext_circle_object_disabled_set()</code>
+ <p><code>eext_circle_object_disabled_get()</code></p>
</td>
<td>Set and get the disabled state of the circle object.</td>
</tr>
</table>
<p>The circle slider consists of 2 parts, introduced in the following table.</p>
+ <p align="center" class="Table"><strong>Table: Circle slider items</strong></p>
<table>
- <caption>Table: Circle slider items</caption>
<tbody>
<tr>
<th>Sample</th>
</tr>
<tr>
<td align="center" style="vertical-align:middle" rowspan="2"><img alt="elm/slider/horizontal/warning" src="../../../images/circle_slider3.png" /></td>
- <td align="center" style="vertical-align:middle"><p><
span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item, which draws a slider bar.</p> <p>This item represents the value of the circle slider, which is a red circular area in the left example.</p></td>
+ <td align="center" style="vertical-align:middle"><p><
code>default</code>: Default circle item, which draws a slider bar.</p> <p>This item represents the value of the circle slider, which is a red circular area in the left example.</p></td>
</tr>
<tr>
- <td align="center" style="vertical-align:middle"><p><span style="font-family: Courier New,Courier,monospace">bg</span>: Background circle item, which is a dark circular area in the left example.</p></td>
+ <td align="center" style="vertical-align:middle"><p><code>bg</code>: Background circle item, which is a dark circular area in the left example.</p></td>
</tr>
</tbody>
</table>
<p>The following examples show how to manipulate the items.</p>
+ <p align="center" class="Table"><strong>Table: Manipulating the circle slider items</strong></p>
<table border="0">
- <caption>Table: Manipulating the circle slider items</caption>
<tbody>
<tr align="center">
<th>Example code</th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span></th>
+ <th><code>EINA_TRUE</code></th>
</tr>
<tr>
<td>
<h2 id="callback">Callbacks</h2>
<p>You can register callback functions connected to the following signals for a circle slider object.</p>
+ <p align="center" class="Table"><strong>Table: Circle slider callback signals</strong></p>
<table border="1">
- <caption>Table: Circle slider callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td ><span style="font-family: Courier New,Courier,monospace">value,changed</span></td>
+ <td ><code>value,changed</code></td>
<td>The value of a circle slider changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The circle spinner component extends the spinner component (<span style="font-family: Courier New,Courier,monospace">elm_spinner</span>) by visualizing its value. The circle spinner increases or decreases the value of the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> through a clockwise or counter-clockwise rotary event.</p>
+<p>The circle spinner component extends the spinner component (<code>elm_spinner</code>) by visualizing its value. The circle spinner increases or decreases the value of the <code>elm_spinner</code> through a clockwise or counter-clockwise rotary event.</p>
-<p class="figure">Figure: Circle spinner component</p>
+<p align="center"><strong>Figure: Circle spinner component</strong></p>
<p align="center"><img alt="Circle spinner component" src="../../../images/circle_spinner.png" /></p>
<h2 id="add">Adding a Circle Spinner Component</h2>
<p>To create a circle spinner component:</p>
-<ol><li>Create an <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> object:
+<ol><li>Create an <code>elm_spinner</code> object:
<pre class="prettyprint">
Evas_Object *spinner;
Evas_Object *circle_spinner;
spinner = elm_spinner_add(parent);
</pre></li>
-<li>Set the object style as <span style="font-family: Courier New,Courier,monospace">circle</span>:
+<li>Set the object style as <code>circle</code>:
<pre class="prettyprint">
elm_object_style_set(spinner, "circle");
</pre></li>
-<li>Create an <
span style="font-family: Courier New,Courier,monospace">eext_spinner</span> object using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_add()</span> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.
+<li>Create an <
code>eext_spinner</code> object using the <code>eext_circle_object_spinner_add()</code> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.
<pre class="prettyprint">
circle_spinner = eext_circle_object_spinner_add(spinner, surface);
</pre></li></ol>
-<p>The circle spinner component is created with the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<p>The circle spinner component is created with the <code>default</code> style.</p>
<h2 id="configure">Configuring the Circle Spinner</h2>
-<p>The circle spinner shows the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> value through a marker, which indicates the value in the round. It has internal minimum and maximum spinner values, and it calculates the minimum and maximum angles to draw the marker. The current value of the circle spinner is calculated internally as well.</p>
+<p>The circle spinner shows the <code>elm_spinner</code> value through a marker, which indicates the value in the round. It has internal minimum and maximum spinner values, and it calculates the minimum and maximum angles to draw the marker. The current value of the circle spinner is calculated internally as well.</p>
-<p>To handle the circle spinner value, use the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> functions. They are automatically synchronized with the user values. You can also use the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> callback functions.</p>
+<p>To handle the circle spinner value, use the <code>elm_spinner</code> functions. They are automatically synchronized with the user values. You can also use the <code>elm_spinner</code> callback functions.</p>
<p>To customize the angle offset of the marker to not to follow the internally-calculated system value:</p>
<ol>
-<li>Set the custom circle spinner angle value using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function.
+<li>Set the custom circle spinner angle value using the <code>eext_circle_object_spinner_angle_set()</code> function.
<p>In the following example, the circle spinner angle value is set to 2.0:</p>
<pre class="prettyprint">
eext_circle_object_spinner_angle_set(circle_spinner, 2.0);
</pre></li>
-<li>After the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function has been executed, the calculation formula for the angle offset is changed:
+<li>After the <code>eext_circle_object_spinner_angle_set()</code> function has been executed, the calculation formula for the angle offset is changed:
<pre class="prettyprint">
/* Formula for calculating the default angle offset */
<h2 id="event">Activating a Rotary Event</h2>
-<p>To activate or deactivate the circle spinner, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function:</p>
+<p>To activate or deactivate the circle spinner, use the <code>eext_rotary_object_event_activated_set()</code> function:</p>
<pre class="prettyprint">
eext_rotary_object_event_activated_set(circle_spinner, EINA_TRUE);
</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle spinner can receive rotary events.</p>
+<p>If the second parameter is <code>EINA_TRUE</code>, the circle spinner can receive rotary events.</p>
<h2 id="property">Configuring the Circle Properties</h2>
<ul><li>
<p>You can modify the circle object within the circle spinner component using the various functions, such as:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+<li><code>eext_circle_object_value_min_max_set()</code></li>
+<li><code>eext_circle_object_value_min_max_get()</code></li>
+<li><code>eext_circle_object_value_set()</code></li>
+<li><code>eext_circle_object_value_get()</code></li>
</ul></li>
-<li><p>You can modify the circle spinner <span style="font-family: Courier New,Courier,monospace">default</span> item, which draws the marker.</p>
-<p>To change the item properties, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions.</p> </li></ul>
+<li><p>You can modify the circle spinner <code>default</code> item, which draws the marker.</p>
+<p>To change the item properties, use the <code>eext_circle_object_item_XXX()</code> functions.</p> </li></ul>
<p>For more information, see <a href="component_circ_object_wn.htm">Circle Object</a> and the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__OBJECT__MODULE.html">Efl Extension Circle Object</a> API.</p>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To create a new circle surface:</p>
<ul>
-<li>Create a circle surface in the conformant layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function:
+<li>Create a circle surface in the conformant layer using the <code>eext_circle_surface_conformant_add()</code> function:
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *conformant;
surface = eext_circle_surface_conformant_add(conformant);
</pre>
</li>
-<li>Create a circle surface in the layout layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:
+<li>Create a circle surface in the layout layer using the <code>eext_circle_surface_layout_add()</code> function:
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *layout;
surface = eext_circle_surface_layout_add(layout);
</pre>
</li>
-<li>Create a circle surface in the naviframe layer using the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:
+<li>Create a circle surface in the naviframe layer using the <code>eext_circle_surface_naviframe_add()</code> function:
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *naviframe;
</pre>
</li>
</ul>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.
+</div>
<h2 id="add_object">Adding Circle Objects to the Circle Surface</h2>
<p>You can add any circle objects to a circle surface.</p>
-<p>To create a circle slider (<span style="font-family: Courier New,Courier,monospace">eext_slider</span>) component and add it to a circle surface in the conformant layer:</p>
+<p>To create a circle slider (<code>eext_slider</code>) component and add it to a circle surface in the conformant layer:</p>
<pre class="prettyprint">
Eext_Circle_Surface *surface;
Evas_Object *slider;
<p>Deleting the Evas object (conformant, layout, or naviframe) automatically deletes the circle surface in the same layer.</p>
-<p>You can, however, explicitly use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function to delete a circle surface:</p>
+<p>You can, however, explicitly use the <code>eext_circle_surface_del()</code> function to delete a circle surface:</p>
<pre class="prettyprint">
eext_circle_surface_del(surface);
</pre>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function does not delete the connected circle objects.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The <code>eext_circle_surface_del()</code> function does not delete the connected circle objects.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a colorselector component in your application:</p>
<ol>
- <li>Add a colorselector with the <span style="font-family: Courier New,Courier,monospace">elm_colorselector_add()</span> function:
+ <li>Add a colorselector with the <code>elm_colorselector_add()</code> function:
<pre class="prettyprint">
Evas_Object *colorsel;
colorsel = elm_colorselector_add(parent);
</pre>
</li>
- <li>Set a mode to the colorselector with the <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set()</span> function. Currently, only the palette mode is available in Tizen.
+ <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 <span style="font-family: Courier New,Courier,monospace">elm_colorselector_palette_name_set()</span> function. If you use the default palette, you can skip this step.</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>Add colors to the palette. If you use the default style, you can skip this step, since the default palette already has the colors selected.
<p>The new palette is saved by the elementary configuration and you can load it again later.</p>
-<p>The palette mode displays several color items for the user to select from. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. You can create a new series of colors (a new palette) and save it under another identifier. By default, the palette mode uses the <span style="font-family: Courier New,Courier,monospace">default</span> palette, which contains 14 colors.</p>
+<p>The palette mode displays several color items for the user to select from. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. You can create a new series of colors (a new palette) and save it under another identifier. By default, the palette mode uses the <code>default</code> palette, which contains 14 colors.</p>
</li>
<li>Register the <a href="#callback">callback</a> functions.
<p>When a color in the colorselector is clicked, the color set to the colorselector component changes.
- Retrieve the currently selected color with the <span style="font-family: Courier New,Courier,monospace">elm_colorselector_color_set()</span> function.</p>
- <p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+ Retrieve the currently selected color with the <code>elm_colorselector_color_set()</code> function.</p>
+ <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
</ol>
<p>The following example shows a simple use case of the colorselector component.</p>
+ <p align="center" class="Table"><strong>Example: Colorselector use case</strong></p>
<table border="0">
- <caption>Example: Colorselector use case</caption>
<tbody>
<tr>
<td>
</tbody>
</table>
-<p>The following example shows how to add a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>, with 3 colors (red, green, and blue).</p>
+<p>The following example shows how to add a new palette called <code>mypalette</code>, with 3 colors (red, green, and blue).</p>
+ <p align="center" class="Table"><strong>Example: Customized colorselector</strong></p>
<table border="0">
- <caption>Example: Customized colorselector</caption>
<tbody>
<tr>
<td>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Colorselector styles</strong></p>
<table>
-<caption>Table: Colorselector styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/colorselector/item/color/colorplane</span></td>
+ <td><code>elm/colorselector/item/color/colorplane</code></td>
<td align="center"><img alt="elm/colorselector/item/color/colorplane" src="../../../images/color_colorplane.png" /></td>
- <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
+ <td>Use the following command: <code>elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</code></td>
</tr>
</tbody>
</table>
<p>You can register callback functions connected to the following signals for a colorselector object.</p>
+ <p align="center" class="Table"><strong>Table: Colorselector callback signals</strong></p>
<table border="1">
- <caption>Table: Colorselector callback signals</caption>
<colgroup>
<col /><col />
</colgroup>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The color value changes on the selector.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">color,item,selected</span></td>
+ <td><code>color,item,selected</code></td>
<td>The color item is pressed.</td>
<td>The pressed color item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span></td>
+ <td><code>color,item,longpressed</code></td>
<td>The color item is long-pressed.</td>
<td>The long-pressed color item</td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a ctxpopup component in your application:</p>
<ol>
- <li>Add a ctxpopup with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function:
+ <li>Add a ctxpopup with the <code>elm_ctxpopup_add()</code> function:
<pre class="prettyprint">
Evas_Object *ctxpopup;
</pre>
</li>
<li>Configure the ctxpopup <a href="#feature">features</a>.</li>
- <li>Append items to the ctxpopup with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function.
+ <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>
</ol>
- <p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
+ <p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
<p>The following example shows a simple use case of the ctxpopup component.</p>
+ <p align="center" class="Table"><strong>Example: Ctxpopup use case</strong></p>
<table border="0">
- <caption>Example: Ctxpopup use case</caption>
<tbody>
<tr>
<td>
<p>To configure the ctxpopup features:</p>
<ul>
<li>
-<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function.</p>
+<p>Set the ctxpopup orientation with the <code>elm_ctxpopup_horizontal_set()</code> function.</p>
<p>In the following example, the orientation is set to horizontal:</p>
<pre class="prettyprint">
elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>Disable auto hiding.
-<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>:</p>
+<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <code>elm_ctxpopup_auto_hide_disabled_set()</code> function with <code>EINA_TRUE</code>:</p>
<pre class="prettyprint">
elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>
-<p>Set the priority of the direction where the ctxpopup appears from with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_direction_priority_set()</span> function:</p>
+<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>
-<p>Hide the ctxpopup with an animation by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_dismiss()</span> function:</p>
+<p>Hide the ctxpopup with an animation by calling the <code>elm_ctxpopup_dismiss()</code> function:</p>
<pre class="prettyprint">
elm_ctxpopup_dismiss(ctxpopup);
</pre>
<p>To manage the ctxpopup items:</p>
<ol>
<li>
-<p>Add an item with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function.</p>
-<p>To append an item with a <span style="font-family: Courier New,Courier,monospace">test</span> label, icon, and the <span style="font-family: Courier New,Courier,monospace">clicked</span> callback (<span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb</span>):</p>
+<p>Add an item with the <code>elm_ctxpopup_item_append()</code> function.</p>
+<p>To append an item with a <code>test</code> label, icon, and the <code>clicked</code> callback (<code>_ctxpopup_item_cb</code>):</p>
<pre class="prettyprint">
Elm_Object_Item *it;
</pre>
</li>
<li>
-<p>Change the item label and icon, if the label and icon parameters are not <span style="font-family: Courier New,Courier,monospace">NULL</span> when the item is appended:</p>
+<p>Change the item label and icon, if the label and icon parameters are not <code>NULL</code> when the item is appended:</p>
<ul>
-<li>To change the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:
+<li>To change the item label to <code>New label</code>:
<pre class="prettyprint">
elm_object_item_part_text_set(it, "default", "New label");
</pre>
</li>
<li>
-<p>To set the icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
+<p>To set the icon to the standard <code>home</code> icon:</p>
<pre class="prettyprint">
Evas_Object *home_icon = elm_icon_add(ctxpopup);
<p>In Tizen 2.4, dropdown styles are no longer supported. Use a <a href="component_hoversel_mn.htm">hoversel</a> component for those instead.</p>
+<p align="center" class="Table"><strong>Table: Ctxpopup styles</strong></p>
<table>
-<caption>Table: Ctxpopup styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/ctxpopup/layout/default</span></td>
+ <td><code>elm/ctxpopup/layout/default</code></td>
<td align="center"><img alt="elm/ctxpopup/layout/default" src="../../../images/ctxpopup_default.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/ctxpopup/layout/more/default</span></td>
+ <td><code>elm/ctxpopup/layout/more/default</code></td>
<td align="center"><img alt="elm/ctxpopup/layout/more/default" src="../../../images/ctxpopup_more.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/ctxpopup/layout/dropdown/list</span> (Tizen 2.3 only)</td>
+ <td><code>elm/ctxpopup/layout/dropdown/list</code> (Tizen 2.3 only)</td>
<td align="center"><img alt="elm/ctxpopup/layout/dropdown/list" src="../../../images/ctxpopup_dropdown.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/ctxpopup/layout/dropdown/label</span> (Tizen 2.3 only)</td>
+ <td><code>elm/ctxpopup/layout/dropdown/label</code> (Tizen 2.3 only)</td>
<td align="center"><img alt="elm/ctxpopup/layout/dropdown/label" src="../../../images/ctxpopup_dropdown_label.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a ctxpopup object.</p>
+ <p align="center" class="Table"><strong>Table: Ctxpopup callback signals</strong></p>
<table border="1">
- <caption>Table: Ctxpopup callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">dismissed</span></td>
+ <td><code>dismissed</code></td>
<td>The ctxpopup is dismissed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>The context popup (ctxpopup) component is a contextual popup that can show a list of items inside it.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Ctxpopup.html">Ctxpopup</a> API.</p>
- <p class="figure">Figure: Ctxpopup component</p>
+ <p align="center"><strong>Figure: Ctxpopup component</strong></p>
<p align="center"><img alt="Ctxpopup component" src="../../../images/ctxpopup_wn.png" /></p>
- <p class="figure">Figure: Ctxpopup hierarchy</p>
+ <p align="center"><strong>Figure: Ctxpopup hierarchy</strong></p>
<p align="center"><img alt="Ctxpopup hierarchy" src="../../../images/ctxpopup_tree.png" /></p>
<h2 id="add">Adding a Ctxpopup Component</h2>
-<p>To create a ctxpopup component, use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function:</p>
+<p>To create a ctxpopup component, use the <code>elm_ctxpopup_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *ctxpopup;
ctxpopup = elm_ctxpopup_add(parent);
</pre>
-<p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span> function.</p>
+<p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
<h2 id="styles">Using the Ctxpopup Styles</h2>
<p>The ctxpopup has the following styles for the rectangular screen:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><code>default</code></li>
</ul>
<p>The ctxpopup has the following styles for the circular screen:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">select_mode</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">select_mode/top</span>, <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span>
+<li><code>select_mode</code></li>
+<li><code>select_mode/top</code>, <code>select_mode/bottom</code>
<p>These 2 styles can be used as a pair.</p></li>
</ul>
-<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">default</span>:</p>
+<p>To set the style to, for example, <code>default</code>:</p>
<pre class="prettyprint">
elm_object_style_set(ctxpopup, "default");
<p>To configure the ctxpopup:</p>
<ul>
<li>
-<p>Set the ctxpopup orientation with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span> function.</p>
+<p>Set the ctxpopup orientation with the <code>elm_ctxpopup_horizontal_set()</code> function.</p>
<p>In the following example, the orientation is set to horizontal:</p>
<pre class="prettyprint">
elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
</pre>
</li>
<li>Disable auto hiding.
-<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_auto_hide_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>:</p>
+<p>The ctxpopup can be hidden automatically when its parent is resized. The auto hide functionality is enabled by default. You can disable auto hiding by calling the <code>elm_ctxpopup_auto_hide_disabled_set()</code> function with <code>EINA_TRUE</code>:</p>
<pre class="prettyprint">
elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
</pre>
<p>To manage the ctxpopup items:</p>
<ol>
<li>
-<p>Add an item with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function.</p>
-<p>To append an item with a <span style="font-family: Courier New,Courier,monospace">test</span> label, no icon, and the <span style="font-family: Courier New,Courier,monospace">clicked</span> callback (<span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb</span>):</p>
+<p>Add an item with the <code>elm_ctxpopup_item_append()</code> function.</p>
+<p>To append an item with a <code>test</code> label, no icon, and the <code>clicked</code> callback (<code>_ctxpopup_item_cb</code>):</p>
<pre class="prettyprint">
Elm_Object_Item *it;
<li>
<p>Change the item label and icon:</p>
<ul>
-<li>To change the item label to <span style="font-family: Courier New,Courier,monospace">New label</span>:
+<li>To change the item label to <code>New label</code>:
<pre class="prettyprint">
elm_object_item_part_text_set(it, "default", "New label");
</pre>
</li>
<li>
-<p>To set the icon to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon:</p>
+<p>To set the icon to the standard <code>home</code> icon:</p>
<pre class="prettyprint">
Evas_Object *home_icon = elm_icon_add(ctxpopup);
<h2 id="callback">Using the Ctxpopup Callbacks</h2>
-<p>To receive notifications about the ctxpopup events, listen to the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal, which is called when the ctxpopup is dismissed.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<p>To receive notifications about the ctxpopup events, listen to the <code>dismissed</code> signal, which is called when the ctxpopup is dismissed.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
+<p>To register and define a callback for the <code>dismissed</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>The style of a UI component refers to its graphical appearance determined by the layout, shapes, fonts, and colors. A theme is a collection of styles for every UI component. Tizen provides a default theme for each profile and version, which includes all available styles of every UI component.</p>
-<p>When more than one style is defined for a UI component in the current theme, you can set a different style than the default one using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to access the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
+<p>When more than one style is defined for a UI component in the current theme, you can set a different style than the default one using the <code>elm_object_style_set()</code> function. It is also possible to access the current style with the <code>elm_object_style_get()</code> function.</p>
-<p>The default theme of the mobile profile specifies several <a href="component_check_mn.htm#style">styles for the check UI component</a>. The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">favorite</span> style to a newly created check object:</p>
+<p>The default theme of the mobile profile specifies several <a href="component_check_mn.htm#style">styles for the check UI component</a>. The following example shows how to set the <code>favorite</code> style to a newly created check object:</p>
<pre class="prettyprint">
Evas_Object *check;
elm_object_style_set(check, "favorite");
</pre>
-<p>A theme is defined in <a href="learn_edc_intro_n.htm">EDC</a> (<
span style="font-family: Courier New,Courier,monospace">.edc</span>) files, and they are compiled into an EDJ (<span style="font-family: Courier New,Courier,monospace">.edj</span>) file during the project building. An EDC file is a collection of <a href="learn_edc_group_n.htm">group</a> blocks, and one group is composed of <a href="learn_edc_part_n.htm">parts</a> and <a href="learn_edc_program_n.htm">programs</a>. A theme corresponds to one EDJ file, and a style corresponds to 1 group in an EDJ file.</p>
+<p>A theme is defined in <a href="learn_edc_intro_n.htm">EDC</a> (<
code>.edc</code>) files, and they are compiled into an EDJ (<code>.edj</code>) file during the project building. An EDC file is a collection of <a href="learn_edc_group_n.htm">group</a> blocks, and one group is composed of <a href="learn_edc_part_n.htm">parts</a> and <a href="learn_edc_program_n.htm">programs</a>. A theme corresponds to one EDJ file, and a style corresponds to 1 group in an EDJ file.</p>
-<p>The following example shows some groups in an EDC file (<span style="font-family: Courier New,Courier,monospace">check.edc</span>), which correspond to the styles of the check component in mobile profile:</p>
+<p>The following example shows some groups in an EDC file (<code>check.edc</code>), which correspond to the styles of the check component in mobile profile:</p>
<pre class="prettyprint">
group {
}
</pre>
-<p>The groups have a certain format of names according to the naming rule of Elementary. These 3 groups define 3 different styles for the check component: <span style="font-family: Courier New,Courier,monospace">default</span>, <span style="font-family: Courier New,Courier,monospace">favorite</span>, and <span style="font-family: Courier New,Courier,monospace">on&off</span>.</p>
+<p>The groups have a certain format of names according to the naming rule of Elementary. These 3 groups define 3 different styles for the check component: <code>default</code>, <code>favorite</code>, and <code>on&off</code>.</p>
<h2 id="custom">Customization</h2>
<ol>
<li>Create a project for a basic EDC UI application.
<p>See <a href="../../../../../org.tizen.training/html/native/mobile/first_app_mn.htm">Creating Your First Tizen Mobile Native Application</a> or <a href="../../../../../org.tizen.training/html/native/wearable/first_app_wn.htm">Creating Your First Tizen Wearable Native Application</a> for creating a EDC UI project.</p></li>
- <li>Create an EDJ file in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span> directory.
- <p>If you add the <span style="font-family: Courier New,Courier,monospace">custom.edc</span> file, the Tizen Studio calls Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">custom.edj</span> file when building the project.</p>
- <p>The EDJ file is installed under the application data path. You can get the full path of where the EDJ file is installed using the <span style="font-family: Courier New,Courier,monospace">app_get_resource()</span> function.</p>
+ <li>Create an EDJ file in the <code>/res/edje/</code> directory.
+ <p>If you add the <code>custom.edc</code> file, the Tizen Studio calls Edje tools automatically to build the final <code>custom.edj</code> file when building the project.</p>
+ <p>The EDJ file is installed under the application data path. You can get the full path of where the EDJ file is installed using the <code>app_get_resource()</code> function.</p>
<pre class="prettyprint">
char edj_path[PATH_MAX] = {0,};
</pre>
</li>
<li>Set the new style to the UI component.
-<p>To use the <span style="font-family: Courier New,Courier,monospace">custom</span> style on a new check component:</p>
+<p>To use the <code>custom</code> style on a new check component:</p>
<pre class="prettyprint">
Evas_Object *check;
elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
elm_theme_extension_del(NULL, "./theme_button_style_custom.edj");
</pre>
- <p>The above example assumes that the <span style="font-family: Courier New,Courier,monospace">theme_button_style_custom.edj</span> file contains a new button style called <span style="font-family: Courier New,Courier,monospace">custom</span>.</p>
+ <p>The above example assumes that the <code>theme_button_style_custom.edj</code> file contains a new button style called <code>custom</code>.</p>
</li>
<li>Overlay
<p>A theme overlay enables you to replace the look of all UI components by overriding the default style.</p>
- <p>If a new style called <span style="font-family: Courier New,Courier,monospace">default</span> is created
+ <p>If a new style called <code>default</code> is created
for a button component and it is added as an overlay, Elementary uses the overlay for all button components
overriding the default theme.</p>
elm_theme_overlay_add(NULL, "./theme_button.edj");
elm_theme_overlay_del(NULL, "./theme_button.edj");
</pre>
- <p>The above example assumes that the <span style="font-family: Courier New,Courier,monospace">theme_button.edj</span> file
+ <p>The above example assumes that the <code>theme_button.edj</code> file
only contains a new theme for the button component.</p>
- <p>Adding a theme with a default style as an overlay is not recommended, since it makes Elementary to use the new theme for all the objects defined in the application. You must make sure that the <span style="font-family: Courier New,Courier,monospace">theme_button.edj</span> file reimplements everything that was previously defined in the default theme concerning the button component.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with the end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
- </tr>
- </tbody>
-</table>
+ <p>Adding a theme with a default style as an overlay is not recommended, since it makes Elementary to use the new theme for all the objects defined in the application. You must make sure that the <code>theme_button.edj</code> file reimplements everything that was previously defined in the default theme concerning the button component.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with the end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.
+</div>
</li>
</ul>
</li>
</ol>
-<p>For example, if you make your own EDJ file and name a group <span style="font-family: Courier New,Courier,monospace">elm/button/base/default</span>:</p>
+<p>For example, if you make your own EDJ file and name a group <code>elm/button/base/default</code>:</p>
<ul>
-<li>If you use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> function, the newly defined style is applied to a button object.</li>
-<li>If you use the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> function, the newly defined style is not applied, since there is a group with the same name in the default theme.</li>
+<li>If you use the <code>elm_theme_overlay_add</code> function, the newly defined style is applied to a button object.</li>
+<li>If you use the <code>elm_theme_extension_add</code> function, the newly defined style is not applied, since there is a group with the same name in the default theme.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When using the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> function to add a new theme extension or overlay to a theme object (the default theme), Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush()</span> function to flush the Elementary theme caches. This means that the theme of all UI components that use the default theme is reloaded.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ When using the <code>elm_theme_extension_add()</code> or <code>elm_theme_overlay_add()</code> function to add a new theme extension or overlay to a theme object (the default theme), Elementary calls the <code>elm_theme_flush()</code> function to flush the Elementary theme caches. This means that the theme of all UI components that use the default theme is reloaded.
+</div>
<h3>Example: Creating a Customized Style for the Check Component</h3>
<p>An easy way to create a customized style is to copy one of the existing styles and modify some parts or programs. The following example shows how to define a custom style of the check component based on the default style. The aim is to update the background and the check images of the UI component with custom images.</p>
-<p>When customizing a style, you need to respect the parts and signals in the default style. If something is missing, it can break the UI component's behavior. You can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, if you want to control more content from the application. However, removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts can change the UI component's behavior.</p>
+<p>When customizing a style, you need to respect the parts and signals in the default style. If something is missing, it can break the UI component's behavior. You can add new <code>SWALLOW</code> parts, if you want to control more content from the application. However, removing existing <code>SWALLOW</code> parts can change the UI component's behavior.</p>
<p>To create a customized check component style:</p>
<ol>
-<li><p>Copy the group corresponding to the <span style="font-family: Courier New,Courier,monospace">default</span> style to a new file and rename the group to <span style="font-family: Courier New,Courier,monospace">custom</span> to create a new <span style="font-family: Courier New,Courier,monospace">custom</span> style:</p>
+<li><p>Copy the group corresponding to the <code>default</code> style to a new file and rename the group to <code>custom</code> to create a new <code>custom</code> style:</p>
<pre class="prettyprint">
group
{
</pre>
</li>
<li>
-<p>In the new <span style="font-family: Courier New,Courier,monospace">elm/check/base/custom</span> group, find the parts you want to modify.</p>
-<p>To modify the background and check images, you must locate the <span style="font-family: Courier New,Courier,monospace">bg</span> and <span style="font-family: Courier New,Courier,monospace">check</span> parts.</p>
+<p>In the new <code>elm/check/base/custom</code> group, find the parts you want to modify.</p>
+<p>To modify the background and check images, you must locate the <code>bg</code> and <code>check</code> parts.</p>
<pre class="prettyprint">
part
{
</pre>
</li>
<li>
- <p>Replace the default images with the new custom images by updating the <span style="font-family: Courier New,Courier,monospace">image.normal</span> properties in both parts:</p>
+ <p>Replace the default images with the new custom images by updating the <code>image.normal</code> properties in both parts:</p>
<ul>
- <li>In the background part, replace <span style="font-family: Courier New,Courier,monospace">check_base.png</span> with <span style="font-family: Courier New,Courier,monospace">check_base_custom.png</span>.</li>
- <li>In the check part, replace <span style="font-family: Courier New,Courier,monospace">check.png</span> with <span style="font-family: Courier New,Courier,monospace">check_custom.png</span>.</li>
+ <li>In the background part, replace <code>check_base.png</code> with <code>check_base_custom.png</code>.</li>
+ <li>In the check part, replace <code>check.png</code> with <code>check_custom.png</code>.</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This example assumes that the custom images are the same size as the <span style="font-family: Courier New,Courier,monospace">default</span> images.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ This example assumes that the custom images are the same size as the <code>default</code> images.
+</div>
<pre class="prettyprint">
part
}
}
</pre>
-
-
-
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a datetime component in your application:</p>
<ol>
- <li>Add a datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function:
+ <li>Add a datetime component with the <code>elm_datetime_add()</code> function:
<pre class="prettyprint">
Evas_Object *datetime;
</li>
<li>Set a <a href="#style">style</a> and format. The datetime format is a combination of LIBC standard characters, such as "%d %b %Y %I : %M %M". For more information about the format characters, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.
<ul>
- <li>Set a style to the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+ <li>Set a style to the datetime component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(datetime, "date_layout");
</pre>
</li>
- <li>Set a format using the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function:
+ <li>Set a format using the <code>elm_datetime_format_set()</code> function:
<pre class="prettyprint">
elm_datetime_format_set(datetime, "%d%b%Y");
</pre>
</li>
<li>Set datetime component <a href="#feature">options</a>.</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
<p>The following example shows a simple use case of the datetime component.</p>
+ <p align="center" class="Table"><strong>Example: Datetime use case</strong></p>
<table border="0">
- <caption>Example: Datetime use case</caption>
<tbody>
<tr>
<p>The datetime component provides a way to decide a range of the value.</p>
<p>Keep in mind the following ranges when you set up the time structure:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">Year</span>: Years since 1900. Negative value represents a year below 1900 (year value -30 represents 1870). Year default range is from 70 to 137.</li>
- <li><span style="font-family: Courier New,Courier,monospace">Month</span>: Default value range is from 0 to 11.</li>
- <li><span style="font-family: Courier New,Courier,monospace">Date</span>: Default value range is from 1 to 31 according to the month value.</li>
- <li><span style="font-family: Courier New,Courier,monospace">Hour</span>: Default value is in terms of the 24-hour format (0~23).</li>
- <li><span style="font-family: Courier New,Courier,monospace">Minute</span>: Default value range is from 0 to 59.</li>
+ <li><code>Year</code>: Years since 1900. Negative value represents a year below 1900 (year value -30 represents 1870). Year default range is from 70 to 137.</li>
+ <li><code>Month</code>: Default value range is from 0 to 11.</li>
+ <li><code>Date</code>: Default value range is from 1 to 31 according to the month value.</li>
+ <li><code>Hour</code>: Default value is in terms of the 24-hour format (0~23).</li>
+ <li><code>Minute</code>: Default value range is from 0 to 59.</li>
</ul>
<p>To set the maximum time for the datetime component:</p>
<li>Set limits to the field values.
<p>The datetime component has the following fields:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: Indicates the year field.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: Indicates the month field.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: Indicates the date field.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: Indicates the hour field.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: Indicates the minute field.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: Indicates the AM/PM field.</li>
+ <li><code>ELM_DATETIME_YEAR</code>: Indicates the year field.</li>
+ <li><code>ELM_DATETIME_MONTH</code>: Indicates the month field.</li>
+ <li><code>ELM_DATETIME_DATE</code>: Indicates the date field.</li>
+ <li><code>ELM_DATETIME_HOUR</code>: Indicates the hour field.</li>
+ <li><code>ELM_DATETIME_MINUTE</code>: Indicates the minute field.</li>
+ <li><code>ELM_DATETIME_AMPM</code>: Indicates the AM/PM field.</li>
</ul>
<p>To set a value range for a specific field:</p>
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Datetime styles</strong></p>
<table>
- <caption>Table: Datetime styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">date_layout</span></p>
+ <td><code>default</code>
+ <p><code>date_layout</code></p>
</td>
<td align="center"><img alt="elm/datetime/base/default" src="../../../images/datetime_date_layout.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">time_layout</span></td>
+ <td><code>time_layout</code></td>
<td align="center"><img alt="elm/datetime/base/time_layout" src="../../../images/datetime_time_layout.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span></td>
+ <td><code>time_layout_24hr</code></td>
<td align="center"><img alt="elm/datetime/base/time_layout_24hr" src="../../../images/datetime_time_24h.png" /></td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Pay attention to the following UX issue since Tizen 2.3:
+<div class="note">
+ <strong>Note</strong>
+ Pay attention to the following UX issue since Tizen 2.3:
-<p>The <span style="font-family: Courier New,Courier,monospace">time_layout</span> and <span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span> styles need a full-length format that includes the year, month, day, hour, minute, and AM/PM. Each style shows specific fields from the format, limited by the UX concept:</p>
+<p>The <code>time_layout</code> and <code>time_layout_24hr</code> styles need a full-length format that includes the year, month, day, hour, minute, and AM/PM. Each style shows specific fields from the format, limited by the UX concept:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, month, day</li>
- <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, minute, AM/PM button</li>
- <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, minute</li>
+ <li><code>date_layout</code> (default): Year, month, day</li>
+ <li><code>time_layout</code>: Hour, minute, AM/PM button</li>
+ <li><code>time_layout_24hr</code>: Hour, minute</li>
</ul>
-<p>If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the current style, the function does not work.</p></td>
- </tr>
- </tbody>
- </table>
+<p>If you call the <code>elm_datetime_field_visible_set()</code> function for a field that is not supported in the current style, the function does not work.</p>
+</div>
<h2 id="callback">Callbacks</h2>
<p>You can register callback functions connected to the following signals for a datetime object.</p>
<table border="1">
- <caption>Table: Datetime callback signals</caption>
+ <p align="center" class="Table"><strong>Table: Datetime callback signals</strong></p>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The datetime field values change.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The system locale changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</p>
-<p class="figure">Figure: Datetime component</p>
+<p align="center"><strong>Figure: Datetime component</strong></p>
<p align="center"><img alt="Datetime component" src="../../../images/datetime_wn.png" /> </p>
-<p class="figure">Figure: Datetime hierarchy</p>
+<p align="center"><strong>Figure: Datetime hierarchy</strong></p>
<p align="center"> <img alt="Datetime hierarchy" src="../../../images/datetime_tree.png" /> </p>
<h2 id="add">Adding a Datetime Component</h2>
<p>To create a datetime component:</p>
<ol>
-<li>Add the datetime component with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span> function.
+<li>Add the datetime component with the <code>elm_datetime_add()</code> function.
</li>
-<li>Select the visible fields with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function.
+<li>Select the visible fields with the <code>elm_datetime_field_visible_set()</code> function.
<p>The visibility of the following fields can be controlled:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: Year field</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: Month field</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: Date field</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: Hour field</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: Minute field</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: AM/PM field</li>
+ <li><code>ELM_DATETIME_YEAR</code>: Year field</li>
+ <li><code>ELM_DATETIME_MONTH</code>: Month field</li>
+ <li><code>ELM_DATETIME_DATE</code>: Date field</li>
+ <li><code>ELM_DATETIME_HOUR</code>: Hour field</li>
+ <li><code>ELM_DATETIME_MINUTE</code>: Minute field</li>
+ <li><code>ELM_DATETIME_AMPM</code>: AM/PM field</li>
</ul>
</li>
<p>The datetime has the following styles:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></li>
+ <li><code>datepicker_layout</code></li>
+ <li><code>timepicker_layout</code></li>
</ul>
-<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span>:</p>
+<p>To set the style to, for example, <code>datepicker_layout</code>:</p>
<pre class="prettyprint">
elm_object_style_set(datetime, "datepicker_layout");
</pre>
<h2 id="set">Setting the Datetime Format</h2>
-<p>The date and time format can be configured with the <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> function using a combination of allowed Libc date format specifiers.</p>
+<p>The date and time format can be configured with the <code>elm_datetime_format_set()</code> function using a combination of allowed Libc date format specifiers.</p>
<p>To set the format to "HH : MM":</p>
<pre class="prettyprint">
<p>To receive notifications about the datetime events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The datetime field values are changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The system locale changes.</li>
+<li><code>changed</code>: The datetime field values are changed.</li>
+<li><code>language,changed</code>: The system locale changes.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>In both these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>In both these signals, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>To register and define a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
{
dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
}</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html">Entry</a> API.</p>
-<p class="figure">Figure: Entry component</p>
-<p align="center"> <img alt="Entry component" src="../../../images/entry.png" /> <img alt="Entry component" src="../../../images/entry2.png" /> </p>
+<p align="center"><strong>Figure: Entry component</strong></p>
+<p align="center"> <img alt="Entry component" width="220" src="../../../images/entry.png" /> <img alt="Entry component" width="220" src="../../../images/entry2.png" /> </p>
-<p class="figure">Figure: Entry hierarchy</p>
+<p align="center"><strong>Figure: Entry hierarchy</strong></p>
<p align="center"> <img alt="Entry hierarchy" src="../../../images/entry_tree.png" /> </p>
<h2 id="add">Adding an Entry Component</h2>
-<p>To create an entry component, use the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function. You can set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function.</p>
+<p>To create an entry component, use the <code>elm_entry_add()</code> function. You can set the text inside it with the <code>elm_entry_entry_set()</code> function.</p>
<pre class="prettyprint">
Evas_Object *entry;
<pre class="prettyprint">
Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-<p>If the entry has content, the function returns the Boolean <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> variable.</p>
+<p>If the entry has content, the function returns the Boolean <code>EINA_FALSE</code> variable.</p>
</li>
<li>Select text:
<ul>
elm_entry_select_all(entry);
</pre>
</li>
-<li>Select a part of the text with the <
span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. <p>The following example selects the first 20 characters of the entry content:</p>
+<li>Select a part of the text with the <
code>elm_entry_select_region_set()</code> function. <p>The following example selects the first 20 characters of the entry content:</p>
<pre class="prettyprint">
elm_entry_select_region_set(entry, 0, 20);
</pre>
selection = elm_entry_selection_get(entry);
</pre>
-<p>If the entry text is empty, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>If the entry text is empty, the function returns <code>NULL</code>.</p>
</li>
<li>
<p>Copy or cut the selection to the clipboard:</p>
</pre>
</li>
<li>Filter the text.
-<p>You can filter the size and individual characters within the entry text by appending a filter with the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_filter_append()</span> function.</p>
+<p>You can filter the size and individual characters within the entry text by appending a filter with the <code>elm_entry_markup_filter_append()</code> function.</p>
<ul>
<li>To limit the size of the entry to 8 characters:
<pre class="prettyprint">
elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, &limit_size);
</pre></li>
-<li>To define a list of accepted or rejected characters, append the filter with the <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure.
+<li>To define a list of accepted or rejected characters, append the filter with the <code>Elm_Entry_Filter_Accept_Set</code> structure.
<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
<pre class="prettyprint">
static Elm_Entry_Filter_Accept_Set
</li>
</ul>
-<p>You can define a file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
+<p>You can define a file (for example, <code>/tmp/test.txt</code>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
<pre class="prettyprint">
/* Set the file in which the entry text is saved */
elm_entry_editable_set(entry, EINA_FALSE);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Even when the entry component is set to be uneditable by the user, you can still use the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_append()</span> and <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_insert()</span> functions to modify its text programmatically.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Even when the entry component is set to be uneditable by the user, you can still use the <code>elm_entry_entry_append()</code> and <code>elm_entry_entry_insert()</code> functions to modify its text programmatically.
+</div>
</li>
<li>
<p>Set the password mode.</p>
elm_entry_password_set(entry, EINA_TRUE);
</pre>
-<p>When the password mode is enabled, the <span style="font-family: Courier New,Courier,monospace">elm_object_text_get()</span> function returns an UTF-8 string for user convenience.</p></li>
+<p>When the password mode is enabled, the <code>elm_object_text_get()</code> function returns an UTF-8 string for user convenience.</p></li>
<li>
<p>Define the line mode and wrapping.</p>
<p>The entry component has 2 line modes: single and multiline:</p>
<pre class="prettyprint">
elm_entry_single_line_set(entry, EINA_TRUE);
</pre>
-<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the <strong>Enter</strong> key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the <strong>Enter</strong> key in this mode generates an <code>activate</code> event instead of adding a new line.</p>
</li>
<li>
<p>To set the entry to the multiline mode with wrapping:</p>
elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
</pre>
<p>In this mode, the text wraps at the end of the entry and pressing the <strong>Enter</strong> key creates a new line.</p>
-<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+<p>In multiline entries, the <code>elm_entry_line_wrap_set()</code> function provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, character wrap</li>
+ <li><code>ELM_WRAP_NONE</code>: No wrap</li>
+ <li><code>ELM_WRAP_CHAR</code>: Wrap between characters</li>
+ <li><code>ELM_WRAP_WORD</code>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+ <li><code>ELM_WRAP_MIXED</code>: Word wrap, and if that fails, character wrap</li>
</ul>
</li>
</ul></li>
<ul>
<li>Format the entry text with markup elements that are defined in the theme.
-<p> For example, you can use the <
span style="font-family: Courier New,Courier,monospace"><br></span> element to insert a line break. For a list of available markup elements, see <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
+<p> For example, you can use the <
code><br></code> element to insert a line break. For a list of available markup elements, see <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
</li>
<li>Add special markups within the entry text:
<ul>
- <li>Anchors: <span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>
- <p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. The anchor also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p></li>
- <li>Items: <span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>
- <p>The items provide a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name must be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_append()</span> function appends a custom item provider to the list for that entry. You can also prepend a custom item provider to the list with the <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_prepend()</span> function. The <span style="font-family: Courier New,Courier,monospace">elm_entry_item_provider_remove()</span> function removes a custom item provider from the list.</p>
+ <li>Anchors: <code><a href = ..>...</a></code>
+ <p>The anchors generate an <code>anchor,clicked</code> signal when the user clicks them. The <code>href</code> attribute is used to identify the anchor. The anchor also reacts to the <code>anchor,in</code> (mouse in), <code>anchor,out</code> (mouse out), <code>anchor,down</code> (mouse down), and <code>anchor,up</code> (mouse up) events.</p></li>
+ <li>Items: <code><item size = .. vsize = .. href = ..>...</item></code>
+ <p>The items provide a way to insert any <code>Evas_Object</code> in the text. The <code>Evas_Object</code> name must be specified in the <code>href</code> attribute.</p>
+ <p>The <code>elm_entry_item_provider_append()</code> function appends a custom item provider to the list for that entry. You can also prepend a custom item provider to the list with the <code>elm_entry_item_provider_prepend()</code> function. The <code>elm_entry_item_provider_remove()</code> function removes a custom item provider from the list.</p>
<pre class="prettyprint">
static Evas_Object*
</ul>
</li>
<li>Override the textblock object style.
-<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
+<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <code>elm_entry_text_style_user_push()</code> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <code>elm_entry_text_style_user_pop()</code> function.</p>
<pre class="prettyprint">
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 <
span style="font-family: Courier New,Courier,monospace">DEFAULT</span> 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>
+<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>
-<p class="figure">Figure: Overriding style</p>
+<p align="center"><strong>Figure: Overriding style</strong></p>
<p align="center"> <img alt="Overriding style" src="../../../images/entry_style.png" /> </p>
</li>
<li>Modify the content and text parts of the default theme:
<ul>
-<li>You can modify 2 content parts of the default theme: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>.
-<p>The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part:</p>
+<li>You can modify 2 content parts of the default theme: <code>icon</code> and <code>end</code>.
+<p>The following example shows how to set an icon in the <code>end</code> content part:</p>
<pre class="prettyprint">
Evas_Object *icon;
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(entry, "end", icon);
</pre></li>
-<li>You can modify 2 text parts of the default theme: <span style="font-family: Courier New,Courier,monospace">default</span> (entry text) and <span style="font-family: Courier New,Courier,monospace">guide</span> (entry placeholder).
-<p>The following example shows how to set the placeholder text to <span style="font-family: Courier New,Courier,monospace">Hello World</span>:</p>
+<li>You can modify 2 text parts of the default theme: <code>default</code> (entry text) and <code>guide</code> (entry placeholder).
+<p>The following example shows how to set the placeholder text to <code>Hello World</code>:</p>
<pre class="prettyprint">
elm_object_part_text_set(entry, "guide", "Hello World");
elm_entry_input_panel_layout_set(entry, ELM_INPUT_PANEL_LAYOUT_PHONENUMBER);
</pre>
-<p class="figure">Figure: Input panel layouts</p>
+<p align="center"><strong>Figure: Input panel layouts</strong></p>
<p align="center"><img alt="NORMAL" src="../../../images/input_panel_NOMAL.png" /> <img alt="NUMBER" src="../../../images/input_panel_NUMBER.png" /> <img alt="EMAIL" src="../../../images/input_panel_EMAIL.png" /></p>
elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE_JOIN);
</pre>
-<p class="figure">Figure: Join and Send return key types</p>
+<p align="center"><strong>Figure: Join and Send return key types</strong></p>
<p align="center"><img alt="JOIN" src="../../../images/return_key_JOIN.png" /> <img alt="SEND" src="../../../images/return_key_SEND.png" /></p>
<p>The following component styles are available.</p>
+<p align="center" class="Table"><strong>Table: Entry styles</strong></p>
<table>
-<caption>Table: Entry styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/entry/base/default</span></td>
+ <td><code>elm/entry/base/default</code></td>
<td align="center"><img alt="elm/entry/base/default" src="../../../images/entry_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text</p></td>
+ <td><code>elm.guide</code>: for the guide text
+ <p><code>elm.text</code>: for the main text</p></td>
<td>The guide text is automatically erased when the main text is entered.</td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for an entry object.</p>
+ <p align="center" class="Table"><strong>Table: Entry callback signals</strong></p>
<table border="1">
- <caption>Table: Entry callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">aborted</span></td>
+ <td><code>aborted</code></td>
<td>The <strong>Escape</strong> key is pressed on a single line entry.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">activated</span></td>
+ <td><code>activated</code></td>
<td>The <strong>Enter</strong> key is pressed on a single line entry.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span></td>
+ <td><code>anchor,clicked</code></td>
<td>An anchor is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,down</span></td>
+ <td><code>anchor,down</code></td>
<td>The mouse button is pressed on an anchor.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span></td>
+ <td><code>anchor,hover,opened</code></td>
<td>The anchor is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,in</span></td>
+ <td><code>anchor,in</code></td>
<td>The mouse cursor is moved into an anchor.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,out</span></td>
+ <td><code>anchor,out</code></td>
<td>The mouse cursor is moved out of an anchor.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,up</span></td>
+ <td><code>anchor,up</code></td>
<td>The mouse button is released on an anchor.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object</td>
+ <td><code>Elm_Entry_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The text within the entry is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed,user</span></td>
+ <td><code>changed,user</code></td>
<td>The text within the entry is changed because of user interaction.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span> object</td>
+ <td><code>Edje_Entry_Change_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The entry is clicked (mouse press and release).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,double</span></td>
+ <td><code>clicked,double</code></td>
<td>The entry is double-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,triple</span></td>
+ <td><code>clicked,triple</code></td>
<td>The entry is triple-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">cursor,changed</span></td>
+ <td><code>cursor,changed</code></td>
<td>The cursor position is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span></td>
+ <td><code>cursor,changed,manual</code></td>
<td>The cursor position is changed manually.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">focused</span></td>
+ <td><code>focused</code></td>
<td>The entry receives focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object</td>
+ <td><code>Elm_Focus_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfocused</span></td>
+ <td><code>unfocused</code></td>
<td>The entry loses focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The program language is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">longpressed</span></td>
+ <td><code>longpressed</code></td>
<td>The mouse button is pressed and held for a couple of seconds.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span></td>
+ <td><code>maxlength,reached</code></td>
<td>The maximum length is reached.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">preedit,changed</span></td>
+ <td><code>preedit,changed</code></td>
<td>The pre-edit string is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">press</span></td>
+ <td><code>press</code></td>
<td>The mouse button is pressed on the entry.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">redo,request</span></td>
+ <td><code>redo,request</code></td>
<td>The request is redone.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,changed</span></td>
+ <td><code>selection,changed</code></td>
<td>The current selection is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,cleared</span></td>
+ <td><code>selection,cleared</code></td>
<td>The current selection is cleared.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,copy</span></td>
+ <td><code>selection,copy</code></td>
<td>A copy of the selected text into the clipboard is requested.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,cut</span></td>
+ <td><code>selection,cut</code></td>
<td>A cut of the selected text into the clipboard is requested.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,paste</span></td>
+ <td><code>selection,paste</code></td>
<td>A paste of the clipboard content is requested.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selection,start</span></td>
+ <td><code>selection,start</code></td>
<td>A selection is begun and no previous selection exists.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">text,set,done</span></td>
+ <td><code>text,set,done</code></td>
<td>The whole text is set to the entry.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">theme,changed</span></td>
+ <td><code>theme,changed</code></td>
<td>The theme is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">undo,request</span></td>
+ <td><code>undo,request</code></td>
<td>The request is undone.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>focused</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(entry, "focused", focused_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html">Entry</a> API.</p>
-<p class="figure">Figure: Entry component</p>
+<p align="center"><strong>Figure: Entry component</strong></p>
<p align="center"><img alt="Entry component" src="../../../images/entry_wn.png" /> </p>
-<p class="figure">Figure: Entry hierarchy</p>
+<p align="center"><strong>Figure: Entry hierarchy</strong></p>
<p align="center"><img alt="Entry hierarchy" src="../../../images/entry_tree.png" /> </p>
<h2 id="add">Adding an Entry Component</h2>
-<p>To create an entry component, use the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function. You can set the text inside it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function.</p>
+<p>To create an entry component, use the <code>elm_entry_add()</code> function. You can set the text inside it with the <code>elm_entry_entry_set()</code> function.</p>
<pre class="prettyprint">
Evas_Object *entry;
<pre class="prettyprint">
Eina_Bool Empty = elm_entry_is_empty(entry);
</pre>
-<p>If the entry has content, the function returns the Boolean <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> variable.</p>
+<p>If the entry has content, the function returns the Boolean <code>EINA_FALSE</code> variable.</p>
</li>
<li>Select text:
<ul>
elm_entry_select_all(entry);
</pre>
</li>
-<li>Select a part of the text with the <
span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span> function. <p>The following example selects the first 20 characters of the entry content:</p>
+<li>Select a part of the text with the <
code>elm_entry_select_region_set()</code> function. <p>The following example selects the first 20 characters of the entry content:</p>
<pre class="prettyprint">
elm_entry_select_region_set(entry, 0, 20);
</pre>
selection = elm_entry_selection_get(entry);
</pre>
-<p>If the entry text is empty, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>If the entry text is empty, the function returns <code>NULL</code>.</p>
</li>
<li>
<p>Copy or cut the selection to the clipboard:</p>
</pre>
</li>
<li>Filter the text.
-<p>You can filter the size and individual characters within the entry text by appending a filter with the <span style="font-family: Courier New,Courier,monospace">elm_entry_markup_filter_append()</span> function.</p>
+<p>You can filter the size and individual characters within the entry text by appending a filter with the <code>elm_entry_markup_filter_append()</code> function.</p>
<ul>
<li>To limit the size of the entry to 8 characters:
<pre class="prettyprint">
elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, &limit_size);
</pre></li>
-<li>To define a list of accepted or rejected characters, append the filter with the <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure.
+<li>To define a list of accepted or rejected characters, append the filter with the <code>Elm_Entry_Filter_Accept_Set</code> structure.
<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
<pre class="prettyprint">
static Elm_Entry_Filter_Accept_Set
</li>
</ul>
-<p>You can define a file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
+<p>You can define a file (for example, <code>/tmp/test.txt</code>) to save the entry content. The content in the file is implicitly loaded and displayed. After the file is set, any content changes in the entry are automatically saved after a short delay.</p>
<pre class="prettyprint">
/* Set the file in which the entry text is saved */
elm_entry_editable_set(entry, EINA_FALSE);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Even when the entry component is set to be uneditable by the user, you can still use the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_append()</span> and <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_insert()</span> functions to modify its text programmatically.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Even when the entry component is set to be uneditable by the user, you can still use the <code>elm_entry_entry_append()</code> and <code>elm_entry_entry_insert()</code> functions to modify its text programmatically.
+</div>
</li>
<li>
<p>Set the password mode.</p>
<pre class="prettyprint">
elm_entry_single_line_set(entry, EINA_TRUE);
</pre>
-<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the <strong>Enter</strong> key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the <strong>Enter</strong> key in this mode generates an <code>activate</code> event instead of adding a new line.</p>
</li>
<li>
<p>To set the entry to the multiline mode with wrapping:</p>
elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
</pre>
<p>In this mode, the text wraps at the end of the entry and pressing the <strong>Enter</strong> key creates a new line.</p>
-<p>In multiline entries, the <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> function provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+<p>In multiline entries, the <code>elm_entry_line_wrap_set()</code> function provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, character wrap</li>
+ <li><code>ELM_WRAP_NONE</code>: No wrap</li>
+ <li><code>ELM_WRAP_CHAR</code>: Wrap between characters</li>
+ <li><code>ELM_WRAP_WORD</code>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+ <li><code>ELM_WRAP_MIXED</code>: Word wrap, and if that fails, character wrap</li>
</ul>
</li>
</ul></li>
<ul>
<li>Format the entry text with markup elements that are defined in the theme.
-<p> For example, you can use the <
span style="font-family: Courier New,Courier,monospace"><br></span> element to insert a line break. For a list of available markup elements, see <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
+<p> For example, you can use the <
code><br></code> element to insert a line break. For a list of available markup elements, see <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html#entry-markup">Formatted text</a>.</p>
</li>
<li>Add special markups within the entry text:
<ul>
- <li>Anchors: <span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>
- <p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. The anchor also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p></li>
- <li>Items: <span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>
- <p>The items provide a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name must be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+ <li>Anchors: <code><a href = ..>...</a></code>
+ <p>The anchors generate an <code>anchor,clicked</code> signal when the user clicks them. The <code>href</code> attribute is used to identify the anchor. The anchor also reacts to the <code>anchor,in</code> (mouse in), <code>anchor,out</code> (mouse out), <code>anchor,down</code> (mouse down), and <code>anchor,up</code> (mouse up) events.</p></li>
+ <li>Items: <code><item size = .. vsize = .. href = ..>...</item></code>
+ <p>The items provide a way to insert any <code>Evas_Object</code> in the text. The <code>Evas_Object</code> name must be specified in the <code>href</code> attribute.</p>
</li>
</ul>
</li>
<li>Override the textblock object style.
-<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span> function.</p>
+<p>To tweak the style of the text within the entry component, you can override parts of the theme style to the textblock object using the <code>elm_entry_text_style_user_push()</code> function. The function pushes a new style on top of the user style stack that overrides the current style. Remove the style at the top of the user style stack with the <code>elm_entry_text_style_user_pop()</code> function.</p>
</li>
<li>Modify the content and text parts of the default theme:
<ul>
-<li>You can modify 2 content parts of the default theme: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>.
-<p>The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part:</p>
+<li>You can modify 2 content parts of the default theme: <code>icon</code> and <code>end</code>.
+<p>The following example shows how to set an icon in the <code>end</code> content part:</p>
<pre class="prettyprint">
Evas_Object *icon;
elm_image_file_set(ic, "icon.png", NULL);
elm_object_part_content_set(entry, "end", icon);
</pre></li>
-<li>You can modify 2 text parts of the default theme: <span style="font-family: Courier New,Courier,monospace">elm.text</span> (entry text) and <span style="font-family: Courier New,Courier,monospace">elm.guide</span> (entry placeholder).
-<p>The following example shows how to set the placeholder text to <span style="font-family: Courier New,Courier,monospace">Hello World</span>:</p>
+<li>You can modify 2 text parts of the default theme: <code>elm.text</code> (entry text) and <code>elm.guide</code> (entry placeholder).
+<p>The following example shows how to set the placeholder text to <code>Hello World</code>:</p>
<pre class="prettyprint">
elm_object_part_text_set(entry, "elm.guide", "Hello World");
<p>To receive notifications about the entry events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The <strong>Escape</strong> key is pressed on a single line entry.</li>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The <strong>Enter</strong> key is pressed on a single line entry.</li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: The mouse button is pressed on an anchor.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: The mouse cursor is moved into an anchor.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: The mouse cursor is moved out of an anchor.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: The mouse button is released on an anchor.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double-clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple-clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
- <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The mouse button is pressed and held for a couple of seconds.</li>
- <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: The maximum length is reached.</li>
- <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">press</span>: The mouse button is pressed on the entry.</li>
- <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard content is requested.</li>
- <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
- <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
- <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+ <li><code>aborted</code>: The <strong>Escape</strong> key is pressed on a single line entry.</li>
+ <li><code>activated</code>: The <strong>Enter</strong> key is pressed on a single line entry.</li>
+ <li><code>anchor,clicked</code>: An anchor is clicked.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,down</code>: The mouse button is pressed on an anchor.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,hover,opened</code>: The anchor is clicked.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,in</code>: The mouse cursor is moved into an anchor.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,out</code>: The mouse cursor is moved out of an anchor.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,up</code>: The mouse button is released on an anchor.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
+ <li><code>changed</code>: The text within the entry is changed.</li>
+ <li><code>changed,user</code>: The text within the entry is changed because of user interaction.
+ <p>The <code>event_info</code> callback parameter points to an <code>Edje_Entry_Change_Info</code> object.</p></li>
+ <li><code>clicked</code>: The entry is clicked (mouse press and release).</li>
+ <li><code>clicked,double</code>: The entry is double-clicked.</li>
+ <li><code>clicked,triple</code>: The entry is triple-clicked.</li>
+ <li><code>cursor,changed</code>: The cursor position is changed.</li>
+ <li><code>cursor,changed,manual</code>: The cursor position is changed manually.</li>
+ <li><code>focused</code>: The entry receives focus.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Focus_Info</code> object.</p></li>
+ <li><code>unfocused</code>: The entry loses focus.</li>
+ <li><code>language,changed</code>: The program language is changed.</li>
+ <li><code>longpressed</code>: The mouse button is pressed and held for a couple of seconds.</li>
+ <li><code>maxlength,reached</code>: The maximum length is reached.</li>
+ <li><code>preedit,changed</code>: The preedit string is changed.</li>
+ <li><code>press</code>: The mouse button is pressed on the entry.</li>
+ <li><code>redo,request</code>: The request is redone.</li>
+ <li><code>selection,changed</code>: The current selection is changed.</li>
+ <li><code>selection,cleared</code>: The current selection is cleared.</li>
+ <li><code>selection,copy</code>: A copy of the selected text into the clipboard is requested.</li>
+ <li><code>selection,cut</code>: A cut of the selected text into the clipboard is requested.</li>
+ <li><code>selection,paste</code>: A paste of the clipboard content is requested.</li>
+ <li><code>selection,start</code>: A selection is begun and no previous selection exists.</li>
+ <li><code>text,set,done</code>: The whole text is set to the entry.</li>
+ <li><code>theme,changed</code>: The theme is changed.</li>
+ <li><code>undo,request</code>: The request is undone.</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>If not mentioned separately, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter in all signals is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>If not mentioned separately, the <code>event_info</code> callback parameter in all signals is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<p>To register and define a callback for the <code>focused</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-<p>The flip UI component is used for a transition effect, which can hold 2 <
span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and flip between them using several predefined animations. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html">Flip</a> API.</p>
+<p>The flip UI component is used for a transition effect, which can hold 2 <
code>Evas_Objects</code> and flip between them using several predefined animations. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html">Flip</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
- <p class="figure">Figure: Flip hierarchy</p>
+ <p align="center"><strong>Figure: Flip hierarchy</strong></p>
<p align="center"> <img alt="Flip hierarchy" src="../../../images/flip_tree.png" /> </p>
<h2 id="basic">Basic Usage</h2>
<p>To use a flip component in your application:</p>
<ol>
- <li>Add a flip with the <span style="font-family: Courier New,Courier,monospace;">elm_flip_add()</span> function:
+ <li>Add a flip with the <code>elm_flip_add()</code> function:
<pre class="prettyprint">
Evas_Object *flip;
flip = elm_flip_add(parent);
</pre>
</li>
- <li>Add content to the flip using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">front</span> and <span style="font-family: Courier New,Courier,monospace">back</span> part names to define the 2 <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> used as content:
+ <li>Add content to the flip using the <code>elm_object_part_content_set()</code> function. Use the <code>front</code> and <code>back</code> part names to define the 2 <code>Evas_Objects</code> used as content:
<pre class="prettyprint">
elm_object_part_content_set(flip, "front", content1);
elm_object_part_content_set(flip, "back", content2);
</pre>
</li>
- <li>Run a flip animation using the <
span style="font-family: Courier New,Courier,monospace">elm_flip_go()</span> function. The <span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span> animation mode flips up the <span style="font-family: Courier New,Courier,monospace">front</span> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <span style="font-family: Courier New,Courier,monospace">back</span> content object. For a complete list of animation modes, see <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html#ga24518d66196b5b634a207fd02e09250e">elm_flip_go() Remarks</a>.
+ <li>Run a flip animation using the <
code>elm_flip_go()</code> function. The <code>ELM_FLIP_CUBE_UP</code> animation mode flips up the <code>front</code> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <code>back</code> content object. For a complete list of animation modes, see <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html#ga24518d66196b5b634a207fd02e09250e">elm_flip_go() Remarks</a>.
<pre class="prettyprint">
elm_flip_go(flip, ELM_FLIP_CUBE_UP);
</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 <span style="font-family: Courier New,Courier,monospace">animate,begin</span> signal.</p>
+ <p>The following example shows how to define and register a callback for the <code>animate,begin</code> signal.</p>
<pre class="prettyprint">
evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
</li>
<li>
<p>Set the amount of the flip that is sensitive to user interaction.</p>
-<p>To set the entire flip sensitive (to make the flip easy to interact with), use the amount <span style="font-family: Courier New,Courier,monospace">1</span>:</p>
+<p>To set the entire flip sensitive (to make the flip easy to interact with), use the amount <code>1</code>:</p>
<pre class="prettyprint">
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
<p>You can register callback functions connected to the following signals for a flip object.</p>
<table border="1">
- <caption>Table: Flip callback signals</caption>
+ <p align="center" class="Table"><strong>Table: Flip callback signals</strong></p>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">animate,begin</span></td>
+ <td><code>animate,begin</code></td>
<td>The flip animation is started.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">animate,done</span></td>
+ <td><code>animate,done</code></td>
<td>The flip animation is finished.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a flipselector component in your application:</p>
<ol>
- <li>Add a flipselector with the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_add()</span> function:
+ <li>Add a flipselector with the <code>elm_flipselector_add()</code> function:
<pre class="prettyprint">
-Evas_Object *flipselector;
+Evas_Object *flipsel;
-flipselector = elm_flipselector_add(parent);
+flipsel = elm_flipselector_add(parent);
</pre>
</li>
- <li>Add items to the flipselector with the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_append()</span> function:
+ <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(flipselector, "99", it_select_cb, NULL);
+flip_it = elm_flipselector_item_append(flipsel,
+ "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 <span style="font-family: Courier New,Courier,monospace">selected</span> signal:</p>
+<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(flipselector, "selected", _flip_selected_cb, NULL);
+evas_object_smart_callback_add(flipsel, "selected", _flip_selected_cb, NULL);
static void
_flip_selected_cb(void *data, Evas_Object *obj, void *event_info)
</li>
</ol>
<p>The following example shows a simple use case of the flipselector component.</p>
+ <p align="center" class="Table"><strong>Example: Flipselector use case</strong></p>
<table border="0">
- <caption>Example: Flipselector use case</caption>
<tbody>
<tr>
<td>
Evas_Object *win;
Evas_Object *conf;
Evas_Object *nf;
-Evas_Object *flipselector;
+Evas_Object *flipsel;
char buf[8];
int i;
/* win - conformant - naviframe */
/* Add a flipselector */
-flipselector = elm_flipselector_add(nf);
+flipsel = elm_flipselector_add(nf);
for (i = 0; i <= 99; i++) {
snprintf(buf, 8, "%u", i);
- elm_flipselector_item_append(flipselector, buf, flipselector_item_select_cb, NULL);
+ elm_flipselector_item_append(flipsel, buf, flipselector_item_select_cb, NULL);
}
-elm_naviframe_item_push(nf, "Flipselector", NULL, NULL, flipselector, NULL);
+elm_naviframe_item_push(nf, "Flipselector", NULL, NULL, flipsel, NULL);
void
flipselector_item_select_cb(void *data, Evas_Object *obj, void *event_info)
<li>First interval
<p>You can define the length of the first change interval when the user keeps the mouse button down for a longer period. After the first interval, the flipselector text is changed regularly while the mouse button remains down.</p>
-<p>To set the first interval, use the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_first_interval_set()</span> function:</p>
+<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(flipselector, 2.0);
+elm_flipselector_first_interval_set(flipsel, 2.0);
</pre>
</li>
<p>To change the value:</p>
<ul>
<li>
-<p>Show the next text using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_flip_next()</span> function:</p>
+<p>Show the next text using the <code>elm_flipselector_flip_next()</code> function:</p>
<pre class="prettyprint">
-elm_flipselector_flip_next(flipselector);
+elm_flipselector_flip_next(flipsel);
</pre>
</li>
<li>
-<p>Show the previous text using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_flip_prev()</span> function:</p>
+<p>Show the previous text using the <code>elm_flipselector_flip_prev()</code> function:</p>
<pre class="prettyprint">
-elm_flipselector_flip_prev(flipselector);
+elm_flipselector_flip_prev(flipsel);
</pre>
</li>
<li>
-<p>Show the text of the specific item using the <span style="font-family: Courier New,Courier,monospace">elm_flipselector_item_selected_set()</span> function.</p>
-<p>If the second parameter is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the flipselector shows the text of the first item.</p>
+<p>Show the text of the specific item using the <code>elm_flipselector_item_selected_set()</code> function.</p>
+<p>If the second parameter is set to <code>EINA_FALSE</code>, the flipselector shows the text of the first item.</p>
<pre class="prettyprint">
elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
</pre>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Flipselector styles</strong></p>
<table>
-<caption>Table: Flipselector styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/flipselector/base/default</span></td>
+ <td><code>elm/flipselector/base/default</code></td>
<td align="center"><img alt="elm/flipselector/base/default" src="../../../images/flipsel_default.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a flipselector object.</p>
+ <p align="center" class="Table"><strong>Table: Flipselector callback signals</strong></p>
<table>
- <caption>Table: Flipselector callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
<td>The flipselector's selected text item changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">overflowed</span></td>
+ <td><code>overflowed</code></td>
<td>The flipselector's current selection changes from the first item to the last one.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">underflowed</span></td>
+ <td><code>underflowed</code></td>
<td>The flipselector's current selection changes from the last item to the first one.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<li>Object is visible</li>
<li>Object is enabled</li>
<li>Object accepts focus
-<p>To set an object as focusable, or to determine whether the object is focusable, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set()</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get()</span> functions.</p></li>
+<p>To set an object as focusable, or to determine whether the object is focusable, use the <code>elm_object_focus_allow_set()</code> and <code>elm_object_focus_allow_get()</code> functions.</p></li>
<li>Object's subtree (if any) is focusable
-<p>To set an object and its children as focusable, or to determine whether the object and its children are focusable, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set()</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get()</span> functions.</p></li>
+<p>To set an object and its children as focusable, or to determine whether the object and its children are focusable, use the <code>elm_object_tree_focus_allow_set()</code> and <code>elm_object_tree_focus_allow_get()</code> functions.</p></li>
<li>All of the subtrees in the object's parents are focusable</li>
</ul>
<p>To manage focusable objects:</p>
<ul>
-<li>To determine whether a specific object is focused, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get()</span> function.</li>
+<li>To determine whether a specific object is focused, use the <code>elm_object_focus_get()</code> function.</li>
<li>To set the focus to an object:
<ol>
-<li>Show the object on the screen with the <span style="font-family: Courier New,Courier,monospace;">evas_object_show()</span> function.</li>
-<li>Set the focus with the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set()</span> function.
-<p>The second parameter is a Boolean value: if it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to the given object; if it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>, the focus is unset and passed back to the previous element in the focus chain.</p></li>
+<li>Show the object on the screen with the <code>evas_object_show()</code> function.</li>
+<li>Set the focus with the <code>elm_object_focus_set()</code> function.
+<p>The second parameter is a Boolean value: if it is set to <code>EINA_TRUE</code>, the focus is set to the given object; if it is set to <code>EINA_FALSE</code>, the focus is unset and passed back to the previous element in the focus chain.</p></li>
</ol>
</li>
<li><p>When a focused UI component is hidden, deleted, or disabled, it becomes unfocusable, and the focus is automatically moved to another object.</p></li>
-<li>To monitor when the object receives or loses focus, register the <span style="font-family: Courier New,Courier,monospace;">focused</span> or <span style="font-family: Courier New,Courier,monospace;">unfocused</span> smart event and define a callback.</li>
+<li>To monitor when the object receives or loses focus, register the <code>focused</code> or <code>unfocused</code> smart event and define a callback.</li>
</ul>
<p>The order in which the focus moves from one UI component to another is called the focus chain. The default focus chain is the order in which the UI components have been added to the canvas.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the components are added programmatically in a different order than they appear on the screen, the default focus chain can be quite confusing. In that case, you must customize the focus chain to make it work as expected.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ If the components are added programmatically in a different order than they appear on the screen, the default focus chain can be quite confusing. In that case, you must customize the focus chain to make it work as expected.
+</div>
<p>When the user wants to switch the focus to the next object, Elementary searches the first focusable object in the focus chain. If there is a disabled or read-only object in the focus chain, the focus skips over it to the next object in the requested direction.</p>
<ul>
<li>Customizing the object-specific focus exit (where the focus moves to after a specific object)
-<p>You can define where the focus moves from a specific object by using the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set()</span> function. The third parameter is the move direction, which can be one of the following:</p>
+<p>You can define where the focus moves from a specific object by using the <code>elm_object_focus_next_object_set()</code> function. The third parameter is the move direction, which can be one of the following:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: Next UI component in the natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: Previous UI component in the natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when moving up</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when moving down</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when moving right</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when moving left</li>
+<li><code>ELM_FOCUS_NEXT</code>: Next UI component in the natural order</li>
+<li><code>ELM_FOCUS_PREVIOUS</code>: Previous UI component in the natural order</li>
+<li><code>ELM_FOCUS_UP</code>: UI component to focus when moving up</li>
+<li><code>ELM_FOCUS_DOWN</code>: UI component to focus when moving down</li>
+<li><code>ELM_FOCUS_RIGHT</code>: UI component to focus when moving right</li>
+<li><code>ELM_FOCUS_LEFT</code>: UI component to focus when moving left</li>
</ul>
-<p>Get the next object in a specific direction using the <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get()</span> function.</p>
+<p>Get the next object in a specific direction using the <code>elm_object_focus_next_object_get()</code> function.</p>
</li>
<li>Customizing the entire application's focus chain
<p>To customize the application's focus chain:</p>
elm_object_focus_custom_chain_prepend(main, obj4, obj1);
</pre>
-<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
+<p>The focus chain is <code>obj5, obj3, obj4, obj1, obj2</code>.</p>
<p>This applies to any container. It is possible to set the focus chain of a box, for example.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The object-specific focus exit overrides the application's focus chain. This means that if an object is part of a focus chain and, in addition, has the next focused object defined, the next object takes precedence over the focus chain.
- <p>Consider the above focus chain example: if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj5</span> (the chain loops back to <span style="font-family: Courier New,Courier,monospace;">obj5</span> after <span style="font-family: Courier New,Courier,monospace;">obj4</span> instead of moving on the <span style="font-family: Courier New,Courier,monospace;">obj1</span>, as defined in the application focus chain).</p></td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The object-specific focus exit overrides the application's focus chain. This means that if an object is part of a focus chain and, in addition, has the next focused object defined, the next object takes precedence over the focus chain.
+ <p>Consider the above focus chain example: if <code>obj4</code> has <code>obj5</code> defined as its next object, the actual focus chain is <code>obj5, obj3, obj4, obj5</code> (the chain loops back to <code>obj5</code> after <code>obj4</code> instead of moving on the <code>obj1</code>, as defined in the application focus chain).</p>
+</div>
<p>If an Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component, as applicable.</p>
<p>The gengrid UI component is based on the same idea as <a href="component_genlist_mn.htm">genlist</a>. It aims at displaying objects on a grid layout and rendering only the visible ones. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Gengrid.html">Gengrid</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
-<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of "realization" when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> functions defined in the gengrid item class.</p>
+<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of "realization" when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Gengrid_Item_Class</code> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <code>text_get</code> and <code>content_get</code> functions defined in the gengrid item class.</p>
<h2 id="basic">Basic Usage</h2>
<p>To use a gengrid component in your application:</p>
<ol>
-<li>Add a gengrid with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_add()</span> function:
+<li>Add a gengrid with the <code>elm_gengrid_add()</code> function:
<pre class="prettyprint">
Evas_Object *gengrid;
</li>
<li>Define the gengrid item class:
<ol>
-<li>Create a gengrid item class with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_class_new()</span> function, set a style to the item class, and register the callback functions.
-<p>The genlist item class must be freed manually with <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_class_free()</span> function after all items are appended.</p>
+<li>Create a gengrid item class with the <code>elm_gengrid_item_class_new()</code> function, set a style to the item class, and register the callback functions.
+<p>The genlist item class must be freed manually with <code>elm_gengrid_item_class_free()</code> function after all items are appended.</p>
<pre class="prettyprint">
Elm_Gengrid_Item_Class *itc = elm_gengrid_item_class_new();
itc->func.del = _item_del;
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text_get</span> function.
-<p>When a gengrid item becomes realized, the <span style="font-family: Courier New,Courier,monospace">text_get</span> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically (do not free it manually).</p>
+<li>Define the <code>text_get</code> function.
+<p>When a gengrid item becomes realized, the <code>text_get</code> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically (do not free it manually).</p>
<pre class="prettyprint">
static char*
_item_label_get(void *data, Evas_Object *obj, const char *part)
}
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">content_get</span> function.
-<p>The <span style="font-family: Courier New,Courier,monospace">content_get</span> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <span style="font-family: Courier New,Courier,monospace">NULL</span> (when no content is desired). The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
+<li>Define the <code>content_get</code> function.
+<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <code>NULL</code> (when no content is desired). The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object*
_item_content_get(void *data, Evas_Object *obj, const char *part)
}
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">del</span> function.
+<li>Define the <code>del</code> function.
<p>This function is called when the gengrid item is deleted. It deletes any data that has been allocated at the item's creation.</p>
<pre class="prettyprint">
static void
</li>
</ol>
</li>
-<li>Append items to the gengrid with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function.
+<li>Append items to the gengrid with the <code>elm_gengrid_item_append()</code> function.
<pre class="prettyprint">
elm_gengrid_item_append(gengrid, /* Gengrid object */
itc, /* Gengrid item class */
<p>To manage the items:</p>
<ul>
<li>Add items:
-<ul><li>To add an item to the end of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function.</li>
-<li>To add an item to the beginning of the grid, use the similar <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span> function.</li>
-<li>To insert an item before the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span> function.</li>
-<li>To insert an item after the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> function.</li>
+<ul><li>To add an item to the end of the grid, use the <code>elm_gengrid_item_append()</code> function.</li>
+<li>To add an item to the beginning of the grid, use the similar <code>elm_gengrid_item_prepend()</code> function.</li>
+<li>To insert an item before the indicated item, use the <code>elm_gengrid_item_insert_before()</code> function.</li>
+<li>To insert an item after the indicated item, use the <code>elm_gengrid_item_insert_after()</code> function.</li>
</ul>
</li>
<li>Set the orientation.
</pre>
</li>
<li>Delete items and clear the grid:
-<ul><li>To delete a single gengrid item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function.</li>
-<li>To clear the grid and delete all items, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</li>
+<ul><li>To delete a single gengrid item, use the <code>elm_object_item_del()</code> function.</li>
+<li>To clear the grid and delete all items, use the <code>elm_gengrid_clear()</code> function.</li>
</ul>
-<p>If a gengrid object is deleted by the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function, all items are deleted automatically. On item deletion, the <span style="font-family: Courier New,Courier,monospace">del()</span> function in the item class is called.</p>
+<p>If a gengrid object is deleted by the <code>evas_object_del()</code> function, all items are deleted automatically. On item deletion, the <code>del()</code> function in the item class is called.</p>
</li>
<li>Update items.
-<p>If the content of an item changes, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> function for the gengrid to update the item. The gengrid re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Gengrid_Item_Class</span> class for it.</p>
+<p>If the content of an item changes, use the <code>elm_gengrid_item_update()</code> function for the gengrid to update the item. The gengrid re-realizes the item and calls the functions in the <code>_Elm_Gengrid_Item_Class</code> class for it.</p>
-<p>You can also use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_fields_update()</span> function to update only specific parts:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_TEXT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_CONTENT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENGRID_ITEM_FIELD_STATE</span></li></ul>
+<p>You can also use the <code>elm_gengrid_item_fields_update()</code> function to update only specific parts:</p>
+<ul><li><code>ELM_GENGRID_ITEM_FIELD_TEXT</code></li>
+<li><code>ELM_GENGRID_ITEM_FIELD_CONTENT</code></li>
+<li><code>ELM_GENGRID_ITEM_FIELD_STATE</code></li></ul>
</li>
<li>Select or disable items.
-<p>To manually select an item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> function. To select multiple items, you must enable the multi-selection mode:</p>
+<p>To manually select an item, use the <code>elm_gengrid_item_selected_set()</code> function. To select multiple items, you must enable the multi-selection mode:</p>
<pre class="prettyprint">
elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
</pre>
-<p>To retrieve the selected item, use the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_item_get()</span> function. When the multi-selection mode is enabled, you can retrieve the selected items with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function, which returns a list of all selected items.</p>
+<p>To retrieve the selected item, use the <code>elm_gengrid_selected_item_get()</code> function. When the multi-selection mode is enabled, you can retrieve the selected items with the <code>elm_gengrid_selected_items_get()</code> function, which returns a list of all selected items.</p>
-<p>To disable an item manually, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function.</p>
+<p>To disable an item manually, use the <code>elm_object_item_disabled_set()</code> function.</p>
</li>
</ul>
<h2 id="style">Styles</h2>
-<p>A gengrid item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. The number of texts and contents depends on the Edje item theme style used for the gengrid items. In the <span style="font-family: Courier New,Courier,monospace">default</span> Tizen gengrid item theme style, the items can have 2 content parts that can be set with the <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> part names.</p>
+<p>A gengrid item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. The number of texts and contents depends on the Edje item theme style used for the gengrid items. In the <code>default</code> Tizen gengrid item theme style, the items can have 2 content parts that can be set with the <code>elm.swallow.icon</code> and <code>elm.swallow.end</code> part names.</p>
<p>The following gengrid styles and related item styles are supported:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">default</span>
-<ul><li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">type1</span> (identical to the <span style="font-family: Courier ew,Courier,monospace">default</span> style in Tizen 2.4)</li>
-<li><span style="font-family: Courier New,Courier,monospace">type2</span></li>
+<ul><li><code>default</code>
+<ul><li><code>default</code></li>
+<li><code>type1</code> (identical to the <code>default</code> style in Tizen 2.4)</li>
+<li><code>type2</code></li>
</ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">popup</span>
-<ul><li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><code>popup</code>
+<ul><li><code>default</code></li>
</ul></li></ul>
-<p>To use the <span style="font-family: Courier New,Courier,monospace">popup</span> gengrid style with the <span style="font-family: Courier New,Courier,monospace">default</span> item style:</p>
+<p>To use the <code>popup</code> gengrid style with the <code>default</code> item style:</p>
<pre class="prettyprint">
elm_object_style_set(gengrid, "popup");
gic->item_style = "default";
</pre>
-<p class="figure">Figure: Gengrid styles</p>
+<p align="center"><strong>Figure: Gengrid styles</strong></p>
<p align="center"> <img alt="Gengrid styles" src="../../../images/gengrid_styles.png" /> </p>
<p>The following table provides further details of the available gengrid item styles.</p>
+<p align="center" class="Table"><strong>Table: Gengrid item styles</strong></p>
<table>
-<caption>Table: Gengrid item styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/gengrid/item/default/default</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm/gengrid/item/type1/default</span></p>
+ <td><code>elm/gengrid/item/default/default</code>
+<p><code>elm/gengrid/item/type1/default</code></p>
</td>
<td align="center"><img alt="elm/gengrid/item/default/default" src="../../../images/gengrid_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>
+ <p><code>elm.swallow.end</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/gengrid/item/type2/default</span></td>
+ <td><code>elm/gengrid/item/type2/default</code></td>
<td align="center"><img alt="elm/gengrid/item/type2/default" src="../../../images/gengrid_default_type2.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>
+ <p><code>elm.swallow.end</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/gengrid/item/default/popup</span></td>
+ <td><code>elm/gengrid/item/default/popup</code></td>
<td align="center"><img alt="elm/gengrid/item/default/popup" src="../../../images/gengrid_popup.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>
+ <p><code>elm.swallow.end</code></p></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a gengrid object.</p>
+ <p align="center" class="Table"><strong>Table: Gengrid callback signals</strong></p>
<table border="1">
- <caption>Table: Gengrid callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">activated</span></td>
+ <td><code>activated</code></td>
<td>The item is double-clicked or pressed (enter | return | spacebar).</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,double</span></td>
+ <td><code>clicked,double</code></td>
<td>The item is double-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
<td>The item is selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unselected</span></td>
+ <td><code>unselected</code></td>
<td>The item is unselected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">realized</span></td>
+ <td><code>realized</code></td>
<td>The item is created as a real evas object.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unrealized</span></td>
+ <td><code>unrealized</code></td>
<td>An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,up</span></td>
+ <td><code>drag,start,up</code></td>
<td>The item in the list is dragged (not scrolled) up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,down</span></td>
+ <td><code>drag,start,down</code></td>
<td>The item in the list is dragged (not scrolled) down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,left</span></td>
+ <td><code>drag,start,left</code></td>
<td>The item in the list is dragged (not scrolled) left.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,right</span></td>
+ <td><code>drag,start,right</code></td>
<td>The item in the list is dragged (not scrolled) right.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,stop</span></td>
+ <td><code>drag,stop</code></td>
<td>The item in the list has stopped being dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag</span></td>
+ <td><code>drag</code></td>
<td>The item in the list is being dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item</td>
+ <td><code>Elm_Object_Item</code> object that contains the dragged item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span></td>
+ <td><code>scroll,drag,start</code></td>
<td>Dragging the content is started.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span></td>
+ <td><code>scroll,drag,stop</code></td>
<td>Dragging the content is stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
+ <td><code>scroll</code></td>
<td>Scrolling is ongoing.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,top</span></td>
+ <td><code>edge,top</code></td>
<td>The genlist is scrolled to the top edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,bottom</span></td>
+ <td><code>edge,bottom</code></td>
<td>The genlist is scrolled to the bottom edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,left</span></td>
+ <td><code>edge,left</code></td>
<td>The genlist is scrolled to the left edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,right</span></td>
+ <td><code>edge,right</code></td>
<td>The genlist is scrolled to the right edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved</span></td>
+ <td><code>moved</code></td>
<td>A genlist item is moved in the reorder mode.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item</td>
+ <td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressed</span></td>
+ <td><code>pressed</code></td>
<td>The genlist item is pressed by mouse down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item</td>
+ <td><code>Elm_Object_Item</code> object that contains the pressed item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">released</span></td>
+ <td><code>released</code></td>
<td>The genlist item is released by mouse up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the released item</td>
+ <td><code>Elm_Object_Item</code> object that contains the released item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,right</span></td>
+ <td><code>clicked,right</code></td>
<td>The item is right-clicked.</td>
<td>The right-clicked gengrid item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">longpressed</span></td>
+ <td><code>longpressed</code></td>
<td>The item is pressed for a certain amount of time. By default, it is 1 second.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
- <td>An item is added, removed, resized, or moved, and the gengrid is resized or has <span style="font-family: Courier New,Courier,monospace">horizontal</span> property changes.</td>
+ <td><code>changed</code></td>
+ <td>An item is added, removed, resized, or moved, and the gengrid is resized or has <code>horizontal</code> property changes.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span></td>
+ <td><code>scroll,anim,start</code></td>
<td>The scrolling animation starts.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span></td>
+ <td><code>scroll,anim,stop</code></td>
<td>The scrolling animation stops.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,page,changed</span></td>
+ <td><code>scroll,page,changed</code></td>
<td>The visible page changes.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,start</span></td>
+ <td><code>item,reorder,anim,start</code></td>
<td>The reorder animation starts.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,reorder,anim,stop</span></td>
+ <td><code>item,reorder,anim,stop</code></td>
<td>The reorder animation stops.</td>
<td></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a genlist component in your application:</p>
<ol>
-<li>Add a genlist with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function:
+<li>Add a genlist with the <code>elm_genlist_add()</code> function:
<pre class="prettyprint">
Evas_Object *genlist;
</li>
<li>Define the genlist item class:
<ol>
-<li>Create a genlist item class with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_new()</span> function, set a style to the item class, and register callback functions. The genlist item class must be freed manually with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_free()</span> function after all items are appended.
+<li>Create a genlist item class with the <code>elm_genlist_item_class_new()</code> function, set a style to the item class, and register callback functions. The genlist item class must be freed manually with the <code>elm_genlist_item_class_free()</code> function after all items are appended.
<pre class="prettyprint">
Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
itc->func.del = _item_del;
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text_get</span> function.
-<p>When a genlist item becomes realized, the <span style="font-family: Courier New,Courier,monospace">text_get</span> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically. Do not free it manually.</p>
+<li>Define the <code>text_get</code> function.
+<p>When a genlist item becomes realized, the <code>text_get</code> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically. Do not free it manually.</p>
<pre class="prettyprint">
static char*
_item_label_get(void *data, Evas_Object *obj, const char *part)
}
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">content_get</span> function.
-<p>The <span style="font-family: Courier New,Courier,monospace">content_get</span> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <span style="font-family: Courier New,Courier,monospace">NULL</span> when no content is desired. The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
+<li>Define the <code>content_get</code> function.
+<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <code>NULL</code> when no content is desired. The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object*
_item_content_get(void *data, Evas_Object *obj, const char *part)
}
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">del</span> function.
+<li>Define the <code>del</code> function.
<p>This function is called when the genlist item is deleted. It deletes any data that has been allocated at the item's creation.</p>
<pre class="prettyprint">
static void
</li>
</ol>
</li>
-<li>Append items to the genlist with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.
+<li>Append items to the genlist with the <code>elm_genlist_item_append()</code> function.
<pre class="prettyprint">
elm_genlist_item_append(genlist, itc, (void *)i, NULL, ELM_GENLIST_ITEM_NONE,
_item_selected_cb, (void *)i);
<p>The following example shows a simple use case of the genlist component.</p>
+<p align="center" class="Table"><strong>Example: Genlist use case</strong></p>
<table>
-<caption>Example: Genlist use case</caption>
<tbody>
<tr>
<td>
itc->func.del = _item_del;
int i;
-for (i = 0; i < 10; i++)
-{
+for (i = 0; i < 10; i++) {
elm_genlist_item_append(genlist, /* Genlist object */
itc, /* Genlist item class */
(void *)i, /* Item data */
static Evas_Object*
_item_content_get(void *data, Evas_Object *obj, const char *part)
{
- if (!strcmp(part, "elm.swallow.icon"))
- {
+ if (!strcmp(part, "elm.swallow.icon")) {
Evas_Object *img = elm_image_add(obj);
ret = elm_image_file_set(img, ICON_DIR"/tizen.png", NULL);
evas_object_size_hint_min_set(img, ELM_SCALE_SIZE(30), ELM_SCALE_SIZE(30));
<p>The following item types are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+<li><code>ELM_GENLIST_ITEM_NONE</code></li>
+<li><code>ELM_GENLIST_ITEM_TREE</code></li>
+<li><code>ELM_GENLIST_ITEM_GROUP</code></li>
</ul>
<p>You can use the group items in the group mode or tree mode:</p>
<li>
<p>To group several items under a parent item using the group mode, follow these steps in addition to the basic usage:</p>
<ol>
-<li>Define another genlist item class which is used to append group items, and set the <span style="font-family: Courier New,Courier,monospace">group_index</span> style to it.</li>
-<li>Append group items with the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span>
+<li>Define another genlist item class which is used to append group items, and set the <code>group_index</code> style to it.</li>
+<li>Append group items with the <code>ELM_GENLIST_ITEM_GROUP</code>
parameter.</li>
-<li>Append child items with the group item and the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span> parameter.</li>
+<li>Append child items with the group item and the <code>ELM_GENLIST_ITEM_NONE</code> parameter.</li>
</ol>
+<p align="center" class="Table"><strong>Example: Genlist group mode use case</strong></p>
<table>
-<caption>Example: Genlist group mode use case</caption>
<tbody>
<tr>
<td>
gitc->func.del = _item_del;
-for (i = 1; i < 10; i++)
-{
+for (i = 1; i < 10; i++) {
g = elm_genlist_item_append(genlist,
gitc,
(void *)i,
ELM_GENLIST_ITEM_GROUP, /* Group item */
NULL,
NULL);
- for (j = 1; j < 4; j++)
- {
+ for (j = 1; j < 4; j++) {
elm_genlist_item_append(genlist,
itc,
(void *)j,
<p>To group several items under a parent item using the tree mode, follow these steps in addition to the basic usage:</p>
<ol>
-<li>Define another genlist item class which is used to append group items, and set the <span style="font-family: Courier New,Courier,monospace">group_index/expandable</span> style to it.</li>
-<li>Append group items with the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span>
+<li>Define another genlist item class which is used to append group items, and set the <code>group_index/expandable</code> style to it.</li>
+<li>Append group items with the <code>ELM_GENLIST_ITEM_TREE</code>
parameter.</li>
-<li>Append child items with the group item and the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span> parameter.</li>
+<li>Append child items with the group item and the <code>ELM_GENLIST_ITEM_NONE</code> parameter.</li>
</ol>
+<p align="center" class="Table"><strong>Example: Genlist tree mode use case</strong></p>
<table border="0">
-<caption>Example: Genlist tree mode use case</caption>
<tbody>
<tr>
<td>
titc->func.text_get = _group_item_label_get;
titc->func.del = _item_del;
-for (i = 1; i < 10; i++)
-{
+for (i = 1; i < 10; i++) {
it = elm_genlist_item_append(genlist,
titc,
(void *)i,
itc->func.text_get = _item_label_get;
itc->func.del = _item_del;
- for(i = 1; i < 4; i++)
- {
+ for (i = 1; i < 4; i++) {
elm_genlist_item_append(genlist,
itc,
(void *)i,
</li>
</ul>
-<p>You can retrieve the parent of an item with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> function. When the children of an item are no longer needed, you can clear them with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function.</p>
+<p>You can retrieve the parent of an item with the <code>elm_genlist_item_parent_get()</code> function. When the children of an item are no longer needed, you can clear them with the <code>elm_genlist_item_subitems_clear()</code> function.</p>
<h3>Compress Mode</h3>
-<p>The genlist and item size can be managed through the mode set by the <span style="font-family: Courier New,Courier,monospace">elm_genlist_mode_set()</span> function:</p>
+<p>The genlist and item size can be managed through the mode set by the <code>elm_genlist_mode_set()</code> function:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>
+<li><code>ELM_LIST_COMPRESS</code>
<p>The genlist respects its container's geometry. Even if there are items exceeding the genlist in the transverse axis, the genlist is not scrollable in that direction.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>
-<p>Same as <span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>, but if there are items exceeding the genlist in the transverse axis, the genlist is scrollable in that direction.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>
+<li><code>ELM_LIST_SCROLL</code>
+<p>Same as <code>ELM_LIST_COMPRESS</code>, but if there are items exceeding the genlist in the transverse axis, the genlist is scrollable in that direction.</p></li>
+<li><code>ELM_LIST_LIMIT</code>
<p>Sets a minimum size hint on the list object, so that containers can respect it. A minimum size hint is set for its transverse axis, so that the largest item in that direction fits well.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>
-<p>Besides setting a minimum size on the transverse axis, like <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, the list sets a minimum size on the longitudinal axis, trying to reverse space to all its children to be visible at a time.</p></li></ul>
+<li><code>ELM_LIST_EXPAND</code>
+<p>Besides setting a minimum size on the transverse axis, like <code>ELM_LIST_LIMIT</code>, the list sets a minimum size on the longitudinal axis, trying to reverse space to all its children to be visible at a time.</p></li></ul>
<h3>Item Selection</h3>
-<p>To select or deselect items manually, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function.</p>
+<p>To select or deselect items manually, use the <code>elm_genlist_item_selected_set()</code> function.</p>
<p>By default, the genlist is in a single-selection mode: only 1 item can be selected at a time.</p>
<p>To manage the item selection, use the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span>: Activate multi-selection mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span>: Retrieve the selected item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span>: Retrieve the list of the currently selected items.</li>
+<li><code>elm_genlist_multi_select_set()</code>: Activate multi-selection mode.</li>
+<li><code>elm_genlist_selected_item_get()</code>: Retrieve the selected item.</li>
+<li><code>elm_genlist_selected_items_get()</code>: Retrieve the list of the currently selected items.</li>
</ul>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The item selection comes with a highlight effect. If the user wants to cancel the highlight by touch off, you must cancel the select operation in the <span style="font-family: Courier New,Courier,monospace">select()</span> callback:
+<div class="note">
+ <strong>Note</strong>
+ The item selection comes with a highlight effect. If the user wants to cancel the highlight by touch off, you must cancel the select operation in the <code>select()</code> callback:
<pre class="prettyprint">
static void
select_cb(void *data, Evas_Object *obj, void *event_info)
}
</pre>
-<p>Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</p></td>
-</tr>
-</tbody>
-</table>
-
-
+<p>Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <code>expanded</code> or <code>contracted</code> signals.</p>
+</div>
<h3>Item Update</h3>
<p>You can update the items using the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span>: Update an item</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_fields_update()</span>:
+<li><code>elm_genlist_item_update()</code>: Update an item</li>
+<li><code>elm_genlist_item_fields_update()</code>:
Update only specific parts:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_FIELD_TEXT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_FIELD_CONTENT</span></li>
+<li><code>ELM_GENLIST_ITEM_FIELD_TEXT</code></li>
+<li><code>ELM_GENLIST_ITEM_FIELD_CONTENT</code></li>
</ul></li>
</ul>
<p>The genlist has a separate style for itself and for its items. The genlist style determines the characteristics of the entire scrollable area.</p>
-<p>The genlist items have a gradient opacity from the top to the bottom rather than an explicit divider from Tizen 2.4. Each item is identified by its color made by blending its opacity and background color (or image). The <span style="font-family: Courier New,Courier,monospace">solid</span> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
+<p>The genlist items have a gradient opacity from the top to the bottom rather than an explicit divider from Tizen 2.4. Each item is identified by its color made by blending its opacity and background color (or image). The <code>solid</code> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
<pre class="prettyprint">
elm_object_style_set(genlist, "solid/default");
</pre>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Genlist styles</strong></p>
<table>
-<caption>Table: Genlist styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">elm/genlist/base/solid/default</span></td>
+<td><code>elm/genlist/base/solid/default</code></td>
<td align="center"><img alt="elm/genlist/base/solid/default" src="../../../images/styleguide_genlist_def.png" /></td>
<td>N/A</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+<td><code>default</code></td>
<td></td>
-<td>Same as <span style="font-family: Courier New,Courier,monospace">effect</span>.</td>
+<td>Same as <code>effect</code>.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">effect</span></td>
+<td><code>effect</code></td>
<td></td>
<td>When the genlist reaches its edge during scrolling, it shows an effect.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">no_effect</span></td>
+<td><code>no_effect</code></td>
<td></td>
<td>The genlist has no effect when it reaches an edge.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">handler</span></td>
+<td><code>handler</code></td>
<td></td>
<td>Enables a scrollbar that eases scrolling through the whole list.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">solid/effect</span></td>
+<td><code>solid/effect</code></td>
<td></td>
<td>N/A</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">solid/no_effect</span></td>
+<td><code>solid/no_effect</code></td>
<td></td>
<td>N/A</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">solid/handler</span></td>
+<td><code>solid/handler</code></td>
<td></td>
<td>N/A</td>
</tr>
<h3 id="item_style">Item Styles</h3>
-<p>The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has 1 text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), and 2 content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>).</p>
+<p>The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has 1 text part (<code>elm.text</code>), and 2 content parts (<code>elm.swallow.icon</code> and <code>elm.swallow.end</code>).</p>
<p>The following table lists the available item styles.</p>
-<table>
-<caption>Table: Genlist item styles</caption>
+<p align="center" class="Table"><strong>Table: Genlist item styles</strong></p>
+<table>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/type1/default</span></td>
+ <td><code>elm/genlist/item/type1/default</code></td>
<td align="center"><img alt="elm/genlist/item/type1/default" src="../../../images/styleguide_genlist_type1_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.end</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.sub.end</span></p>
+ <td><code>elm.text</code>
+<p><code>elm.text.end</code></p>
+<p><code>elm.text.sub</code></p>
+<p><code>elm.text.sub.end</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.0</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.1</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.2</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p>
+ <td><code>elm.swallow.bg</code>
+<p><code>elm.swallow.icon</code></p>
+<p><code>elm.swallow.icon.0</code></p>
+<p><code>elm.swallow.icon.1</code></p>
+<p><code>elm.swallow.icon.2</code></p>
+<p><code>elm.swallow.end</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/type2/default</span></td>
+ <td><code>elm/genlist/item/type2/default</code></td>
<td align="center"><img alt="elm/genlist/item/type2/default" src="../../../images/styleguide_genlist_type2_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.end</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.text.sub.end</span></p>
+ <td><code>elm.text</code>
+<p><code>elm.text.end</code></p>
+<p><code>elm.text.sub</code></p>
+<p><code>elm.text.sub.end</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.0</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.1</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p>
+ <td><code>elm.swallow.bg</code>
+<p><code>elm.swallow.icon</code></p>
+<p><code>elm.swallow.icon.0</code></p>
+<p><code>elm.swallow.icon.1</code></p>
+<p><code>elm.swallow.end</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/multiline/default</span></td>
+ <td><code>elm/genlist/item/multiline/default</code></td>
<td align="center"><img alt="elm/genlist/item/multiline/default" src="../../../images/styleguide_genlist_multiline.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.multiline</span></p>
+ <td><code>elm.text</code>
+ <p><code>elm.text.multiline</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.0</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.1</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon.2</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p>
+ <td><code>elm.swallow.bg</code>
+<p><code>elm.swallow.icon</code></p>
+<p><code>elm.swallow.icon.0</code></p>
+<p><code>elm.swallow.icon.1</code></p>
+<p><code>elm.swallow.icon.2</code></p>
+<p><code>elm.swallow.end</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/full/default</span></td>
+ <td><code>elm/genlist/item/full/default</code></td>
<td align="center"><img alt="elm/genlist/item/full/default" src="../../../images/styleguide_genlist_full.png" /></td>
<td>N/A</td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></p></td>
+ <td><code>elm.swallow.bg</code>
+ <p><code>elm.swallow.content</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/group_index/default</span></td>
+ <td><code>elm/genlist/item/group_index/default</code></td>
<td align="center"><img alt="elm/genlist/item/group_index/default" src="../../../images/styleguide_genlist_group.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.end</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code>
+ <p><code>elm.text.end</code></p></td>
+ <td><code>elm.swallow.bg</code>
+ <p><code>elm.swallow.end</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/group_index/expandable/default</span></td>
+ <td><code>elm/genlist/item/group_index/expandable/default</code></td>
<td align="center"><img alt="elm/genlist/item/group_index/expandable/default" src="../../../images/styleguide_genlist_group_expandable.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/default/default</span></td>
+ <td><code>elm/genlist/item/default/default</code></td>
<td align="center"><img alt="elm/genlist/item/default/default" src="../../../images/styleguide_genlist_defstyle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>
+<p><code>elm.swallow.end</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/double_label/default</span></td>
+ <td><code>elm/genlist/item/double_label/default</code></td>
<td align="center"><img alt="elm/genlist/item/double_label/default" src="../../../images/styleguide_genlist_doublelabel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></p></td>
+ <td><code>elm.text</code>
+ <p><code>elm.text.sub</code></p></td>
+ <td><code>elm.swallow.icon</code>
+<p><code>elm.swallow.end</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/one_icon/default</span></td>
+ <td><code>elm/genlist/item/one_icon/default</code></td>
<td align="center"><img alt="elm/genlist/item/one_icon/default" src="../../../images/styleguide_genlist_oneicon.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/genlist/item/end_icon/default</span></td>
+ <td><code>elm/genlist/item/end_icon/default</code></td>
<td align="center"><img alt="elm/genlist/item/end_icon/default" src="../../../images/styleguide_genlist_end.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.end</code></td>
</tr>
</tbody>
</table>
<p>You can register callback functions connected to the following signals for a genlist object.</p>
+<p align="center" class="Table"><strong>Table: Genlist callback signals</strong></p>
<table border="1">
- <caption>Table: Genlist callback signals</caption>
-
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">event_info</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">activated</span></td>
+ <td><code>activated</code></td>
<td>The item is double-clicked or pressed (enter | return | spacebar).</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,double</span></td>
+ <td><code>clicked,double</code></td>
<td>The item is double-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
<td>The item is selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unselected</span></td>
+ <td><code>unselected</code></td>
<td>The item is unselected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">expanded</span></td>
- <td>The item is to be expanded with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback fills in the child items.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>expanded</code></td>
+ <td>The item is to be expanded with the <code>elm_genlist_item_expanded_set()</code> function. The callback fills in the child items.</td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">contracted</span></td>
- <td>The item is to be contracted with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback deletes the child items.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>contracted</code></td>
+ <td>The item is to be contracted with the <code>elm_genlist_item_expanded_set()</code> function. The callback deletes the child items.</td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">expand,request</span></td>
- <td>The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>expand,request</code></td>
+ <td>The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.</td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">contract,request</span></td>
- <td>The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>contract,request</code></td>
+ <td>The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.</td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">realized</span></td>
+ <td><code>realized</code></td>
<td>The item is created as a real Evas object.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unrealized</span></td>
+ <td><code>unrealized</code></td>
<td>An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,up</span></td>
+ <td><code>drag,start,up</code></td>
<td>The item in the list is dragged (not scrolled) up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,down</span></td>
+ <td><code>drag,start,down</code></td>
<td>The item in the list is dragged (not scrolled) down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,left</span></td>
+ <td><code>drag,start,left</code></td>
<td>The item in the list is dragged (not scrolled) left.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,start,right</span></td>
+ <td><code>drag,start,right</code></td>
<td>The item in the list is dragged (not scrolled) right.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag,stop</span></td>
+ <td><code>drag,stop</code></td>
<td>The item in the list has stopped being dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span></td>
+ <td><code>Elm_Object_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drag</span></td>
+ <td><code>drag</code></td>
<td>The item in the list is being dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item</td>
+ <td><code>Elm_Object_Item</code> object that contains the dragged item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">longpressed</span></td>
+ <td><code>longpressed</code></td>
<td>The item is pressed for a certain amount of time. The default specified time is 1 second.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item</td>
+ <td><code>Elm_Object_Item</code> object that contains the pressed item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span></td>
+ <td><code>scroll,anim,start</code></td>
<td>The scrolling animation is started.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span></td>
+ <td><code>scroll,anim,stop</code></td>
<td>The scrolling animation is stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span></td>
+ <td><code>scroll,drag,start</code></td>
<td>Dragging the content is started.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span></td>
+ <td><code>scroll,drag,stop</code></td>
<td>Dragging the content is stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
+ <td><code>scroll</code></td>
<td>Scrolling is ongoing.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,top</span></td>
+ <td><code>edge,top</code></td>
<td>The genlist is scrolled to the top edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,bottom</span></td>
+ <td><code>edge,bottom</code></td>
<td>The genlist is scrolled to the bottom edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,left</span></td>
+ <td><code>edge,left</code></td>
<td>The genlist is scrolled to the left edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,right</span></td>
+ <td><code>edge,right</code></td>
<td>The genlist is scrolled to the right edge.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span></td>
+ <td><code>multi,swipe,left</code></td>
<td>The genlist is multi-touch-swiped left.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item</td>
+ <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span></td>
+ <td><code>multi,swipe,right</code></td>
<td>The genlist is multi-touch-swiped right.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item</td>
+ <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span></td>
+ <td><code>multi,swipe,up</code></td>
<td>The genlist is multi-touch-swiped up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item</td>
+ <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span></td>
+ <td><code>multi,swipe,down</code></td>
<td>The genlist is multi-touch-swiped down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item</td>
+ <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span></td>
+ <td><code>multi,pinch,out</code></td>
<td>The genlist is multi-touch-pinched out.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item</td>
+ <td><code>Elm_Object_Item</code> object that contains the pinched item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span></td>
+ <td><code>multi,pinch,in</code></td>
<td>The genlist is multi-touch-pinched in.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item</td>
+ <td><code>Elm_Object_Item</code> object that contains the pinched item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">swipe</span></td>
+ <td><code>swipe</code></td>
<td>The genlist is swiped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item</td>
+ <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved</span></td>
+ <td><code>moved</code></td>
<td>A genlist item is moved in the reorder mode.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item</td>
+ <td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved,after</span></td>
- <td>A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item</td>
+ <td><code>moved,after</code></td>
+ <td>A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
+ <td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved,before</span></td>
- <td>A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item</td>
+ <td><code>moved,before</code></td>
+ <td>A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
+ <td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The program language changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span></td>
+ <td><code>tree,effect,finished</code></td>
<td>A genlist tree effect is finished.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressed</span></td>
+ <td><code>pressed</code></td>
<td>The genlist item is pressed by mouse down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item</td>
+ <td><code>Elm_Object_Item</code> object that contains the pressed item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">released</span></td>
+ <td><code>released</code></td>
<td>The genlist item is released by mouse up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the released item</td>
+ <td><code>Elm_Object_Item</code> object that contains the released item</td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Genlist.html">Genlist</a> API.</p>
-<p class="figure">Figure: Genlist component</p>
+<p align="center"><strong>Figure: Genlist component</strong></p>
<p align="center"> <img alt="Genlist component" src="../../../images/genlist.png" /> </p>
-<p class="figure">Figure: Genlist hierarchy</p>
+<p align="center"><strong>Figure: Genlist hierarchy</strong></p>
<p align="center"> <img alt="Genlist hierarchy" src="../../../images/genlist_htree.png" /> </p>
<h2 id="add">Adding a Genlist Component</h2>
-<p>To add a genlist component, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function:</p>
+<p>To add a genlist component, use the <code>elm_genlist_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *genlist;
Evas_Object *parent;
<h2 id="styles">Using the Genlist Item Styles</h2>
-<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. The genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides 1 text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), 2 content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>), and no state parts.</p>
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. The genlist looks for data items named respectively <code>labels</code>, <code>contents</code>, and <code>states</code> in the Edje file. The <code>default</code> item style provides 1 text part (<code>elm.text</code>), 2 content parts (<code>elm.swallow.icon</code> and <code>elm.swallow.end</code>), and no state parts.</p>
<p>The following item styles are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">groupindex</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">1text</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">2text</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">2text.1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></li>
+ <li><code>default</code></li>
+ <li><code>groupindex</code></li>
+ <li><code>1text</code></li>
+ <li><code>1text.1icon</code></li>
+ <li><code>2text</code></li>
+ <li><code>2text.1</code></li>
+ <li><code>1text.1icon.divider</code></li>
+ <li><code>1text.1icon.1</code></li>
+ <li><code>2text.1icon.1</code></li>
+ <li><code>multiline/1text</code></li>
+ <li><code>multiline/2text</code></li>
</ul>
<p>The following figures show examples of the item styles.</p>
-<p class="figure">Figure: 1text item style</p>
+<p align="center"><strong>Figure: 1text item style</strong></p>
<p align="center"> <img alt="1 text item style" src="../../../images/genlist1_wn.png" /> </p>
-<p class="figure">Figure: 1text.1icon.1 item style</p>
+<p align="center"><strong>Figure: 1text.1icon.1 item style</strong></p>
<p align="center"> <img alt="1text.1icon.1 item style" src="../../../images/genlist2_wn.png" /> </p>
-<p class="figure">Figure: 2text.1icon.1 item style</p>
+<p align="center"><strong>Figure: 2text.1icon.1 item style</strong></p>
<p align="center"> <img alt="2text.1icon.1 item style" src="../../../images/genlist3_wn.png" /> </p>
<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing UI Components</a>.</p>
<h2 id="items">Defining the Genlist Item Class</h2>
-<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Genlist_Item_Class</code> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
<p>You can use the genlist item class for the following purposes:</p>
<ul><li>Setting the item styles</li>
itc->func.del = _item_del;
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style, and the decorate all item style.</p>
+<p>The <code>item_style</code>, <code>decorate_item_style</code>, and <code>decorate_all_item_style</code> attributes define the names of the item style, the decorate mode item style, and the decorate all item style.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be realized or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+<p>The <code>func</code> structure contains pointers to functions that are called when an item is going to be realized or deleted. All of them receive a data parameter that points to the same data passed to the <code>elm_genlist_item_append()</code> function and related item creation functions, and an <code>obj</code> parameter that points to the genlist object itself.</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">text_get()</span>
- <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+ <li><code>text_get()</code>
+ <p>The <code>PART</code> parameter is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <code>strdup()</code> function) corresponding to the <code>PART</code> parameter. The caller is in charge of freeing the string when done.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">content_get()</span>
- <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle or <span style="font-family: Courier New,Courier,monospace">NULL</span> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+ <li><code>content_get()</code>
+ <p>The <code>PART</code> parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle or <code>NULL</code> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is <code>unrealized</code>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">state_get()</span>
- <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. When the state is true, the genlist emits a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter's theming Edje object using <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as the <span style="font-family: Courier New,Courier,monospace">emission</span> parameter and <span style="font-family: Courier New,Courier,monospace">elm</span> as the <span style="font-family: Courier New,Courier,monospace">source</span> parameter. xxx is the name of the (state) part.</p></li>
+ <li><code>state_get()</code>
+ <p>The <code>PART</code> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <code>EINA_FALSE</code> for false/off or <code>EINA_TRUE</code> for true/on. The default is false. When the state is true, the genlist emits a signal to the <code>PART</code> parameter's theming Edje object using <code>elm,state,xxx,active</code> as the <code>emission</code> parameter and <code>elm</code> as the <code>source</code> parameter. xxx is the name of the (state) part.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">del()</span>
+ <li><code>del()</code>
<p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
</ul>
<p>To manage items:</p>
<ul>
<li>Add items:
-<ul><li>To add an item to the end of the list (or if there is a parent list, to the end of all the child items of the parent list), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</li>
-<li>To add an item to the beginning of the list or parent list, use the similar <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> function.</li>
-<li>To insert an item before the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> function.</li>
-<li>To insert an item after the indicated item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> function.</li>
+<ul><li>To add an item to the end of the list (or if there is a parent list, to the end of all the child items of the parent list), use the <code>elm_genlist_item_append()</code> function.</li>
+<li>To add an item to the beginning of the list or parent list, use the similar <code>elm_genlist_item_prepend()</code> function.</li>
+<li>To insert an item before the indicated item, use the <code>elm_genlist_item_insert_before()</code> function.</li>
+<li>To insert an item after the indicated item, use the <code>elm_genlist_item_insert_after()</code> function.</li>
</ul>
-<p>The functions take one of the following <span style="font-family: Courier New,Courier,monospace">type</span> parameters:</p>
+<p>The functions take one of the following <code>type</code> parameters:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span>
+ <li><code>ELM_GENLIST_ITEM_NONE</code></li>
+ <li><code>ELM_GENLIST_ITEM_TREE</code>
<p>The item is displayed as being able to expand and have child items. In the wearable profile, the genlist tree item style is not supported yet.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span>
+ <li><code>ELM_GENLIST_ITEM_GROUP</code>
<p>The item is a group index item that is displayed at the top until the next group appears.</p></li>
</ul>
</li>
<li>Delete items and clear the list:
-<ul><li>To delete a single genlist item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function.</li>
-<li>To clear the list and delete all items, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span> function.</li>
-<li>To delete all items that are children of the indicated parent item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function.</li>
+<ul><li>To delete a single genlist item, use the <code>elm_object_item_del()</code> function.</li>
+<li>To clear the list and delete all items, use the <code>elm_genlist_clear()</code> function.</li>
+<li>To delete all items that are children of the indicated parent item, use the <code>elm_genlist_item_subitems_clear()</code> function.</li>
</ul>
</li>
<li>Inspect list elements:
-<p>To help inspect the list items, move to the item at the top of the list with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span> function, which returns the item pointer. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> function moves to the item at the end of the list. The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> functions move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">As a tree, the items are flattened on the list, so the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> function gives you the name of the parent item (even to skip them if needed).</td>
- </tr>
- </tbody>
- </table>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> function scrolls the scroller to show the desired item as visible. </p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> function returns the data pointer set by the item creation functions.</p>
+<p>To help inspect the list items, move to the item at the top of the list with the <code>elm_genlist_first_item_get()</code> function, which returns the item pointer. The <code>elm_genlist_last_item_get()</code> function moves to the item at the end of the list. The <code>elm_genlist_item_next_get()</code> and <code>elm_genlist_item_prev_get()</code> functions move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ As a tree, the items are flattened on the list, so the <code>elm_genlist_item_parent_get()</code> function gives you the name of the parent item (even to skip them if needed).
+</div>
+
+<p>The <code>elm_genlist_item_show()</code> function scrolls the scroller to show the desired item as visible. </p>
+<p>The <code>elm_object_item_data_get()</code> function returns the data pointer set by the item creation functions.</p>
</li>
<li>Update items:
-<p>If an item changes (state, boolean, text or content change), use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> function for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> class for it.</p>
+<p>If an item changes (state, boolean, text or content change), use the <code>elm_genlist_item_update()</code> function for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <code>_Elm_Genlist_Item_Class</code> class for it.</p>
</li>
</ul>
<h2 id="selection">Selecting Genlist Items</h2>
-<p>To select or deselect items manually, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> function. To expand or contract a tree or group item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function.</p>
+<p>To select or deselect items manually, use the <code>elm_genlist_item_selected_set()</code> function. To expand or contract a tree or group item, use the <code>elm_genlist_item_expanded_set()</code> function.</p>
-<p>To prevent a selection, you can disable an item with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> function.</p>
+<p>To prevent a selection, you can disable an item with the <code>elm_object_item_disabled_set()</code> function.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <code>expanded</code> or <code>contracted</code> signals.
+</div>
<h2 id="callback">Using the Genlist Callbacks</h2>
<p>To receive notifications about the genlist events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the activated item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the double-clicked item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the selected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the unselected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback fills in the child items.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function. The callback deletes the child items.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be expanded.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function to set the state.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be contracted.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be created.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the item to be deleted.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the dragged item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is 1 second.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pressed item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
-
- <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch-swiped left.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch-swiped right.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch-swiped up.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch-swiped down.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch-pinched out.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch-pinched in.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the pinched item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the swiped item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> function. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> object that contains the moved item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program language is changed.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the activated item.</p></li>
+ <li><code>clicked,double</code>: The item is double-clicked.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the double-clicked item.</p></li>
+ <li><code>selected</code>: The item is selected.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the selected item.</p></li>
+ <li><code>unselected</code>: The item is unselected.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the unselected item.</p></li>
+ <li><code>expanded</code>: The item is to be expanded with the <code>elm_genlist_item_expanded_set()</code> function. The callback fills in the child items.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li>
+ <li><code>contracted</code>: The item is to be contracted with the <code>elm_genlist_item_expanded_set()</code> function. The callback deletes the child items.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li>
+ <li><code>expand,request</code>: The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li>
+ <li><code>contract,request</code>: The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li>
+ <li><code>realized</code>: The item is created as a real evas object.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be created.</p></li>
+ <li><code>unrealized</code>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be deleted.</p></li>
+ <li><code>drag,start,up</code>: The item in the list is dragged (not scrolled) up.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>drag,start,down</code>: The item in the list is dragged (not scrolled) down.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>drag,start,left</code>: The item in the list is dragged (not scrolled) left.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>drag,start,right</code>: The item in the list is dragged (not scrolled) right.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>drag,stop</code>: The item in the list has stopped being dragged.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>drag</code>: The item in the list is being dragged.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+ <li><code>longpressed</code>: The item is pressed for a certain amount of time. The default specified time is 1 second.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pressed item.</p></li>
+ <li><code>scroll,anim,start</code>: The scrolling animation is started.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>scroll,anim,stop</code>: The scrolling animation is stopped.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>scroll,drag,start</code>: Dragging the content is started.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>scroll,drag,stop</code>: Dragging the content is stopped.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+
+ <li><code>edge,top</code>: The genlist is scrolled to the top edge.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>edge,bottom</code>: The genlist is scrolled to the bottom edge.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>edge,left</code>: The genlist is scrolled to the left edge.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>edge,right</code>: The genlist is scrolled to the right edge.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>multi,swipe,left</code>: The genlist is multi-touch-swiped left.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+ <li><code>multi,swipe,right</code>: The genlist is multi-touch-swiped right.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+ <li><code>multi,swipe,up</code>: The genlist is multi-touch-swiped up.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+ <li><code>multi,swipe,down</code>: The genlist is multi-touch-swiped down.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+ <li><code>multi,pinch,out</code>: The genlist is multi-touch-pinched out.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pinched item.</p></li>
+ <li><code>multi,pinch,in</code>: The genlist is multi-touch-pinched in.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pinched item.</p></li>
+ <li><code>swipe</code>: The genlist is swiped.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+ <li><code>moved</code>: A genlist item is moved in the reorder mode.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
+ <li><code>moved,after</code>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
+ <li><code>moved,before</code>: A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.
+ <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
+ <li><code>language,changed</code> The program language is changed.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+ <li><code>tree,effect,finished</code>: A genlist tree effect is finished.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity.</p>
<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.mobile.apireference/group__GLView.html">GLView</a> API.</p>
- <p class="figure">Figure: GLView component</p>
+ <p align="center"><strong>Figure: GLView component</strong></p>
<p align="center"><img alt="GLView component" src="../../../images/glview.png" /></p>
- <p class="figure">Figure: GLView hierarchy</p>
+ <p align="center"><strong>Figure: GLView hierarchy</strong></p>
<p align="center"><img alt="GLView hierarchy" src="../../../images/glview_tree.png" /></p>
<h2 id="add">Adding a GLView Component</h2>
<p>To create a GLView component:</p>
<ol>
-<li>Add a GLView component using the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function:
+<li>Add a GLView component using the <code>elm_glview_add()</code> function:
<pre class="prettyprint">
Evas_Object *glview;
Evas_Object *parent;
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>, in which case only the image object is scaled, not the underlying GL surface.</p>
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying GL surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
</pre>
-<p>The rendering policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), in which case the GLView component is redrawn only when it is visible.</p>
+<p>The rendering policy can also be set to <code>ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</code> (default function), in which case the GLView component is redrawn only when it is visible.</p>
</li>
<li>
<p>Register callbacks for managing changes in the GLView component state:</p>
<p>You can register callback functions connected to the following signals for a glview object:</p>
+ <p align="center" class="Table"><strong>Table: GLView callback signals</strong></p>
<table border="1">
- <caption>Table: GLView callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">focused</span></td>
+ <td><code>focused</code></td>
<td>The GLView component is focused.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object</td>
+ <td><code>Elm_Focus_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfocused</span></td>
+ <td><code>unfocused</code></td>
<td>The GLView object is unfocused.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>focused</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(glview, "focused", focused_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html">GLView</a> API.</p>
- <p class="figure">Figure: GLView component</p>
+ <p align="center"><strong>Figure: GLView component</strong></p>
<p align="center"><img alt="GLView component" src="../../../images/glview_wn.png" /></p>
- <p class="figure">Figure: GLView hierarchy</p>
+ <p align="center"><strong>Figure: GLView hierarchy</strong></p>
<p align="center"><img alt="GLView hierarchy" src="../../../images/glview_tree.png" /></p>
<h2 id="add">Adding a GLView Component</h2>
<p>To create a GLView component:</p>
<ol>
-<li>Add a GLView component using the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function:
+<li>Add a GLView component using the <code>elm_glview_add()</code> function:
<pre class="prettyprint">
Evas_Object *glview;
Evas_Object *parent;
<ul>
<li>
-<p>Enable the appropriate GLView rendering modes. The <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html#ga66921b1aacf3e65935a0d6c2576ac096">Elm_GLView_Mode</a> enumerator defines the available modes.</p>
+<p>Enable the appropriate GLView rendering modes. The <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html#ga4d0a2281e13c66d7274987ef24e7abe7">Elm_GLView_Mode</a> enumerator defines the available modes.</p>
<p>To enable the alpha channel and depth buffer rendering modes:</p>
<pre class="prettyprint">
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>, in which case only the image object is scaled, not the underlying GL surface.</p>
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying GL surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
</pre>
-<p>The rendering policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), in which case the GLView component is redrawn only when it is visible.</p>
+<p>The rendering policy can also be set to <code>ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</code> (default function), in which case the GLView component is redrawn only when it is visible.</p>
</li>
<li>
<p>Register callbacks for managing changes in the GLView component state:</p>
<p>To receive notifications about the GLView events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The GLView component is focused.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at an <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span> object.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+<li><code>focused</code>: The GLView component is focused.
+<p>The <code>event_info</code> callback parameter points at an <code>Elm_Focus_Info</code> object.</p></li>
+<li><code>unfocused</code>: The GLView object is unfocused.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">focused</span> signal:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>To register and define a callback for the <code>focused</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(glview, "focused", focused_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Hoversel.html">Hoversel</a> API.</p>
-<p class="figure">Figure: Hoversel component</p>
+<p align="center"><strong>Figure: Hoversel component</strong></p>
<p align="center"><img alt="Hoversel component" src="../../../images/hoversel.png" /></p>
-<p class="figure">Figure: Hoversel hierarchy</p>
+<p align="center"><strong>Figure: Hoversel hierarchy</strong></p>
<p align="center"><img alt="Hoversel hierarchy" src="../../../images/hoversel_tree.png" /></p>
<h2 id="add">Adding a Hoversel Component</h2>
-<p>To create a hoversel component, use the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_add()</span> function:</p>
+<p>To create a hoversel component, use the <code>elm_hoversel_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *hoversel;
<p>To configure the hoversel:</p>
<ul><li>
-<p>Set the hoversel orientation using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_horizontal_set()</span> function.</p>
+<p>Set the hoversel orientation using the <code>elm_hoversel_horizontal_set()</code> function.</p>
<p>In Tizen, the horizontal mode is not provided for the hoversel. You must set the hoversel to the vertical mode:</p>
<pre class="prettyprint">
elm_hoversel_horizontal_set(hoversel, EINA_FALSE);
</pre></li>
-<li><p>Set the hover parent with the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_parent_set()</span> function.</p>
+<li><p>Set the hover parent with the <code>elm_hoversel_hover_parent_set()</code> function.</p>
<p>The hoversel creates a hover component and puts a list of items in the hover when it is activated. The hover parent determines the area where the item list can be shown. The hover parent does not need to be the same as the hoversel parent.</p>
<pre class="prettyprint">
Evas_Object *hoversel;
</pre></li>
<li>
<p>Activate the hoversel.</p>
-<p>The hoversel can be activated by a click or calling the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_begin()</span> function. To deactivate it, click an item, click outside the item list, or call the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_hover_end()</span> function.</p>
+<p>The hoversel can be activated by a click or calling the <code>elm_hoversel_hover_begin()</code> function. To deactivate it, click an item, click outside the item list, or call the <code>elm_hoversel_hover_end()</code> function.</p>
<pre class="prettyprint">
elm_hoversel_hover_begin(hoversel);
elm_hoversel_hover_end(hoversel);
</pre></li>
-<li><p>Retrieve the hoversel activation state (as a Boolean value) using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_expanded_get()</span> function:</p>
+<li><p>Retrieve the hoversel activation state (as a Boolean value) using the <code>elm_hoversel_expanded_get()</code> function:</p>
<pre class="prettyprint">
Eina_Bool expanded;
expanded = elm_hoversel_expanded_get(hoversel);
<h2 id="manage">Managing the Hoversel Items</h2>
-<p>The hoversel component can contain items that have a label. Even though parameters for an icon are defined in the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_item_add()</span> function, the hoversel item icon is not supported in Tizen.</p>
+<p>The hoversel component can contain items that have a label. Even though parameters for an icon are defined in the <code>elm_hoversel_item_add()</code> function, the hoversel item icon is not supported in Tizen.</p>
<p>To manage items:</p>
-<ol><li>Add an item using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_item_add()</span> function.
-<p>To add an item with a "test" label and the <span style="font-family: Courier New,Courier,monospace">_hoversel_item_cb</span> clicked callback: </p>
+<ol><li>Add an item using the <code>elm_hoversel_item_add()</code> function.
+<p>To add an item with a "test" label and the <code>_hoversel_item_cb</code> clicked callback: </p>
<pre class="prettyprint">
Elm_Object_Item *it;
</pre>
<p>The signal for the clicked callback is related to an individual item, not the entire hoversel.</p></li>
<li>
-<p>Retrieve the handles for the added items using the <span style="font-family: Courier New,Courier,monospace">elm_hoversel_items_get()</span> function.</p>
-<p>The function returns a list of <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> items.</p>
+<p>Retrieve the handles for the added items using the <code>elm_hoversel_items_get()</code> function.</p>
+<p>The function returns a list of <code>Elm_Object_Item</code> items.</p>
<pre class="prettyprint">
Eina_List *items;
items = elm_hoversel_items_get(hoversel);
</pre></li>
-<li><p>Change the item label using the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function.</p>
+<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 <span style="font-family: Courier New,Courier,monospace">elm_hoversel_clear()</span> function:</p>
+<li><p>Delete all items together with the <code>elm_hoversel_clear()</code> function:</p>
<pre class="prettyprint">
elm_hoversel_clear(hoversel);
</pre></li></ol>
<p>You can register callback functions connected to the following signals for a hoversel object.</p>
+<p align="center" class="Table"><strong>Table: Hoversel callback signals</strong></p>
<table border="1">
- <caption>Table: Hoversel callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The hoversel is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><code>selected</code></td>
<td>The hoversel item is selected.</td>
<td>The selected item</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">dismissed</span></td>
+ <td><code>dismissed</code></td>
<td>The hover is dismissed (by selecting an item or clicking the hover).</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">expanded</span></td>
+ <td><code>expanded</code></td>
<td>The hoversel is activated by clicking the hoversel or by a function.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The program language changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>dismissed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(hoversel, "dismissed", dismissed_cb, data);
}
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use an icon component in your application:</p>
<ol>
-<li>Add an icon with the <span style="font-family: Courier New,Courier,monospace">elm_icon_add()</span> function:
+<li>Add an icon with the <code>elm_icon_add()</code> function:
<pre class="prettyprint">
Evas_Object *icon;
</pre>
</li>
<li>Set an image to the icon.
-<p>To set a standard icon from freedesktop.org, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_standard_set()</span> function:</p>
+<p>To set a standard icon from freedesktop.org, use the <code>elm_icon_standard_set()</code> function:</p>
<pre class="prettyprint">
Evas_Object *icon;
Evas_Object *parent;
<p>To change the image file:</p>
<ul>
<li>
-<p>You can use an image in the file system (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>):</p>
+<p>You can use an image in the file system (for example, <code>/tmp/Home.png</code>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>):</p>
+<p>You can also use a group in an Edje file (for example, <code>/tmp/Home.edj</code>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
</pre>
elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
+<p>The <code>elm_icon_thumb_set()</code> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
</li>
</ul>
<p>The following example shows a simple use case of the icon component.</p>
+<p align="center" class="Table"><strong>Example: Icon use case</strong></p>
<table border="0">
-<caption>Example: Icon use case</caption>
<tbody>
<tr>
<td>
<h2 id="image">Standard Icons</h2>
+<p align="center" class="Table"><strong>Table: Icon styles</strong></p>
<table>
-<caption>Table: Icon styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">apps</span></td>
+ <td><code>apps</code></td>
<td align="center"><img alt="apps" src="../../../images/icon_apps.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">arrow_down</span></td>
+ <td><code>arrow_down</code></td>
<td align="center"><img alt="arrow_down" src="../../../images/icon_arrowdown.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">arrow_left</span></td>
+ <td><code>arrow_left</code></td>
<td align="center"><img alt="arrow_left" src="../../../images/icon_arrowleft.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">arrow_right</span></td>
+ <td><code>arrow_right</code></td>
<td align="center"><img alt="arrow_right" src="../../../images/icon_arrowright.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">arrow_up</span></td>
+ <td><code>arrow_up</code></td>
<td align="center"><img alt="arrow_up" src="../../../images/icon_arrowup.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">chat</span></td>
+ <td><code>chat</code></td>
<td align="center"><img alt="chat" src="../../../images/icon_chat.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clock</span></td>
+ <td><code>clock</code></td>
<td align="center"><img alt="clock" src="../../../images/icon_clock.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">close</span></td>
+ <td><code>close</code></td>
<td align="center"><img alt="close" src="../../../images/icon_close.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">delete</span></td>
+ <td><code>delete</code></td>
<td align="center"><img alt="delete" src="../../../images/icon_delete.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edit</span></td>
+ <td><code>edit</code></td>
<td align="center"><img alt="edit" src="../../../images/icon_edit.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
+ <td><code>file</code></td>
<td align="center"><img alt="file" src="../../../images/icon_file.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">folder</span></td>
+ <td><code>folder</code></td>
<td align="center"><img alt="folder" src="../../../images/icon_folder.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">home</span></td>
+ <td><code>home</code></td>
<td align="center"><img alt="home" src="../../../images/icon_home.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">no_photo</span></td>
+ <td><code>no_photo</code></td>
<td align="center"><img alt="no_photo" src="../../../images/icon_nophoto.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">refresh</span></td>
+ <td><code>refresh</code></td>
<td align="center"><img alt="refresh" src="../../../images/icon_refresh.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/forward</span></td>
+ <td><code>media_player/forward</code></td>
<td align="center"><img alt="media_player/forward" src="../../../images/icon_forward.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/info</span></td>
+ <td><code>media_player/info</code></td>
<td align="center"><img alt="media_player/info" src="../../../images/icon_info.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/next</span></td>
+ <td><code>media_player/next</code></td>
<td align="center"><img alt="media_player/next" src="../../../images/icon_next.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/pause</span></td>
+ <td><code>media_player/pause</code></td>
<td align="center"><img alt="media_player/pause" src="../../../images/icon_pause.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/play</span></td>
+ <td><code>media_player/play</code></td>
<td align="center"><img alt="media_player/play" src="../../../images/icon_play.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/prev</span></td>
+ <td><code>media_player/prev</code></td>
<td align="center"><img alt="media_player/prev" src="../../../images/icon_prev.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/rewind</span></td>
+ <td><code>media_player/rewind</code></td>
<td align="center"><img alt="media_player/rewind" src="../../../images/icon_rewind.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">media_player/stop</span></td>
+ <td><code>media_player/stop</code></td>
<td align="center"><img alt="media_player/stop" src="../../../images/icon_stop.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/apps</span></td>
+ <td><code>menu/apps</code></td>
<td align="center"><img alt="menu/apps" src="../../../images/icon_menu_apps.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/arrow_down</span></td>
+ <td><code>menu/arrow_down</code></td>
<td align="center"><img alt="menu/arrow_down" src="../../../images/icon_menu_arrdown.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/arrow_left</span></td>
+ <td><code>menu/arrow_left</code></td>
<td align="center"><img alt="menu/arrow_left" src="../../../images/icon_menu_arrleft.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/arrow_right</span></td>
+ <td><code>menu/arrow_right</code></td>
<td align="center"><img alt="menu/arrow_right" src="../../../images/icon_menu_arrright.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/arrow_up</span></td>
+ <td><code>menu/arrow_up</code></td>
<td align="center"><img alt="menu/arrow_up" src="../../../images/icon_menu_arrup.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/chat</span></td>
+ <td><code>menu/chat</code></td>
<td align="center"><img alt="menu/chat" src="../../../images/icon_menu_chat.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/clock</span></td>
+ <td><code>menu/clock</code></td>
<td align="center"><img alt="menu/clock" src="../../../images/icon_menu_clock.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/close</span></td>
+ <td><code>menu/close</code></td>
<td align="center"><img alt="menu/close" src="../../../images/icon_menu_close.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/delete</span></td>
+ <td><code>menu/delete</code></td>
<td align="center"><img alt="menu/delete" src="../../../images/icon_menu_delete.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/edit</span></td>
+ <td><code>menu/edit</code></td>
<td align="center"><img alt="menu/edit" src="../../../images/icon_menu_edit.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/file</span></td>
+ <td><code>menu/file</code></td>
<td align="center"><img alt="menu/file" src="../../../images/icon_menu_file.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/folder</span></td>
+ <td><code>menu/folder</code></td>
<td align="center"><img alt="menu/folder" src="../../../images/icon_menu_folder.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/home</span></td>
+ <td><code>menu/home</code></td>
<td align="center"><img alt="menu/home" src="../../../images/icon_menu_home.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menu/refresh</span></td>
+ <td><code>menu/refresh</code></td>
<td align="center"><img alt="menu/refresh" src="../../../images/icon_menu_refresh.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">photo/no_photo</span></td>
+ <td><code>photo/no_photo</code></td>
<td align="center"><img alt="photo/no_photo" src="../../../images/icon_photo_nophoto.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/apps</span></td>
+ <td><code>toolbar/apps</code></td>
<td align="center"><img alt="toolbar/apps" src="../../../images/icon_toolbar_apps.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/arrow_down</span></td>
+ <td><code>toolbar/arrow_down</code></td>
<td align="center"><img alt="toolbar/arrow_down" src="../../../images/icon_toolbar_arrdown.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/arrow_left</span></td>
+ <td><code>toolbar/arrow_left</code></td>
<td align="center"><img alt="toolbar/arrow_left" src="../../../images/icon_toolbar_arrleft.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/arrow_right</span></td>
+ <td><code>toolbar/arrow_right</code></td>
<td align="center"><img alt="toolbar/arrow_right" src="../../../images/icon_toolbar_arrright.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/arrow_up</span></td>
+ <td><code>toolbar/arrow_up</code></td>
<td align="center"><img alt="toolbar/arrow_up" src="../../../images/icon_toolbar_arrup.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/chat</span></td>
+ <td><code>toolbar/chat</code></td>
<td align="center"><img alt="toolbar/chat" src="../../../images/icon_toolbar_chat.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/clock</span></td>
+ <td><code>toolbar/clock</code></td>
<td align="center"><img alt="toolbar/clock" src="../../../images/icon_toolbar_clock.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/close</span></td>
+ <td><code>toolbar/close</code></td>
<td align="center"><img alt="toolbar/close" src="../../../images/icon_toolbar_close.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/delete</span></td>
+ <td><code>toolbar/delete</code></td>
<td align="center"><img alt="toolbar/delete" src="../../../images/icon_toolbar_delete.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/edit</span></td>
+ <td><code>toolbar/edit</code></td>
<td align="center"><img alt="toolbar/edit" src="../../../images/icon_toolbar_edit.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/file</span></td>
+ <td><code>toolbar/file</code></td>
<td align="center"><img alt="toolbar/file" src="../../../images/icon_toolbar_file.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/folder</span></td>
+ <td><code>toolbar/folder</code></td>
<td align="center"><img alt="toolbar/folder" src="../../../images/icon_toolbar_folder.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/home</span></td>
+ <td><code>toolbar/home</code></td>
<td align="center"><img alt="toolbar/home" src="../../../images/icon_toolbar_home.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/more_menu</span></td>
+ <td><code>toolbar/more_menu</code></td>
<td align="center"><img alt="toolbar/more_menu" src="../../../images/icon_toolbar_moremenu.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toolbar/refresh</span></td>
+ <td><code>toolbar/refresh</code></td>
<td align="center"><img alt="toolbar/refresh" src="../../../images/icon_toolbar_refresh.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for an icon object.</p>
+ <p align="center" class="Table"><strong>Table: Icon callback signals</strong></p>
<table border="1">
- <caption>Table: Icon callback signals</caption>
<colgroup>
<col /><col />
</colgroup>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">thumb,done</span></td>
- <td>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function is completed with success.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>thumb,done</code></td>
+ <td>The <code>elm_icon_thumb_set()</code> function is completed with success.</td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">thumb,error</span></td>
- <td>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function fails.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>thumb,error</code></td>
+ <td>The <code>elm_icon_thumb_set()</code> function fails.</td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Icon.html">Icon</a> API.</p>
-<p class="figure">Figure: Icon hierarchy</p>
+<p align="center"><strong>Figure: Icon hierarchy</strong></p>
<p align="center"> <img alt="Icon hierarchy" src="../../../images/icon_tree.png" /> </p>
<h2 id="add">Adding an Icon Component</h2>
-<p>To create an icon component, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_add()</span> function.</p>
-<p>To set the icon as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon, use the <span style="font-family: Courier New,Courier,monospace">elm_icon_standard_set()</span> function.</p>
+<p>To create an icon component, use the <code>elm_icon_add()</code> function.</p>
+<p>To set the icon as a freedesktop.org <code>Home</code> standard icon, use the <code>elm_icon_standard_set()</code> function.</p>
<pre class="prettyprint">
Evas_Object *icon;
<p>To change the image file:</p>
<ul>
<li>
-<p>You can use an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>):</p>
+<p>You can use an image in the filesystem (for example, <code>/tmp/Home.png</code>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>):</p>
+<p>You can also use a group in an Edje file (for example, <code>/tmp/Home.edj</code>):</p>
<pre class="prettyprint">
elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
</pre>
elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
+<p>The <code>elm_icon_thumb_set()</code> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
</li>
</ul>
<p>To receive notifications about the icon events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function is completed with success.</li>
- <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: The <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> function fails.</li>
+ <li><code>thumb,done</code>: The <code>elm_icon_thumb_set()</code> function is completed with success.</li>
+ <li><code>thumb,error</code>: The <code>elm_icon_thumb_set()</code> function fails.</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>In both cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>In both cases, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Image.html">Image</a> API.</p>
-<p class="figure">Figure: Image component</p>
+<p align="center"><strong>Figure: Image component</strong></p>
<p align="center"> <img alt="Image component" src="../../../images/image.png" /> </p>
-<p class="figure">Figure: Image hierarchy</p>
+<p align="center"><strong>Figure: Image hierarchy</strong></p>
<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>
<h2 id="add">Adding an Image Component</h2>
-<p>To create an image component, use the <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span> function:</p>
+<p>To create an image component, use the <code>elm_image_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *image;
elm_image_fill_outside_set(image, EINA_TRUE);
</pre>
-<p>In the above configuration, a part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+<p>In the above configuration, a part of the image can go outside the object. If the <code>elm_image_fill_outside_set()</code> function is set to <code>EINA_FALSE</code>, the image stays inside the limits of the parent object.</p>
</li>
<li>
<p>Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.</p>
<p>Rotate or flip the image.</p>
<p>The following orientation changes are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line.</li>
+ <li><code>ELM_IMAGE_ORIENT_0</code>: No orientation change.</li>
+ <li><code>ELM_IMAGE_ROTATE_90</code>: Rotate the image 90 degrees clockwise.</li>
+ <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>
+ <li><code>ELM_IMAGE_ROTATE_270</code>: Rotate the image 90 degrees counter-clockwise.</li>
+ <li><code>ELM_IMAGE_FLIP_HORIZONTAL</code>: Flip the image horizontally.</li>
+ <li><code>ELM_IMAGE_FLIP_VERTICAL</code>: Flip the image vertically.</li>
+ <li><code>ELM_IMAGE_FLIP_TRANSPOSE</code>: Flip the image along the bottom-left to top-right line.</li>
+ <li><code>ELM_IMAGE_FLIP_TRANSVERSE</code>: Flip the image along the top-left to bottom-right line.</li>
</ul>
<pre class="prettyprint">
elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
<li>
<p>Execute an animation:</p>
-<ul><li>To check whether the image supports animation, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_available_get()</span> function.</li>
-<li>To define whether the image must animate itself, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_set()</span> function. To enable the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> flag.</li>
-<li>To control the animation, use the <span style="font-family: Courier New,Courier,monospace">elm_image_animated_play_set()</span> function. To play the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> flag, and to stop the animation, use the <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> flag.</li>
+<ul><li>To check whether the image supports animation, use the <code>elm_image_animated_available_get()</code> function.</li>
+<li>To define whether the image must animate itself, use the <code>elm_image_animated_set()</code> function. To enable the animation, use the <code>EINA_TRUE</code> flag.</li>
+<li>To control the animation, use the <code>elm_image_animated_play_set()</code> function. To play the animation, use the <code>EINA_TRUE</code> flag, and to stop the animation, use the <code>EINA_FALSE</code> flag.</li>
</ul>
<pre class="prettyprint">
<p>You can register callback functions connected to the following signals for an image object.</p>
+<p align="center" class="Table"><strong>Table: Image callback signals</strong></p>
<table border="1">
- <caption>Table: Image callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">drop</span></td>
+ <td><code>drop</code></td>
<td>An image-type object is dropped onto the object in question.</td>
<td>The path to the image file</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The image is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>The image component can load and display an image from a disk file or a memory region.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Image.html">Image</a> API.</p>
-<p class="figure">Figure: Image component</p>
+<p align="center"><strong>Figure: Image component</strong></p>
<p align="center"> <img alt="Image component" src="../../../images/image_wn.png" /> </p>
-<p class="figure">Figure: Image hierarchy</p>
+<p align="center"><strong>Figure: Image hierarchy</strong></p>
<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>
<h2 id="add">Adding an Image Component</h2>
-<p>To create an image component, use the <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span> function:</p>
+<p>To create an image component, use the <code>elm_image_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *image;
elm_image_fill_outside_set(image, EINA_TRUE);
</pre>
-<p>In the above configuration, a part of the image can go outside the object. If the <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span> function is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+<p>In the above configuration, a part of the image can go outside the object. If the <code>elm_image_fill_outside_set()</code> function is set to <code>EINA_FALSE</code>, the image stays inside the limits of the parent object.</p>
</li>
<li>
<p>Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.</p>
<p>Rotate or flip the image.</p>
<p>The following orientation changes are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line.</li>
+ <li><code>ELM_IMAGE_ORIENT_0</code>: No orientation change.</li>
+ <li><code>ELM_IMAGE_ROTATE_90</code>: Rotate the image 90 degrees clockwise.</li>
+ <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>
+ <li><code>ELM_IMAGE_ROTATE_270</code>: Rotate the image 90 degrees counter-clockwise.</li>
+ <li><code>ELM_IMAGE_FLIP_HORIZONTAL</code>: Flip the image horizontally.</li>
+ <li><code>ELM_IMAGE_FLIP_VERTICAL</code>: Flip the image vertically.</li>
+ <li><code>ELM_IMAGE_FLIP_TRANSPOSE</code>: Flip the image along the bottom-left to top-right line.</li>
+ <li><code>ELM_IMAGE_FLIP_TRANSVERSE</code>: Flip the image along the top-left to bottom-right line.</li>
</ul>
<pre class="prettyprint">
elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
<p>To receive notifications about the image events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">drop</span>: An image typed object is dropped onto the object in question. <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the path to that image file.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
+ <li><code>drop</code>: An image typed object is dropped onto the object in question. <p>The <code>event_info</code> callback parameter is the path to that image file.</p></li>
+ <li><code>clicked</code>: The image is clicked.
+ <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>To register and define a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
}
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use an index component in your application:</p>
<ol>
-<li>Add an index with the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function:
+<li>Add an index with the <code>elm_index_add()</code> function:
<pre class="prettyprint">
Evas_Object *index;
</pre>
</li>
<li>Configure the index and set its <a href="#style">style</a>.</li>
-<li>Append items to the index with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span> 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.
+<li>Append items to the index with the <code>elm_index_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_index_item_append(index, "A", _item_selected_cb, NULL);
</pre>
<p>The following example shows a simple use case of the index component.</p>
+<p align="center" class="Table"><strong>Example: Index use case</strong></p>
<table border="0">
-<caption>Example: Index use case</caption>
<tbody>
<tr>
<td>
elm_index_item_append(index, "T", NULL, it);
</pre>
</li>
-<li>Register a callback function to the index for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal. Bring in the corresponding list item in the callback function. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the changed index item and the <span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> function retrieves the list item passed to <span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span> function.
+<li>Register a callback function to the index for the <code>changed</code> signal. Bring in the corresponding list item in the callback function. The <code>event_info</code> parameter is the changed index item and the <code>elm_object_item_data_get()</code> function retrieves the list item passed to <code>elm_index_item_append()</code> function.
<pre class="prettyprint">
void
index_changed_cb(void *data, Evas_Object *obj, void *event_info)
<p>The following example shows an index with a list.</p>
+<p align="center" class="Table"><strong>Example: Index with list</strong></p>
<table border="0">
-<caption>Example: Index with list</caption>
<tbody>
<tr>
<td>
<h2 id="style">Styles</h2>
-<p>To set the style, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function:</p>
+<p>To set the style, use the <code>elm_object_style_set()</code> function:</p>
<pre class="prettyprint">
elm_object_style_set(index, "pagecontrol");
</pre>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Index styles</strong></p>
<table>
-<caption>Table: Index styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">elm/index/base/vertical/default</span></td>
+<td><code>elm/index/base/vertical/default</code></td>
<td align="center"><img alt="elm/index/base/vertical/default" src="../../../images/index_default.png" /></td>
<td>This style has a one-finger-wide area on the right side of the index component's container. Generally, this style is used together with lists, generic lists, or generic grids.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">elm/index/base/vertical/pagecontrol</span></td>
+<td><code>elm/index/base/vertical/pagecontrol</code></td>
<td align="center"><img alt="elm/index/base/vertical/pagecontrol" src="../../../images/index_pagecontrol.png" /></td>
<td>This style has a one-finger-high area on the bottom side of the index component container. Generally, this style is used together with a layout, and images which are located in a scrollable object.</td>
</tr>
</tbody>
</table>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">
-<p>Set the index orientation with the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set()</span> function.</p>
+<div class="note">
+ <strong>Note</strong>
+ Set the index orientation with the <code>elm_index_horizontal_set()</code> function.
<pre class="prettyprint">
elm_index_horizontal_set(index, EINA_TRUE);
</pre>
-<p>For the <span style="font-family: Courier New,Courier,monospace">default</span> style, both orientations are supported, but for the <span style="font-family: Courier New,Courier,monospace">pagecontrol</span> style, only horizontal mode is available.</p>
-</td>
-</tr>
-</tbody>
-</table>
+<p>For the <code>default</code> style, both orientations are supported, but for the <code>pagecontrol</code> style, only horizontal mode is available.</p>
+</div>
<h2 id="callback">Callbacks</h2>
<p>You can register callback functions connected to the following signals for an index object.</p>
+<p align="center" class="Table"><strong>Table: Index callback signals</strong></p>
<table border="1">
-<caption>Table: Index callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+<td><code>changed</code></td>
<td>The selected index item changes.</td>
<td>The selected item's data pointer</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">delay,changed</span></td>
+<td><code>delay,changed</code></td>
<td>The selected index item changes, but after a small idling period.</td>
<td>The selected item's data pointer</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+<td><code>selected</code></td>
<td>The user selects an item by releasing the mouse button.</td>
<td>The selected item's data pointer</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">level,up</span></td>
+<td><code>level,up</code></td>
<td>The user moves a finger from the first level to the second level.</td>
-<td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">level,down</span></td>
+<td><code>level,down</code></td>
<td>The user moves a finger from the second level to the first level.</td>
-<td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Index.html">Index</a> API.</p>
-<p class="figure">Figure: Index component</p>
+<p align="center"><strong>Figure: Index component</strong></p>
<p align="center"> <img alt="Index component" src="../../../images/index_wn.png" /> </p>
-<p class="figure">Figure: Index hierarchy</p>
+<p align="center"><strong>Figure: Index hierarchy</strong></p>
<p align="center"> <img alt="Index hierarchy" src="../../../images/index_tree.png" /> </p>
<h2 id="add">Adding an Index Component</h2>
-<p>To create a new index component, use the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function:</p>
+<p>To create a new index component, use the <code>elm_index_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *index;
Evas_Object *parent;
<p>To add index items:</p>
<ol>
<li>
-<p>Add a list item object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when this item is selected:</p>
+<p>Add a list item object at the letter <code>A</code>, calling the <code>it_select_cb()</code> smart callback when this item is selected:</p>
<pre class="prettyprint">
Elm_Object_Item *list_item1;
Elm_Object_Item *list_item2;
elm_index_item_append(index, "A", it_select_cb, list_item1);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_index_item_append()</span> function appends the indexes to the existing ones. It is also possible to prepend index items with the <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span> function.</p>
+<p>The <code>elm_index_item_append()</code> function appends the indexes to the existing ones. It is also possible to prepend index items with the <code>elm_index_item_prepend()</code> function.</p>
</li>
<li>
-<p>Add item objects, calling the <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> smart callback when the item is selected:</p>
+<p>Add item objects, calling the <code>it_select_cb()</code> smart callback when the item is selected:</p>
<pre class="prettyprint">
Elm_Object_Item *it[5];
for (i = 0; i < 5; ++i)
<p>To receive notifications about the index events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item by releasing the mouse button.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the selected item's data pointer.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
- <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+ <li><code>changed</code>: The selected index item changes.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
+ <li><code>delay,changed</code>: The selected index item changes, but after a small idling period.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
+ <li><code>selected</code>: The user selects an item by releasing the mouse button.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
+ <li><code>level,up</code>: The user moves a finger from the first level to the second level.</li>
+ <li><code>level,down</code>: The user moves a finger from the second level to the first level.</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>Register and define the associated callback to perform appropriate actions. For example, when the <span style="font-family: Courier New,Courier,monospace">selected</span> signal occurs, show a given area or child object depending on the selected index item:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>Register and define the associated callback to perform appropriate actions. For example, when the <code>selected</code> signal occurs, show a given area or child object depending on the selected index item:</p>
<pre class="prettyprint">
static void
_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a label component in your application:</p>
<ol>
-<li>Add a label with the <span style="font-family: Courier New,Courier,monospace;">elm_label_add()</span> function:
+<li>Add a label with the <code>elm_label_add()</code> function:
<pre class="prettyprint">
Evas_Object *label;
label = elm_label_add(parent);
</pre>
</li>
-<li>Set a text to the label with the <
span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. Label is based on <a href="evas_objects_n.htm#block">textblock</a>, which means you can use every markup for textblock to a text in a label.
+<li>Set a text to the label with the <
code>elm_object_text_set()</code> function. Label is based on <a href="evas_objects_n.htm#block">textblock</a>, which means you can use every markup for textblock to a text in a label.
<pre class="prettyprint">
elm_object_text_set(label, "This is a label.");
</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 <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>slide,end</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
<p>The following example shows a simple use case of the label component.</p>
+<p align="center" class="Table"><strong>Example: Label use case</strong></p>
<table>
-<caption>Example: Label use case</caption>
<tbody>
<tr>
<td>
elm_label_slide_duration_set(label, 3);
</pre>
<p>The following table lists the available component styles.</p>
+
+<p align="center" class="Table"><strong>Table: Label styles</strong></p>
<table>
-<caption>Table: Label styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td>No animation is used.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">marker</span></td>
+ <td><code>marker</code></td>
<td>The text is centered and bolded.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slide_long</span></td>
+ <td><code>slide_long</code></td>
<td>The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slide_short</span></td>
+ <td><code>slide_short</code></td>
<td>The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slide_bounce</span></td>
+ <td><code>slide_bounce</code></td>
<td>The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a label object.</p>
+<p align="center" class="Table"><strong>Table: Label callback signals</strong></p>
<table border="1">
-<caption>Table: Label callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The program language changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slide,end</span></td>
+ <td><code>slide,end</code></td>
<td>The slide reaches the end.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span></td>
+ <td><code>anchor,clicked</code></td>
<td>The anchor is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object</td>
+ <td><code>Elm_Label_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span></td>
+ <td><code>anchor,mouse,down</code></td>
<td>The anchor is pressed by mouse down.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object</td>
+ <td><code>Elm_Label_Anchor_Info</code> object</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span></td>
+ <td><code>anchor,mouse,up</code></td>
<td>The anchor is released by mouse up.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object</td>
+ <td><code>Elm_Label_Anchor_Info</code> object</td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Label.html">Label</a> API.</p>
-<p class="figure">Figure: Label component</p>
+<p align="center"><strong>Figure: Label component</strong></p>
<p align="center"> <img alt="Label component" src="../../../images/label_wn.png" /> </p>
-<p class="figure">Figure: Label hierarchy</p>
+<p align="center"><strong>Figure: Label hierarchy</strong></p>
<p align="center"> <img alt="Label hierarchy" src="../../../images/label_tree.png" /> </p>
<h2 id="add">Adding a Label Component</h2>
-<p>To create a label, use the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function. You can set the label text with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+<p>To create a label, use the <code>elm_label_add()</code> function. You can set the label text with the <code>elm_object_text_set()</code> function.</p>
<pre class="prettyprint">
Evas_Object *label = elm_label_add(win);
<p>Modify the style with which the label component displays text.</p>
<p>The following styles are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li>
- <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li>
- <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</li>
- <li><span style="font-family: Courier New,Courier,monospace">slide_roll</span>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
- <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</li>
- <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
+ <li><code>default</code>: No animation</li>
+ <li><code>marker</code>: The text is centered and bolded.</li>
+ <li><code>slide_long</code>: The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</li>
+ <li><code>slide_roll</code>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
+ <li><code>slide_short</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</li>
+ <li><code>slide_bounce</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
</ul>
<pre class="prettyprint">
<p>To receive notifications about the label events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span>: The anchor is pressed by mouse down.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span>: The anchor is released by mouse up.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points to an <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span> object.</p></li>
+ <li><code>language,changed</code>: The program language is changed.</li>
+ <li><code>slide,end</code>: The slide reaches the end.</li>
+ <li><code>anchor,clicked</code>: The anchor is clicked.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,mouse,down</code>: The anchor is pressed by mouse down.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
+ <li><code>anchor,mouse,up</code>: The anchor is released by mouse up.
+ <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal:</p>
+<p>To register and define a callback for the <code>slide,end</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__List.html">List</a> API.</p>
- <p class="figure">Figure: List component</p>
+ <p align="center"><strong>Figure: List component</strong></p>
<p align="center"> <img alt="List component" src="../../../images/list.png" /> </p>
- <p class="figure">Figure: List hierarchy</p>
+ <p align="center"><strong>Figure: List hierarchy</strong></p>
<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p>
<h2 id="add">Adding a List Component</h2>
-<p>To add a list component, use the <span style="font-family: Courier New,Courier,monospace">elm_list_add()</span> function:</p>
+<p>To add a list component, use the <code>elm_list_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *list;
Evas_Object *parent;
<h2 id="add_item">Adding List Items</h2>
- <p>A list item can contain a piece of text and 2 contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). To set the individual elements of an item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_XXX()</span> functions.</p>
+ <p>A list item can contain a piece of text and 2 contents (<code>start</code> and <code>end</code>). To set the individual elements of an item, use the <code>elm_object_item_XXX()</code> functions.</p>
-<p>To add an item to the list, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> function are the callback function when the created item is selected and the data passed to the callback function.</p>
+<p>To add an item to the list, use the <code>elm_list_item_append()</code> or <code>elm_list_item_prepend()</code> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <code>elm_list_item_append()</code> function are the callback function when the created item is selected and the data passed to the callback function.</p>
<pre class="prettyprint">
Evas_Object *list;
<h2 id="change">Modifying List Items</h2>
-<p>To modify the list item elements, use the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> functions:</p>
+<p>To modify the list item elements, use the <code>Elm_Object_Item</code> functions:</p>
<ul>
-<li>To modify the item label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</li>
-<li>To modify the 2 contents, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function, referencing the first object as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme and the second one as the <span style="font-family: Courier New,Courier,monospace">end</span> object.
-<p>Each content is an <span style="font-family: Courier New,Courier,monospace">evas_object</span> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span> function.</p></li></ul>
+<li>To modify the item label, use the <code>elm_object_item_text_set()</code> function.</li>
+<li>To modify the 2 contents, use the <code>elm_object_item_part_content_set()</code> function, referencing the first object as the <code>start</code> object in the theme and the second one as the <code>end</code> object.
+<p>Each content is an <code>evas_object</code> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <code>elm_list_item_append()</code> or <code>elm_list_item_prepend()</code> function.</p></li></ul>
<pre class="prettyprint">
Evas_Object *list;
</pre>
</li>
<li>Enabling the multi-selection mode:
-<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function. Each time an item is clicked, its state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <code>elm_list_multi_select_set()</code> function. Each time an item is clicked, its state changes to <code>selected</code>.</p>
<pre class="prettyprint">
Evas_Object *list;
</li>
<li>Selecting items:
-<p>To find out whether an item is selected, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<p>To set an item as <span style="font-family: Courier New,Courier,monospace">selected</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_set()</span> function.</p>
+<p>To find out whether an item is selected, use the <code>elm_list_item_selected_get()</code> function. This function returns <code>EINA_TRUE</code> if the item is selected, otherwise <code>EINA_FALSE</code>.</p>
+<p>To set an item as <code>selected</code>, use the <code>elm_list_item_selected_set()</code> function.</p>
</li>
<li>Retrieving selected items:
-<p>To retrieve the list of the currently selected items, use the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function.</p>
-<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function.</p>
+<p>To retrieve the list of the currently selected items, use the <code>elm_list_selected_items_get()</code> function.</p>
+<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <code>elm_list_selected_item_get()</code> function.</p>
-<p>To retrieve all selected items and set their state to <span style="font-family: Courier New,Courier,monospace">unselected</span>:</p>
+<p>To retrieve all selected items and set their state to <code>unselected</code>:</p>
<pre class="prettyprint">
Evas_Object *list;
<li>Moving within the list:
<p>The list component provides various functions for moving within the list and sliding the list to a specific item:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item passed as a parameter, after animating the slide.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function goes to the item immediately preceding a specific item.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function goes to the item immediately following a specific item.</li></ul>
+<li>The <code>elm_list_item_show()</code> function shows the item passed as a parameter.</li>
+<li>The <code>elm_list_item_bring_in()</code> function shows the item passed as a parameter, after animating the slide.</li>
+<li>The <code>elm_list_item_prev()</code> function goes to the item immediately preceding a specific item.</li>
+<li>The <code>elm_list_item_next()</code> function goes to the item immediately following a specific item.</li></ul>
<p>To retrieve the currently selected item and unselect it, and then select the next item and bring it to the screen:</p>
<p>To receive notifications about the list events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the activated item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the double-clicked item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the selected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unselected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is long-pressed.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the long-pressed item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item on the list is highlighted.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the highlighted item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: An item in the list is unhighlighted.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unhighlighted item.</p></li>
+ <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
+ <li><code>clicked,double</code>: The item is double-clicked.
+ <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li>
+ <li><code>selected</code>: The item is selected.
+ <p>The <code>event_info</code> callback parameter points at the selected item.</p></li>
+ <li><code>unselected</code>: The item is unselected.
+ <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li>
+ <li><code>longpressed</code>: The item is long-pressed.
+ <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li>
+ <li><code>edge,top</code>: The list is scrolled to the top edge.</li>
+ <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li>
+ <li><code>edge,left</code>: The list is scrolled to the left edge.</li>
+ <li><code>edge,right</code>: The list is scrolled to the right edge.</li>
+ <li><code>highlighted</code>: An item on the list is highlighted.
+ <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li>
+ <li><code>unhighlighted</code>: An item in the list is unhighlighted.
+ <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>To register and define a callback for the <code>clicked,double</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__List.html">List</a> API.</p>
- <p class="figure">Figure: List component</p>
+ <p align="center"><strong>Figure: List component</strong></p>
<p align="center"> <img alt="List component" src="../../../images/list_wn.png" /> </p>
- <p class="figure">Figure: List hierarchy</p>
+ <p align="center"><strong>Figure: List hierarchy</strong></p>
<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p>
<h2 id="add">Adding a List Component</h2>
-<p>To add a list component, use the <span style="font-family: Courier New,Courier,monospace">elm_list_add()</span> function:</p>
+<p>To add a list component, use the <code>elm_list_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *list;
Evas_Object *parent;
<h2 id="add_item">Adding List Items</h2>
- <p>A list item can contain a piece of text and 2 contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). To set the individual elements of an item, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_XXX()</span> functions.</p>
+ <p>A list item can contain a piece of text and 2 contents (<code>start</code> and <code>end</code>). To set the individual elements of an item, use the <code>elm_object_item_XXX()</code> functions.</p>
-<p>To add an item to the list, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> function are the callback function when the created item is selected and the data passed to the callback function.</p>
+<p>To add an item to the list, use the <code>elm_list_item_append()</code> or <code>elm_list_item_prepend()</code> function. In the following example, 10 items with text and 1 icon are added. The last 2 parameters of the <code>elm_list_item_append()</code> function are the callback function when the created item is selected and the data passed to the callback function.</p>
<pre class="prettyprint">
Evas_Object *list;
<h2 id="change">Modifying List Items</h2>
-<p>To modify the list item elements, use the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> functions:</p>
+<p>To modify the list item elements, use the <code>Elm_Object_Item</code> functions:</p>
<ul>
-<li>To modify the item label, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set()</span> function.</li>
-<li>To modify the 2 contents, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function, referencing the first object as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme and the second one as the <span style="font-family: Courier New,Courier,monospace">end</span> object.
-<p>Each content is an <span style="font-family: Courier New,Courier,monospace">evas_object</span> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span> function.</p></li></ul>
+<li>To modify the item label, use the <code>elm_object_item_text_set()</code> function.</li>
+<li>To modify the 2 contents, use the <code>elm_object_item_part_content_set()</code> function, referencing the first object as the <code>start</code> object in the theme and the second one as the <code>end</code> object.
+<p>Each content is an <code>evas_object</code> instance, and they are defined as the third and the fourth parameters when you append or prepend the item in the list with the <code>elm_list_item_append()</code> or <code>elm_list_item_prepend()</code> function.</p></li></ul>
<pre class="prettyprint">
Evas_Object *list;
</pre>
</li>
<li>Enabling the multi-selection mode:
-<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function. Each time an item is clicked, its state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+<p>To enable multiple items to be selected at the same time, enable the multi-selection mode with the <code>elm_list_multi_select_set()</code> function. Each time an item is clicked, its state changes to <code>selected</code>.</p>
<pre class="prettyprint">
Evas_Object *list;
</li>
<li>Selecting items:
-<p>To find out whether an item is selected, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<p>To set an item as <span style="font-family: Courier New,Courier,monospace">selected</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_set()</span> function.</p>
+<p>To find out whether an item is selected, use the <code>elm_list_item_selected_get()</code> function. This function returns <code>EINA_TRUE</code> if the item is selected, otherwise <code>EINA_FALSE</code>.</p>
+<p>To set an item as <code>selected</code>, use the <code>elm_list_item_selected_set()</code> function.</p>
</li>
<li>Retrieving selected items:
-<p>To retrieve the list of the currently selected items, use the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span> function.</p>
-<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span> function.</p>
+<p>To retrieve the list of the currently selected items, use the <code>elm_list_selected_items_get()</code> function.</p>
+<p>If the multi-selection mode is disabled, only 1 item can be selected, and you can retrieve it with the <code>elm_list_selected_item_get()</code> function.</p>
-<p>To retrieve all selected items and set their state to <span style="font-family: Courier New,Courier,monospace">unselected</span>:</p>
+<p>To retrieve all selected items and set their state to <code>unselected</code>:</p>
<pre class="prettyprint">
Evas_Object *list;
<li>Moving within the list:
<p>The list component provides various functions for moving within the list and sliding the list to a specific item:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_show()</span> function shows the item passed as a parameter.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in()</span> function shows the item passed as a parameter, after animating the slide.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev()</span> function goes to the item immediately preceding a specific item.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">elm_list_item_next()</span> function goes to the item immediately following a specific item.</li></ul>
+<li>The <code>elm_list_item_show()</code> function shows the item passed as a parameter.</li>
+<li>The <code>elm_list_item_bring_in()</code> function shows the item passed as a parameter, after animating the slide.</li>
+<li>The <code>elm_list_item_prev()</code> function goes to the item immediately preceding a specific item.</li>
+<li>The <code>elm_list_item_next()</code> function goes to the item immediately following a specific item.</li></ul>
<p>To retrieve the currently selected item and unselect it, and then select the next item and bring it to the screen:</p>
<p>To receive notifications about the list events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The item is double-clicked or pressed (enter | return | spacebar).
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the activated item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The item is double-clicked.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the double-clicked item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The item is selected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the selected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The item is unselected.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unselected item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is long-pressed.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the long-pressed item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item on the list is highlighted.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the highlighted item.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: An item in the list is unhighlighted.
- <p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter points at the unhighlighted item.</p></li>
+ <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+ <p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
+ <li><code>clicked,double</code>: The item is double-clicked.
+ <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li>
+ <li><code>selected</code>: The item is selected.
+ <p>The <code>event_info</code> callback parameter points at the selected item.</p></li>
+ <li><code>unselected</code>: The item is unselected.
+ <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li>
+ <li><code>longpressed</code>: The item is long-pressed.
+ <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li>
+ <li><code>edge,top</code>: The list is scrolled to the top edge.</li>
+ <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li>
+ <li><code>edge,left</code>: The list is scrolled to the left edge.</li>
+ <li><code>edge,right</code>: The list is scrolled to the right edge.</li>
+ <li><code>highlighted</code>: An item on the list is highlighted.
+ <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li>
+ <li><code>unhighlighted</code>: An item in the list is unhighlighted.
+ <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal:</p>
+<p>To register and define a callback for the <code>clicked,double</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#add">Adding a Map Component</a></li>
- <li><a href="#use">Using the Map</a></li>
- <li><a href="#overlay">Drawing Overlays</a></li>
- <li><a href="#route">Calculating Routes</a></li>
- <li><a href="#callback">Using the Map Callbacks</a></li>
+ <li><a href="#basic">Basic Usage</a></li>
+ <li><a href="#style">Styles</a></li>
+ <li><a href="#callback">Callbacks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Map</h1>
-<p>This feature is supported in mobile applications only.</p>
-
-<p>The map component displays a geographic map. The default map data are provided by the <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap project</a>. Custom providers can also be added.</p>
-
-<p>The map component supports:</p>
- <ul>
- <li>Zooming</li>
- <li>Scrolling</li>
- <li>Markers with content to be displayed when the user clicks over them</li>
- <li>Group of markers</li>
- <li>Routes</li>
- </ul>
-
-<p>The map component implements the scroller interface, which means that the scroller functions can also be used with maps.</p>
+<p>The map UI component displays a geographic map. The default map data is provided by the <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap project</a>. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Map.html">Map</a> API.</p>
-<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Map.html">Map</a> API.</p>
-
-<p class="figure">Figure: Map hierarchy</p>
-<p align="center"> <img alt="Map hierarchy" src="../../../images/map_tree.png" /> </p>
-
-<h2 id="add">Adding a Map Component</h2>
+<p>This feature is supported in mobile applications only.</p>
-<p>To create a map component:</p>
+<h2 id="basic">Basic Usage</h2>
+<p>To use a map component in your application:</p>
<ol>
-<li>Add a map component with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function:
+ <li>Add a map with <code>elm_map_add()</code> function:
<pre class="prettyprint">
Evas_Object *map;
Evas_Object *parent;
map = elm_map_add(parent);
-</pre></li>
-
-<li><p>Set the zoom mode with the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_mode_set()</span> function.</p>
-<p>To set the mode to manual:</p>
+</pre>
+ </li>
+ <li>Set the zoom mode with the <code>elm_map_zoom_mode_set()</code> function:
<pre class="prettyprint">
elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
</pre>
-<p>The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> or <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span>. However, in that case you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function to set the zoom level.</p>
-</li>
-<li>Set the zoom level with the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function.
-<p>To set the zoom level to 12:</p>
-
+ </li>
+ <li>Set the zoom level with the <code>elm_map_zoom_set()</code> function:
<pre class="prettyprint">
elm_map_zoom_set(map, 12);
-</pre></li></ol>
-
-<h2 id="use">Using the Map</h2>
-
-<p>To use the map:</p>
-<ul>
-<li>
-<p>Show a specific area on the map based on coordinates using the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_mode_set()</span> function.</p>
-<p>To show the area (2 2 N, 48 8 E):</p>
+</pre>
+ </li>
+ <li>Show a specific area on the map based on coordinates using the <code>elm_map_region_show()</code> function:
<pre class="prettyprint">
elm_map_region_show(map, 2.2, 48.8);
</pre>
-
-<p>To show a specific area with a bring-in animation, use the <span style="font-family: Courier New,Courier,monospace">elm_map_region_bring_in()</span> function:</p>
+<p>To show a specific area with a bring-in animation, use the <code>elm_map_region_bring_in()</code> function:</p>
<pre class="prettyprint">
elm_map_region_bring_in(map, 2.2, 48.8);
</pre>
-</li>
-<li>
-<p>Rotate the map around a specific position using the <span style="font-family: Courier New,Courier,monospace">elm_map_rotate_set()</span> function.</p>
-<p>To rotate 90 degrees around the current position:</p>
+ </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>clicked</code> signal:</p>
<pre class="prettyprint">
-elm_map_rotate_set(map, 90, 2.2, 48.8);
-</pre>
-</li>
-</ul>
-
-<h2 id="overlay">Drawing Overlays</h2>
+evas_object_smart_callback_add(map, "clicked", clicked_cb, data);
-<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
-
-<p>To draw overlays:</p>
-<ol>
-<li>Create an overlay class.
-<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map.</p>
-
-<p>Set the minimum zoom level at which the class is visible using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_displayed_zoom_min_set()</span> function. Set the icon displayed in place of the forest class on the map using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-
-<p>To make the forest overlay visible when the zoom level is bigger than 8, and to use the "Home" icon to display the forests on the map:</p>
-<pre class="prettyprint">
-Evas_Object *icon;
-Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
-
-/* Set min zoom level at which class is displayed */
-elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
-
-/* Create a Home icon object and set it to the forest class */
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "home");
-elm_map_overlay_icon_set(forest_class, icon);
-</pre>
-</li>
-
-<li>Add overlays to the class.
-<p>After creating a forest class, it is possible to add overlay objects to it. In this example, overlays for the Meudon and Fausse forests are created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the same icon object for 2 different overlays. Create a new icon object each time you need one.</td>
- </tr>
- </tbody>
- </table>
-
-<pre class="prettyprint">
-Elm_Map_Overlay *ovl;
-const char* data_meudon = "Meudon forest";
-const char* data_fausses = "Fausse forest";
-
-/* Add an overlay */
-ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_meudon);
-
-/* Add the new ovl object to the forest class */
-elm_map_overlay_class_append(forest_class, ovl);
-
-/* Add another overlay next to the first one */
-ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_fausses);
-elm_map_overlay_class_append(forest_class, ovl);
-</pre>
-
-<p>When you add multiple overlays to the overlay class, the overlays can be grouped under the overlay class icon on certain zoom levels. In the following example, the overlay members of the forest class are grouped when the map is displayed at less than zoom level 8.</p>
-<pre class="prettyprint">
-elm_map_overlay_class_zoom_max_set(forest_class, 8);
+void
+clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Map clicked\n");
+}
</pre>
+ </li>
+</ol>
-</li>
-<li>Add a bubble to follow an overlay:
-
+<p>The following example shows a simple use case of the map component.</p>
+<p align="center" class="Table"><strong>Example: Map use case</strong></p>
+<table border="0">
+ <colgroup>
+ <col /><col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <td style="text-align:left;margin-left:auto;margin-right:auto;">
<pre class="prettyprint">
-/* Add an overlay bubble object */
-Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
-
-/* Set it to follow a specific overlay (the last created one here) */
-elm_map_overlay_bubble_follow(bubble, ovl);
-</pre>
+Evas_Object *win;
+Evas_Object *conf;
+Evas_Object *nf;
+Evas_Object *box;
+Evas_Object *map;
-<p>Once the bubble has been set to follow the overlay, it appears, moves, and hides following the parent overlay's behavior.</p>
+/* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
+/* win - conformant - naviframe */
-<p>Add content to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
-</li>
-<li id="other_overlay">Add other overlays:
-<ul><li>
-<p>You can draw a circle on the map with coordinates and a radius size:</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
-</pre></li>
-<li>
-<p>You can add a scale at the 200 x 0 coordinate (in pixels):</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
-</pre>
-</li>
-<li>
-<p>You can draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Map.html">Map</a> API.</p></li></ul>
-</li>
-</ol>
+/* Add a box to contain a map and push the box into the naviframe */
+box = elm_box_add(nf);
+evas_object_show(box);
+elm_naviframe_item_push(nf, "Map", NULL, NULL, box, NULL);
-<h2 id="route">Calculating Routes</h2>
+/* Add a map */
+map = elm_map_add(box);
+evas_object_size_hint_align_set(map, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(map, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-<p>To calculate a route between a starting point and an ending point, use the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> function. The type of transport and the routing calculation method can be provided to achieve the desired result.</p>
+/* Set zoom mode to manual and zoom level to 12 */
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
-<p>The following example shows how to calculate a route between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+/* Show a region (2 2 N, 48 8 E) */
+elm_map_region_show(map, 2.2, 48.8);
-<pre class="prettyprint">
-Elm_Map_Route *route = elm_map_route_add(map,
- ELM_MAP_ROUTE_TYPE_BICYCLE,
- ELM_MAP_ROUTE_METHOD_FASTEST,
- 2.20718, 48.79759,
- 2.1699, 48.8189,
- NULL, NULL);
-
-/* Add a callback to when the route has been calculated and loaded */
-evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
+evas_object_show(map);
+elm_box_pack_end(box, map);
</pre>
+ </td>
+ <td style="text-align:center;margin-left:auto;margin-right:auto;">
+ <p align="center"><img alt="Alignment" src="../../../images/map1.png" /></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
-<p>Once the route is calculated, use the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback to create a route overlay object and change its color:</p>
-<pre class="prettyprint">
-static void
-_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
-{
- Elm_Map_Route *route = data;
-
- Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
- elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
-}
-</pre>
+<h2 id="style">Styles</h2>
+
+<p>The following table lists the available component styles.</p>
+
+<p align="center" class="Table"><strong>Table: Map styles</strong></p>
+<table>
+ <tbody>
+ <tr>
+ <th>Style</th>
+ <th>Sample</th>
+ </tr>
+ <tr>
+ <td><code>default</code></td>
+ <td align="center"><img alt="elm/map/base/default" src="../../../images/map_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
-<h2 id="callback">Using the Map Callbacks</h2>
-
-<p>To receive notifications about the map events, listen to the following signals:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The map is clicked without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The map is double-clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">press</span>: The map is pressed down on.</li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The map is pressed down for a long time without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation stops.</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: The zoom animation starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: The zoom animation stops.</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: The map tile image load begins.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: The map tile image load ends.</li>
- <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: The map tile image load fails.</li>
- <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: The route request begins.</li>
- <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: The route request ends.</li>
- <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: The route request fails.</li>
- <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: The name request begins.</li>
- <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: The name request ends.</li>
- <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: The name request fails.</li>
- <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
-</ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
+<h2 id="callback">Callbacks</h2>
+
+<p>You can register callback functions connected to the following signals for a map object.</p>
+<p align="center" class="Table"><strong>Table: Map callback signals</strong></p>
+<table border="1">
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th>
+ </tr>
+ <tr>
+ <td><code>clicked</code></td>
+ <td>The map is clicked without dragging around.</td>
+ <td><code>Evas_Event_Mouse_Up</code></td>
+ </tr>
+ <tr>
+ <td><code>clicked,double</code></td>
+ <td>The map is double-clicked.</td>
+ <td><code>Evas_Event_Mouse_Down</code></td>
+ </tr>
+ <tr>
+ <td><code>press</code></td>
+ <td>The map is pressed down on.</td>
+ <td><code>Evas_Event_Mouse_Down</code></td>
+ </tr>
+ <tr>
+ <td><code>longpressed</code></td>
+ <td>The map is pressed down for a long time without dragging around.</td>
+ <td><code>Evas_Event_Mouse_Down</code></td>
+ </tr>
+ <tr>
+ <td><code>scroll</code></td>
+ <td>The content is scrolled (moved).</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>scroll,drag,start</code></td>
+ <td>Dragging the content around starts.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>scroll,drag,stop</code></td>
+ <td>Dragging the content around stops.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>scroll,anim,start</code></td>
+ <td>The scrolling animation starts.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>scroll,anim,stop</code></td>
+ <td>The scrolling animation stops.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>zoom,start</code></td>
+ <td>The zoom animation starts.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>zoom,stop</code></td>
+ <td>The zoom animation stops.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>zoom,change</code></td>
+ <td>The zoom is changed when using an auto zoom mode.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>tile,load</code></td>
+ <td>The map tile image load begins.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>tile,loaded</code></td>
+ <td>The map tile image load ends.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>tile,loaded,fail</code></td>
+ <td>The map tile image load fails.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>route,load</code></td>
+ <td>The route request begins.</td>
+ <td><code>Elm_Map_Route</code></td>
+ </tr>
+ <tr>
+ <td><code>route,loaded</code></td>
+ <td>The route request ends.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>route,loaded,fail</code></td>
+ <td>The route request fails.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>name,load</code></td>
+ <td>The name request begins.</td>
+ <td><code>Elm_Map_Name</code></td>
+ </tr>
+ <tr>
+ <td><code>name,loaded</code></td>
+ <td>The name request ends.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>name,loaded,fail</code></td>
+ <td>The name request fails.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ <tr>
+ <td><code>overlay,clicked</code></td>
+ <td>An overlay is clicked.</td>
+ <td><code>Elm_Map_Overlay</code></td>
+ </tr>
+ <tr>
+ <td><code>loaded</code></td>
+ <td>The map is loaded.</td>
+ <td><code>NULL</code></td>
+ </tr>
+ </tbody>
</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1>Multibuttonentry</h1>
-<p>The multi-button entry UI component allows the user to enter text so that the text is divided into chunks and managed as a set of buttons. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Multibuttonentry.html.html">Multibuttonentry</a> API.</p>
+<p>The multi-button entry UI component allows the user to enter text so that the text is divided into chunks and managed as a set of buttons. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Multibuttonentry.html">Multibuttonentry</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Multibuttonentry styles</strong></p>
<table>
-<caption>Table: Multibuttonentry styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/multibuttonentry/base/default</span></td>
+ <td><code>elm/multibuttonentry/base/default</code></td>
<td align="center"><img alt="elm/multibuttonentry/base/default" src="../../../images/multi_button_default.png" /></td>
</tr>
</tbody>
</table>
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a notify component in your application:</p>
<ol>
-<li>Add a notify component with the <span style="font-family: Courier New,Courier,monospace">elm_notify_add()</span> function:
+<li>Add a notify component with the <code>elm_notify_add()</code> function:
<pre class="prettyprint">
Evas_Object *notify;
Evas_Object *label = elm_label_add(parent);
</pre>
</li>
-<li>Set an object to the notify component with the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:
+<li>Set an object to the notify component with the <code>elm_object_content_set()</code> function:
<pre class="prettyprint">
elm_object_content_set(notify, label);
</pre>
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>timeout</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
<p>The following example shows a simple use case of the notify component.</p>
+<p align="center" class="Table"><strong>Example: Notify use case</strong></p>
<table border="0">
-<caption>Example: Notify use case</caption>
<tbody>
<tr>
<td>
<ul>
<li>Align
-<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_notify_align_set()</span> function, you can set the notify component alignment.</p>
+<p>Using the <code>elm_notify_align_set()</code> function, you can set the notify component alignment.</p>
-<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <span style="font-family: Courier New,Courier,monospace">ELM_NOTIFY_ALIGN_FILL</span> value can be used to fill the notify component in each axis direction.</p>
+<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <code>ELM_NOTIFY_ALIGN_FILL</code> value can be used to fill the notify component in each axis direction.</p>
<p>To align the notify object on the bottom center of the parent object:</p>
<pre class="prettyprint">
<p>You can register callback functions connected to the following signals for a notify object.</p>
+<p align="center" class="Table"><strong>Table: Notify callback signals</strong></p>
<table border="1">
-<caption>Table: Notify callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">timeout</span></td>
+<td><code>timeout</code></td>
<td>The timeout count ends and the notify component is hidden.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">block,clicked</span></td>
+<td><code>block,clicked</code></td>
<td>The user clicks outside the notify component.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a panel component in your application:</p>
<ol>
-<li>Add a panel with the <span style="font-family: Courier New,Courier,monospace">elm_panel_add()</span> function:
+<li>Add a panel with the <code>elm_panel_add()</code> function:
<pre class="prettyprint">
Evas_Object *panel;
</pre>
</li>
-<li>You can set the panel orientation with the <span style="font-family: Courier New,Courier,monospace">elm_panel_orient_set()</span> function:
+<li>You can set the panel orientation with the <code>elm_panel_orient_set()</code> function:
<pre class="prettyprint">
elm_panel_orient_set(panel, ELM_PANEL_ORIENT_TOP);
</pre>
</li>
-<li>Add content to the panel with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function:
+<li>Add content to the panel with the <code>elm_object_part_content_set()</code> function:
<pre class="prettyprint">
Evas_Object *button;
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>scroll</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(panel, "scroll", panel_scroll_cb, data);
</ol>
<p>The following example shows a simple use case of the panel component.</p>
+<p align="center" class="Table"><strong>Example: Panel use case</strong></p>
<table>
-<caption>Example: Panel use case</caption>
<tbody>
<tr>
<td>
<p>You can register callback functions connected to the following signals for a panel object.</p>
+<p align="center" class="Table"><strong>Table: Panel callback signals</strong></p>
<table border="1">
-<caption>Table: Panel callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
+ <td><code>scroll</code></td>
<td>The panel is being scrolled.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">Elm_Panel_Scroll_Info</span></td>
+ <td><code>Elm_Panel_Scroll_Info</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>This feature is supported in mobile applications only.</p>
- <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for the <span style="font-family: Courier New,Courier,monospace">.jpeg</span> image format and has a low memory footprint.</p>
+ <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for the <code>.jpeg</code> image format and has a low memory footprint.</p>
<p>The photocam component implements the scroller interface, which means that scroller functions can be used with the photocam component.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Photocam.html">Photocam</a> API.</p>
- <p class="figure">Figure: Photocam hierarchy</p>
+ <p align="center"><strong>Figure: Photocam hierarchy</strong></p>
<p align="center"> <img alt="Photocam hierarchy" src="../../../images/photocam_tree.png" /> </p>
<h2 id="add_photocam">Adding a Photocam Component</h2>
-<p>To create a photocam component, use the <span style="font-family: Courier New,Courier,monospace">elm_photocam_add()</span> function. You can set the image file with the <span style="font-family: Courier New,Courier,monospace">elm_photocam_file_set()</span> function.</p>
+<p>To create a photocam component, use the <code>elm_photocam_add()</code> function. You can set the image file with the <code>elm_photocam_file_set()</code> function.</p>
<pre class="prettyprint">
Evas_Object *photocam;
elm_photocam_zoom_set(photocam, 2.0);
</pre>
-<p>If you use the <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span> mode, the photo fits exactly inside the scroll frame with no pixels outside the region. In the <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> mode, all the pixels of the photocam component are filled.</p>
+<p>If you use the <code>ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</code> mode, the photo fits exactly inside the scroll frame with no pixels outside the region. In the <code>ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</code> mode, all the pixels of the photocam component are filled.</p>
</li>
<li>
<p>Activate the multi-touch zoom by enabling gestures:</p>
<p>To receive notifications about the photocam events, listen to the following signals:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The photo is clicked without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">press</span>: The photo is pressed.</li>
- <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The photo is pressed down for a long time without dragging around.</li>
- <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The photo is double-clicked.</li>
- <li><span style="font-family: Courier New,Courier,monospace">load</span>: The photo load begins.</li>
- <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The image file load is complete for the first view (a low resolution blurry version).</li>
- <li><span style="font-family: Courier New,Courier,monospace">load,detail</span>: A photo detailed data load begins.</li>
- <li><span style="font-family: Courier New,Courier,monospace">loaded,detail</span>: The image file load is complete for the detailed image data (a full resolution version).</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: The zoom animation starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: The zoom animation stops.</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation stops.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li>
- <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li>
+ <li><code>clicked</code>: The photo is clicked without dragging around.</li>
+ <li><code>press</code>: The photo is pressed.</li>
+ <li><code>longpressed</code>: The photo is pressed down for a long time without dragging around.</li>
+ <li><code>clicked,double</code>: The photo is double-clicked.</li>
+ <li><code>load</code>: The photo load begins.</li>
+ <li><code>loaded</code>: The image file load is complete for the first view (a low resolution blurry version).</li>
+ <li><code>load,detail</code>: A photo detailed data load begins.</li>
+ <li><code>loaded,detail</code>: The image file load is complete for the detailed image data (a full resolution version).</li>
+ <li><code>zoom,start</code>: The zoom animation starts.</li>
+ <li><code>zoom,stop</code>: The zoom animation stops.</li>
+ <li><code>zoom,change</code>: The zoom is changed when using an auto zoom mode.</li>
+ <li><code>scroll</code>: The content is scrolled.</li>
+ <li><code>scroll,anim,start</code>: The scrolling animation starts.</li>
+ <li><code>scroll,anim,stop</code>: The scrolling animation stops.</li>
+ <li><code>scroll,drag,start</code>: Dragging the content around starts.</li>
+ <li><code>scroll,drag,stop</code>: Dragging the content around stops.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>In all cases, the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>In all cases, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal:</p>
+<p>To register and define a callback for the <code>loaded</code> signal:</p>
<pre class="prettyprint">
void
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>This feature is supported in mobile applications only.</p>
-<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
+<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Plug.html">Plug</a> API.</p>
- <p class="figure">Figure: Plug hierarchy</p>
+ <p align="center"><strong>Figure: Plug hierarchy</strong></p>
<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p>
<h2 id="add">Adding a Plug Component</h2>
-<p>To create a plug component, use the <span style="font-family: Courier New,Courier,monospace">elm_plug_add()</span> function:</p>
+<p>To create a plug component, use the <code>elm_plug_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug;
<p>To use the plug:</p>
<ol>
<li>
-<p>The socket image provides the service where to connect the plug component. Use the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
+<p>The socket image provides the service where to connect the plug component. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
-<p>To connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0:</p>
+<p>To connect to a service named <code>plug_test</code> on the number 0:</p>
<pre class="prettyprint">
elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
</pre>
</li>
<li>
-<p>Retrieve the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function:</p>
+<p>Retrieve the <code>Evas_Object</code> corresponding to the distant image with the <code>elm_plug_image_object_get()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug_img = elm_plug_image_object_get(plug);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (<span style="font-family: Courier New,Courier,monospace">remote_win</span>):
+<div class="note">
+ <strong>Note</strong>
+ The socket to connect to must be started with the <code>elm_win_socket_listen()</code> function in the other process on the remote window object (<code>remote_win</code>):
<pre class="prettyprint">
/* Create a remote window in the other process */
Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
ELM_WIN_SOCKET_IMAGE);
/* Create a socket named "plug_test" and listen to it */
elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-</pre></td>
- </tr>
- </tbody>
- </table>
-
+</pre>
+</div>
</li>
</ol>
<p>To receive notifications about the plug events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked (press/release).
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side is deleted.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side is resized.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</p></li>
+<li><code>clicked</code>: The image is clicked (press/release).
+<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+<li><code>image,deleted</code>: The server side is deleted.
+<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+<li><code>image,resized</code>: The server side is resized.
+<p>The <code>event_info</code> callback parameter is <code>Evas_Coord_Size</code> (2 integers).</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>To register and define a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
+<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere the same way as any other elementary UI component.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Plug.html">Plug</a> API.</p>
- <p class="figure">Figure: Plug hierarchy</p>
+ <p align="center"><strong>Figure: Plug hierarchy</strong></p>
<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p>
<h2 id="add">Adding a Plug Component</h2>
-<p>To create a plug component, use the <span style="font-family: Courier New,Courier,monospace">elm_plug_add()</span> function:</p>
+<p>To create a plug component, use the <code>elm_plug_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug;
<p>To use the plug:</p>
<ol>
<li>
-<p>The socket image provides the service where to connect the plug component. Use the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
+<p>The socket image provides the service where to connect the plug component. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
-<p>To connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0:</p>
+<p>To connect to a service named <code>plug_test</code> on the number 0:</p>
<pre class="prettyprint">
elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
</pre>
</li>
<li>
-<p>Retrieve the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function:</p>
+<p>Retrieve the <code>Evas_Object</code> corresponding to the distant image with the <code>elm_plug_image_object_get()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug_img = elm_plug_image_object_get(plug);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (<span style="font-family: Courier New,Courier,monospace">remote_win</span>):
+<div class="note">
+ <strong>Note</strong>
+ The socket to connect to must be started with the <code>elm_win_socket_listen()</code> function in the other process on the remote window object (<code>remote_win</code>):
<pre class="prettyprint">
/* Create a remote window in the other process */
Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
ELM_WIN_SOCKET_IMAGE);
/* Create a socket named "plug_test" and listen to it */
elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-</pre></td>
- </tr>
- </tbody>
- </table>
-
+</pre>
+</div>
</li>
</ol>
<p>To receive notifications about the plug events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The image is clicked (press/release).
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">image,deleted</span>: The server side is deleted.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">image,resized</span>: The server side is resized.
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is <span style="font-family: Courier New,Courier,monospace">Evas_Coord_Size</span> (2 integers).</p></li>
+<li><code>clicked</code>: The image is clicked (press/release).
+<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+<li><code>image,deleted</code>: The server side is deleted.
+<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+<li><code>image,resized</code>: The server side is resized.
+<p>The <code>event_info</code> callback parameter is <code>Evas_Coord_Size</code> (2 integers).</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
+
+<p>To register and define a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>The popup UI component is a small window for notifying the user or requesting user input. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Popup.html">Popup</a> API.</p>
+<p>This feature is supported in mobile applications only.</p>
+
<h2 id="basic">Basic Usage</h2>
-<p>To use a popup component in your application:
+<p>To use a popup component in your application:</p>
<ol>
- <li>Add a popup component with the <span style="font-family: Courier New,Courier,monospace">elm_popup_add()</span> function:
+ <li>Add a popup component with the <code>elm_popup_add()</code> function:
<pre class="prettyprint">
Evas_Object *popup;
Evas_Object *parent;
popup = elm_popup_add(parent);
</pre>
</li>
- <li>Set the title text using the <span style="font-family: Courier New,Courier,monospace">title,text</span> part name:
+ <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:</p>
+ <li>Set the content of the popup:
<ul>
<li>Simple text:
<pre class="prettyprint">
</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 <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal:</p>
+ <p>The following example shows how to define and register a callback for the <code>dismissed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(popup, "dismissed", dismissed_cb, data);
<p>The following example shows a simple use case of the popup component.</p>
+<p align="center" class="Table"><strong>Example: Popup use case</strong></p>
<table border="0">
- <caption>Example: Popup use case</caption>
<colgroup>
<col /><col />
</colgroup>
<p>To configure the popup features:</p>
<ul>
<li>
-<p>Hide the popup after a set time with the <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function.</p>
+<p>Hide the popup after a set time with the <code>elm_popup_timeout_set()</code> function.</p>
<p>In the following example, the timeout is set to 5 seconds, after which the popup is hidden:</p>
<pre class="prettyprint">
elm_popup_timeout_set(popup, 5.0);
</pre>
</li>
<li>
-<p>Dismiss the popup with a hide effect using the <span style="font-family: Courier New,Courier,monospace">elm_popup_dismiss()</span> function:</p>
+<p>Dismiss the popup with a hide effect using the <code>elm_popup_dismiss()</code> function:</p>
<pre class="prettyprint">
elm_popup_dismiss(popup);
</pre>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
-
+<p align="center" class="Table"><strong>Table: Popup styles</strong></p>
<table>
- <caption>Table: Popup styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/button/base/default" src="../../../images/popup_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">title,text</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">subtitle,text</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span>
- <p><span style="font-family: Courier New,Courier,monospace">button1</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">button2</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">button3</span></p></td>
+ <td><code>default</code>
+ <p><code>title,text</code></p>
+ <p><code>subtitle,text</code></p></td>
+ <td><code>elm.swallow.content</code>
+ <p><code>button1</code></p>
+ <p><code>button2</code></p>
+ <p><code>button3</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toast</span></td>
+ <td><code>toast</code></td>
<td align="center"><img alt="elm/button/base/default" src="../../../images/popup_toast.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>default</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">theme_bg</span></td>
+ <td><code>theme_bg</code></td>
<td align="center"><img alt="elm/button/base/default" src="../../../images/popup_theme_bg.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">title,text</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">subtitle,text</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span>
- <p><span style="font-family: Courier New,Courier,monospace">button1</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">button2</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">button3</span></p></td>
+ <td><code>default</code>
+ <p><code>title,text</code></p>
+ <p><code>subtitle,text</code></p></td>
+ <td><code>elm.swallow.content</code>
+ <p><code>button1</code></p>
+ <p><code>button2</code></p>
+ <p><code>button3</code></p></td>
</tr>
</tbody>
</table>
-<p>The <span style="font-family: Courier New,Courier,monospace">theme_bg</span> style is a unique style for supporting the genlist component's banded effect.</p>
+<p>The <code>theme_bg</code> style is a unique style for supporting the genlist component's banded effect.</p>
<h2 id="callback">Callbacks</h2>
-<p>You can register callback functions connected to the following signals for a popup object.
-
+<p>You can register callback functions connected to the following signals for a popup object.</p>
+<p align="center" class="Table"><strong>Table: Popup callback signals</strong></p>
<table border="1">
- <caption>Table: Popup callback signals</caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">event_info</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">timeout</span></td>
+ <td><code>timeout</code></td>
<td>The popup is closed as a result of the timeout.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">block,clicked</span></td>
+ <td><code>block,clicked</code></td>
<td>The user clicks on the blocked event area.
The blocked event area is the translucent region around the visible popup region.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">dismissed</span></td>
+ <td><code>dismissed</code></td>
<td>The popup is dismissed with a hide effect.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Popup.html">Popup</a> API.</p>
-<p class="figure">Figure: Popup component</p>
+<p align="center"><strong>Figure: Popup component</strong></p>
<p align="center"><img alt="Popup component" src="../../../images/popup_wn.png" /></p>
-<p class="figure">Figure: Popup hierarchy</p>
+<p align="center"><strong>Figure: Popup hierarchy</strong></p>
<p align="center"><img alt="Popup hierarchy" src="../../../images/popup_tree.png" /></p>
<h2 id="add">Adding a Popup Component</h2>
-<p>To create a popup component, use the <span style="font-family: Courier New,Courier,monospace">elm_popup_add()</span> function:</p>
+<p>To create a popup component, use the <code>elm_popup_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *popup;
Evas_Object *parent;
<ul>
<li><p>The following item styles are available for the rectangular screen:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+<li><code>popup</code></li>
+<li><code>toast</code></li>
</ul></li>
<li>
<p>The following item styles are available for the circular screen:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">toast/circle</span></li>
+<li><code>circle</code></li>
+<li><code>toast/circle</code></li>
</ul></li>
<li>
<p>The following layout styles are available for the circular screen:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons1</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons2</span></li>
+<li><code>content/circle</code></li>
+<li><code>content/circle/buttons1</code></li>
+<li><code>content/circle/buttons2</code></li>
</ul></li></ul>
-<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">toast</span>:</p>
+<p>To set the style to, for example, <code>toast</code>:</p>
<pre class="prettyprint">
elm_object_style_set(popup, "toast");
</pre>
<li>
<p>Configure the title area:</p>
<ul>
-<li>Set the icon object using the <span style="font-family: Courier New,Courier,monospace">title,icon</span> part name.</li>
-<li>Set the title text as <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">title,text</span> part name.</li></ul>
+<li>Set the icon object using the <code>title,icon</code> part name.</li>
+<li>Set the title text as <code>Test popup</code> using the <code>title,text</code> part name.</li></ul>
<pre class="prettyprint">
elm_object_part_text_set(popup, "title,text", "Test popup");
</li>
<li>
<p>Configure the title area.</p>
-<p>Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the <span style="font-family: Courier New,Courier,monospace">elm.text.title</span> part name:</p>
+<p>Set the title text to <code>Test popup</code> using the <code>elm.text.title</code> part name:</p>
<pre class="prettyprint">
/* Set the title text */
elm_object_part_text_set(layout, "elm.text.title", "Text popup");
<h2 id="orientation">Hiding the Popup</h2>
-<p>You can hide the popup after a set time with the <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function.</p>
+<p>You can hide the popup after a set time with the <code>elm_popup_timeout_set()</code> function.</p>
<p>To set the timeout to 5 seconds, after which the popup is hidden:</p>
<pre class="prettyprint">
<p>To receive notifications about the popup events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of the timeout.
+<li><code>timeout</code>: The popup is closed as a result of the timeout.
</li>
-<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the blocked event area.
+<li><code>block,clicked</code>: The user clicks on the blocked event area.
<p>The blocked event area is the translucent region around the visible popup region.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal:</p>
+<p>To register and define a callback for the <code>timeout</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h2 id="basic">Basic Usage</h2>
<p>To use a progressbar component in your application:</p>
<ol>
-<li>Add a progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_add()</span> function:
+<li>Add a progressbar with the <code>elm_progressbar_add()</code> function:
<pre class="prettyprint">
Evas_Object *progressbar;
</li>
<li>Set a progressbar style:
<ul>
-<li>Set a style to the progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+<li>Set a style to the progressbar with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(progressbar, "pending");
</pre>
</li>
-<li>Set a label to the progressbar with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span> function:
+<li>Set a label to the progressbar with the <code>elm_object_text_set()</code> or <code>elm_object_part_text_set()</code> function:
<pre class="prettyprint">
/* Default style (elm.text.top.right) */
elm_object_text_set(progressbar, "text");
</li>
<li>Activate the progressbar:
<ul>
-<li>Set the progressbar pulse mode to activate the progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_pulse_set()</span> function:
+<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);
</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>
-<li>Use the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_pulse()</span> function to start the progressbar animation loop:
+<li>Use the <code>elm_progressbar_pulse()</code> function to start the progressbar animation loop:
<pre class="prettyprint">
elm_progressbar_pulse(progressbar, EINA_TRUE);
</pre>
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(progressbar, "changed", changed_cb, data);
<p>The following example shows a simple use case of the progressbar component.</p>
+<p align="center" class="Table"><strong>Example: Progressbar use case</strong></p>
<table border="0">
-<caption>Example: Progressbar use case</caption>
<tbody>
<tr>
<td>
<li>Use the progressbar value:
<ul>
<li>
-<p>Change the value with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_value_set()</span> function. The progressbar emits the <span style="font-family: Courier New, Courier, monospace">changed</span> signal when the progress value changes. In the following example, the progressbar value is set to 20%.
+<p>Change the value with the <code>elm_progressbar_value_set()</code> function. The progressbar emits the <code>changed</code> signal when the progress value changes. In the following example, the progressbar value is set to 20%.
</p>
<pre class="prettyprint">
/* Supported style: default */
</li>
<li>Set a text in the progressbar:
<ul>
-<li>Set a label to the progressbar with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function, if the style supports a text part.
+<li>Set a label to the progressbar with the <code>elm_object_text_set()</code> function, if the style supports a text part.
<pre class="prettyprint">
/* Supported styles: default, pending */
elm_object_text_set(progressbar, "progressbar");
</pre>
</li>
-<li>According to the <a href="#style">style</a>, the <span style="font-family: Courier New, Courier, monospace">elm_object_part_text_set()</span> function is used in order to do the setting in the other location.
+<li>According to the <a href="#style">style</a>, the <code>elm_object_part_text_set()</code> function is used in order to do the setting in the other location.
<pre class="prettyprint">
elm_object_part_text_set(progressbar, "elm.text.bottom.left", "progressbar");
</pre>
</li>
<li>
-<p>Set the unit label with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_unit_format_set()</span> function.</p>
+<p>Set the unit label with the <code>elm_progressbar_unit_format_set()</code> function.</p>
<p>To set the unit label to be a float number with 2 decimals:</p>
<pre class="prettyprint">
elm_progressbar_unit_format_set(progressbar, "%1.2f%%");
</pre>
-<p>If you set the <span style="font-family: Courier New, Courier, monospace">elm.text.bottom.right</span> text part, you cannot use a unit label. You can choose 1 unit label or the bottom right label. The default unit label format is <span style="font-family: Courier New, Courier, monospace">%.0f%%</span>.</p>
+<p>If you set the <code>elm.text.bottom.right</code> text part, you cannot use a unit label. You can choose 1 unit label or the bottom right label. The default unit label format is <code>%.0f%%</code>.</p>
</li>
</ul>
</li>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Progressbar styles</strong></p>
<table>
-<caption>Table: Progressbar styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Text part</th>
</tr>
<tr>
-<td><span
- style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/default</span></td>
+<td><code>elm/progressbar/horizontal/default</code></td>
<td align="center"><img alt="elm/progressbar/horizontal/default" src="../../../images/progressbar_default.png" /></td>
<td>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.top.right</span>
- <span style="font-family: Courier New, Courier, monospace">(default)</span>
+ <code>elm.text.top.right</code>
+ <code>(default)</code>
</p>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.bottom.left</span>
+ <code>elm.text.bottom.left</code>
</p>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.bottom.right</span>
+ <code>elm.text.bottom.right</code>
</p>
</td>
</tr>
<tr>
-<td><span
- style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/pending</span></td>
+<td><code>elm/progressbar/horizontal/pending</code></td>
<td align="center"><img alt="elm/progressbar/horizontal/pending" src="../../../images/progressbar_pending.png" /></td>
<td>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.top.right</span>
- <span style="font-family: Courier New, Courier, monospace">(default)</span>
+ <code>elm.text.top.right</code>
+ <code>(default)</code>
</p>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.bottom.left</span>
+ <code>elm.text.bottom.left</code>
</p>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm.text.bottom.right</span>
+ <code>elm.text.bottom.right</code>
</p>
</td>
</tr>
<tr>
-<td><span style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process_large</span>
+<td><code>elm/progressbar/horizontal/process_large</code>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process_medium</span>
+ <code>elm/progressbar/horizontal/process_medium</code>
</p>
<p>
- <span style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process_small</span>
+ <code>elm/progressbar/horizontal/process_small</code>
</p></td>
<td align="center"><img
alt="elm/progressbar/horizontal/process_large"
<p>You can register callback functions connected to the following signals for a progressbar object.</p>
+<p align="center" class="Table"><strong>Table: Progressbar callback signals</strong></p>
<table border="1">
-<caption>Table: Progressbar callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
-<td><span
- style="font-family: Courier New, Courier, monospace">changed</span></td>
+<td><code>changed</code></td>
<td>The progressbar value changes.</td>
-<td><span
- style="font-family: Courier New, Courier, monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<h2 id="basic">Basic Usage</h2>
<p>To use a progressbar component in your application:</p>
<ol>
-<li>Add a progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_add()</span> function:
+<li>Add a progressbar with the <code>elm_progressbar_add()</code> function:
<pre class="prettyprint">
Evas_Object *progressbar;
</pre>
</li>
<li>Set a <a href="#style">style</a> available for a rectangular or circular UI screen.
-<p>Set a style to the progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_object_style_set()</span> function. If you use the default style, you can skip this step.</p>
+<p>Set a style to the progressbar with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.</p>
<pre class="prettyprint">
elm_object_style_set(progressbar, "pending_list");
</pre>
</li>
<li>Activate the progressbar:
<ul>
-<li>Set the progressbar pulse mode to activate the progressbar with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_pulse_set()</span> function:
+<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>
-<li>Use the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_pulse()</span> function to start the progressbar animation loop:
+<li>Use the <code>elm_progressbar_pulse()</code> function to start the progressbar animation loop:
<pre class="prettyprint">
elm_progressbar_pulse(progressbar, EINA_TRUE);
</pre>
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(progressbar, "changed", changed_cb, data);
</pre></li>
</ol>
<p>The following example shows a simple use case of the progressbar component.</p>
+<p align="center" class="Table"><strong>Example: Progressbar component use case</strong></p>
<table border="0">
-<caption>Example: Progressbar component use case</caption>
-
<tbody>
<tr>
<td>
<li>Use the progressbar value:
<ul>
<li>
-<p>Change the value with the <span style="font-family: Courier New, Courier, monospace">elm_progressbar_value_set()</span> function. The progressbar emits the <span style="font-family: Courier New, Courier, monospace">changed</span> signal when the progress value changes. In the following example, the progressbar value is set to 20%.
+<p>Change the value with the <code>elm_progressbar_value_set()</code> function. The progressbar emits the <code>changed</code> signal when the progress value changes. In the following example, the progressbar value is set to 20%.
</p>
<pre class="prettyprint">
/* Supported style: default */
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles according to the UI screen (rectangular or circular).</p>
+<p align="center" class="Table"><strong>Table: Progressbar styles</strong></p>
<table>
-<caption>Table: Progressbar styles</caption>
<tbody>
<tr>
<th>Style</th>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/default</span></td>
+<td><code>elm/progressbar/horizontal/default</code></td>
<td colspan="2" align="center"><img
alt="elm/progressbar/horizontal/default"
src="../../../images/progressbar_default_wn.png" /><p>(rectangular and circular)</p></td>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/pending_list</span></td>
+<td><code>elm/progressbar/horizontal/pending_list</code></td>
<td colspan="2" align="center"><img
alt="elm/progressbar/horizontal/pending"
src="../../../images/progressbar_pending_wn.png" /><p>(rectangular and circular)</p></td>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process</span>
+<td><code>elm/progressbar/horizontal/process</code>
</td>
<td align="center">
<img alt="elm/progressbar/horizontal/process_large"
src="../../../images/progressbar_process_o_wn.png" /><p>(circular)</p></td>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process/groupindex</span>
+<td><code>elm/progressbar/horizontal/process/groupindex</code>
</td>
<td colspan="2" align="center"><img
alt="elm/progressbar/horizontal/process_large"
src="../../../images/progressbar_small_o_wn.png" /><p>(rectangular)</p></td>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process/small</span></td>
+<td><code>elm/progressbar/horizontal/process/small</code></td>
<td colspan="2" align="center"><img
alt="elm/progressbar/horizontal/pending"
src="../../../images/progressbar_process_small_wn.png" /><p>(circular)</p></td>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">elm/progressbar/horizontal/process/popup/small</span></td>
+<td><code>elm/progressbar/horizontal/process/popup/small</code></td>
<td colspan="2" align="center"><img
alt="elm/progressbar/horizontal/pending"
src="../../../images/progressbar_process_small_wn.png" /><p>(circular)</p></td>
<p>You can register callback functions connected to the following signals for a progressbar object.</p>
+<p align="center" class="Table"><strong>Table: Progressbar callback signals</strong></p>
<table border="1">
-<caption>Table: Progressbar callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
-<td><span
-style="font-family: Courier New, Courier, monospace">changed</span></td>
+<td><code>changed</code></td>
<td>The progressbar value changes.</td>
-<td><span
-style="font-family: Courier New, Courier, monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a radio component in your application:</p>
<ol>
-<li>Add a radio button with the <span style="font-family: Courier New,Courier,monospace">elm_radio_add()</span> function:
+<li>Add a radio button with the <code>elm_radio_add()</code> function:
<pre class="prettyprint">
Evas_Object *radio;
</li>
<li>Set a text or an image, if necessary, according to the <a href="#style">default style</a>:
<ul>
-<li>Set a label to the radio button with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span>
+<li>Set a label to the radio button with the <code>elm_object_text_set()</code>
function, if the style supports a text part:
<pre class="prettyprint">
elm_object_text_set(radio, "option 1");
</pre>
</li>
- <li>Set an image object to the button with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function and pass the part name as a parameter:
+ <li>Set an image object to the button with the <code>elm_object_part_content_set()</code> function and pass the part name as a parameter:
<pre class="prettyprint">
Evas_Object *icon;
</li>
<li>Group the radio buttons:
<ul>
- <li>Assign a unique value to each radio button with the <span style="font-family: Courier New,Courier,monospace">elm_radio_state_value_set()</span> function:
+ <li>Assign a unique value to each radio button with the <code>elm_radio_state_value_set()</code> function:
<pre class="prettyprint">
elm_radio_state_value_set(radio, 1);
</pre>
</li>
- <li>Group the radio buttons with the <span style="font-family: Courier New,Courier,monospace">elm_radio_group_add()</span> function. You can set one of the radio buttons as selected with the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_set()</span> function.
+ <li>Group the radio buttons with the <code>elm_radio_group_add()</code> function. You can set one of the radio buttons as selected with the <code>elm_radio_value_set()</code> function.
<pre class="prettyprint">
elm_radio_group_add(radio, group);
</pre>
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(radio, "changed", changed_cb, data);
<p>The following example shows a simple use case of the radio component.</p>
+<p align="center" class="Table"><strong>Example: Radio use case</strong></p>
<table border="0">
-<caption>Example: Radio use case</caption>
<tbody>
<tr>
<td>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Radio styles</strong></p>
<table>
-<caption>Table: Radio styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/radio/base/default" src="../../../images/radio_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>icon</code></td>
</tr>
</tbody>
</table>
<p>You can register callback functions connected to the following signals for a radio object.</p>
-<table border="1">
-<caption>Table: Radio callback signals</caption>
+<p align="center" class="Table"><strong>Table: Radio callback signals</strong></p>
+<table border="1">
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+<td><code>changed</code></td>
<td>The radio button is selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To use a radio component in your application:</p>
<ol>
-<li>Add a radio button with the <span style="font-family: Courier New,Courier,monospace">elm_radio_add()</span> function:
+<li>Add a radio button with the <code>elm_radio_add()</code> function:
<pre class="prettyprint">
Evas_Object *radio;
</li>
<li>Set values and group the radio buttons:
<ul>
-<li>Assign a unique value to each radio button with the <span style="font-family: Courier New,Courier,monospace">elm_radio_state_value_set()</span> function:
+<li>Assign a unique value to each radio button with the <code>elm_radio_state_value_set()</code> function:
<pre class="prettyprint">
elm_radio_state_value_set(radio, 1);
</pre>
</li>
-<li>Group the radio buttons with the <span style="font-family: Courier New,Courier,monospace">elm_radio_group_add()</span> function. You can set one of the radio buttons as selected with the <span style="font-family: Courier New,Courier,monospace">elm_radio_value_set()</span> function.
+<li>Group the radio buttons with the <code>elm_radio_group_add()</code> function. You can set one of the radio buttons as selected with the <code>elm_radio_value_set()</code> function.
<pre class="prettyprint">
elm_radio_group_add(radio, group);
</pre>
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(radio, "changed", changed_cb, data);
<p>The following example shows a simple use case of the radio component.</p>
+<p align="center" class="Table"><strong>Example: Radio use case</strong></p>
<table border="0">
-<caption>Example: Radio use case</caption>
<tbody>
<tr>
<td>
<p>The following tables lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Radio styles (rectangular device)</strong></p>
<table>
-<caption>Table: Radio styles (rectangular device)</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/radio/base/default" src="../../../images/radio_default_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Radio styles (circular device)</strong></p>
<table>
-<caption>Table: Radio styles (circular device)</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/radio/base/default" src="../../../images/radio_default_cir_wn.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a radio object.</p>
+<p align="center" class="Table"><strong>Table: Radio callback signals</strong></p>
<table border="1">
-<caption>Table: Radio callback signals</caption>
<tbody>
<tr>
<th>Callback</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td><code>changed</code></td>
<td>The radio button is selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__SegmentControl.html">SegmentControl</a> API.</p>
-<p class="figure">Figure: Segmentcontrol component (with text on left and with icons on right)</p>
+<p align="center"><strong>Figure: Segmentcontrol component (with text on left and with icons on right)</strong></p>
<p align="center"><img alt="Segmentcontrol with text" src="../../../images/segment_text.png" /> <img alt="Segmentcontrol with icons" src="../../../images/segment.png" /></p>
-<p class="figure">Figure: Segmentcontrol hierarchy</p>
+<p align="center"><strong>Figure: Segmentcontrol hierarchy</strong></p>
<p align="center"><img alt="Segmentcontrol hierarchy" src="../../../images/segment_control_tree.png" /></p>
<h2 id="add">Adding a Segmentcontrol Component</h2>
-<p>To add a segmentcontrol component, use the <span style="font-family: Courier New,Courier,monospace">elm_segment_control_add()</span> function:</p>
+<p>To add a segmentcontrol component, use the <code>elm_segment_control_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *segcontrol;
<p>To manage segmentcontrol items:</p>
<ul>
-<li>Add items to the segmentcontrol component with the <span style="font-family: Courier New,Courier,monospace">elm_segment_control_item_add()</span> function.
+<li>Add items to the segmentcontrol component with the <code>elm_segment_control_item_add()</code> function.
<p>In the following example, 4 items containing only text labels (no icons) are added:</p>
<pre class="prettyprint">
Elm_Object_Item *it;
<h2 id="callback">Using the Segmentcontrol Callbacks</h2>
-<p>To receive notifications about the segmentcontrol events, listen to the <span style="font-family: Courier New,Courier,monospace">changed</span> signal, which is called when the user clicks on a segment item that was not previously selected.</p>
+<p>To receive notifications about the segmentcontrol events, listen to the <code>changed</code> signal, which is called when the user clicks on a segment item that was not previously selected.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signal is actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> callback parameter is the segment item pointer.</p>
+<p>The <code>event_info</code> callback parameter is the segment item pointer.</p>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>To register and define a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
{
evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a slider component in your application:</p>
<ol>
-<li>Create a new slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_add()</span> function:
+<li>Create a new slider with the <code>elm_slider_add()</code> function:
<pre class="prettyprint">
Evas_Object *slider = NULL;
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(slider, "changed", slider_changed_cb, 0);
<p>The following example shows a simple use case of the slider component.</p>
+<p align="center" class="Table"><strong>Example: Slider use case</strong></p>
<table border="0">
-<caption>Example: Slider use case</caption>
-
<tbody>
<tr>
<td>
<ul>
<li>Slider indicator
+<p align="center" class="Table"><strong>Table: Slider indicator</strong></p>
<table border="0">
-<caption>Table: Slider indicator</caption>
<tbody>
<tr align="center">
<th>Example code</th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span></th>
+ <th><code>EINA_TRUE</code></th>
+ <th><code>EINA_FALSE</code></th>
</tr>
<tr>
<td>
</table>
</li>
<li>Slider orientation
+<p align="center" class="Table"><strong>Table: Slider orientation</strong></p>
<table border="0">
-<caption>Table: Slider orientation</caption>
<tbody>
<tr align="center">
<th>Example code</th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span></th>
+ <th><code>EINA_TRUE</code></th>
+ <th><code>EINA_FALSE</code></th>
</tr>
<tr>
<td>
<pre class="prettyprint">
Evas_Object *slider;
-Evas_Object *nf,;
+Evas_Object *nf;
Evas_Object *box;
box = elm_box_add(nf);
</li>
<li>Inverted slider
+<p align="center" class="Table"><strong>Table: Inverted slider</strong></p>
<table border="0">
-<caption>Table: Inverted slider</caption>
<tbody>
<tr align="center">
<th>Example code</th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span></th>
- <th><span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span></th>
+ <th><code>EINA_TRUE</code></th>
+ <th><code>EINA_FALSE</code></th>
</tr>
<tr>
<td>
/* Add a slider */
slider = elm_slider_add(box);
-evas_object_size_hint_align_set(slider, EVAS_HINT_FILL,0.5);
+evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, 0.5);
elm_object_style_set(slider, "warning");
<span class="highlight">elm_slider_inverted_set(slider, EINA_TRUE);</span>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Slider styles</strong></p>
<table>
-<caption>Table: Slider styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Vertical</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+<td><code>default</code></td>
<td><img alt="elm/slider/horizontal/default" src="../../../images/slider_hor.png" /></td>
<td><img alt="elm/slider/vertical/default" src="../../../images/slider_ver.png" /></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">center_point</span></td>
+<td><code>center_point</code></td>
<td><img alt="elm/slider/horizontal/center_point" src="../../../images/slider_hor_center.png" /></td>
<td><img alt="elm/slider/vertical/center_point" src="../../../images/slider_ver_center.png" /></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">warning</span></td>
+<td><code>warning</code></td>
<td><img alt="elm/slider/horizontal/warning" src="../../../images/slider_hor_warning.png" /></td>
<td><img alt="elm/slider/vertical/warning" src="../../../images/slider_ver_warning.png" /></td>
</tr>
<p>You can register callback functions connected to the following signals for a slider object.</p>
+<p align="center" class="Table"><strong>Table: Slider callback signals</strong></p>
<table border="1">
-<caption>Table: Slider callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
-<td ><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+<td ><code>changed</code></td>
<td>The slider value is changed by the user.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">delay,changed</span></td>
+<td><code>delay,changed</code></td>
<td>A short time after the value is changed by the user. This is called only when the user stops dragging for a very short period or when they release their finger or mouse, so it avoids possibly expensive reactions to the value change.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span></td>
+<td><code>slider,drag,start</code></td>
<td>Dragging the slider indicator around has started.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span></td>
+<td><code>slider,drag,stop</code></td>
<td>Dragging the slider indicator around has stopped.</td>
-<td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+<td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>To use a slider component in your application:</p>
<ol>
-<li>Create a new slider with the <span style="font-family: Courier New,Courier,monospace">elm_slider_add()</span> function:
+<li>Create a new slider with the <code>elm_slider_add()</code> function:
<pre class="prettyprint">
Evas_Object *slider = NULL;
<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:
</ul>
</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">changed</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(slider, "changed", slider_changed_cb, NULL);
<p>The following example shows a simple use case of the slider component.</p>
+<p align="center" class="Table"><strong>Example: Slider use case</strong></p>
<table border="0">
-<caption>Example: Slider use case</caption>
<tbody>
<tr>
<td>
<h2 id="style">Styles</h2>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Slider styles</strong></p>
<table>
-<caption>Table: Slider styles</caption>
<tbody>
<tr>
<th>Style</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+<td><code>default</code></td>
<td ><img alt="elm/slider/horizontal/warning" src="../../../images/slider_hor_wn.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a slider object.</p>
+<p align="center" class="Table"><strong>Table: Slider callback signals</strong></p>
<table border="1">
-<caption>Table: Slider callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
-<th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+<th><code>event_info</code></th>
</tr>
<tr>
- <td ><span style="font-family: Courier New,Courier,monospace">changed</span></td>
+ <td ><code>changed</code></td>
<td>The slider value is changed by the user.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">delay,changed</span></td>
+ <td><code>delay,changed</code></td>
<td>A short time after the value is changed by the user. This is called only when the user stops dragging for a very short period or when they release their finger or mouse, so it avoids possibly expensive reactions to the value change.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span></td>
+ <td><code>slider,drag,start</code></td>
<td>Dragging the slider indicator around has started.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span></td>
+ <td><code>slider,drag,stop</code></td>
<td>Dragging the slider indicator around has stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Spinner.html">Spinner</a> API.</p>
-<p class="figure">Figure: Spinner component</p>
+<p align="center"><strong>Figure: Spinner component</strong></p>
<p align="center"><img alt="Spinner component" src="../../../images/spin.png" /></p>
-<p class="figure">Figure: Spinner hierarchy</p>
+<p align="center"><strong>Figure: Spinner hierarchy</strong></p>
<p align="center"><img alt="Spinner hierarchy" src="../../../images/spinner_tree.png" /></p>
<h2 id="add">Adding a Spinner Component</h2>
-<p>To create a spinner component, use the <span style="font-family: Courier New,Courier,monospace">elm_spinner_add()</span> function:</p>
+<p>To create a spinner component, use the <code>elm_spinner_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *spin;
<h2 id="modify" name="modify">Using the Spinner Styles</h2>
<p>The following table lists the available spinner styles.</p>
+<p align="center" class="Table"><strong>Table: Spinner styles</strong></p>
<table>
-<caption>Table: Spinner styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/spinner/base/horizontal</span></td>
+ <td><code>elm/spinner/base/horizontal</code></td>
<td align="center"><img alt="elm/spinner/base/horizontal" src="../../../images/spinner_hor.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/spinner/base/vertical</span></td>
+ <td><code>elm/spinner/base/vertical</code></td>
<td align="center"><img alt="elm/spinner/base/vertical" src="../../../images/spinner_ver.png" /></td>
</tr>
</tbody>
<p>To use the spinner styles:</p>
<ul>
<li>
-<p>Set the spinner style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
-<p>To set the style to, for example, <span style="font-family: Courier New,Courier,monospace">vertical</span>:</p>
+<p>Set the spinner style with the <code>elm_object_style_set()</code> function.</p>
+<p>To set the style to, for example, <code>vertical</code>:</p>
<pre class="prettyprint">
elm_object_style_set(spinner, "vertical");
</pre>
</li>
<li>
-<p>Get the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function:</p>
+<p>Get the current style with the <code>elm_object_style_get()</code> function:</p>
<pre class="prettyprint">
char *style = elm_object_style_get(spinner);
</pre>
</li>
<li>
<p>Add custom text labels, if the user has to select between text values instead of numerical values.</p>
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">spin2</span> component shows 3 numbers written in text characters:</p>
+<p>In the following example, the <code>spin2</code> component shows 3 numbers written in text characters:</p>
<pre class="prettyprint">
Evas_Object *spin2 = elm_spinner_add(parent);
<p>To receive notifications about the spinner events, listen to the following signals:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The spinner value changes.</li>
-<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The user stops dragging for a very short period or releases the finger or mouse. The signal is emitted a short time after the user changes the value, to avoid possibly expensive reactions to the value change.</li>
-<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language is changed.</li>
+<li><code>changed</code>: The spinner value changes.</li>
+<li><code>delay,changed</code>: The user stops dragging for a very short period or releases the finger or mouse. The signal is emitted a short time after the user changes the value, to avoid possibly expensive reactions to the value change.</li>
+<li><code>language,changed</code>: The program language is changed.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<p>To register and define a callback for the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal:</p>
+<p>To register and define a callback for the <code>delay,changed</code> signal:</p>
<pre class="prettyprint">
{
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use a toolbar component in your application:</p>
<ol>
-<li>Add a toolbar with the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add()</span> function:
+<li>Add a toolbar with the <code>elm_toolbar_add()</code> function:
<pre class="prettyprint">
Evas_Object *toolbar;
</pre>
</li>
<li>Configure the toolbar <a href="#option">options</a>.</li>
-<li>Append items to the toolbar with <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> 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.
+<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>
</li>
<li>Set the toolbar as the content of a container component. A toolbar is usually used to show a menu inside a naviframe.</li>
<li>Register the <a href="#callback">callback</a> functions.
-<p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
<p>The following example shows a simple use case of the toolbar component.</p>
+ <p align="center" class="Table"><strong>Example: Toolbar use case</strong></p>
<table border="0">
- <caption>Example: Toolbar use case</caption>
<tbody>
<tr>
<td>
<p>The toolbar offers the following options for shrinking its content:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>: Set a minimum size to the toolbar so that all of them fit without scrolling.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_HIDE</span>: Hide exceeding items that do not fit in.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span>: Scroll to show the items that do not fit in.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_MENU</span>: Insert a button to pop up a menu with hidden items.</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_EXPAND</span>: Expand all items according to the size of the toolbar.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_NONE</code>: Set a minimum size to the toolbar so that all of them fit without scrolling.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_HIDE</code>: Hide exceeding items that do not fit in.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_SCROLL</code>: Scroll to show the items that do not fit in.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_MENU</code>: Insert a button to pop up a menu with hidden items.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_EXPAND</code>: Expand all items according to the size of the toolbar.</li>
</ul>
<p>To set the shrinking mode:</p>
<pre class="prettyprint">
<p>The following examples illustrate the shrink modes.</p>
+ <p align="center" class="Table"><strong>Table: Shrink mode example</strong></p>
<table>
- <caption>Table: Shrink mode example</caption>
<tbody>
<tr>
<th>Mode</th>
<th>Example</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_EXPAND</span></td>
+ <td><code>ELM_TOOLBAR_SHRINK_EXPAND</code></td>
<td align="center"><img alt="ELM_TOOLBAR_SHRINK_EXPAND" src="../../../images/toolbar_shrink_expand.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span></td>
+ <td><code>ELM_TOOLBAR_SHRINK_SCROLL</code></td>
<td align="center"><img alt="ELM_TOOLBAR_SHRINK_SCROLL" src="../../../images/toolbar_shrink_scroll.png" /></td>
</tr>
</tbody>
<p>The following select modes are available:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_OBJECT_SELECT_MODE_DEFAULT</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_OBJECT_SELECT_MODE_ALWAYS</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_OBJECT_SELECT_MODE_NONE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_OBJECT_SELECT_MODE_DISPLAY_ONLY</span></li>
+ <li><code>ELM_OBJECT_SELECT_MODE_DEFAULT</code></li>
+ <li><code>ELM_OBJECT_SELECT_MODE_ALWAYS</code></li>
+ <li><code>ELM_OBJECT_SELECT_MODE_NONE</code></li>
+ <li><code>ELM_OBJECT_SELECT_MODE_DISPLAY_ONLY</code></li>
</ul>
<p>To set a select mode:</p>
<h2 id="style">Styles</h2>
-<p>To set the style to <span style="font-family: Courier New,Courier,monospace">navigationbar</span>:</p>
+<p>To set the style to <code>navigationbar</code>:</p>
<pre class="prettyprint">
elm_object_style_set(toolbar, "navigationbar");
</pre>
<p>The following table lists the available component styles.</p>
+<p align="center" class="Table"><strong>Table: Toolbar styles</strong></p>
<table>
-<caption>Table: Toolbar styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/toolbar/base/default</span></td>
+ <td><code>elm/toolbar/base/default</code></td>
<td align="center"><img alt="elm/toolbar/base/default" src="../../../images/toolbar_default.png" /></td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/toolbar/base/navigationbar</span></td>
+ <td><code>elm/toolbar/base/navigationbar</code></td>
<td align="center"><img alt="elm/toolbar/base/navigationbar" src="../../../images/toolbar_navigation.png" /></td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/toolbar/base/tabbar_with_title</span></td>
+ <td><code>elm/toolbar/base/tabbar_with_title</code></td>
<td align="center"><img alt="elm/toolbar/base/tabbar_with_title" src="../../../images/toolbar_tabbar.png" /></td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/toolbar/item/tabbar</span>
- <p><span style="font-family: Courier New,Courier,monospace">elm/toolbar/item/default</span></p></td>
+ <td><code>elm/toolbar/item/tabbar</code>
+ <p><code>elm/toolbar/item/default</code></p></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td>This style is for the toolbar's item. Use the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code></td>
+ <td>This style is for the toolbar's item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">elm/toolbar/item/navigationbar</span></td>
+ <td><code>elm/toolbar/item/navigationbar</code></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td>N/A</td>
- <td>This style is for the toolbar's item. Use the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ <td>This style is for the toolbar's item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
</tr>
</tbody>
</table>
<p>You can register callback functions connected to the following signals for a toolbar object.</p>
+ <p align="center" class="Table"><strong>Table: Toolbar callback signals</strong></p>
<table border="1">
- <caption>Table: Toolbar callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The toolbar item is double-clicked and selected.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span></td>
+ <td><code>Elm_Toolbar_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,double</span></td>
+ <td><code>clicked,double</code></td>
<td>The toolbar item is double-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span></td>
+ <td><code>Elm_Toolbar_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">longpressed</span></td>
+ <td><code>longpressed</code></td>
<td>The toolbar is pressed for a certain amount of time.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span></td>
+ <td><code>Elm_Toolbar_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">language,changed</span></td>
+ <td><code>language,changed</code></td>
<td>The program language changes.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,focused</span></td>
+ <td><code>item,focused</code></td>
<td>The item is highlighted.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span></td>
+ <td><code>Elm_Toolbar_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">item,unfocused</span></td>
+ <td><code>item,unfocused</code></td>
<td>The highlight is removed from the item.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span></td>
+ <td><code>Elm_Toolbar_Item</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
+ <td><code>scroll</code></td>
<td>The toolbar scrolls.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span></td>
+ <td><code>scroll,anim,start</code></td>
<td>The toolbar scrolling animation starts.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span></td>
+ <td><code>scroll,anim,stop</code></td>
<td>The toolbar scrolling animation stops</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span></td>
+ <td><code>scroll,drag,start</code></td>
<td>The user starts dragging the toolbar.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span></td>
+ <td><code>scroll,drag,stop</code></td>
<td>The user stops dragging the toolbar.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h2 id="basic">Basic Usage</h2>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You cannot create a tooltip component with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This component is already contained in a parent component when it is created. You can only activate or disable the tooltip.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ You cannot create a tooltip component with the <code>elm_tooltip_add()</code> function. This component is already contained in a parent component when it is created. You can only activate or disable the tooltip.
+</div>
<p>To activate a tooltip on a parent object in your application:</p>
<ol>
-<li>Set a tooltip text to a button component using the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_text_set()</span> function:
+<li>Set a tooltip text to a button component using the <code>elm_object_tooltip_text_set()</code> function:
<pre class="prettyprint">
Evas_Object *button = elm_button_add(parent);
elm_object_tooltip_text_set(button, "The tooltip text");
</pre>
</li>
-<li>You can set content to the tooltip using the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_content_cb_set()</span> function.
-<p>The second parameter defines a callback which is triggered each time the tooltip is shown. Use the callback to create the content to be shown in the tooltip. The callback returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
-<p>The fourth parameter defines a callback which is triggered when the tooltip disappears. Use the callback to delete the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<li>You can set content to the tooltip using the <code>elm_object_tooltip_content_cb_set()</code> function.
+<p>The second parameter defines a callback which is triggered each time the tooltip is shown. Use the callback to create the content to be shown in the tooltip. The callback returns a pointer to an <code>Evas_Object</code>.</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>
<li>You can also set a <a href="#style">style</a> and fill the layout with a text or an image according to the style:
<ul>
- <li>Set a style to the tooltip with the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_style_set()</span> function. If you use the default style, you can skip this step.
+ <li>Set a style to the tooltip with the <code>elm_object_tooltip_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_tooltip_style_set(obj, "transparent");
</pre>
</li>
<li>
-<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_style_get()</span> function:</p>
+<p>To get the current style, use the <code>elm_object_tooltip_style_get()</code> function:</p>
<pre class="prettyprint">
char *style = elm_object_tooltip_style_get(obj);
</pre></li></ul>
elm_object_tooltip_unset(obj);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If content was set into the tooltip object, unsetting the tooltip calls the callback provided as the fourth parameter of the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_content_cb_set()</span> function. The callback is used to notify the application that the tooltip can no longer be used.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ If content was set into the tooltip object, unsetting the tooltip calls the callback provided as the fourth parameter of the <code>elm_object_tooltip_content_cb_set()</code> function. The callback is used to notify the application that the tooltip can no longer be used.
+</div>
</li>
</ol>
<p>The following example shows a simple use case of the tooltip component on a button component.</p>
+ <p align="center" class="Table"><strong>Example: Tooltip use case</strong></p>
<table border="0">
- <caption>Example: Tooltip use case</caption>
<tbody>
<tr>
<td style="text-align:left;margin-left:auto;margin-right:auto;">
<h2 id="feature">Features</h2>
-<p>You can activate the window mode for the tooltip with the <span style="font-family: Courier New,Courier,monospace">elm_object_tooltip_window_mode_set()</span> function.</p>
+<p>You can activate the window mode for the tooltip with the <code>elm_object_tooltip_window_mode_set()</code> function.</p>
<p>The window mode allows the tooltip to expand beyond its parent window canvas. It is limited only by the size of the display.</p>
<pre class="prettyprint">
elm_object_tooltip_window_mode_set(parent, EINA_TRUE);
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Tooltip styles</strong></p>
<table>
- <caption>Table: Tooltip styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/tooltip/base/default" src="../../../images/tooltip_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>default</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">transparent</span></td>
+ <td><code>transparent</code></td>
<td align="center"><img alt="elm/button/base/transparent" src="../../../images/tooltip_transparent.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>default</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
</tbody>
</table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h2 id="basic">Basic Usage</h2>
<p>A window is created automatically when you create a Tizen native UI application project with a template. The following example is a part of the template code handling a window component and the corresponding screenshot.</p>
+<p align="center" class="Table"><strong>Example: Win use case</strong></p>
<table border="0">
-<caption>Example: Win use case</caption>
<tbody>
<tr>
<td>
<p>The basic template code includes the following steps:</p>
<ol>
-<li>Add a window with the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function.
+<li>Add a window with the <code>elm_win_util_standard_add()</code> function.
<p>The first parameter is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within the application (and all instances of the application). The second parameter is the title of the window.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function is a shortcut of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span>, <span style="font-family: Courier New,Courier,monospace">elm_win_title_set()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> functions. It creates a basic window with a title and adds a standard background to the window.</p>
+<p>The <code>elm_win_util_standard_add()</code> function is a shortcut of the <code>elm_win_add()</code>, <code>elm_win_title_set()</code>, and <code>elm_bg_add()</code> functions. It creates a basic window with a title and adds a standard background to the window.</p>
<pre class="prettyprint">
Evas_Object *win;
Evas_Object *bg;
evas_object_show(bg);
</pre>
</li>
-<li>Enable auto deletion with the <span style="font-family: Courier New,Courier,monospace">elm_win_autodel_set()</span> function.
-<p>When closing the window in any way outside the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. If you enable auto deletion, the window is automatically destroyed after the signal is emitted. If auto deletion is disabled, the window is not destroyed and the program has to handle it.</p>
+<li>Enable auto deletion with the <code>elm_win_autodel_set()</code> function.
+<p>When closing the window in any way outside the program control, a <code>delete,request</code> signal is emitted to indicate that this event occurred. If you enable auto deletion, the window is automatically destroyed after the signal is emitted. If auto deletion is disabled, the window is not destroyed and the program has to handle it.</p>
</li>
-<li>Register a callback function connected to the <
span style="font-family: Courier New,Courier,monospace">delete,request</span> signal. You can register extra <a href="#callback">callback</a> functions, if necessary.</li>
-<li>Show or hide an indicator with the <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_mode_set()</span> function.</li>
-<li>Add a conformant to the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.
-<p>In most cases, you want the content of the window to be resized every time the window is resized due to rotation. To match the content size with the window size, make the content expand to fit the container size with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function and add it to the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.</p>
+<li>Register a callback function connected to the <
code>delete,request</code> signal. You can register extra <a href="#callback">callback</a> functions, if necessary.</li>
+<li>Show or hide an indicator with the <code>elm_win_indicator_mode_set()</code> function.</li>
+<li>Add a conformant to the window with the <code>elm_win_resize_object_add()</code> function.
+<p>In most cases, you want the content of the window to be resized every time the window is resized due to rotation. To match the content size with the window size, make the content expand to fit the container size with the <code>evas_object_size_hint_weight_set()</code> function and add it to the window with the <code>elm_win_resize_object_add()</code> function.</p>
<pre class="prettyprint">
Evas_Object *win;
Evas_Object *obj;
elm_win_resize_object_add(win, obj);
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function after all the properties are set.</li>
+<li>Call the <code>evas_object_show()</code> function after all the properties are set.</li>
</ol>
<h2 id="callback">Callbacks</h2>
<p>You can register callback functions connected to the following signals for a win object.</p>
-<table border="1">
- <caption>Table: Win callback signals</caption>
+<p align="center" class="Table"><strong>Table: Win callback signals</strong></p>
+<table border="1">
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">delete,request</span></td>
+ <td><code>delete,request</code></td>
<td>The window is deleted.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">focused</span></td>
+ <td><code>focused</code></td>
<td>The window received focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfocused</span></td>
+ <td><code>unfocused</code></td>
<td>The window lost focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved</span></td>
+ <td><code>moved</code></td>
<td>The window that holds the canvas is moved.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">withdrawn</span></td>
+ <td><code>withdrawn</code></td>
<td>The window is managed normally but is removed from the view.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">iconified</span></td>
+ <td><code>iconified</code></td>
<td>The window is minimized (for example, into an icon or taskbar).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">normal</span></td>
+ <td><code>normal</code></td>
<td>The window is in the normal state (not withdrawn or iconified).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">stick</span></td>
+ <td><code>stick</code></td>
<td>The window shows on all desktops.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unstick</span></td>
+ <td><code>unstick</code></td>
<td>The window shows only on 1 desktop.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">fullscreen</span></td>
+ <td><code>fullscreen</code></td>
<td>The window is fullscreen.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfullscreen</span></td>
+ <td><code>unfullscreen</code></td>
<td>The window stops being fullscreen.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">maximized</span></td>
+ <td><code>maximized</code></td>
<td>The window is maximized.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unmaximized</span></td>
+ <td><code>unmaximized</code></td>
<td>The window is diminished.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ioerr</span></td>
+ <td><code>ioerr</code></td>
<td>A low-level I/O error occurred in the display system.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span></td>
+ <td><code>wm,rotation,changed</code></td>
<td>The rotation of the window is changed by the Windows Manager.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span></td>
+ <td><code>indicator,prop,changed</code></td>
<td>The property, or indicator mode and indicator opacity are changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">rotation,changed</span></td>
+ <td><code>rotation,changed</code></td>
<td>The rotation of the window is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">profile,changed</span></td>
+ <td><code>profile,changed</code></td>
<td>The profile of the window is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span></td>
+ <td><code>aux,hint,allowed</code></td>
<td>The window auxiliary hint is allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>A window is created automatically when you create a Tizen native UI application project with a template. The following example is a part of the template code handling a window component and the corresponding screenshot.</p>
+<p align="center" class="Table"><strong>Example: Win use case</strong></p>
<table border="0">
-<caption>Example: Win use case</caption>
<tbody>
<tr>
<td>
<p>The basic template code includes the following steps:</p>
<ol>
-<li>Add a window with the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function.
+<li>Add a window with the <code>elm_win_util_standard_add()</code> function.
<p>The first parameter is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within the application (and all instances of the application). The second parameter is the title of the window.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function is a shortcut of the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span>, <span style="font-family: Courier New,Courier,monospace">elm_win_title_set()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> functions. It creates a basic window with a title and adds a standard background to the window.</p>
+<p>The <code>elm_win_util_standard_add()</code> function is a shortcut of the <code>elm_win_add()</code>, <code>elm_win_title_set()</code>, and <code>elm_bg_add()</code> functions. It creates a basic window with a title and adds a standard background to the window.</p>
<pre class="prettyprint">
Evas_Object *win;
Evas_Object *bg;
evas_object_show(bg);
</pre>
</li>
-<li>Enable auto deletion with the <span style="font-family: Courier New,Courier,monospace">elm_win_autodel_set()</span> function.
-<p>When closing the window in any way outside the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. If you enable auto deletion, the window is automatically destroyed after the signal is emitted. If auto deletion is disabled, the window is not destroyed and the program has to handle it.</p>
+<li>Enable auto deletion with the <code>elm_win_autodel_set()</code> function.
+<p>When closing the window in any way outside the program control, a <code>delete,request</code> signal is emitted to indicate that this event occurred. If you enable auto deletion, the window is automatically destroyed after the signal is emitted. If auto deletion is disabled, the window is not destroyed and the program has to handle it.</p>
</li>
-<li>Register a callback function connected to the <
span style="font-family: Courier New,Courier,monospace">delete,request</span> signal. You can register extra <a href="#callback">callback</a> functions, if necessary.</li>
-<li>Show or hide an indicator with the <span style="font-family: Courier New,Courier,monospace">elm_win_indicator_mode_set()</span> function.</li>
-<li>Add a conformant to the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.
-<p>In most cases, you want the content of the window to be resized every time the window is resized due to rotation. To match the content size with the window size, make the content expand to fit the container size with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function and add it to the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function.</p>
+<li>Register a callback function connected to the <
code>delete,request</code> signal. You can register extra <a href="#callback">callback</a> functions, if necessary.</li>
+<li>Show or hide an indicator with the <code>elm_win_indicator_mode_set()</code> function.</li>
+<li>Add a conformant to the window with the <code>elm_win_resize_object_add()</code> function.
+<p>In most cases, you want the content of the window to be resized every time the window is resized due to rotation. To match the content size with the window size, make the content expand to fit the container size with the <code>evas_object_size_hint_weight_set()</code> function and add it to the window with the <code>elm_win_resize_object_add()</code> function.</p>
<pre class="prettyprint">
Evas_Object *win;
Evas_Object *obj;
elm_win_resize_object_add(win, obj);
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function after all the properties are set.</li>
+<li>Call the <code>evas_object_show()</code> function after all the properties are set.</li>
</ol>
<p>You can register callback functions connected to the following signals for a win object.</p>
+ <p align="center" class="Table"><strong>Table: Win callback signals</strong></p>
<table border="1">
- <caption>Table: Win callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">delete,request</span></td>
+ <td><code>delete,request</code></td>
<td>The window is deleted.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">focused</span></td>
+ <td><code>focused</code></td>
<td>The window received focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfocused</span></td>
+ <td><code>unfocused</code></td>
<td>The window lost focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">moved</span></td>
+ <td><code>moved</code></td>
<td>The window that holds the canvas is moved.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">withdrawn</span></td>
+ <td><code>withdrawn</code></td>
<td>The window is managed normally but is removed from the view.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">iconified</span></td>
+ <td><code>iconified</code></td>
<td>The window is minimized (for example, into an icon or taskbar).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">normal</span></td>
+ <td><code>normal</code></td>
<td>The window is in the normal state (not withdrawn or iconified).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">stick</span></td>
+ <td><code>stick</code></td>
<td>The window shows on all desktops.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unstick</span></td>
+ <td><code>unstick</code></td>
<td>The window shows only on 1 desktop.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">fullscreen</span></td>
+ <td><code>fullscreen</code></td>
<td>The window is fullscreen.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unfullscreen</span></td>
+ <td><code>unfullscreen</code></td>
<td>The window stops being fullscreen.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">maximized</span></td>
+ <td><code>maximized</code></td>
<td>The window is maximized.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unmaximized</span></td>
+ <td><code>unmaximized</code></td>
<td>The window is diminished.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ioerr</span></td>
+ <td><code>ioerr</code></td>
<td>A low-level I/O error occurred in the display system.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span></td>
+ <td><code>wm,rotation,changed</code></td>
<td>The rotation of the window is changed by the Windows Manager.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span></td>
+ <td><code>indicator,prop,changed</code></td>
<td>The property, or indicator mode and indicator opacity are changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">rotation,changed</span></td>
+ <td><code>rotation,changed</code></td>
<td>The rotation of the window is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">profile,changed</span></td>
+ <td><code>profile,changed</code></td>
<td>The profile of the window is changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span></td>
+ <td><code>aux,hint,allowed</code></td>
<td>The window auxiliary hint is allowed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">access,changed</span></td>
+ <td><code>access,changed</code></td>
<td>The access function of the window changes.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h2 id="options" name="options">Configuring Elementary Options</h2>
-<p>The following code snippet is a configuration example from the <span style="font-family: Courier New,Courier,monospace">base.src</span> configuration file:</p>
+<p>The following code snippet is a configuration example from the <code>base.src</code> configuration file:</p>
<pre class="prettyprint">
group "Elm_Config" struct {
</li>
<li>To manage scrolling:
<ul>
-<li>Make the scroller bounce when it reaches its viewport's edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
+<li>Make the scroller bounce when it reaches its viewport's edge during scrolling by using the <code>elm_config_scroll_bounce_enabled_set()</code> function:
<pre class="prettyprint">
elm_config_scroll_bounce_enabled_set(EINA_TRUE);
</pre>
</li>
-<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
+<li>Control the inertia of the bounce animation by using the <code>elm_config_scroll_bounce_friction_set()</code> function:
<pre class="prettyprint">
elm_config_scroll_bounce_friction_set(0.5);
</pre>
<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
</li>
-<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
+<li>Set the scroller to be draggable by using the <code>elm_config_scroll_thumbscroll_enabled_set()</code> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger scrolling is 20 pixels.</p>
<pre class="prettyprint">
</li>
<li>To activate the access mode:
-<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event.</p>
+<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <code>EVAS_CALLBACK_MOUSE_IN</code> event.</p>
</li>
<li>To configure the selection mode:
</li>
<li>To set the frame rate:
-<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
+<p>Define the frames per second (FPS) value for the <code>ecore_animator_frametime</code> and <code>edje_frametime</code> calculations. This example sets the FPS 60.</p>
<pre class="prettyprint">
elm_config_fps_set(60.0);
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<h1>Box</h1>
<p>The box container arranges UI components in a linear order, horizontally or vertically. It is a non-graphical object: it adds no graphics to or around the objects it holds. For more information, see the Box API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Box.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Box.html">wearable</a> applications).</p>
-<p class="figure">Figure: Box component structure</p>
+<p align="center"><strong>Figure: Box component structure</strong></p>
<p align="center"><img alt="Box component structure" src="../../../images/box.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>To build a layout with a box:</p>
<ol>
- <li>Add a box with the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function:
+ <li>Add a box with the <code>elm_box_add()</code> function:
<pre class="prettyprint">
Evas_Object *box;
box = elm_box_add(parent);
</pre>
</li>
- <li>Set the direction of the box with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function. A box is vertical by default.
+ <li>Set the direction of the box with the <code>elm_box_horizontal_set()</code> function. A box is vertical by default.
<pre class="prettyprint">
elm_box_horizontal_set(box, EINA_TRUE);
</pre>
</li>
- <li>Add objects and pack them into the box using various functions, depending on where in the box you want to add the objects (for example, <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> and <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span>):
+ <li>Add objects and pack them into the box using various functions, depending on where in the box you want to add the objects (for example, <code>elm_box_pack_end()</code> and <code>elm_box_pack_start()</code>):
<pre class="prettyprint">
Evas_Object *box;
Evas_Object btn;
</li>
</ol>
-<p>The following example shows a simple use case of the box component, where 5 button objects are packed into a vertical box. The <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function is used to pack each button into the end of the box.</p>
+<p>The following example shows a simple use case of the box component, where 5 button objects are packed into a vertical box. The <code>elm_box_pack_end()</code> function is used to pack each button into the end of the box.</p>
+ <p align="center" class="Table"><strong>Example: Box use case</strong></p>
<table border="0">
- <caption>Example: Box use case</caption>
<tbody>
<tr>
<td>
<p>In the above example, 2 functions are used to arrange buttons inside the box:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> sets a hint on how to resize a given child object within a container area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span> sets a hint on how to align a child object inside the boundaries of a container.</li>
+<li><code>evas_object_size_hint_weight_set()</code> sets a hint on how to resize a given child object within a container area.</li>
+<li><code>evas_object_size_hint_align_set()</code> sets a hint on how to align a child object inside the boundaries of a container.</li>
</ul>
<p>If you change the weight or align hint value, the result changes.</p>
<li>If the sum of the objects' minimum size is smaller than the space given for the box, the objects are positioned at the center by default.</li>
</ul>
-<p>You can adjust the position of the image objects using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes 2 double values, a horizontal value and a vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. Remember that a box has a linear structure: the alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</p>
+<p>You can adjust the position of the image objects using the <code>elm_box_align_set()</code> function. The function takes 2 double values, a horizontal value and a vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. Remember that a box has a linear structure: the alignment only takes effect in the opposite direction than the one defined with the <code>elm_box_horizontal_set()</code> function.</p>
-<p>In the following example, 2 images are packed into a box. The minimum size hints are set to the image objects with the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Since the sum of the minimum size is smaller than the box area, which is equal to the window area in this case, the images are bound together and positioned at the center.</p>
+<p>In the following example, 2 images are packed into a box. The minimum size hints are set to the image objects with the <code>elm_object_size_hint_min_set()</code> function. Since the sum of the minimum size is smaller than the box area, which is equal to the window area in this case, the images are bound together and positioned at the center.</p>
+ <p align="center" class="Table"><strong>Table: Various box layouts</strong></p>
<table border="0">
- <caption>Table: Various box layouts</caption>
<tbody>
<tr>
<td>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The conformant container accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. For more information, see the Conformant API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Conformant.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Conformant.html">wearable</a> applications).</p>
-<p class="figure">Figure: Conformant component structure</p>
+<p align="center"><strong>Figure: Conformant component structure</strong></p>
<p align="center"><img alt="Conformant component structure" src="../../../images/conformant.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>To build a layout with a conformant:</p>
<ol>
- <li>Add a conformant with the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:
+ <li>Add a conformant with the <code>elm_conformant_add()</code> function:
<pre class="prettyprint">
Evas_Object *conformant;
conformant = elm_conformant_add(parent);
</pre>
</li>
- <li>Add an object to the conformant with the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:
+ <li>Add an object to the conformant with the <code>elm_object_content_set()</code> function:
<pre class="prettyprint">
Evas_Object *main_view;
<p>You can register callback functions connected to the following signals for a conformant object.</p>
+ <p align="center" class="Table"><strong>Table: Conformant callback signals</strong></p>
<table border="1">
- <caption>Table: Conformant callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">virtualkeypad,state,on</span></td>
+ <td><code>virtualkeypad,state,on</code></td>
<td>The virtual keyboard has been switched on.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">virtualkeypad,state,off</span></td>
+ <td><code>virtualkeypad,state,off</code></td>
<td>The virtual keyboard has been switched off.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">virtualkeypad,size,changed</span></td>
+ <td><code>virtualkeypad,size,changed</code></td>
<td>The virtual keyboard size has changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clipboard,state,on</span></td>
+ <td><code>clipboard,state,on</code></td>
<td>The clipboard has been switched on.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clipboard,state,off</span></td>
+ <td><code>clipboard,state,off</code></td>
<td>The clipboard has been switched off.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The grid container places its elements at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. For more information, see the Grid API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Grid.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Grid.html">wearable</a> applications).</p>
-<p class="figure">Figure: Grid component structure</p>
+<p align="center"><strong>Figure: Grid component structure</strong></p>
<p align="center"><img alt="Grid component structure" src="../../../images/grid_concept.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>To build a layout with a grid:</p>
<ol>
- <li>Add a grid with the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:
+ <li>Add a grid with the <code>elm_grid_add()</code> function:
<pre class="prettyprint">
Evas_Object *grid;
grid = elm_grid_add(parent);
</pre>
</li>
- <li>Set the size of the grid with the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. The size is 100 x 100 by default.
+ <li>Set the size of the grid with the <code>elm_grid_size_set()</code> function. The size is 100 x 100 by default.
<pre class="prettyprint">
grid = elm_grid_size_set(grid, 20, 30);
</pre>
</li>
- <li>Add objects and pack them into the grid with the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function:
+ <li>Add objects and pack them into the grid with the <code>elm_grid_pack()</code> function:
<pre class="prettyprint">
Evas_Object *button;
<p>The following example shows a simple use case of the grid component.</p>
+ <p align="center" class="Table"><strong>Example: Grid use case</strong></p>
<table border="0">
- <caption>Example: Grid use case</caption>
<tbody>
<tr>
<td>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The layout container enables you to define a look and feel of the UI with animation and basic event response by using an Edje design file. For more information, see the Layout API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Layout.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Layout.html">wearable</a> applications).</p>
-<p>EDC (Edje data collection) is a script language provided by Edje, which is a library in charge of the high-level layouting in EFL. An EDC file describes how the elements of the UI are positioned. An EDC file has an extension <
span style="font-family: Courier New,Courier,monospace;">.edc</span>. For more information on the syntax of EDC, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
+<p>EDC (Edje data collection) is a script language provided by Edje, which is a library in charge of the high-level layouting in EFL. An EDC file describes how the elements of the UI are positioned. An EDC file has an extension <
code>.edc</code>. For more information on the syntax of EDC, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
-<p class="figure">Figure: EDC file behavior</p>
+<p align="center"><strong>Figure: EDC file behavior</strong></p>
<p align="center"><img alt="EDC file behavior" src="../../../images/edj.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>Unlike when using other UI containers, you must write C code and an EDC script to customize a layout using a layout component. You need to create a project for a basic EDC UI application.</p>
<ol>
- <li>Create an EDC file in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span> directory and define a layout in the EDC file.
+ <li>Create an EDC file in the <code>/res/edje/</code> directory and define a layout in the EDC file.
<pre class="prettyprint">
collections {
group {
}
}
</pre>
-<p>If you add an <span style="font-family: Courier New,Courier,monospace">example.edc</span> file, the Tizen Studio calls Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">example.edj</span> file when building the project. The EDJ file is installed in the application data path.</p>
+<p>If you add an <code>example.edc</code> file, the Tizen Studio calls Edje tools automatically to build the final <code>example.edj</code> file when building the project. The EDJ file is installed in the application data path.</p>
</li>
- <li>In the C code, add a layout with the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:
+ <li>In the C code, add a layout with the <code>elm_layout_add()</code> function:
<pre class="prettyprint">
Evas_Object *layout;
layout = elm_layout_add(parent);
</pre>
</li>
- <li>Load the EDJ file with the <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set()</span> function.
- <p>You can get the full path of where the EDJ file is installed using the <span style="font-family: Courier New,Courier,monospace">app_get_resource()</span> function.</p>
+ <li>Load the EDJ file with the <code>elm_layout_file_set()</code> function.
+ <p>You can get the full path of where the EDJ file is installed using the <code>app_get_resource()</code> function.</p>
<pre class="prettyprint">
char edj_path[128] = {0,};
elm_layout_file_set(layout, edj_path, "main");
</pre>
</li>
- <li>Set objects or texts to the layout with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span> function.</li>
- <li>Elementary can send Edje signals to the EDC part using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit()</span> function. You can also use the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add()</span> function to receive signals.
+ <li>Set objects or texts to the layout with the <code>elm_object_part_content_set()</code> or <code>elm_object_part_text_set()</code> function.</li>
+ <li>Elementary can send Edje signals to the EDC part using the <code>elm_layout_signal_emit()</code> function. You can also use the <code>elm_layout_signal_callback_add()</code> function to receive signals.
<p>Use the following code to listen to any signals sent by the layout:</p>
<pre class="prettyprint">
elm_layout_signal_callback_add(layout, "*", "*", _signal_cb, NULL);
</li>
</ol>
-<p>The following example shows a simple use case of the layout component, with a simple EDC script in the <span style="font-family: Courier New,Courier,monospace;">example.edc</span> file and a connection from the resulted EDJ file to the C code.</p>
+<p>The following example shows a simple use case of the layout component, with a simple EDC script in the <code>example.edc</code> file and a connection from the resulted EDJ file to the C code.</p>
+ <p align="center" class="Table"><strong>Example: Layout use case</strong></p>
<table border="0">
- <caption>Example: Layout use case</caption>
<tbody>
<tr>
<td>
<h3 id="theme" name="theme">Predefined Layout</h3>
-<p>You can skip the first step (writing an EDC script) and set a theme to the layout with the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span> function.</p>
+<p>You can skip the first step (writing an EDC script) and set a theme to the layout with the <code>elm_layout_theme_set()</code> function instead of the <code>elm_layout_file_set()</code> function.</p>
<p>The following predefined themes are available in the mobile profile:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">application/default</span>: This layout can be used to display content inside a window.
+ <li><code>application/default</code>: This layout can be used to display content inside a window.
<pre class="prettyprint">
elm_layout_theme_set(layout, "layout", "application", "default");
elm_object_part_content_set(ly, "elm.swallow.content", view);
</pre>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">drawer/panel</span>: This layout can be used to display 2 different views: a background and a main content.
+ <li><code>drawer/panel</code>: This layout can be used to display 2 different views: a background and a main content.
<pre class="prettyprint">
elm_layout_theme_set(ly, "layout", "drawer", "panel");
elm_object_part_content_set(ly, "elm.swallow.content", main_view);
elm_object_part_content_set(ly, "elm.swallow.background", background);
</pre>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">nocontents/default</span>: This layout can be used when there is no content to display, such as in a contact or email list.
- <p>You can only set texts. There are 2 different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
+ <li><code>nocontents/default</code>: This layout can be used when there is no content to display, such as in a contact or email list.
+ <p>You can only set texts. There are 2 different texts zones: <code>elm.text</code> and <code>elm.help.text</code>. To change the text:</p>
<pre class="prettyprint">
elm_layout_theme_set(ly, "layout", "nocontents", "default");
elm_object_part_text_set(ly, "elm.text", "Hi All :)");
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The mapbuf component inherits from the container component, which means that container functions can be used on the mapbuf component. The mapbuf component emits no signals.</p>
-<p class="figure">Figure: Mapbuf hierarchy</p>
+<p align="center"><strong>Figure: Mapbuf hierarchy</strong></p>
<p align="center"><img alt="Mapbuf hierarchy" src="../../../images/mapbuf_tree.png" /></p>
<h2 id="create">Adding a Mapbuf Component</h2>
-<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<p>To create a mapbuf component, use the <code>elm_mapbuf_add()</code> function:</p>
<pre class="prettyprint">
Evas_Object *mapbuf;
Evas_Object *parent;
<h2 id="add">Adding Content to the Mapbuf</h2>
-<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">default</span> part:</p>
+<p>To add content to the mapbuf component, use the <code>elm_object_content_set()</code> function with the <code>default</code> part:</p>
<pre class="prettyprint">
elm_object_content_set(mapbuf, content);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Calling the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> function is equivalent to calling the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span> function.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Calling the <code>elm_object_content_set(mapbuf, content)</code> function is equivalent to calling the <code>elm_object_part_content_set(mapbuf, "default", content)</code> function.
+</div>
<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
<pre class="prettyprint">
elm_mapbuf_enabled_set(mapbuf, EINA_TRUE);
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>To build a layout with a naviframe:</p>
<ol>
- <li>Add a naviframe with the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function.</li>
- <li>Add an item (a view) and push it to the stack using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function. The function takes 6 parameters and returns a handler of the item.
+ <li>Add a naviframe with the <code>elm_naviframe_add()</code> function.</li>
+ <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 <span style="font-family: Courier New,Courier,monospace">next_btn</span> (fourth parameter) is not shown, so use <span style="font-family: Courier New,Courier,monospace">NULL</span>. The <span style="font-family: Courier New,Courier,monospace">prev_btn</span> (third parameter) is supported, but auto pushing is also supported from Tizen 2.4. As a result, use <span style="font-family: Courier New,Courier,monospace">NULL</span> for <span style="font-family: Courier New,Courier,monospace">prev_btn</span> too, and set the auto-pushed flag (about the <span style="font-family: Courier New,Courier,monospace">prev_btn</span>) to <span style="font-family: Courier New,Courier,monospace">true</span> (like below).</p>
+<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>
<pre class="prettyprint">
-/* Make prev_btn automatically, if multiple items are pushed (default: EINA_FALSE) */
+/*
+ Make prev_btn automatically,
+ if multiple items are pushed (default: EINA_FALSE)
+*/
elm_naviframe_prev_btn_auto_pushed_set(nf, EINA_TRUE);
</pre></li>
<li>
<p>The last parameter is the style of the naviframe item. In Tizen mobile, various <a href="#style">item styles</a> are provided:</p>
-<ul><li>If an item style supports text parts, fill the text parts with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function:
+<ul><li>If an item style supports text parts, fill the text parts with the <code>elm_object_item_part_text_set()</code> function:
<pre class="prettyprint">
elm_object_item_part_text_set(nf_it, "subtitle", "subtitle");
</pre></li>
<li>
-<p>If an item style supports swallow parts, fill the swallow parts with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function:</p>
+<p>If an item style supports swallow parts, fill the swallow parts with the <code>elm_object_item_part_content_set()</code> function:</p>
<pre class="prettyprint">
elm_object_item_part_content_set(nf_it, "title_left_btn", btn);
</pre>
</li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">default</span> text part is the title, and the <span style="font-family: Courier New,Courier,monospace">default</span> swallow part is the main content area. You can fill these parts with the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function as well.</p>
+<p>The <code>default</code> text part is the title, and the <code>default</code> swallow part is the main content area. You can fill these parts with the <code>elm_naviframe_item_push()</code> function as well.</p>
</li></ul>
</li>
- <li>Repeat step 2 for each view you have. You can pop and delete the top-most view during the process using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_pop()</span> function.</li>
+ <li>Repeat step 2 for each view you have. You can pop and delete the top-most view during the process using the <code>elm_naviframe_item_pop()</code> function.</li>
</ol>
<p>The following example shows a simple use case of the naviframe component in a mobile application.</p>
-
+<p align="center" class="Table"><strong>Example: Naviframe use case</strong></p>
<table border="0">
- <caption>Example: Naviframe use case</caption>
<tbody>
<tr>
<td>
<h2 id="style">Item Styles</h2>
<p>The following table lists the item styles available for Tizen mobile applications.</p>
-
+<p align="center" class="Table"><strong>Table: Naviframe item styles</strong></p>
<table>
- <caption>Table: Naviframe item styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/naviframe_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">subtitle</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p></td>
- <td><p><img align="left" alt="default_part_explain" src="../../../images/naviframe_part_default.png" width="280" height="140" hspace="2"/></p>
-<p>1. Text part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>2. Text part: <span style="font-family: Courier New,Courier,monospace">subtitle</span></p>
-<p>3. Swallow part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>4. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
-<p>5. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p>
+ <td><code>default</code>
+ <p><code>subtitle</code></p></td>
+ <td><code>default</code>
+ <p><code>title_left_btn</code></p>
+ <p><code>title_right_btn</code></p></td>
+ <td><img alt="default_part_explain" src="../../../images/naviframe_part_default.png"/>
+<p>1. Text part: <code>default</code></p>
+<p>2. Text part: <code>subtitle</code></p>
+<p>3. Swallow part: <code>default</code></p>
+<p>4. Swallow part: <code>title_left_btn</code></p>
+<p>5. Swallow part: <code>title_right_btn</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tabbar</span></td>
+ <td><code>tabbar</code></td>
<td align="center"><img alt="tabbar" src="../../../images/naviframe_tabbar.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">subtitle</span></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">tabbar</span></p></td>
- <td><p>The <span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span> style toolbar can be set into the <span style="font-family: Courier New,Courier,monospace">tabbar</span> part.</p>
- <p><img align="left" alt="tabbar_part_explain" src="../../../images/naviframe_part_tabbar.png" width="280" height="140" hspace="2"/></p>
-<p>1. Text part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>2. Text part: <span style="font-family: Courier New,Courier,monospace">subtitle</span></p>
-<p>3. Swallow part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>4. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
-<p>5. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p>
-<p>6. Swallow part: <span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td><code>default</code>
+ <p><code>subtitle</code></p></td>
+ <td><code>default</code>
+ <p><code>title_left_btn</code></p>
+ <p><code>title_right_btn</code></p>
+ <p><code>tabbar</code></p></td>
+ <td>The <code>tabbar_with_title</code> style toolbar can be set into the <code>tabbar</code> part.
+ <p><img alt="tabbar_part_explain" src="../../../images/naviframe_part_tabbar.png"/></p>
+<p>1. Text part: <code>default</code></p>
+<p>2. Text part: <code>subtitle</code></p>
+<p>3. Swallow part: <code>default</code></p>
+<p>4. Swallow part: <code>title_left_btn</code></p>
+<p>5. Swallow part: <code>title_right_btn</code></p>
+<p>6. Swallow part: <code>tabbar</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tabbar/notitle</span></td>
+ <td><code>tabbar/notitle</code></td>
<td align="center"><img alt="tabbar/notitle" src="../../../images/naviframe_tabbar_notitle.png" /></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">tabbar</span></p></td>
- <td><p>The toolbar can be set into the <span style="font-family: Courier New,Courier,monospace">tabbar</span> part.</p>
- <p><img align="left" alt="tabbar_notitle_part_explain" src="../../../images/naviframe_part_tabbar_notitle.png" width="280" height="140" hspace="2"/></p>
-<p>1. Swallow part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>2. Swallow part: <span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td><code>default</code>
+ <p><code>tabbar</code></p></td>
+ <td>The toolbar can be set into the <code>tabbar</code> part.
+ <p><img alt="tabbar_notitle_part_explain" src="../../../images/naviframe_part_tabbar_notitle.png"/></p>
+<p>1. Swallow part: <code>default</code></p>
+<p>2. Swallow part: <code>tabbar</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tabbar/icon</span></td>
+ <td><code>tabbar/icon</code></td>
<td align="center"><img alt="tabbar/icon" src="../../../images/naviframe_tabbar_icon.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">subtitle</span></p>
+ <td><code>default</code>
+ <p><code>subtitle</code></p>
</td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td><code>default</code>
+ <p><code>title_left_btn</code></p>
+ <p><code>title_right_btn</code></p>
+ <p><code>tabbar</code></p>
</td>
- <td><p>The <span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span> style toolbar with icons can be set into the <span style="font-family: Courier New,Courier,monospace">tabbar</span> part.</p>
- <p><img align="left" alt="tabbar_icon_part_explain" src="../../../images/naviframe_part_tabbar_icon.png" width="280" height="140" hspace="2"/></p>
-<p>1. Text part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>2. Text part: <span style="font-family: Courier New,Courier,monospace">subtitle</span></p>
-<p>3. Swallow part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>4. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_left_btn</span></p>
-<p>5. Swallow part: <span style="font-family: Courier New,Courier,monospace">title_right_btn</span></p>
-<p>6. Swallow part: <span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td>The <code>tabbar_with_title</code> style toolbar with icons can be set into the <code>tabbar</code> part.
+ <p><img alt="tabbar_icon_part_explain" src="../../../images/naviframe_part_tabbar_icon.png"/></p>
+<p>1. Text part: <code>default</code></p>
+<p>2. Text part: <code>subtitle</code></p>
+<p>3. Swallow part: <code>default</code></p>
+<p>4. Swallow part: <code>title_left_btn</code></p>
+<p>5. Swallow part: <code>title_right_btn</code></p>
+<p>6. Swallow part: <code>tabbar</code></p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tabbar/icon/notitle</span></td>
+ <td><code>tabbar/icon/notitle</code></td>
<td align="center"><img alt="tabbar/icon/notitle" src="../../../images/naviframe_tabbar_icon_notitle.png" /></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">default</span>
- <p><span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td><code>default</code>
+ <p><code>tabbar</code></p>
</td>
- <td><p>The toolbar with icons can be set into the <span style="font-family: Courier New,Courier,monospace">tabbar</span> part.</p>
- <p><img align="left" alt="tabbar_icon_notitle_part_explain" src="../../../images/naviframe_part_tabbar_icon_notitle.png" width="280" height="140" hspace="2"/></p>
-<p>1. Swallow part: <span style="font-family: Courier New,Courier,monospace">default</span></p>
-<p>2. Swallow part: <span style="font-family: Courier New,Courier,monospace">tabbar</span></p>
+ <td>The toolbar with icons can be set into the <code>tabbar</code> part.
+ <p><img alt="tabbar_icon_notitle_part_explain" src="../../../images/naviframe_part_tabbar_icon_notitle.png"/></p>
+<p>1. Swallow part: <code>default</code></p>
+<p>2. Swallow part: <code>tabbar</code></p>
</td>
</tr>
</tbody>
<h2 id="callback">Callbacks</h2>
<p>You can register callback functions connected to the following signals for a naviframe object.</p>
-
+<p align="center" class="Table"><strong>Table: Naviframe callback signals</strong></p>
<table border="1">
- <caption>Table: Naviframe callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">transition,finished</span></td>
+ <td><code>transition,finished</code></td>
<td>The transition has finished changing the view.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">title,transition,finished</span></td>
+ <td><code>title,transition,finished</code></td>
<td>The title area transition has finished changing the state of the title.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">title,clicked</span></td>
+ <td><code>title,clicked</code></td>
<td>The title area is clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>To use panes in your application:</p>
<ol>
- <li>Add a panes with the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:
+ <li>Add a panes with the <code>elm_panes_add()</code> function:
<pre class="prettyprint">
Evas_Object *panes;
panes = elm_panes_add(parent);
</pre>
</li>
- <li>Add content to the panes with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function:
+ <li>Add content to the panes with the <code>elm_object_part_content_set()</code> function:
<ul><li>Add a content to the left pane:
<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:
elm_object_part_content_set(panes, "right", right_button);
</pre>
</li></ul></li>
- <li>Set the direction of the panes with the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function. A panes is vertical by default. Horizontal panes have "top" and "bottom" content, while vertical panes have "left" and "right" content.
+ <li>Set the direction of the panes with the <code>elm_panes_horizontal_set()</code> function. A panes is vertical by default. Horizontal panes have "top" and "bottom" content, while vertical panes have "left" and "right" content.
<pre class="prettyprint">
elm_panes_horizontal_set(panes, EINA_TRUE);
elm_object_part_content_set(panes, "top", top_button);
</pre>
</li>
- <li>Set the size of the panes with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set</span> function.
+ <li>Set the size of the panes with the <code>elm_panes_content_right_size_set</code> function.
<p>By default, both sides of the panes have the same size. You can change the size proportion of the panes. If the left content must be displayed over 75% of the panes size, the size must be passed as 0.75. This way, the right content is resized to 25% of the panes size. If displayed vertically, left content is displayed at top, and right content at the bottom.</p>
<pre class="prettyprint">
elm_panes_content_left_size_set(panes, 0.75);
</li>
<li>Register the <a href="#callback">callback</a> functions.
- <p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal:</p>
+ <p>The following example shows how to define and register a callback for the <code>clicked,double</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(panes, "clicked,double", clicked_double_cb, data);
void
clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
{
- dlog_print(DLOG_INFO, LOG_TAG, "Panes double clicked\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "Panes double clicked\n");
}
</pre>
</li>
</ol>
<p>The following example shows a simple use case of the panes component.</p>
+ <p align="center" class="Table"><strong>Example: Panes use case</strong></p>
<table border="0">
- <caption>Example: Panes use case</caption>
<tbody>
<tr>
<td>
<p>You can register callback functions connected to the following signals for a panes object.</p>
+ <p align="center" class="Table"><strong>Table: Panes callback signals</strong></p>
<table border="1">
- <caption>Table: Panes callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked</span></td>
+ <td><code>clicked</code></td>
<td>The panes is clicked (press and release).</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">clicked,double</span></td>
+ <td><code>clicked,double</code></td>
<td>The panes is double-clicked.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressed</span></td>
+ <td><code>pressed</code></td>
<td>The panes is pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">unpressed</span></td>
+ <td><code>unpressed</code></td>
<td>The panes is released after being pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace;">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>To build a layout with a scroller:</p>
<ol>
- <li>Add a scroller with the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:
+ <li>Add a scroller with the <code>elm_scroller_add()</code> function:
<pre class="prettyprint">
Evas_Object *scroller;
scroller = elm_scroller_add(parent);
</pre>
</li>
- <li>Set a <a href="#style">style</a> to the scroller with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. If you use the default style, you can skip this step.
+ <li>Set a <a href="#style">style</a> to the scroller with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
<pre class="prettyprint">
elm_object_style_set(scroller, "handler");
</pre></li>
- <li>Add an object and set it to the scroller with the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:
+ <li>Add an object and set it to the scroller with the <code>elm_object_content_set()</code> function:
<pre class="prettyprint">
Evas_Object *image;
<p>The content object must have a minimum size bigger than the scroller size to be scrollable.</p>
</li>
<li>Register the <a href="#callback">callback</a> functions.
- <p>The following example shows how to define and register a callback for the <span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span> signal:</p>
+ <p>The following example shows how to define and register a callback for the <code>scroll,drag,start</code> signal:</p>
<pre class="prettyprint">
evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
<p>The following example shows a simple use case of the scroller component, where an image objects is set into a scroller. The minimum size of the image (1600 x 1600 pixels) is larger than the scroller (smaller than 720 * 1280 pixels), so you can scroll across the image.</p>
+ <p align="center" class="Table"><strong>Example: Scroller use case</strong></p>
<table border="0">
- <caption>Example: Scroller use case</caption>
<tbody>
<tr>
<td>
<p>The following table lists the available component styles.</p>
+ <p align="center" class="Table"><strong>Table: Scroller styles</strong></p>
<table>
- <caption>Table: Scroller styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="elm/scroller/base/default" src="../../../images/scroller_default.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">handler</span></td>
+ <td><code>handler</code></td>
<td align="center"><img alt="elm/scroller/base/handler" src="../../../images/scroller_handler.png" /></td>
</tr>
</tbody>
<p>You can register callback functions connected to the following signals for a scroller object.</p>
+ <p align="center" class="Table"><strong>Table: Scroller callback signals</strong></p>
<table border="1">
- <caption>Table: Scroller callback signals</caption>
<tbody>
<tr>
<th>Signal</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,left</span></td>
+ <td><code>edge,left</code></td>
<td>The left edge of the content is reached.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,right</span></td>
+ <td><code>edge,right</code></td>
<td>The right edge of the content is reached.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,top</span></td>
+ <td><code>edge,top</code></td>
<td>The top edge of the content is reached.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">edge,bottom</span></td>
+ <td><code>edge,bottom</code></td>
<td>The bottom edge of the content is reached.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll</span></td>
+ <td><code>scroll</code></td>
<td>The content is scrolled (moved).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span></td>
+ <td><code>scroll,anim,start</code></td>
<td>The scrolling animation has started.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span></td>
+ <td><code>scroll,anim,stop</code></td>
<td>The scrolling animation has stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span></td>
+ <td><code>scroll,drag,start</code></td>
<td>Dragging the content has started.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span></td>
+ <td><code>scroll,drag,stop</code></td>
<td>Dragging the content has stopped.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">vbar,drag</span></td>
+ <td><code>vbar,drag</code></td>
<td>The vertical scroll bar is dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">vbar,press</span></td>
+ <td><code>vbar,press</code></td>
<td>The vertical scroll bar is pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">vbar,unpress</span></td>
+ <td><code>vbar,unpress</code></td>
<td>The vertical scroll bar is unpressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">hbar,drag</span></td>
+ <td><code>hbar,drag</code></td>
<td>The horizontal scroll bar is dragged.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">hbar,press</span></td>
+ <td><code>hbar,press</code></td>
<td>The horizontal scroll bar is pressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">hbar,unpress</span></td>
+ <td><code>hbar,unpress</code></td>
<td>The horizontal scroll bar is unpressed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">scroll,page,changed</span></td>
+ <td><code>scroll,page,changed</code></td>
<td>The visible page has changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
+</div>
<h2 id="example">Example</h2>
<p>A good example of the scroller use is a picture slideshow: add images to the scroller and limit the scrolling to pages, meaning that one picture at a time is shown.</p>
-<p>A scroller can limit scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single page at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
+<p>A scroller can limit scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single page at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <code>elm_scroller_page_size_set()</code> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
<p>To create a picture slideshow:</p>
<ol>
-<li>Disable the scroll bars for both axes, limit the scrolling to pages using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:
+<li>Disable the scroll bars for both axes, limit the scrolling to pages using the <code>elm_scroller_page_scroll_limit_set()</code> function, and lock the scrolling on the Y axis using the <code>elm_object_scroll_lock_y_set()</code> function:
<pre class="prettyprint">
elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
elm_scroller_page_scroll_limit_set(scroller, 1, 0);
pages = eina_list_append(pages, img);
elm_box_pack_end(box, img);
</pre>
-<p>References to the images are stored in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
+<p>References to the images are stored in an <code>eina_list</code> for easy retrieval later.</p>
</li>
<li>
<p>Display the first page of the scroller:</p>
</li>
<li>
<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 <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</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 <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> 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>
+<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">
EINA_LIST_FOREACH(images, l, page)
evas_object_size_hint_min_set(page, w, h);
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The table container acts like box, but with 2 dimensions. It provides the same kind of APIs as a box. An item inside a table can span multiple columns and rows, and even overlap with other items. For more information, see the Table API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Table.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Table.html">wearable</a> applications).</p>
-<p class="figure">Figure: Table component structure</p>
+<p align="center"><strong>Figure: Table component structure</strong></p>
<p align="center"><img alt="Table component structure" src="../../../images/table.png"/></p>
<h2 id="basic">Basic Usage</h2>
<p>To build a layout with a table:</p>
<ol>
- <li>Add a table with the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:
+ <li>Add a table with the <code>elm_table_add()</code> function:
<pre class="prettyprint">
Evas_Object *table;
table = elm_table_add(parent);
</pre></li>
- <li>Add an object to the table using the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function.
+ <li>Add an object to the table using the <code>elm_table_pack()</code> function.
<p>The function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
<pre class="prettyprint">
Evas_Object *btn;
</li>
</ol>
-<p>The following example shows a simple use case of the table component, where 5 button objects are packed into a table. The <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function is used to add each button to the table. 1 button takes 2 rows and 1 column, and 4 buttons take only 1 row and column.</p>
+<p>The following example shows a simple use case of the table component, where 5 button objects are packed into a table. The <code>elm_table_pack()</code> function is used to add each button to the table. 1 button takes 2 rows and 1 column, and 4 buttons take only 1 row and column.</p>
-<table border="0">
- <caption>Example: Table use case</caption>
+ <p align="center" class="Table"><strong>Example: Table use case</strong></p>
+<table border="0">
<tbody>
<tr>
<td>
<p>To manage the table items:</p>
<ul>
<li>
-<p>To change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
+<p>To change the position of the item after adding it, use the <code>elm_table_pack_set()</code> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
</li>
<li>
-<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows.</p>
+<p>To add padding around the item, use the <code>elm_table_padding_set()</code> function. The second parameter is the padding between columns, and the third parameter is the padding between rows.</p>
<pre class="prettyprint">
elm_table_padding_set(table, 10, 10);
</pre>
</li>
<li>
-<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_XXX()</span> functions. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
+<p>To change the alignment and size of an item, use the <code>evas_object_size_hint_XXX()</code> functions. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
<pre class="prettyprint">
elm_table_homogeneous_set(table, EINA_TRUE);
</pre>
</li>
-<li><p>To clear all table items, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted as the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function is called on each item.</p>
+<li><p>To clear all table items, use the <code>elm_table_clear()</code> function. If the clear parameter is <code>EINA_TRUE</code>, the table items are deleted as the <code>evas_object_del()</code> function is called on each item.</p>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul>
<li><a href="#inline">Inline Array</a>: Standard array of inlined members</li>
-<li><a href="#array">Array</a>: Standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#hash">Hash Table</a>: Standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#array">Array</a>: Standard array of <code>void*</code> data</li>
+<li><a href="#hash">Hash Table</a>: Standard hash of <code>void*</code> data</li>
<li><a href="#inlist">Inline List</a>: List with nodes inlined into the user type</li>
<li>Compact List</li>
-<li><a href="#list">List</a>: Standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#list">List</a>: Standard list of <code>void*</code> data</li>
<li><a href="#iterate">Iterator Functions</a></li>
-<li>Sparse Matrix: Sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li>Sparse Matrix: Sparse matrix of <code>void*</code> data</li>
<li>Red-Black tree: Red-black tree with nodes inlined into the user type</li>
<li><a href="#buffer">String Buffer</a>: Mutable string to prepend, insert, or append strings to a buffer</li>
<li><a href="#share">Stringshare</a>: Shares read-only string references</li>
<h2 id="iterate" name="iterate">Iterator Functions</h2>
<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
-<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
-<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
-<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
+<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <code>eina_iterator_free()</code> function.</p>
+<p>To get the data and iterate, use the <code>eina_iterator_next()</code> function. To call a function on every single element of a container, use the <code>eina_iterator_foreach()</code> function.</p>
+<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <code>FOREACH</code> or <code>REVERSE_FOREACH</code>.</p>
<h2 id="string" name="string">Strings</h2>
<h3 id="share" name="share">Stringshare</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
+<p>The <code>Eina_Stringshare</code> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
<p>To manage stringshares:</p>
<ol>
-<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
+<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>
<li>To retrieve or modify the string data:
<ul>
-<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a "format" string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
+<li>Retrieve a string for use in a program from a format string using the <code>eina_stringshare_printf()</code> function. If you have a "format" string to pass to a function like <code>printf</code>, you can store it as a stringshare as well.
<p>The following example produces "1 desktop manager to rule them all".</p>
<pre class="prettyprint">
const char *myfmtstr = "%d desktop manager to rule them all";
</pre>
</li>
-<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
+<li>Replace the value of a stringshare with the <code>eina_stringshare_replace()</code> function. Pass the pointer address and the new value to the function.
<pre class="prettyprint">
-eina_stringshare_replace(&str,"One desktop manager to rule them all");
+eina_stringshare_replace(&str, "One desktop manager to rule them all");
</pre>
</li>
-<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
+<li>Retrieve the length of the stringshare value with the <code>eina_stringshare_strlen()</code> function.
<pre class="prettyprint">
printf("length: %d\n", eina_stringshare_strlen(str));
</pre>
</li>
</ul>
</li>
-<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
+<li>When the string is no longer needed, delete it using the <code>eina_stringshare_del()</code> function:
<pre class="prettyprint">
eina_stringshare_del(mystr);
</pre>
<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
<p>To manage string buffers:</p>
<ol>
-<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
+<li>Initialize the <code>Eina_Strbuf</code> instance and create the buffer:
<pre class="prettyprint">
Eina_Strbuf *buf;
mybuffer = eina_strbuf_new();
<li>To append characters to the buffer:
<ul>
<li>
-<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
+<p>For basic strings, use the <code>eina_strbuf_append()</code> function:</p>
<pre class="prettyprint">
eina_strbuf_append(mybuffer, "This is my string.");
</pre>
</li>
-<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
+<li>To append 1 character to your buffer, use the <code>eina_strbuf_append_char()</code> function. You can also append a sized string to the buffer using the <code>eina_strbuf_append_length()</code> function.
<pre class="prettyprint">
eina_strbuf_append_length(mybuffer, "Buffe", 5);
eina_strbuf_append_char(mybuffer, 'r');
</pre>
</li>
-<li>To handle "printf" format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
+<li>To handle "printf" format strings, use the <code>eina_strbuf_append_printf()</code> function to add formatted strings to the buffer:
<pre class="prettyprint">
eina_strbuf_append_printf(buf, "%s%c", "buffe", 'r');
</pre>
</ul>
</li>
-<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
+<li>To remove characters from one position to another, use the <code>eina_strbuf_remove()</code> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
<p>This example removes the first 19 characters of the buffer:</p>
<pre class="prettyprint">
eina_strbuf_remove(buf, 0, 18);
<li>To replace characters:
<ul><li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
+<code>eina_strbuf_replace()</code> replaces a specific occurrence of a given string in the buffer with another string.</li>
<li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
+<code>eina_strbuf_replace_all()</code> replaces all occurrences of a given string in the buffer with another string.
</li>
</ul>
<pre class="prettyprint">
eina_strbuf_replace_all(mybuffer, "B-U-F-F-E-R", "Buffer");
</pre>
</li>
-<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
+<li>To insert a string at the specified position, use the <code>eina_strbuf_insert()</code> function. Use the <code>eina_strbuf_insert_printf()</code> function with formatted strings.
<pre class="prettyprint">
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>
-<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
+<li>To get the complete length of the string and the buffer, use the <code>eina_strbuf_string_get()</code> and <code>eina_strbuf_length_get()</code> functions:
<pre class="prettyprint">
printf("%s: %d\n", eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
</pre>
</ul>
</li>
-<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
+<li>When no longer needed, free the buffer with the <code>eina_strbuf_free()</code> function. You can also free the content of <code>Eina_Strbuf</code> without freeing the buffer itself using the <code>eina_strbuf_string_free()</code> function.
<pre class="prettyprint">
eina_strbuf_free(mybuffer);
</pre>
<h3>Creating and Destroying a Classic Array</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the fifth element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
+<p>The <code>eina_array_new()</code> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <code>NULL</code>.</p>
+<p>The first parameter of the <code>eina_array_new()</code> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the fifth element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
<p>To create an array to store strings:</p>
<ol>
eina_array_push(array, strdup(strings[i]));
</pre>
</li>
-<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
+<li>To change the allocation step, use the <code>eina_array_step_set()</code> function:
<ul><li>The first parameter is the array you want to change.</li>
-<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
+<li>The second parameter is the size of that specific array (retrieved with the <code>sizeof()</code> function).</li>
<li>The last parameter is the new step size.</li></ul>
<p>In this example, the array step changes from 20 to 30.</p>
<pre class="prettyprint">
eina_array_step_set(array, sizeof(*array), 30);
</pre>
</li>
-<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function.
+<li>When no longer used, use the <code>eina_array_free()</code> function to free the array. It first calls the <code>eina_array_flush()</code> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <code>while</code> statement with the <code>eina_array_pop()</code> function.
<pre class="prettyprint">
/* Freeing the array elements */
while (eina_array_count(array))
<p>To modify classic array content:</p>
<ul>
-<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
+<li>To set the data of an element, use the <code>eina_array_data_set()</code> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <code>NULL</code> or invalid, the application can crash.
<pre class="prettyprint">
free(eina_array_data_get(array, 0));
eina_array_data_set(array, 0, strdup(strings[3]);
</pre>
</li>
-<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
+<li>To add elements to the end of the array, use the <code>eina_array_push()</code> function. The function returns <code>EINA_TRUE</code> on success, and <code>EINA_FALSE</code> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <code>strdup()</code> function to duplicate the string contained in <code>strings[]</code>. This function allocates the memory of the returned string, so you do not have to do it yourself.
<pre class="prettyprint">
for (i = 0; i < 20; i++)
eina_array_push(array, strdup(strings[i]));
</pre>
</li>
-<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
+<li>To remove the last element of an array, use the <code>eina_array_pop()</code> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
<pre class="prettyprint">
while (eina_array_count(array))
free(eina_array_pop(array));
</pre>
</li>
-<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
+<li>To rebuild the array by specifying the data to be kept, use the <code>eina_array_remove()</code> function:
<ul><li>The first parameter is the array to be changed.</li>
<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
-<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
+<p>The selector function has to return an <code>Eina_Bool</code>, <code>EINA_TRUE</code> if the element stays, and <code>EINA_FALSE</code> if it has to be removed.</p>
<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
<pre class="prettyprint">
/* Selector function */
}
</pre>
</li>
-<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
+<li>To completely wipe an array out, use the <code>eina_array_flush()</code> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <code>NULL</code>. For performance reasons, there is no array check. If the value is <code>NULL</code> or invalid, the program can crash. The only parameter of this function is a pointer to the <code>Eina_Array</code> array you want to flush.
<pre class="prettyprint">
eina_array_flush(array);
</pre>
</li>
-<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
+<li>To empty an array quickly, use the <code>eina_array_clean()</code> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <code>NULL</code> or invalid, the program can crash.
<pre class="prettyprint">
eina_array_clean(array);
</pre>
<p>To access classic array data:</p>
<ul>
-<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
+<li>To access the data in the array, use the <code>eina_array_data_get()</code> function with the array and the index of the element you want to get. The function returns a pointer to the data.
<pre class="prettyprint">
/* Getting the data of the first element */
char *mydata;
</li>
-<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
+<li>To get the number of elements in an array, use the <code>eina_array_count()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_array_new()</code> function.
<p>The function returns the number of elements.</p>
<pre class="prettyprint">
unsigned int nb_elm;
<li>To iterate through an array, you can use various methods:
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
-<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
+<li>Use the <code>Eina_Array</code> iterator called <code>ITER_NEXT</code>.
+<p>You can use the iterator by calling the macro <code>EINA_ARRAY_ITER_NEXT()</code>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <code>Eina_Iterator</code>. To use it, declare an <code>Eina_Iterator</code>, an <code>int</code> counter, and, for example, a <code>char *</code> item if your array contains any strings.</p>
<pre class="prettyprint">
Eina_Array_Iterator iterator;
const char *item;
printf("item #%d: %s\n", i, item);
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
+<li>Use the <code>eina_array_foreach()</code> function to iterate over the array.
<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue, and the last is the data passed to the callback function.</p>
<p>To iterate over the array and to print the data of each array element:</p>
<pre class="prettyprint">
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
-<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
+<li>Use the <code>eina_array_iterator_new()</code> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <code>NULL</code> or the count of the array members is less than or equal to 0, the function returns <code>NULL</code>. If the memory cannot be allocated, <code>NULL</code> is returned and <code>EINA_ERROR_OUT_OF_MEMORY</code> is thrown. Otherwise, a valid iterator is returned.</p>
+<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <code>eina_array_foreach()</code> function.</p>
<p>To create an iterator and use it to print the data of each array element:</p>
<pre class="prettyprint">
static Eina_Bool
}
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements.
-<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
+<li>Use the <code>eina_array_accessor_new()</code> function to get random access to the array elements.
+<p>The function returns a newly allocated accessor associated with the array. If the array is <code>NULL</code> or the counting of array members is less than or equal to 0, this function returns <code>NULL</code>. If the memory cannot be allocated, <code>NULL</code> is returned and <code>EINA_ERROR_OUT_OF_MEMORY</code> is thrown. Otherwise, a valid accessor is returned.</p>
<p>To use the accessor to retrieve and print the data of every other array element:</p>
<pre class="prettyprint">
int
<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
-<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
-<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
+<p>To create an inline array, use the <code>eina_inarray_new()</code> function:</p>
+<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <code>sizeof(char)</code> is passed to the function.</li>
<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value.
-<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
+<p>The step can be changed later on using the <code>eina_inarray_step_set()</code> function.</p></li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
+<p>The <code>eina_inarray_new()</code> function returns a pointer to the new <code>Eina_Inarray</code> variable.</p>
<pre class="prettyprint">
int
inline_array()
<p>To modify inline array content:</p>
<ul>
<li>
-<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
-<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
+<p>To add data as the last element of the inline array, use the <code>eina_inarray_push()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The second parameter is the data you want to push to the inline array.</p>
+<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <code>-1</code>.</p>
<pre class="prettyprint">
ch = 'a';
eina_inarray_push(iarr, &ch);
</pre>
</li>
<li>
-<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<p>To insert data to a given position of the inline array, use the <code>eina_inarray_insert_at()</code> function:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
<li>The second parameter is the index of the element you want to add to the inline array.</li>
<li>The last parameter is a pointer to the content to be added.</li></ul>
<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
</pre>
</li>
<li>
-<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
+<p>To insert data with your own position criteria, use the <code>eina_inarray_insert()</code> or <code>eina_inarray_insert_sorted()</code> function. The only difference between these functions is that the <code>eina_inarray_insert_sorted()</code> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
<p>In both functions:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
<li>The second parameter is the data you want to push to the inline array.</li>
<li>The last parameter is the callback comparison function.
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
+<p>The <code>Eina_Compare_Cb</code> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <code>eina_inarray_insert()</code> or <code>eina_inarray_insert_sorted()</code> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
<p>The following example shows how to insert a value before a greater value:</p>
<pre class="prettyprint">
/* Defining the comparison function with the position criteria */
</pre>
</li>
<li>
-<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
+<p>To remove the last element of the inline array, use the <code>eina_inarray_pop()</code> function. The only parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. This function returns the data removed from the inline array.</p>
<pre class="prettyprint">
eina_inarray_pop(iarr);
</pre>
</li>
<li>
-<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
+<p>To remove specific data from an inline array, use the <code>eina_inarray_remove()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The second parameter is the data you want to remove from the inline array.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
+<p>The <code>eina_inarray_remove()</code> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <code>memcmp()</code> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
+<p>The <code>eina_inarray_remove()</code> function returns the index of the removed member, or -1 if failed.</p>
<pre class="prettyprint">
iarr = eina_inarray_new(sizeof(char), 0);
</li>
<li>
-<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array's head.</p>
+<p>To remove data from a defined position in an inline array, use the <code>eina_inarray_remove_at()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The second parameter is the index of the element you want to remove from the inline array.</p>
+<p>The function returns <code>EINA_TRUE</code> on success and <code>EINA_FALSE</code> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array's head.</p>
<pre class="prettyprint">
/* Removing data from position 2 */
eina_inarray_remove_at(iarr, 2);
</pre>
</li>
-<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
+<li><p>To remove all the elements of the array, use the <code>eina_inarray_flush()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The function removes every member from the array.</p>
<pre class="prettyprint">
eina_inarray_flush(iarr);
</pre>
</li>
<li>
-<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<p>To replace values in the inline array, use the <code>eina_inarray_replace_at()</code> function, which copies the data over the given position:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
<li>The second parameter is the index of the element you want to remove from the inline array.</li>
<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member's array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
+<p>The function returns <code>EINA_TRUE</code> on success, and <code>EINA_FALSE</code> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member's array using the previously defined <code>member_size</code>. If the position does not exist, the function fails.</p>
<pre class="prettyprint">
/* Replacing the member at position 3 */
ch = 'd';
</li>
<li>
-<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
-<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
+<p>To sort an inline array, use the <code>eina_inarray_sort()</code> function, which applies a quick sorting algorithm to the inline array:</p>
+<ul><li>The first parameter is a pointer to the array returned by the <code>eina_inarray_new()</code> function.</li>
+<li>The last parameter is the <code>Eina_Compare_Cb</code> callback comparison function, which compares data1 and data2.
<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
<pre class="prettyprint">
static int
<p>To access inline array data:</p>
<ul>
<li>
-<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
+<p>To search a member in an inline array, use the <code>eina_inarray_search()</code> function that runs a linear walk looking for the given data:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
<li>The second parameter is the data used by the callback function to run the comparison.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
-<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<li>The last parameter is the <code>Eina_Compare_Cb</code> callback comparison function, which compares data1 and data2.
+<p>data1 is the value contained in the inline array and data2 is the data you pass to the <code>eina_inarray_search()</code> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
<p>The function returns the member index, or -1 if not found.</p>
<pre class="prettyprint">
Eina_Compare_Cb
</pre>
<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
+<p>The <code>eina_inarray_search_sorted()</code> function does exactly the same as <code>eina_inarray_search()</code>, but uses a binary search for the given data.</p>
</li>
<li>
-<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
+<p>To get the number of elements in an inline array, use the <code>eina_inarray_count()</code>. The first parameter is a pointer to the array returned by the <code>eina_inarray_new()</code> function. The function returns an unsigned <code>int</code>, the number of elements.</p>
<pre class="prettyprint">
printf("Inline array of integers with %d elements:\n", eina_inarray_count(iarr));
</pre>
<li>To iterate through an inline array, you can use various methods:
<ul>
-<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
+<li><p>You can use the iterator macros for the inline arrays: <code>FOREACH</code> and <code>REVERSE_FOREACH</code>.</p></li>
<li>
-<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
+<p>To run a linear walk over an array of elements, use the <code>EINA_INARRAY_FOREACH()</code> macro. The first parameter is a pointer to the array variable returned by <code>eina_inarray_new()</code>, and the second parameter is the variable into which the current value is put during the walk. The <code>EINA_INARRAY_REVERSE_FOREACH()</code> macro does the same thing but starts from the last element.</p>
<p>The following example illustrates the printing of each element and its pointer:</p>
<pre class="prettyprint">
printf("int: %d(pointer: %p)\n", *b, b);
</pre>
</li>
-<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
-<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
+<li>To process the array data, use the <code>eina_inarray_foreach()</code> function, which invokes the given function on each element of the array with the given data:
+<ul><li>The first parameter is a pointer to the array variable returned by <code>eina_inarray_new()</code>.</li>
<li>The second parameter is the function to run on each element.
-<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The function must return <code>EINA_TRUE</code> as long as you want to continue iterating. By returning <code>EINA_FALSE</code>, you stop the iteration and make the <code>eina_inarray_foreach()</code> function return <code>EINA_FALSE</code>.</p>
<p>The data given to the function is the pointer to the member itself.</p></li>
<li>The last parameter is the data passed to the function called on each element.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
+<p>The <code>eina_inarray_foreach()</code> function returns <code>EINA_TRUE</code> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
<pre class="prettyprint">
static Eina_Bool
array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
</pre>
</li>
-<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
-<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>To remove some elements based on your own criteria, use the <code>eina_inarray_foreach_remove()</code> function, which walks through the array and, if the value matches in the callback function, removes the element:
+<ul><li>The first parameter is a pointer to the array returned by <code>eina_inarray_new()</code> function.</li>
<li>The second parameter is the callback function to run on each element.
-<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
+<p>The callback function returns <code>EINA_TRUE</code> if the value matches, or <code>EINA_FALSE</code> if it does not match.</p></li>
<li>The last parameter is the data passed to the callback function.</li></ul>
<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
<pre class="prettyprint">
<h2 id="hash" name="hash">Hash Tables</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of "buckets" where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
+<p>The <code>Eina_Hash</code> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <code>Eina_Hash</code>.</p>
+<p>The <code>Eina_Hash</code> is implemented using an array of "buckets" where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
-<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
+<p>To create the hash table, use the <code>eina_hash_new()</code> function:</p>
<ul>
<li>The first parameter is the function called when getting the size of the key.</li>
<li>The second parameter is the function called when comparing the keys.</li>
<li>The third parameter is the function called when getting the values.</li>
-<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
+<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <code>NULL</code> can be passed as the callback.</li>
<li>The last parameter is the size of the buckets.</li>
</ul>
-<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
+<p>When you create an <code>Eina_Hash</code> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <code>Eina_Hash</code> offers some predefined functions to create the following kinds of hash tables:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
+<li><code>eina_hash_string_djb2_new()</code> creates a new hash table using the djb2 algorithm for strings.</li>
+<li><code>eina_hash_string_superfast_new()</code> creates a new hash table for use with strings (better with long strings).</li>
+<li><code>eina_hash_string_small_new()</code> creates a new hash table for use with strings with a small bucket size.</li>
+<li><code>eina_hash_int32_new()</code> and <code>eina_hash_int64_new()</code> create a new hash table for use with 32-bit and 64-bit integers.</li>
+<li><code>eina_hash_pointer_new()</code> creates a new hash table for use with pointers.</li>
+<li><code>eina_hash_stringshared_new()</code> creates a new hash table for use with shared strings.</li>
</ul>
<p>All these predefined functions require only 1 parameter, which is the function to free the data you store in the hash table.</p>
-<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
+<p>The following example shows how to manage a small phone book using the <code>eina_hash_string_superfast_new()</code> function to create the hash table.</p>
<ol>
<li><p>Create the phone book structure and some static data:</p>
<pre class="prettyprint">
free(data);
}
</pre>
-<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
+<p>The free callback can be changed later using the <code>eina_hash_free_cb_set()</code> function. You need to pass the hash and the new callback function.</p>
</li>
<li><p>Create and destroy the hash table.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
+<p>The <code>eina_hash_free_buckets()</code> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <code>eina_hash_free()</code> is called, the space allocated for the hash is freed.</p>
<pre class="prettyprint">
int
free_data()
<p>To modify hash table content:</p>
<ul>
<li>
-<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
+<p>To add some data to a hash, use the <code>eina_hash_add()</code> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
<p>The following example shows how to add the initial data declared earlier to the hash:</p>
<pre class="prettyprint">
for (i = 0; _start_entries[i].name != NULL; i++)
eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
+<p>The <code>Eina_Hash</code> offers various ways to add elements to a hash, such as the <code>eina_hash_direct_add()</code> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <code>eina_stringshare</code> to avoid key data duplication.</p>
<pre class="prettyprint">
for (i = 0; _start_entries[i].name != NULL; i++) {
/* Allocating memory for the phone entry */
</pre>
</li>
<li>
-<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
+<p>To modify an entry, use <code>eina_hash_modify()</code> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
+<p>The <code>eina_hash_set()</code> function does the same work as <code>eina_hash_modify()</code>, but if the entry does not exist, the function creates a new one.</p>
<pre class="prettyprint">
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>
</li>
<li>
-<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>To change the key associated with the data without freeing and creating a new entry, use the <code>eina_hash_move()</code> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <code>EINA_TRUE</code>, if not, it returns <code>EINA_FALSE</code>.</p>
<pre class="prettyprint">
Eina_Bool res;
res = eina_hash_move(phone_book, "Philippe de Magalhães", "Filipe de Magalhães");
</li>
<li>
<p>To delete entries from a hash table:</p>
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
+<ul><li>Use the <code>eina_hash_del()</code> function to remove the entry identified by a key or data from the given hash table:
<pre class="prettyprint">
Eina_Bool r;
const char *entry_name = "Heitor Villa-Lobos";
r = eina_hash_del(phone_book, entry_name, NULL);
</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
+<li>Use the <code>eina_hash_del_by_key()</code> function to remove an entry based on the key:
<pre class="prettyprint">
r = eina_hash_del_by_key(phone_book, "Richard Georg Strauss");
</pre>
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
+<p>Use the <code>eina_hash_del_by_data()</code> function to remove an entry based on the data:</p>
<pre class="prettyprint">
r = eina_hash_del_by_data(phone_book, "+12 34 567-89101");
</pre>
<p>To find hash table elements and get data based on the key name:</p>
<ul>
<li>
-<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
+<p>To retrieve an entry based on its key, use the <code>eina_hash_find()</code> function by passing the hash and the key you are looking for:</p>
<pre class="prettyprint">
char *phone = NULL;
const char *entry_name = "Heitor Villa-Lobos";
</pre>
</li>
<li>
-<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
+<p>To get the number of entries in a hash, use the <code>eina_hash_population()</code> function. Pass the hash as the only argument.</p>
<pre class="prettyprint">
unsigned int nb_elm;
nb_elm = eina_hash_population(phone_book);
<li>To iterate through a hash table, you can use various methods:
<ul>
-<li>To iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
+<li>To iterate over the hash table, use the <code>eina_hash_foreach()</code> function:
<ul><li>The first parameter is the hash.</li>
<li>The second parameter is the callback function called on each iteration.
-<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
+<p>The callback function has to return an <code>Eina_Bool</code>, <code>EINA_TRUE</code> if the iteration has to continue and <code>EINA_FALSE</code> if the iteration has to stop.</p></li>
<li>The last parameter is the data passed to the callback function.</li></ul>
<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
<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;
printf("\n");
</pre>
</li>
-<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
+<li>To iterate over the keys, use the <code>eina_hash_iterator_key_new()</code> function:
<pre class="prettyprint">
/* Declaration of the Eina_Iterator */
Eina_Iterator *it;
</pre>
</li>
-<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
+<li>To iterate over the hash data, use the <code>eina_hash_iterator_data_new()</code> function the same way as <code>eina_hash_iterator_key_new()</code>:
<pre class="prettyprint">
/* Declaration of the Eina_Iterator */
Eina_Iterator *it;
eina_iterator_free(it);
</pre>
</li>
-<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
+<li>To iterate over a tuple composed of keys and data, use the <code>eina_hash_iterator_tuple_new()</code> function:
<pre class="prettyprint">
/* Declaration of the Eina_Iterator */
Eina_Iterator *tit;
<h2 id="list" name="list">Lists</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct's fields, similar to a self-made double-link list.</p>
-<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
+<p>The <code>Eina_List</code> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct's fields, similar to a self-made double-link list.</p>
+<p>In addition to the previous and next node and its data, the <code>Eina_List</code> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
-<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a "list": the list itself is a list where each node is a list as well.</p>
+<p>In an <code>Eina_List</code>, everything is a "list": the list itself is a list where each node is a list as well.</p>
-<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
+<p>Eina provides 2 list types: the classic list (<code>Eina_List</code>) and an inline list (<code>Eina_Inlist</code>).</p>
<h3>Creating and Destroying a List</h3>
-<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+<p>To use an <code>Eina_List</code>:</p>
-<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
+<ol><li>Declare the list with <code>NULL</code> as the default value:
<pre class="prettyprint">
int
list()
Eina_List *list = NULL;
</pre></li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
-<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
+<li>Call the <code>eina_list_append()</code> function with the list and the data you want to append as parameters.
+<p>The list must be a pointer to the first element of the list (or <code>NULL</code>). The function returns a pointer to the list.</p>
<pre class="prettyprint">
/* Creating the first element of the list */
list = eina_list_append(list, "watch");
<p>To add data to a list:</p>
<ul>
-<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
+<li>To add data at the end of the list, use the <code>eina_list_append()</code> function. To add data at the top of the list, use <code>eina_list_prepend()</code>. The functions work in the same way, only adding the data to different places.
<pre class="prettyprint">
list = eina_list_prepend(list, "set-top box");
</pre>
</li>
-<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
+<li>To insert data into the list after a specified data, use the <code>eina_list_append_relative()</code> function. As the last parameter, define the element after which the data is added.
<p>For example to append data after the "phone" element:</p>
<pre class="prettyprint">
list = eina_list_append_relative(list, "single-board computer", "phone");
</pre>
</li>
-<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
+<li>To add a new entry before a specified data, use the <code>eina_list_prepend_relative()</code> function. It is similar to the <code>eina_list_append_relative()</code> function.
<pre class="prettyprint">
list = eina_list_prepend_relative(list, "ultrabook", "ivi");
</pre>
</li>
-<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
+<li>To append a list node to a linked list after a specified member, use the <code>eina_list_append_relative_list()</code> function. To prepend a list node to a linked list before a specified member, use the <code>Eina_List * eina_list_prepend_relative_list()</code> function.
</li>
</ul>
</li>
-<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the "list" (node) as the first argument and the data to set as the second.
+<li>To set data in a list member, use the <code>eina_list_data_set()</code> function. Pass the "list" (node) as the first argument and the data to set as the second.
-<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
+<p>The following example also shows the usage of the <code>eina_list_last()</code> function, which returns the last element of an <code>Eina_List</code>.</p>
<pre class="prettyprint">
/* Setting new data for the last element */
</pre>
</li>
-<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
+<li id="remove_list">To remove a node from the list, use the <code>eina_list_remove()</code> function. This function removes the first instance of the specified data from the given list.
<pre class="prettyprint">
list = eina_list_remove(list, "ultrabook");
</pre>
-<p>You can also remove a "list" (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a 'list' (node) you want to delete.</p>
+<p>You can also remove a "list" (node) from a list using the <code>eina_list_remove_list()</code> function. Pass the list you want to delete an element from and a 'list' (node) you want to delete.</p>
<pre class="prettyprint">
Eina_List *app_list = NULL;
Eina_List *to_remove = NULL;
</pre>
</li>
-<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the "list" (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
+<li>To move elements in a list, you can use various function, such as <code>eina_list_promote_list()</code> that promotes an element to the top of the list or <code>eina_list_demote_list()</code> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the "list" (node) you want to move. Use the functions just like the <code>eina_list_remove_list()</code> function.
<pre class="prettyprint">
list = eina_list_promote_list(list, eina_list_data_find_list(list, "ivi"));
</pre>
</li>
-<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
+<li>To reverse all the elements of a list, use the <code>eina_list_reverse()</code> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <code>eina_list_reverse_clone()</code> function.
<pre class="prettyprint">
Eina_List *rev_copy;
rev_copy = eina_list_reverse_clone(app_list);
</pre>
</li>
-<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
+<li>To sort a list, use the <code>eina_list_sort()</code> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
<pre class="prettyprint">
int
sort_cb(const void *d1, const void *d2)
list = eina_list_sort(list, 0, sort_cb);
</pre>
</li>
-<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
+<li>To merge 2 list into 1, use the <code>eina_list_merge()</code> function. The <code>eina_list_sorted_merge()</code> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
<pre class="prettyprint">
int
sort_cb(void *d1, void *d2)
newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
</pre>
</li>
-<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
+<li>To split a list, use the <code>eina_list_split_list()</code> function:
<ul><li>The first parameter is the list to split.</li>
<li>The second parameter is the "list" (element) after which the list is split.</li>
<li>The last parameter is the head of the second list.</li></ul>
list = eina_list_split_list(list, l, &other_list);
</pre>
</li>
-<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
+<li>To copy a list, use the <code>eina_list_clone()</code> function. The function copies all the elements in the list in the exact same order.
<pre class="prettyprint">
Eina_List *app_list_copy;
<h3>Accessing List Data</h3>
<p>To access list data:</p>
<ul>
-<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
+<li>To find some data on your list, use the <code>eina_list_data_find()</code> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <code>NULL</code> otherwise.
+<p>The <code>eina_list_data_find()</code> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <code>NULL</code> is returned. The function only compares pointers, which is why using <code>Eina_Stringshare</code> is very useful with lists, because it always returns the same pointer for the same string.</p>
<pre class="prettyprint">
Eina_List *app_list = NULL;
const char *res_str;
</pre>
<p>The above example returns "Data is present".</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
-<p>You can access the data or a "list" (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the "n" element and the second a pointer to the "list". To access the data of the third element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+<p>The <code>eina_list_data_find_list()</code> function does the same thing as <code>eina_list_data_find()</code>, but returns an <code>Eina_List</code>. For an example, see the <a href="#remove_list"><code>eina_list_remove_list()</code> function</a>.</p>
+<p>You can access the data or a "list" (node) of an <code>Eina_List</code> using the <code>eina_list_nth()</code> and <code>eina_list_nth_list()</code> functions. The first one returns a pointer to the data of the "n" element and the second a pointer to the "list". To access the data of the third element of an <code>Eina_List</code>:</p>
<pre class="prettyprint">
const char *res;
Eina_List *res_lst;
res_lst = eina_list_nth_list(app_list, 2);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string "calaos". The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing "calaos".</p>
+<p>The <code>res</code> variable contains the pointer to the string "calaos". The <code>res_lst</code> variable is the list containing "calaos".</p>
</li>
<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
<ul>
-<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
+<li>To search in an unsorted list, use the <code>eina_list_search_unsorted()</code> function:
<ul><li>The first parameter is the list.</li>
<li>The second parameter is a callback function for comparison.</li>
<li>The last parameter is the data you are looking for.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an "Eina_List".</p>
+<p>The <code>eina_list_search_unsorted_list()</code> function does the same but returns an "Eina_List".</p>
-<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
+<p>The following example shows 2 searches using both the <code>eina_list_search_unsorted()</code> and <code>eina_list_search_unsorted_list()</code> functions:</p>
<pre class="prettyprint">
int
search_list()
</pre>
</li>
-<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
+<li>To search in sorted lists, use the <code>eina_list_search_sorted_list()</code> and <code>eina_list_search_sorted()</code> functions. They work similarly as the <code>eina_list_search_unsorted()</code> function.
</li>
</ul>
</li>
-<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
+<li>To get data from a list element, use the <code>eina_list_data_get()</code> function. The function returns the data contained in the given list.
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
+<p>The following example uses the <code>eina_list_next()</code> function to move through the list in a statement.</p>
<pre class="prettyprint">
int
list_data_set()
</pre>
</li>
-<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
+<li>To move in a list, use the <code>eina_list_last()</code>, <code>eina_list_next()</code>, or <code>eina_list_prev()</code> functions to move to the last, next, or previous element in the list.
<p>The following example scrolls backwards starting from the end of the list:</p>
<pre class="prettyprint">
for (l = eina_list_last(list); l; l = eina_list_prev(l))
</li>
-<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
+<li>To count the list elements, use the <code>eina_list_count()</code> function. The function returns the number of items in a list.
<pre class="prettyprint">
printf("List size: %d\n", eina_list_count(list));
</pre>
</li>
<li>To iterate through an array, you can use various iterators:
<ul>
-<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
+<li>To iterate over a list from the beginning to the end, use the <code>EINA_LIST_FOREACH</code> macro:
<ul><li>The first parameter is the list to iterate.</li>
-<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current "List" (node).</li>
+<li>The second parameter is an <code>Eina_List *</code> to hold the current "List" (node).</li>
<li>The last parameter receives the current data during the run.</li></ul>
<p>The following example prints the data of each "List" (node) of the list:</p>
eina_list_free(list);
</pre>
</li>
-<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
+<li>To iterate from the last element to the first, use the <code>EINA_LIST_REVERSE_FOREACH</code> macro. It works similarly as <code>EINA_LIST_FOREACH()</code>.
</li>
-<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next "List" (node), so you can safely remove the current "List" (node) and continue the iteration.
+<li>To iterate over a list from the beginning to the end, you can also use the <code>EINA_LIST_FOREACH_SAFE</code> macro. It is called safe, because it stores the next "List" (node), so you can safely remove the current "List" (node) and continue the iteration.
<pre class="prettyprint">
Eina_List *list;
Eina_List *l;
</li>
-<li>To remove each list element while having access to the node's data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
+<li>To remove each list element while having access to the node's data, use the <code>EINA_LIST_FREE</code> macro. Pass the list and a pointer to hold the current data.
<pre class="prettyprint">
Eina_List *list;
char *data;
</ul>
<h3 id="inlist" name="inlist">Using an Inline List</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
+<p>The <code>Eina_Inlist</code> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <code>Eina_Inlist</code> has its own purpose, but if you do not understand what the purpose is, use the regular <code>Eina_List</code> instead.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
+<p>The <code>Eina_Inlist</code> nodes can be part of a regular <code>Eina_List</code>, simply added with the <code>eina_list_append()</code> or <code>eina_list_prepend()</code> functions.</p>
<p>To use the inline list:</p>
<ol>
};
</pre>
-<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
+<p>The structure is composed of 2 integers, the real data, and the <code>EINA_INLIST</code> type which is composed of 3 pointers defining the inline list structure:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
+<li><code>Eina_Inlist * next</code>: next node</li>
+<li><code>Eina_Inlist * prev</code>: previous node</li>
+<li><code>Eina_Inlist * last</code>: last node</li>
</ul></li>
<li>
-<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
-<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.
-<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
-<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>.
-<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
+<p>To create the inlist nodes, allocate the memory and use the <code>eina_inlist_append()</code> function:</p>
+<ul><li>The first parameter is the existing list head or <code>NULL</code> to create a new list.
+<p>The following example passes <code>NULL</code> to create a new list.</p></li>
+<li>The second parameter is the new list node, and it must not be <code>NULL</code>.
+<p>You must use the <code>EINA_INLIST_GET()</code> macro to get the inlist object of the datastruct.</p></li></ul>
<pre class="prettyprint">
struct my_struct *d;
struct my_struct *cur;
</li>
<li>To add data to the inline list:
-<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
+<ul><li>Put data at the end of the inline list with the <code>eina_inlist_prepend()</code> function:
<pre class="prettyprint">
d = malloc(sizeof(*d));
d->a = 3;
</pre>
</li>
-<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions.
-<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
+<li>Add a node before or after a given node with the <code>eina_inlist_prepend_relative()</code> and <code>eina_inlist_append_relative()</code> functions.
+<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <code>Eina_List</code>, everything is a list, so the last parameter is an <code>Eina_Inlist</code> typed variable.</p>
<pre class="prettyprint">
d = malloc(sizeof(*d));
d->a = 4;
<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
-<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
+<li>When the inline list is no longer needed, destroy it by looping over the list to free each <code>EINA_INLIST</code> structure and the data using allocated memory. Use the <code>eina_inlist_remove()</code> function on each node.
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_CONTAINER_GET()</span> macro returns the container object of an inlist (the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struct</span>), and the list element is removed and the allocated memory of the container "object" is freed.</p>
+<p>In the following example, the <code>EINA_INLIST_CONTAINER_GET()</code> macro returns the container object of an inlist (the <code>EINA_INLIST</code> of <code>my_struct</code>), and the list element is removed and the allocated memory of the container "object" is freed.</p>
<pre class="prettyprint">
while (list) {
<h2 id="generic" name="generic">Generic Value</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
+<p>The <code>Eina_Value</code> object provides generic data storage and access, allowing you to store what you want in one single type of <code>Eina_Value</code>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <code>Eina_Value</code> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
+<p>The <code>Eina_Value</code> can handle the following types:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: 'struct timeval'</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
+<li><code>EINA_VALUE_TYPE_UCHAR</code>: unsigned char</li>
+<li><code>EINA_VALUE_TYPE_USHORT</code>: unsigned short</li>
+<li><code>EINA_VALUE_TYPE_UINT</code>: unsigned int</li>
+<li><code>EINA_VALUE_TYPE_ULONG</code>: unsigned long</li>
+<li><code>EINA_VALUE_TYPE_TIMESTAMP</code>: unsigned long used for timestamps</li>
+<li><code>EINA_VALUE_TYPE_UINT64</code>: unsigned integer of 64 bits</li>
+<li><code>EINA_VALUE_TYPE_CHAR</code>: char</li>
+<li><code>EINA_VALUE_TYPE_SHORT</code>: short</li>
+<li><code>EINA_VALUE_TYPE_INT</code>: int</li>
+<li><code>EINA_VALUE_TYPE_LONG</code>: long</li>
+<li><code>EINA_VALUE_TYPE_INT64</code>: integer of 64 bits</li>
+<li><code>EINA_VALUE_TYPE_FLOAT</code>: float</li>
+<li><code>EINA_VALUE_TYPE_DOUBLE</code>: double</li>
+<li><code>EINA_VALUE_TYPE_STRINGSHARE</code>: stringshared string</li>
+<li><code>EINA_VALUE_TYPE_STRING</code>: string</li>
+<li><code>EINA_VALUE_TYPE_ARRAY</code>: array</li>
+<li><code>EINA_VALUE_TYPE_LIST</code>: list</li>
+<li><code>EINA_VALUE_TYPE_HASH</code>: hash</li>
+<li><code>EINA_VALUE_TYPE_TIMEVAL</code>: 'struct timeval'</li>
+<li><code>EINA_VALUE_TYPE_BLOB</code>: blob of bytes</li>
+<li><code>EINA_VALUE_TYPE_STRUCT</code>: struct</li>
</ul>
</pre>
</li>
-<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
+<li>To set up an <code>Eina_Value</code> for an integer, use the <code>eina_value_setup()</code> function. The first argument is the <code>Eina_Value</code> and the second is the type.
<pre class="prettyprint">
eina_value_setup(&v, EINA_VALUE_TYPE_INT);
</pre>
</ol>
<p>To manage the generic value:</p>
<ul>
-<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
+<li>To set an integer, use the <code>eina_value_set()</code> function:
<pre class="prettyprint">
eina_value_set(&v, 123);
</pre>
</li>
-<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
+<li>To get the value, use the <code>eina_value_get()</code> function. Pass the <code>Eina_Value</code> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <code>Eina_Value</code>).
<pre class="prettyprint">
eina_value_get(&v, &i);
printf("v=%d\n", i);
<p>The above example prints "v=123".</p>
</li>
-<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
+<li>To store an <code>Eina_List</code>, use the <code>Eina_Value</code> that corresponds to the <code>EINA_VALUE_TYPE_LIST</code> type.
</li>
-<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the "object" value, and the second one is the type (how to manage the stored list members).
+<li>To create an <code>Eina_Value_List</code>, use the <code>eina_value_list_setup()</code> function. The function initializes a generic value storage of the list type. The first parameter is the "object" value, and the second one is the type (how to manage the stored list members).
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li><a href="tools_n.htm">Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Ecore Animations</h1>
-<p>Ecore provides an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> facility for animations. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop. To create an Ecore animation, you have to determine the duration of the animation and define a callback function that performs the animation with that duration.</p>
+<p>Ecore provides an <code>Ecore_Animator</code> facility for animations. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop. To create an Ecore animation, you have to determine the duration of the animation and define a callback function that performs the animation with that duration.</p>
-<p>To use Ecore animators, include the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span> header file in the application. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span> header file in the application.</p>
+<p>To use Ecore animators, include the <code><Ecore.h></code> header file in the application. This file is included by default if you are already using the <code><Elementary.h></code> header file in the application.</p>
<p>The following example illustrates a basic Ecore animation:</p>
<ul>
-<li>You can declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> variable to allow you to control the running of the animation with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span>, and <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> functions.</li>
-<li>You need a callback, which performs the actual animation. In this case, the <span style="font-family: Courier New,Courier,monospace;">_do_animation()</span> callback moves the <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> object linearly from position (0,0) to position (100,100).</li>
+<li>You can declare an <code>Ecore_Animator</code> variable to allow you to control the running of the animation with the <code>ecore_animator_freeze()</code>, <code>ecore_animator_thaw()</code>, and <code>ecore_animator_del()</code> functions.</li>
+<li>You need a callback, which performs the actual animation. In this case, the <code>_do_animation()</code> callback moves the <code>my_evas_object</code> object linearly from position (0,0) to position (100,100).</li>
<li>You create the animator in the main loop, defining the animation duration as 2 seconds.</li>
-<li>If the callback returns with the <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> value, the animation is not automatically deleted. To delete it when no longer needed, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> variable.</li>
+<li>If the callback returns with the <code>ECORE_CALLBACK_RENEW</code> value, the animation is not automatically deleted. To delete it when no longer needed, use the <code>ecore_animator_del()</code> function with the <code>Ecore_Animator</code> variable.</li>
</ul>
<pre class="prettyprint">
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>
<h2 id="finite" name="finite">Starting a Finite Animation</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
+<p>The <code>ecore_animator_timeline_add()</code> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
<ul>
<li><p>The first parameter is the duration of the animation in seconds. The duration is not affected by the frame rate.</p></li>
<li><p>The second parameter is the callback function that performs the actual animation.</p></li>
<li><p>The third parameter is the data passed to the callback function. This is usually the Evas object to animate.</p></li>
</ul>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to control the animation execution.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The function returns a pointer to an <code>Ecore_Animator</code> object, which you can use to control the animation execution.
+</div>
+
<p>The following example performs a linear horizontal move of 500 pixels (from 0 to 500 on the X axis) in 8 seconds, while keeping the Y axis position unchanged:</p>
<pre class="prettyprint">
static Eina_Bool
/* Run the animation in 8 seconds */
ecore_animator_timeline_add(8, _my_animation, my_evas_object);
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and delete it automatically at any time. If the callback returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> (or <span style="font-family: Courier New,Courier,monospace;">0</span>), the animator is automatically deleted from the list of pointers to free up the allocated memory.
-<p>The callback function receives a timeline position (second parameter) with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</p></td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The callback function can return <code>ECORE_CALLBACK_RENEW</code> to keep the animator running, or <code>ECORE_CALLBACK_CANCEL</code> to stop the animator and delete it automatically at any time. If the callback returns <code>ECORE_CALLBACK_CANCEL</code> (or <code>0</code>), the animator is automatically deleted from the list of pointers to free up the allocated memory.
+<p>The callback function receives a timeline position (second parameter) with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</p>
+</div>
<h2 id="infinite" name="infinite">Starting an Infinite Animation</h2>
-<p>To create an animation that runs for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function:</p>
+<p>To create an animation that runs for an unspecified amount of time, use the <code>ecore_animator_add()</code> function:</p>
<ul>
<li>The first parameter is the callback function that performs the actual animation.</li>
<li>The second parameter is the data passed to the callback function. This is usually the Evas object to animate.</li>
</ul>
-<p>This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except that its interval is based on the frame rate. Using the frame rate as a basis benefits performance, especially in case of multiple animations, since it enables you to use a different timer for each callback function.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to control the animation execution.</td>
-</tr>
-</tbody>
-</table>
+<p>This function works the same way as the <code>ecore_animation_timeline_add()</code> function, except that its interval is based on the frame rate. Using the frame rate as a basis benefits performance, especially in case of multiple animations, since it enables you to use a different timer for each callback function.</p>
+<div class="note">
+ <strong>Note</strong>
+ The function returns a pointer to an <code>Ecore_Animator</code> object, which you can use to control the animation execution.
+</div>
<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits the edge of the screen, it changes direction.</p>
ecore_animator_del(anim);
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> to keep the animator running, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> or <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> to stop the animator and delete it automatically at any time.
-<p>If the callback returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, you must delete the animator manually when it is no longer needed. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function, which frees the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object by deleting the pointer.</p>
-</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The callback function can return <code>ECORE_CALLBACK_RENEW</code> or <code>EINA_TRUE</code> to keep the animator running, or <code>ECORE_CALLBACK_CANCEL</code> or <code>EINA_FALSE</code> to stop the animator and delete it automatically at any time.
+<p>If the callback returns <code>ECORE_CALLBACK_RENEW</code> or <code>EINA_TRUE</code>, you must delete the animator manually when it is no longer needed. Use the <code>ecore_animator_del()</code> function, which frees the memory allocated to the <code>Ecore_Animator</code> object by deleting the pointer.</p>
+</div>
<h2 id="chain" name="chain">Starting a Delayed Animation</h2>
<p>Delaying an animation can be useful if, for example, you want to start an animation only after another one has finished.</p>
-<p>To play 2 animations in a sequence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function to set a delay for the second animation that is equal to the duration of the first animation:</p>
+<p>To play 2 animations in a sequence, use the <code>ecore_timer_add()</code> function to set a delay for the second animation that is equal to the duration of the first animation:</p>
<pre class="prettyprint">
static int runtime = 5;
<p>You can pause and resume Ecore animations:</p>
<ul>
-<li>To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> variable as a parameter.
+<li>To pause a running animation, use the <code>ecore_animator_freeze()</code> function with the <code>Ecore_Animator</code> variable as a parameter.
</li>
<li>
-<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> variable as a parameter.</p>
+<p>To resume the paused animation, use the <code>ecore_animator_thaw()</code> function with the <code>Ecore_Animator</code> variable as a parameter.</p>
</li>
</ul>
<h2 id="position" name="position">Using Position Mappings</h2>
<p>Position mappings allow you to create various non-linear changes in your animation to implement the evolution of a given position in accordance with the desired effects. You can apply dynamic changes to any attribute of the Evas object, such as position, width, height, scale, angle, and color.</p>
-<p>When you use the animation callback function with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function, the animator passes to the callback a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running. To create a non-linear animation, you can map the position value to one of several curves and mappings using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map()</span> function:</p>
+<p>When you use the animation callback function with the <code>ecore_animator_timeline_add()</code> function, the animator passes to the callback a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running. To create a non-linear animation, you can map the position value to one of several curves and mappings using the <code>ecore_animator_pos_map()</code> function:</p>
<ul>
<li>The first parameter is the current position value, which ranges from 0.0 to 1.0.</li>
-<li>The second parameter is the position mapping you want to apply, defined with the <
span style="font-family: Courier New,Courier,monospace;">_Ecore_Pos_Map</span> enumerator (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">wearable</a> applications).</li>
-<li>The third (<span style="font-family: Courier New,Courier,monospace;">v1</span>) and fourth (<span style="font-family: Courier New,Courier,monospace;">v2</span>) parameters are specific to the chosen position mapping, and provide additional configuration for it.</li>
+<li>The second parameter is the position mapping you want to apply, defined with the <
code>_Ecore_Pos_Map</code> enumerator (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html#ga2db0d0f0f3973829c7f700e5af3e041c">wearable</a> applications).</li>
+<li>The third (<code>v1</code>) and fourth (<code>v2</code>) parameters are specific to the chosen position mapping, and provide additional configuration for it.</li>
</ul>
-<p>The following table lists the supported position mappings, and describes how the third (<span style="font-family: Courier New,Courier,monospace;">v1</span>) and fourth (<span style="font-family: Courier New,Courier,monospace;">v2</span>) parameters of the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map()</span> function are used with each mapping.</p>
+<p>The following table lists the supported position mappings, and describes how the third (<code>v1</code>) and fourth (<code>v2</code>) parameters of the <code>ecore_animator_pos_map()</code> function are used with each mapping.</p>
+<p align="center" class="Table"><strong>Table: Position mappings</strong></p>
<table id="position_mappings">
-<caption>Table: Position mappings</caption>
<tbody>
<tr>
<th>Position mapping type
- <p>(<span style="font-family: Courier New,Courier,monospace;">_Ecore_Pos_Map</span> enumerator value)</p></th>
+ <p>(<code>_Ecore_Pos_Map</code> enumerator value)</p></th>
<th>Description</th>
<th>Parameters</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>
+ <td><code>ECORE_POS_MAP_LINEAR</code>
</td>
<td>Linear 0.0 - 1.0
<p><img alt="Position mappings" src="../../../images/pos_map_linear.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Not used
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <td><code>v1</code>: Not used
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>
+ <td><code>ECORE_POS_MAP_ACCELERATE</code>
</td>
<td>Start slow, then speed up
<p><img alt="Position mappings" src="../../../images/pos_map_accelerate.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Not used
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p></td>
+ <td><code>v1</code>: Not used
+ <p><code>v2</code>: Not used</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>
+ <td><code>ECORE_POS_MAP_DECELERATE</code>
</td>
<td>Start fast, then slow down
<p><img alt="Position mappings" src="../../../images/pos_map_decelerate.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Not used
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <td><code>v1</code>: Not used
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>
+ <td><code>ECORE_POS_MAP_SINUSOIDAL</code>
</td>
<td>Start slow, speed up, then slow down at the end
<p><img alt="Position mappings" src="../../../images/pos_map_sinusoidal.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Not used
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <td><code>v1</code>: Not used
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span></td>
- <td>Start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>
+ <td><code>ECORE_POS_MAP_BOUNCE</code></td>
+ <td>Start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <code>v2</code> times, with a decay factor of <code>v1</code>
<p><img alt="Position mappings" src="../../../images/pos_map_bounce.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Bounce decay factor
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Number of bounces</p>
+ <td><code>v1</code>: Bounce decay factor
+ <p><code>v2</code>: Number of bounces</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span></td>
- <td>Start at 0.0, then wobble like a spring until rest position at 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>
+ <td><code>ECORE_POS_MAP_SPRING</code></td>
+ <td>Start at 0.0, then wobble like a spring until rest position at 1.0, and wobble <code>v2</code> times, with a decay factor of <code>v1</code>
<p><img alt="Position mappings" src="../../../images/pos_map_spring.png" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Wobble decay factor
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Number of wobbles</p>
+ <td><code>v1</code>: Wobble decay factor
+ <p><code>v2</code>: Number of wobbles</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span></td>
+ <td><code>ECORE_POS_MAP_ACCELERATE_FACTOR</code></td>
<td>Start slow, then speed up</td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Power factor:
+ <td><code>v1</code>: Power factor:
<ul>
<li>0.0 is linear</li>
<li>1.0 is standard acceleration</li>
<li>2.0 is a much more pronounced acceleration (squared)</li>
<li>4.0 is cubed</li>
</ul>
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span></td>
+ <td><code>ECORE_POS_MAP_DECELERATE_FACTOR</code></td>
<td>Start fast, then slow down</td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Power factor:
+ <td><code>v1</code>: Power factor:
<ul>
<li>0.0 is linear</li>
<li>1.0 is standard deceleration</li>
<li>2.0 is a much more pronounced deceleration (squared)</li>
<li>3.0 is cubed</li>
</ul>
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span></td>
+ <td><code>ECORE_POS_MAP_SINUSOIDAL_FACTOR</code></td>
<td>Start slow, speed up, then slow down at the end</td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Power factor:
+ <td><code>v1</code>: Power factor:
<ul>
<li>0.0 is linear</li>
<li>1.0 is a standard sinusoidal</li>
<li>2.1 is a much more pronounced sinusoidal (squared)</li>
<li>3.0 is cubed</li>
</ul>
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Not used</p>
+ <p><code>v2</code>: Not used</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span></td>
- <td>Start at gradient * <span style="font-family: Courier New,Courier,monospace;">v1</span>, interpolated using the power of the <span style="font-family: Courier New,Courier,monospace;">v2</span> curve</td>
- <td><span style="font-family: Courier New,Courier,monospace;">v1</span>: Multiplication factor for the gradient
- <p><span style="font-family: Courier New,Courier,monospace;">v2</span>: Curve value</p>
+ <td><code>ECORE_POS_MAP_DIVISOR_INTERP</code></td>
+ <td>Start at gradient * <code>v1</code>, interpolated using the power of the <code>v2</code> curve</td>
+ <td><code>v1</code>: Multiplication factor for the gradient
+ <p><code>v2</code>: Curve value</p>
</td>
</tr>
</tbody>
</table>
-<p>The following example performs an animation where the <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> object is moved 600 pixels downwards, bouncing back 7 times over 5 seconds, each bounce diminishing by a factor of 1.8:</p>
+<p>The following example performs an animation where the <code>my_evas_object</code> object is moved 600 pixels downwards, bouncing back 7 times over 5 seconds, each bounce diminishing by a factor of 1.8:</p>
<pre class="prettyprint">
static Eina_Bool
<h2 id="frame" name="frame">Using Timers</h2>
-<p>To use a timer, first define the timer source with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_set()</span> function. To determine the current timer source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
+<p>To use a timer, first define the timer source with the <code>ecore_animator_source_set()</code> function. To determine the current timer source, use the <code>ecore_animator_source_get()</code> function.</p>
<p>Tizen supports default and custom timer sources:</p>
<ul>
<li>
-<p>The default timer, used in most cases, is <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. It ticks every "frametime" seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every n<sup>th</sup> second, with the default being 1/30th of a second.</p>
+<p>The default timer, used in most cases, is <code>ECORE_ANIMATOR_SOURCE_TIMER</code>. It ticks every "frametime" seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every n<sup>th</sup> second, with the default being 1/30th of a second.</p>
-<p>To tweak the performance, change the frametime value using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set()</span> function with the new frametime as the parameter.</p>
+<p>To tweak the performance, change the frametime value using the <code>ecore_animator_frametime_set()</code> function with the new frametime as the parameter.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If the value is too small, it can cause performance issues, whereas a too high value can cause the animation to seem jerky.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ If the value is too small, it can cause performance issues, whereas a too high value can cause the animation to seem jerky.
+</div>
-<p>To get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
+<p>To get the current frametime value, use the <code>ecore_animator_frametime_get()</code> function.</p>
</li>
<li>
-<p>The custom timer is <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span>. It is used to match the animation to third-party events by allowing you to control when it ticks.</p>
+<p>The custom timer is <code>ECORE_ANIMATOR_SOURCE_CUSTOM</code>. It is used to match the animation to third-party events by allowing you to control when it ticks.</p>
<p>For example, the filling speed of a progress bar mainly depends on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires a custom timer.</p>
<p>To set up a custom timer:</p>
<ol>
<li>Set the time source to a custom timer.</li>
-<li>Trigger a tick over one frame using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_tick()</span> function.</li>
+<li>Trigger a tick over one frame using the <code>ecore_animator_custom_tick()</code> function.</li>
</ol>
<p>The following example creates a custom timer for a progress bar that is refreshed every time some progress occurs:</p>
}
</pre>
-<p>To drive the timer based on an input tick source (such as another application using the IPC or a vertical blanking interrupt), you can use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_source_tick_begin_callback_set()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_animator_custom_source_tick_end_callback_set()</span> functions. These functions define callbacks that are called when the tick starts and ends, allowing you to set the functions to start and stop the ticking source.</p>
+<p>To drive the timer based on an input tick source (such as another application using the IPC or a vertical blanking interrupt), you can use the <code>ecore_animator_custom_source_tick_begin_callback_set()</code> and <code>ecore_animator_custom_source_tick_end_callback_set()</code> functions. These functions define callbacks that are called when the tick starts and ends, allowing you to set the functions to start and stop the ticking source.</p>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Edje Animations</h1>
-<p>One of the greatest strengths of EFL and Edje is the ability to create animations. You can <a href="elementary_animation_n.htm">use predefined animations</a> through <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, or create your own animations with the Edje library.</p>
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. You can <a href="elementary_animation_n.htm">use predefined animations</a> through <code>Elm_Transit</code>, or create your own animations with the Edje library.</p>
<p>The Edje animations are based on a simple principle of moving from one state to another. To animate something with Edje:</p>
<ol>
<p>To start an animation, a program must receive a signal from a source. Edje handles many kinds of signals, including mouse events.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To show the signals used in a specific EDJ file, use the <span style="font-family: Courier New,Courier,monospace;">edje_player -p <filename>.edj</span> command.</td>
-</tr>
-</tbody>
-</table>
-
-<p id="create_animation">For example, to start an animation to change the color and position of a rectangle when the rectangle is clicked, the program must receive a <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span> signal. To create this animation:</p>
+<div class="note">
+ <strong>Note</strong>
+ To show the signals used in a specific EDJ file, use the <code>edje_player -p <filename>.edj</code> command.
+</div>
+
+<p id="create_animation">For example, to start an animation to change the color and position of a rectangle when the rectangle is clicked, the program must receive a <code>mouse,clicked,1</code> signal. To create this animation:</p>
<ol>
<li>Define a new state that changes the color and position of the rectangle:
</pre>
</li>
<li>Create a program to start when the rectangle is clicked.
-<p>The program changes the state of the rectangle part to <
span style="font-family: Courier New,Courier,monospace;">"color"</span>, and performs the change using a 2-second sinusoidal transition. For more information on transitions, see <a href="#Transitions">Using Program Transitions</a>.</p>
+<p>The program changes the state of the rectangle part to <
code>"color"</code>, and performs the change using a 2-second sinusoidal transition. For more information on transitions, see <a href="#Transitions">Using Program Transitions</a>.</p>
<pre class="prettyprint">
program
<p>To use signals to start animations, you need to both send a signal from your application and create a program that waits for that signal. For example:</p>
<ul>
<li>
-<p>Create a program that changes the state of the <span style="font-family: Courier New,Courier,monospace;">menu/side</span> target to <span style="font-family: Courier New,Courier,monospace;">"default" 1.0</span>. The program waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> source.</p>
+<p>Create a program that changes the state of the <code>menu/side</code> target to <code>"default" 1.0</code>. The program waits for the <code>hide,sidemenu</code> signal emitted by a <code>MenuButton</code> source.</p>
<pre class="prettyprint">
program
{
</pre>
</li>
<li>
-<p>Send the signal from the application using the <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit()</span> function, which emits a signal to an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application. The following code sends a <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal with a <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> source to the layout object:</p>
+<p>Send the signal from the application using the <code>edje_object_signal_emit()</code> function, which emits a signal to an <code>Evas_Object</code> part of the application. The following code sends a <code>hide,sidemenu</code> signal with a <code>MenuButton</code> source to the layout object:</p>
<pre class="prettyprint">
edje_object_signal_emit(layout, "hide,sidemenu", "MenuButton");
</pre>
-<p>If you use the Elementary library in the application, you can use the <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit()</span> function. It works the same way as the <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit()</span> function with the same parameters.</p>
+<p>If you use the Elementary library in the application, you can use the <code>elm_object_signal_emit()</code> function. It works the same way as the <code>edje_object_signal_emit()</code> function with the same parameters.</p>
</li>
</ul>
<p>The Edje programs are not designed only for state change animations. You can use the programs to perform other actions as well, such as stopping a program or emitting a signal:</p>
<ul>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action (the usual animation action) changes the state of the part specified by the <span style="font-family: Courier New,Courier,monospace;">target</span> property.</p>
+<p>The <code>STATE_SET</code> action (the usual animation action) changes the state of the part specified by the <code>target</code> property.</p>
-<p>In the following example, the state of the <span style="font-family: Courier New,Courier,monospace;">"image"</span> part changes to <span style="font-family: Courier New,Courier,monospace;">"default" 0.0</span>:</p>
+<p>In the following example, the state of the <code>"image"</code> part changes to <code>"default" 0.0</code>:</p>
<pre class="prettyprint">
program
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> action stops the program specified by the <span style="font-family: Courier New,Courier,monospace;">target</span> property.</p>
-<p>The following example stops the <span style="font-family: Courier New,Courier,monospace;">animate_loop</span> program, and runs when receiving the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal:</p>
+<p>The <code>ACTION_STOP</code> action stops the program specified by the <code>target</code> property.</p>
+<p>The following example stops the <code>animate_loop</code> program, and runs when receiving the <code>animate_stop</code> signal:</p>
<pre class="prettyprint">
program
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> action emits a signal that is used to communicate with the application directly from the theme.</p>
+<p>The <code>SIGNAL_EMIT</code> action emits a signal that is used to communicate with the application directly from the theme.</p>
-<p>The following example emits a <span style="font-family: Courier New,Courier,monospace;">"frame_move" "start"</span> signal when it receives the <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> signal from the <span style="font-family: Courier New,Courier,monospace;">video_mover</span> part. In other words, it sends the <span style="font-family: Courier New,Courier,monospace;">"frame_move" "start"</span> signal when the user presses the mouse in the <span style="font-family: Courier New,Courier,monospace;">video_mover</span> part.</p>
+<p>The following example emits a <code>"frame_move" "start"</code> signal when it receives the <code>mouse,down,*</code> signal from the <code>video_mover</code> part. In other words, it sends the <code>"frame_move" "start"</code> signal when the user presses the mouse in the <code>video_mover</code> part.</p>
<pre class="prettyprint">
program
<p>The following types of transitions can be added to the programs to create effects for the state changes:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: Makes a linear transition and takes the duration in seconds as a parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: Makes a sinusoidal transition and takes the duration in seconds as a parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: Makes an accelerated transition and takes the duration in seconds as a parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: Makes a decelerated transition and takes the duration in seconds as a parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: Makes an accelerated transition and takes the duration and the factor as a parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: Makes a decelerated transition and takes the duration and the factor as a parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: Makes a sinusoidal transition and takes the duration and the factor as a parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: Makes an interpolated transition and takes 3 parameters:
+<li><code>LIN</code> or <code>LINEAR</code>: Makes a linear transition and takes the duration in seconds as a parameter</li>
+<li><code>SIN</code> or <code>SINUSOIDAL</code>: Makes a sinusoidal transition and takes the duration in seconds as a parameter</li>
+<li><code>ACCEL</code> or <code>ACCELERATE</code>: Makes an accelerated transition and takes the duration in seconds as a parameter</li>
+<li><code>DECEL</code> or <code>DECELERATE</code>: Makes a decelerated transition and takes the duration in seconds as a parameter</li>
+<li><code>ACCEL_FAC</code> or <code>ACCELERATE_FACTOR</code>: Makes an accelerated transition and takes the duration and the factor as a parameters</li>
+<li><code>DECEL_FAC</code> or <code>DECELERATE_FACTOR</code>: Makes a decelerated transition and takes the duration and the factor as a parameters</li>
+<li><code>SIN_FAC</code> or <code>SINUSOIDAL_FACTOR</code>: Makes a sinusoidal transition and takes the duration and the factor as a parameters</li>
+<li><code>DIVIS</code> or <code>DIVISOR_INTERP</code>: Makes an interpolated transition and takes 3 parameters:
<ul>
<li>Duration</li>
<li>Initial gradient start (for example, 0.0 is horizontal, 1.0 is diagonal (linear), and 2.0 is twice the gradient of linear)</li>
<li>Integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 is equivalent to linear interpolation. Note that DIVIS can exceed 1.0.</li>
</ul>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: Makes a bounce transition and takes 3 parameters:
+<li><code>BOUNCE</code>: Makes a bounce transition and takes 3 parameters:
<ul>
<li>Duration</li>
<li>Bounce decay, with 0.0 giving a linear decay per bounce, and higher values giving more decay</li>
<li>Number of bounces (rounded down to the nearest integer value)</li>
</ul>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: Makes a spring transition and takes 3 parameters:
+<li><code>SPRING</code>: Makes a spring transition and takes 3 parameters:
<ul>
<li>Duration</li>
<li>Decay, with the level exceeding 1.0 on the outer swings</li>
<h2 id="Chaining" name="Chaining">Chaining Multiple Programs Together</h2>
<p>To perform multiple animations in a sequence, chain Edje programs together so that they are executed one after another.</p>
-<p>The following example uses the <a href="#create_animation">same rectangle as before</a>. The original program changed to the rectangle state to <span style="font-family: Courier New,Courier,monospace;">"color" 0.0</span>. This example adds a new program that returns the state to <span style="font-family: Courier New,Courier,monospace;">"default" 0.0</span> and chains the 2 programs together.</p>
+<p>The following example uses the <a href="#create_animation">same rectangle as before</a>. The original program changed to the rectangle state to <code>"color" 0.0</code>. This example adds a new program that returns the state to <code>"default" 0.0</code> and chains the 2 programs together.</p>
<p>To chain programs:</p>
<ol>
<li>
-<p>Define the first program block, and use the <span style="font-family: Courier New,Courier,monospace;">after</span> property to define the name of the program that must be run when the first program is finished:</p>
+<p>Define the first program block, and use the <code>after</code> property to define the name of the program that must be run when the first program is finished:</p>
<pre class="prettyprint">
program
transition: SIN 2;
<span class="highlight">after: "animation,state0";</span>
}
-
</pre>
</li>
<li>
-<p>Define the second program block that returns the rectangle to its original position and color using a bounce transition with a decay factor of 1.8 and 6 bounces. Since this program is only used in a chain at the end of the first program, it has no <span style="font-family: Courier New,Courier,monospace;">signal</span> or <span style="font-family: Courier New,Courier,monospace;">source</span> property.</p>
+<p>Define the second program block that returns the rectangle to its original position and color using a bounce transition with a decay factor of 1.8 and 6 bounces. Since this program is only used in a chain at the end of the first program, it has no <code>signal</code> or <code>source</code> property.</p>
<pre class="prettyprint">
program
</li>
</ol>
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Use Elementary animations only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language (the EDC files). If you want to code with the C language, use Elementary animations.</p>
-<p>Elementary animations are based on the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object, which stores all the information related to the transition effects to be used, the affected objects (you can perform transitions on 1 or more objects), and the animation details (such as the duration and number of repetitions). To use Elementary animations, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the object functions. After the transitions are registered, they are automatically managed: their callback functions are called for the set duration, and they are deleted upon completion.</p>
+<p>Elementary animations are based on the <code>Elm_Transit</code> object, which stores all the information related to the transition effects to be used, the affected objects (you can perform transitions on 1 or more objects), and the animation details (such as the duration and number of repetitions). To use Elementary animations, you must create an <code>Elm_Transit</code> object and define the desired transitions using the object functions. After the transitions are registered, they are automatically managed: their callback functions are called for the set duration, and they are deleted upon completion.</p>
-<p>To create a transition, build the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function, define an Evas object to be animated, and add transition type effects and properties. The created transit object starts playing as soon as the application enters the main loop.</p>
+<p>To create a transition, build the <code>Elm_Transit</code> object using the <code>elm_transit_add()</code> function, define an Evas object to be animated, and add transition type effects and properties. The created transit object starts playing as soon as the application enters the main loop.</p>
<pre class="prettyprint">
Elm_Transit *transit = elm_transit_add();
/* Define Evas object to be animated */
<p>To manage the objects on which the transition is performed:</p>
<ul>
-<li>To add your Evas objects to a transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the Evas object to animate.
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.
-<p>To animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
-</tr>
-</tbody>
-</table>
+<li>To add your Evas objects to a transition, use the <code>elm_transit_object_add()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the Evas object to animate.
+
+<div class="note">
+ <strong>Note</strong>
+ The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.
+<p>To animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p>
+</div>
</li>
-<li>To determine on which objects the transition is performed (which objects have been added to the transition), use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function to retrieve a list of objects.
+<li>To determine on which objects the transition is performed (which objects have been added to the transition), use the <code>elm_transit_objects_get()</code> function to retrieve a list of objects.
</li>
-<li>To remove objects from the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_remove()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the Evas object to remove.
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">After you have added at least 1 Evas object to your transition, the transition is automatically deleted when the object list becomes empty (either because the translation has been terminated or all objects have been deleted).
-<p>Otherwise, you have to delete the transition manually using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance while the transition is running, the transition stops.</p></td>
-</tr>
-</tbody>
-</table>
+<li>To remove objects from the transition, use the <code>elm_transit_object_remove()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the Evas object to remove.
+
+<div class="note">
+ <strong>Note</strong>
+ After you have added at least 1 Evas object to your transition, the transition is automatically deleted when the object list becomes empty (either because the translation has been terminated or all objects have been deleted).
+<p>Otherwise, you have to delete the transition manually using the <code>elm_transit_del()</code> function. If you delete the <code>Elm_Transit</code> instance while the transition is running, the transition stops.</p>
+</div>
</li>
</ul>
<p>To add images to a transition:</p>
<ol>
<li>Create an Eina list and add the paths of the images you want to animate to the list.</li>
-<li>Add the image list to the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function.</li>
+<li>Add the image list to the transition with the <code>elm_transit_effect_image_animation_add()</code> function.</li>
<li>Define the image transitions the same way as any other object transitions.</li>
</ol>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This list and its contents are deleted after the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object ends the transition effect.</td>
-</tr>
-</tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ This list and its contents are deleted after the <code>Elm_Transit</code> object ends the transition effect.
+</div>
<pre class="prettyprint">
char buf[PATH_MAX];
<h3 id="Animation_Duration" name="Animation_Duration">Duration</h3>
-<p>You must set the transition duration for the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object.</p>
+<p>You must set the transition duration for the <code>Elm_Transit</code> object.</p>
<p>To manage the duration:</p>
<ul>
-<li>To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the duration in seconds.
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The purpose of the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
-</tr>
-</tbody>
-</table>
+<li>To set the duration, use the <code>elm_transit_duration_set()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the duration in seconds.
+
+<div class="note">
+ <strong>Note</strong>
+ The purpose of the <code>Elm_Transit</code> object is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.
+</div>
<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
elm_transit_go(transit);
</pre>
</li>
-<li>To get the transition duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.
+<li>To get the transition duration, use the <code>elm_transit_duration_get()</code> function.
</li>
</ul>
<h3 id="Animation_Timeline" name="Animation_Timeline">Timeline</h3>
<p>To manage the timeline:</p>
<ul>
-<li>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function.
+<li>After you have defined all the properties that define your transition, start the transition with the <code>elm_transit_go()</code> function.
</li>
-<li>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused parameter of the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_set()</span> function to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>. You can resume the transition with the same function by setting the paused parameter to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>.</li>
-<li>To determine whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</li>
-<li>You can remain informed about the present transition flow and get the current frame with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function returns the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</li>
+<li>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused parameter of the <code>elm_transit_paused_set()</code> function to <code>EINA_TRUE</code>. You can resume the transition with the same function by setting the paused parameter to <code>EINA_FALSE</code>.</li>
+<li>To determine whether the transition is currently paused, use the <code>elm_transit_paused_get()</code> function.</li>
+<li>You can remain informed about the present transition flow and get the current frame with the <code>elm_transit_progress_value_get()</code> function. This function returns the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</li>
</ul>
<pre class="prettyprint">
elm_transit_go(transit);
<h3 id="Acceleration_Mode" name="Acceleration_Mode">Acceleration</h3>
-<p>You can control the acceleration (tween) mode of the animation. The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object supports a number of built-in interpolation methods, which provide different acceleration modes. By default, all interpolations are linear.</p>
+<p>You can control the acceleration (tween) mode of the animation. The <code>Elm_Transit</code> object supports a number of built-in interpolation methods, which provide different acceleration modes. By default, all interpolations are linear.</p>
<p>To manage the tween mode:</p>
<ul>
-<li>To change the tween mode, use the <
span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the tween mode of the transition, which is defined by the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Tween_Mode</span> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">wearable</a> applications).
+<li>To change the tween mode, use the <
code>elm_transit_tween_mode_set()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the tween mode of the transition, which is defined by the <code>Elm_Transit_Tween_Mode</code> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">wearable</a> applications).
<pre class="prettyprint">
elm_transit_tween_mode_set(transit, ELM_TRANSIT_TWEEN_MODE_LINEAR);
</pre>
</li>
-<li>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.
+<li>To get the current tween mode, use the <code>elm_transit_tween_mode_get()</code> function.
</li>
</ul>
<p>To manage the repeat property:</p>
<ul>
-<li>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the number of times the transition is repeated.
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> parameter is set to 0, the transition does not loop at all. If set to 1, the transition runs twice. If set to a negative value, the transition repeats forever.</td>
-</tr>
-</tbody>
-</table>
+<li>To set a transition to repeat, use the <code>elm_transit_repeat_times_set()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the number of times the transition is repeated.
+
+<div class="note">
+ <strong>Note</strong>
+ If the <code>repeat</code> parameter is set to 0, the transition does not loop at all. If set to 1, the transition runs twice. If set to a negative value, the transition repeats forever.
+</div>
+
<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
<pre class="prettyprint">
</pre>
</li>
<li>
-<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
+<p>To get the repeat value, use the <code>elm_transit_repeat_times_get()</code> function. The default value is 0.</p>
</li>
</ul>
<p>To manage the auto-reverse property:</p>
<ul>
-<li>To automatically reverse the transition once it finishes, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_set()</span> function. The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance and the second is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the function performs the same transition backwards as soon as the first transition is complete.
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">
- Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition runs back and forth until the repeat count is finished.
- <p>If both the auto-reverse and repeat properties are set, the total duration is: 2 * <duration> * <repeat>.</p>
-</td>
-</tr>
-</tbody>
-</table>
+<li>To automatically reverse the transition once it finishes, use the <code>elm_transit_auto_reverse_set()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the reverse state. If the reverse state is set to <code>EINA_TRUE</code>, the function performs the same transition backwards as soon as the first transition is complete.
+
+<div class="note">
+ <strong>Note</strong>
+ Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition runs back and forth until the repeat count is finished.
+<p>If both the auto-reverse and repeat properties are set, the total duration is: 2 * <duration> * <repeat>.</p>
+</div>
<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
</pre>
</li>
<li>
-<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
+<p>To determine whether the auto-reverse mode is enabled, use the <code>elm_transit_auto_reverse_get()</code> function.</p>
</li>
</ul>
<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation can be created based on the wrong information.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object provides several built-in transition definitions that are useful for the most common cases, so you do not have to code them from scratch. The following list defines how you can add different transition type effects to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance. To delete an added effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
+<p>The <code>Elm_Transit</code> object provides several built-in transition definitions that are useful for the most common cases, so you do not have to code them from scratch. The following list defines how you can add different transition type effects to the <code>Elm_Transit</code> instance. To delete an added effect, use the <code>elm_transit_effect_del()</code> function.</p>
<p>To add effects for different transition types:</p>
<ul>
<li>Translation
-<p>To perform a translation on an Evas object (move it from one position to another), use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_add()</span> function.</p>
+<p>To perform a translation on an Evas object (move it from one position to another), use the <code>elm_transit_effect_translation_add()</code> function.</p>
<p>The following example shows how to slide an Evas object (a rectangle) on a diagonal line from the top-left corner of the screen 280 pixels down and right. The transition uses a constant speed and happens in 1 second.</p>
</li>
<li>Color transition
-<p>Color transitions allow you to dynamically change the color of Evas objects using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_color_add()</span> function. You can also control the opacity of the color (the background of the object, not the object itself) through an alpha channel parameter.</p>
+<p>Color transitions allow you to dynamically change the color of Evas objects using the <code>elm_transit_effect_color_add()</code> function. You can also control the opacity of the color (the background of the object, not the object itself) through an alpha channel parameter.</p>
<p>The following example shows how to change a rectangle from red to blue in 3 seconds:</p>
</pre>
</li>
<li>Rotation
-<p>To implement a rotation transition on any Evas object, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_rotation_add()</span> function. The function defines the start and end angles of the rotation.</p>
+<p>To implement a rotation transition on any Evas object, use the <code>elm_transit_effect_rotation_add()</code> function. The function defines the start and end angles of the rotation.</p>
<p>If you apply a rotation on multiple objects, they individually mill around and do not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object, as shown in the following example:</p>
</li>
<li>Wipe effect
-<p>The wipe effect is designed to dynamically hide or show any element on the scene using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function.</p>
+<p>The wipe effect is designed to dynamically hide or show any element on the scene using the <code>elm_transit_effect_wipe_add()</code> function.</p>
<p>The following example shows how to make an object disappear progressively from left to right in 2 seconds:</p>
<pre class="prettyprint">
</pre>
</li>
<li>Zoom effect
-<p>To implement a zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_zoom_add()</span> function. The function defines the size of the object at the start and end of the animation. The start size is defined as the scale of the object, with the value 1 representing the initial scale of the object. The end size is defined based on the start size, so that the value 2 means that the object size (height and width) is doubled. </p>
+<p>To implement a zoom effect, use the <code>elm_transit_effect_zoom_add()</code> function. The function defines the size of the object at the start and end of the animation. The start size is defined as the scale of the object, with the value 1 representing the initial scale of the object. The end size is defined based on the start size, so that the value 2 means that the object size (height and width) is doubled. </p>
<p>The zoom effect does not change the width and height ratio of the object. To customize the zoom effect on the width and height attributes, use the resizing effect described below.</p>
<li>Resizing effect
-<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function. The function defines the width and height of the object at the start and end of the animation.</p>
+<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements using the <code>elm_transit_effect_resizing_add()</code> function. The function defines the width and height of the object at the start and end of the animation.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Do not use this function to hide an Evas object by setting one of the length attributes to zero. Use the wipe effect described above instead.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Do not use this function to hide an Evas object by setting one of the length attributes to zero. Use the wipe effect described above instead.
+</div>
<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
<p>The flip effect is a pseudo-3D effect where the first object in a pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
<p>This flip effect combines the target Evas objects in pairs in the order they are listed in the transit object list. If you have more than 2 objects, each even object in the list is paired with the following odd object so that the even objects are shown at the beginning of the animation, and the odd objects when the transition is complete.</p>
-<p>To implement a flip effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function.</p>
+<p>To implement a flip effect, use the <code>elm_transit_effect_flip_add()</code> function.</p>
-<p>The following example shows how to create a coin that flips indefinitely. The example uses images as Elementary UI components for demonstration purposes. If you want to <a href="#Use_Image">use the images directly as Evas objects</a>, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function.</p>
+<p>The following example shows how to create a coin that flips indefinitely. The example uses images as Elementary UI components for demonstration purposes. If you want to <a href="#Use_Image">use the images directly as Evas objects</a>, use the <code>elm_transit_effect_image_animation_add()</code> function.</p>
<pre class="prettyprint">
/* Coin head image */
elm_transit_go(transit);
</pre>
-<p class="figure">Figure: Coin flip</p>
+<p align="center"><strong>Figure: Coin flip</strong></p>
<p align="center"><img alt="Coin flip" src="../../../images/coin_flip_effect.png" /></p>
</li>
<li>Resizable flip effect
<p>In the flip example above, 2 objects of the same size are used. You can also flip objects with different size attributes, such as buttons with dimensions that depend on their content (such as labels).</p>
-<p>If you decide to use the standard flip effect, the size of the object changes at the moment one object becomes completely hidden and the other one begins to show up. To interpolate the size attributes in the transition, use the resizable flip effect with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function. The function works the exact same way as the standard flip effect function.</p>
+<p>If you decide to use the standard flip effect, the size of the object changes at the moment one object becomes completely hidden and the other one begins to show up. To interpolate the size attributes in the transition, use the resizable flip effect with the <code>elm_transit_effect_resizable_flip_add()</code> function. The function works the exact same way as the standard flip effect function.</p>
</li>
<li>Fade effect
-<p>To transition from one Evas object to another one using a fading effect where the first object slowly disappears to let the second object take its place, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_fade_add()</span> function.</p>
+<p>To transition from one Evas object to another one using a fading effect where the first object slowly disappears to let the second object take its place, use the <code>elm_transit_effect_fade_add()</code> function.</p>
<p>The effect is applied to each pair of objects in the order in which they are listed in the transit object list. The first object in the pair is the before object and the second one is the after object.</p>
</li>
<li>Blend effect
-<p>To transition from one Evas object to another one using a blend effect where the first object becomes blurry before the second object appears, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_blend_add()</span> function.</p>
+<p>To transition from one Evas object to another one using a blend effect where the first object becomes blurry before the second object appears, use the <code>elm_transit_effect_blend_add()</code> function.</p>
<p>Building on the coin flip example above, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
<h2 id="Combine_Transitions" name="Combine_Transitions">Using Parallel Transitions</h2>
-<p>To use multiple transitions at the same time on the same objects, create the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define multiple transition types for it one after another.</p>
+<p>To use multiple transitions at the same time on the same objects, create the <code>Elm_Transit</code> object and define multiple transition types for it one after another.</p>
<p>Building on the coin flip example in the previous section above, the following example shows how to roll the coin on the ground using parallel rotation and translation effects:</p>
<h2 id="Animation_Chain" name="Animation_Chain">Chaining Multiple Transitions Together</h2>
-<p>To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes 2 <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects as parameters, and automatically takes care of the chaining: the second transition starts as soon as the first transition is finished.</p>
+<p>To create complex, chained animations without worrying about synchronization between the transitions, use the <code>elm_transit_chain_transit_add()</code> function. This function takes 2 <code>Elm_Transit</code> objects as parameters, and automatically takes care of the chaining: the second transition starts as soon as the first transition is finished.</p>
<p>The following example shows how to move a datetime component on a square trajectory:</p>
<p>To manage the transition chain:</p>
<ul>
<li>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries.
-<p>Alternatively, you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback for when a transition gets deleted. This way, you can recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
+<p>Alternatively, you can use the <code>elm_transit_del_cb_set()</code> function to define a callback for when a transition gets deleted. This way, you can recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
<p>The first parameter is the transition object. The second parameter is the callback function to run on transition delete. The third parameter is the data to pass to the callback function.</p>
<pre class="prettyprint">
elm_transit_del_cb_set(transit, on_transition_deleted, callback_data);
</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">You cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, building on the above example, you cannot loop back from the <span style="font-family: Courier New,Courier,monospace;">t4</span> transit object to the <span style="font-family: Courier New,Courier,monospace;">t1</span> transit object, because the <span style="font-family: Courier New,Courier,monospace;">t1</span> transit object is already deleted at the beginning before the <span style="font-family: Courier New,Courier,monospace;">t2</span> transit object is run:
-
+<div class="note">
+ <strong>Note</strong>
+ You cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, building on the above example, you cannot loop back from the <code>t4</code> transit object to the <code>t1</code> transit object, because the <code>t1</code> transit object is already deleted at the beginning before the <code>t2</code> transit object is run:
<pre class="prettyprint">
/* Impossible loop */
elm_transit_chain_transit_add(t4, t1);
</pre>
-</td>
-</tr>
-</tbody>
-</table>
-
+</div>
</li>
<li>
-<p>You can severe the chain relationship between 2 transit objects using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function with the transit objects as parameters:</p>
+<p>You can severe the chain relationship between 2 transit objects using the <code>elm_transit_chain_transit_del()</code> function with the transit objects as parameters:</p>
<pre class="prettyprint">
elm_transit_chain_transit_del(transit1, transit2);
</pre>
</li>
<li>
-<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
+<p>To get the current chain transit list, use the <code>elm_transit_chain_transits_get()</code> function.</p>
</li>
</ul>
<h2 id="Custom_Transition" name="Custom_Transition">Creating Custom Transitions</h2>
-<p>To implement the custom effects, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_add()</span> function. You can define custom transitions with any effects applied to some context data. The function relies on 3 callbacks that allow you to define every aspect of your transition from its creation to its deletion.</p>
+<p>To implement the custom effects, use the <code>elm_transit_effect_add()</code> function. You can define custom transitions with any effects applied to some context data. The function relies on 3 callbacks that allow you to define every aspect of your transition from its creation to its deletion.</p>
<p>To build a custom resizing animation:</p>
<ol>
<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;
</li>
<li>
-<p>Apply the custom transition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_add()</span> function:</p>
+<p>Apply the custom transition to the <code>Elm_Transit</code> object using the <code>elm_transit_effect_add()</code> function:</p>
<ul>
-<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object.</li>
+<li>The first parameter is the <code>Elm_Transit</code> object.</li>
<li>The second parameter is the custom effect operation callback.</li>
<li>The third parameter is the context of the new effect.</li>
<li>The fourth parameter is the delete callback.</li>
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Manipulating Graphical Objects</h1>
-<p>This topic introduces the basic manipulations available for the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> object. Most Evas objects can be manipulated using generic functions.</p>
+<p>This topic introduces the basic manipulations available for the <code>Evas_Object</code> object. Most Evas objects can be manipulated using generic functions.</p>
<p>The list of available basic actions does not depend on the object's type. Evas implements functionality that allows you to perform basic manipulation, such as showing, hiding, setting and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>
<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 */
</li>
<li>When you have an instance of the Evas object and the Evas canvas, you can create basic Evas objects as child objects for the parent Evas canvas.
-<p>The following example creates a background <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> with white color, a size of 480 x 800, a position on window at 0,0 by X and Y axis, and shows the object on the screen:</p>
+<p>The following example creates a background <code>Evas_Object</code> with white color, a size of 480 x 800, a position on window at 0,0 by X and Y axis, and shows the object on the screen:</p>
<pre class="prettyprint">
ad->bg = evas_object_rectangle_add(evas);
evas_object_show(ad->bg);
</pre>
-<p class="figure">Figure: White background object</p>
+<p align="center"><strong>Figure: White background object</strong></p>
<p align="center"><img alt="White background object" src="../../../images/empty_window.png" /></p>
</li>
<h2 id="clip" name="clip">Clipping an Object</h2>
-<p>You can set an Evas object as a clipper for another Evas object. To create the clipper object, create an Evas object, set its width and height parameters, and call the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_set()</span> function to set the object as a clipper for other Evas objects:</p>
+<p>You can set an Evas object as a clipper for another Evas object. To create the clipper object, create an Evas object, set its width and height parameters, and call the <code>evas_object_clip_set()</code> function to set the object as a clipper for other Evas objects:</p>
<pre class="prettyprint">
/* Create the image object */
evas_object_show(ad->clipper);
</pre>
-<p class="figure">Figure: Clipping an image</p>
+<p align="center"><strong>Figure: Clipping an image</strong></p>
<p align="center"><img alt="Clipping an image" src="../../../images/using_clipper.png" /></p>
-<p>To disable the clipping, you can unset the clipper object using the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_unset()</span> function. As a result, both the originally clipped object and the clipper object become fully visible, in the creation order. In the following example, the rectangle (the clipper object) is on top of the image object, because it was created after the image object.</p>
+<p>To disable the clipping, you can unset the clipper object using the <code>evas_object_clip_unset()</code> function. As a result, both the originally clipped object and the clipper object become fully visible, in the creation order. In the following example, the rectangle (the clipper object) is on top of the image object, because it was created after the image object.</p>
<pre class="prettyprint">
static void
}
</pre>
-<p class="figure">Figure: Disabling the clipping</p>
+<p align="center"><strong>Figure: Disabling the clipping</strong></p>
<p align="center"><img alt="Disabling the clipping" src="../../../images/using_clipper2.png" /></p>
<h2 id="color" name="color">Changing Colors and Visibility</h2>
<ul>
<li>
-<p>To change the color of a valid <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>, use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> function and pass a new color value:</p>
+<p>To change the color of a valid <code>Evas_Object</code>, use the <code>evas_object_color_set()</code> function and pass a new color value:</p>
<pre class="prettyprint">
static void
}
</pre>
-<p class="figure">Figure: Applying a color</p>
+<p align="center"><strong>Figure: Applying a color</strong></p>
<p align="center"><img alt="Applying a color" src="../../../images/applying_color.png" /></p>
</li>
<li>
}
</pre>
-<p class="figure">Figure: Changing the opacity</p>
+<p align="center"><strong>Figure: Changing the opacity</strong></p>
<p align="center"><img alt="Changing the opacity" src="../../../images/changing_opacity.png" /></p>
</li>
<li>
}
</pre>
-<p class="figure">Figure: Changing visibility</p>
+<p align="center"><strong>Figure: Changing visibility</strong></p>
<p align="center"><img alt=" Changing visibility" src="../../../images/applying_invisibility.png" /></p>
</li>
</ul>
<h2 id="ref" name="ref">Using Reference Counts</h2>
<p>Evas has a simple reference counting mechanism that is useful in scenarios where, for example, callbacks inside a code block possibly delete an object that is operated on afterwards outside the code block.</p>
-<p>To increment the reference count of an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function. If the reference count is greater than 0, the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function defers the deletion until all references are released. References cannot go below 0 and are limited to 2^32 - 1 for each object.</p>
+<p>To increment the reference count of an object, use the <code>evas_object_ref()</code> function. If the reference count is greater than 0, the <code>evas_object_del()</code> function defers the deletion until all references are released. References cannot go below 0 and are limited to 2^32 - 1 for each object.</p>
<pre class="prettyprint">
/* Create a green rectangle */
}
</pre>
-<p>In the above example, a green rectangle is used as padding and the clipper object calculates its X, Y coordinates based on the rectangle position. When the rectangle is created, its reference count is increased to 1 by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function. When the <span style="font-family: Courier New,Courier,monospace">_unref_cb()</span> callback is triggered, the reference count value is higher than 0 and the <span style="font-family: Courier New,Courier,monospace"> evas_object_unref()</span> function is called to decrease it. At the end of the callback, the reference count is 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad->spacer)</span> function marks the rectangle object for deletion.</p>
+<p>In the above example, a green rectangle is used as padding and the clipper object calculates its X, Y coordinates based on the rectangle position. When the rectangle is created, its reference count is increased to 1 by calling the <code>evas_object_ref()</code> function. When the <code>_unref_cb()</code> callback is triggered, the reference count value is higher than 0 and the <code> evas_object_unref()</code> function is called to decrease it. At the end of the callback, the reference count is 0 and the <code>evas_object_del(ad->spacer)</code> function marks the rectangle object for deletion.</p>
-<p class="figure">Figure: Removing padding</p>
+<p align="center"><strong>Figure: Removing padding</strong></p>
<p align="center"><img alt="Removing padding" src="../../../images/removing_padding.png" /></p>
<h2 id="order" name="order">Changing the Object Order on the Canvas</h2>
evas_object_show(ad->order_rect2);
</pre>
-<p class="figure">Figure: Default object order on the canvas</p>
+<p align="center"><strong>Figure: Default object order on the canvas</strong></p>
<p align="center"><img alt="Default object order on the canvas" src="../../../images/default_order.png" /></p>
</li>
-<li>To change the object order, use the <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span> function:
+<li>To change the object order, use the <code>evas_object_stack_below()</code> function:
<pre class="prettyprint">
static void
}
}</pre>
-<p class="figure">Figure: Changed object order</p>
+<p align="center"><strong>Figure: Changed object order</strong></p>
<p align="center"><img alt="Changed object order" src="../../../images/changed_order.png" /></p>
</li>
-<li>To place an object to the top or bottom of its layer in the canvas object stack, use the <span style="font-family: Courier New,Courier,monospace">evas_object_raise()</span> or <span style="font-family: Courier New,Courier,monospace">evas_object_lower()</span> function.
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">_lower_cb()</span> callback puts the canvas background at the bottom, showing both the rectangles that are on higher levels. On the other hand, the <span style="font-family: Courier New,Courier,monospace">_raise_cb()</span> callback puts the background to the top, hiding both the rectangles that are now on lower levels.</p>
+<li>To place an object to the top or bottom of its layer in the canvas object stack, use the <code>evas_object_raise()</code> or <code>evas_object_lower()</code> function.
+<p>In the following example, the <code>_lower_cb()</code> callback puts the canvas background at the bottom, showing both the rectangles that are on higher levels. On the other hand, the <code>_raise_cb()</code> callback puts the background to the top, hiding both the rectangles that are now on lower levels.</p>
<pre class="prettyprint">
static void
}
</pre>
-<p class="figure">Figure: Canvas background at the bottom (left) and on the top (right)</p>
+<p align="center"><strong>Figure: Canvas background at the bottom (left) and on the top (right)</strong></p>
<p align="center"><img alt="Canvas background at the bottom (left) and on the top (right)" src="../../../images/background_order.png" /></p>
</li></ul>
<p>A map consists of a set of points (currently, up to 4 points are supported). Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given in the other parameters.</p>
-<p>The map is an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object, and you can create it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function with the number of map points as a parameter:</p>
+<p>The map is an <code>Evas_Map</code> object, and you can create it using the <code>evas_map_new()</code> function with the number of map points as a parameter:</p>
<pre class="prettyprint">
Evas_Map *m = evas_map_new(4);
</pre>
-<p>In the created map, each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions:</p>
+<p>In the created map, each point is empty and ready to be modified with <code>Evas_Map</code> functions:</p>
<ul>
-<li>To get the size (number of points) of an existing map, or the actual coordinates of a specific map point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> functions.</li>
+<li>To get the size (number of points) of an existing map, or the actual coordinates of a specific map point, use the <code>evas_map_count_get()</code> and <code>evas_map_point_coord_set()</code> functions.</li>
<li>To define the map points, use one of the following methods. They all define the same square map shown in the following figure.
-<p class="figure">Figure: Square map</p>
+<p align="center"><strong>Figure: Square map</strong></p>
<p align="center"><img alt="Map" src="../../../images/evas_map_1.png" /></p>
<ul>
-<li>To set the map point coordinates one by one, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function.
+<li>To set the map point coordinates one by one, use the <code>evas_map_point_coord_set()</code> function.
<p>The following example defines the points of a map that matches the geometry of a rectangle (a square in this case):</p>
evas_map_point_coord_set(m, 3, 100, 300, 0);
</pre>
</li>
-<li>To set the map points by defining the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:
+<li>To set the map points by defining the starting X and Y coordinates combined with width and height, use the <code>evas_map_util_points_populate_from_geometry()</code> function:
<pre class="prettyprint">
evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);
</pre>
</li>
<li>
-<p>To set the map points based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function:</p>
+<p>To set the map points based on the geometry of a given object, use the <code>evas_map_util_points_populate_from_object()</code> or <code>evas_map_util_points_populate_from_object_full()</code> function:</p>
<pre class="prettyprint">
Evas_Object *o;
evas_object_move(o, 100, 100);
</pre>
<p>In this example, the Z coordinate is unused, because it is irrelevant when setting points by hand.</p>
-<p class="figure">Figure: Simulated perspective</p>
+<p align="center"><strong>Figure: Simulated perspective</strong></p>
<p align="center"><img alt="Simulated perspective" src="../../../images/evas_map_2.png" /></p>
</li>
<li>After you have defined the map points, set them to your Evas object for transformation, and enable the map for use:
</li>
</ul>
-<p>When the map is no longer needed, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
+<p>When the map is no longer needed, release the memory allocated to it using the <code>evas_map_free()</code> function:</p>
<pre class="prettyprint">
evas_map_free(m);
</pre>
<p>You can modify an already configured map with various utility functions to produce specific effects:</p>
<ul>
-<li>To rotate an object, you can use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function, which rotates the map based on an angle and the center coordinates of the rotation (the rotation point). A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.
+<li>To rotate an object, you can use the <code>evas_map_util_rotate()</code> function, which rotates the map based on an angle and the center coordinates of the rotation (the rotation point). A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.
<ul>
<li>To rotate around the object center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map.
<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise.</p>
</pre>
<p>The following figure shows the rotating object with the red dot as the center point.</p>
-<p class="figure">Figure: Rotating around the center point</p>
+<p align="center"><strong>Figure: Rotating around the center point</strong></p>
<p align="center"><img alt="Rotating around the center point" src="../../../images/evas_map_3.png" /></p>
</li>
-<li>To rotate around a point other than the center of the object, set the last 2 parameters of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:
+<li>To rotate around a point other than the center of the object, set the last 2 parameters of the <code>evas_map_util_rotate()</code> function to the appropriate values:
<pre class="prettyprint">
evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);
</pre>
<p>The following figure shows the object rotating around a point that is not in the center of the object.</p>
-<p class="figure">Figure: Rotating around other points</p>
+<p align="center"><strong>Figure: Rotating around other points</strong></p>
<p align="center"><img alt="Rotating around other points" src="../../../images/evas_map_4.png" /></p>
</li>
<li>
</li>
</ul>
</li>
-<li>To zoom an object, you can use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function, which zooms the points of the map from a center point, defined by the last 2 parameters. The second and third parameters specify how much to zoom in on the X and Y axes. For example, a value of 1.0 means no zoom, 2.0 means double the size, and 0.5 means half the size. All the coordinates are global canvas coordinates.
+<li>To zoom an object, you can use the <code>evas_map_util_zoom()</code> function, which zooms the points of the map from a center point, defined by the last 2 parameters. The second and third parameters specify how much to zoom in on the X and Y axes. For example, a value of 1.0 means no zoom, 2.0 means double the size, and 0.5 means half the size. All the coordinates are global canvas coordinates.
<p>The following example shows how to zoom in with value 2.0 on both X and Y axes with the canvas center as the zoom center point:</p>
<pre class="prettyprint">
evas_output_size_get(evas, &w, &h);
<p>When handling 3D effects, you must also be familiar with the concept of the object <strong>back face</strong>. An object is said to be facing the user, when all its points are placed in a clockwise formation. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user and revealing the object back face. The back face concept is especially relevant in lighting.</p>
<p>The following figure shows an object rotating around the Y axis. On the left, the object is facing the user, and on the right the face is away from the user, and you can only see the object back face.</p>
-<p class="figure">Figure: Rotating around the Y axis</p>
+<p align="center"><strong>Figure: Rotating around the Y axis</strong></p>
<p align="center"><img alt="Rotating around the Y axis" src="../../../images/evas_map_5.png" /></p>
<p>To handle the 3D effects:</p>
<ul>
-<li>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. Check the face orientation after applying all other operations to the map.</li>
+<li>To determine whether a map is facing the user, use the <code>evas_map_util_clockwise_get()</code> function. The function returns <code>EINA_TRUE</code> if the map is facing the user, and <code>EINA_FALSE</code> if the map is facing away from the user. Check the face orientation after applying all other operations to the map.</li>
-<li>To transform a map and apply a 3D rotation to the mapped object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the 3 axes.
+<li>To transform a map and apply a 3D rotation to the mapped object, use the <code>evas_map_util_3d_rotate()</code> function. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the 3 axes.
<p>The following figure shows the result of starting from this simple setup, and setting the map so that the blue square rotates around the Y axis.</p>
-<p class="figure">Figure: 3D rotation</p>
+<p align="center"><strong>Figure: 3D rotation</strong></p>
<p align="center"><img alt="3D rotation" src="../../../images/evas_map_6.png" /></p>
</li>
<li>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen.
-<p>To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set.</p>
+<p>To show the Z axis, that is, to add 3D perspective to the transformation, use the <code>evas_map_util_3d_perspective()</code> function on the map after its position has been set.</p>
<p>The result makes the vanishing point the center of each object.</p>
</li>
</ul>
-<p class="figure">Figure: Adding 3D perspective</p>
+<p align="center"><strong>Figure: Adding 3D perspective</strong></p>
<p align="center"><img alt="Adding perspective" src="../../../images/evas_map_7.png" /></p>
<h2 id="Color_Light" name="Color_Light">Defining Color and Lighting</h2>
<p>Each point in a map can be set to a color, which is multiplied with the object's own color and linearly interpolated between adjacent points:</p>
<ul>
-<li>To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function.</li>
-<li>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function.</li>
+<li>To set the color separately for each point, use the <code>evas_map_point_color_set()</code> function.</li>
+<li>To set the same color for every point, use the <code>evas_map_util_points_color_set()</code> function.</li>
</ul>
-<p>When using a 3D effect, colors can be used to improve the effect by simulating a light source and ambient light, both with their own colors. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light.</p>
+<p>When using a 3D effect, colors can be used to improve the effect by simulating a light source and ambient light, both with their own colors. The <code>evas_map_util_3d_lighting()</code> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light.</p>
<p>When applying 3D lighting, the face orientation of each point is important. If the map points are defined counter-clockwise, the object faces away from the user. In this case, the object is obscured, and no light reflects back from it, as illustrated in the following figure.</p>
-<p class="figure">Figure: Effect of the face orientation on lighting</p>
+<p align="center"><strong>Figure: Effect of the face orientation on lighting</strong></p>
<p align="center"><img alt="Effect of the face orientation on lighting" src="../../../images/evas_map_8.png" /></p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function is used to apply lighting calculations from a single light source to a given map. The red, green, and blue values of each vertex are modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface must be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
+<p>The <code>evas_map_util_3d_lighting()</code> function is used to apply lighting calculations from a single light source to a given map. The red, green, and blue values of each vertex are modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface must be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
<p>To get the gradient reflections in the shadow of the previous example, you have to define a source of light close enough to the user and a very bright ambient light, like in the following example.</p>
</li>
<li>To transform an image correctly, Evas needs to know how to handle the image within the map. Basically, each point in the map needs to be mapped to a specific pixel in the source image.
-<p>You can map a given point in a map to a given pixel in a source image using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function.</p>
+<p>You can map a given point in a map to a given pixel in a source image using the <code>evas_map_point_image_uv_set()</code> function.</p>
-<p>To match the example images to the object maps, you need the size of each image, which you can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
+<p>To match the example images to the object maps, you need the size of each image, which you can get using the <code>evas_object_image_size_get()</code> function.</p>
<p>The following code shows how to set the image UV points to fix the above problems:</p>
<ul>
</li>
</ol>
-<p>You can set a map to use only a part of an image, or you can even map the points in an inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve even more interesting results, such as a reflection of the original object.</p>
+<p>You can set a map to use only a part of an image, or you can even map the points in an inverted order. Combined with the <code>evas_object_image_source_set()</code> function, you can achieve even more interesting results, such as a reflection of the original object.</p>
<h2 id="Transparency" name="Transparency">Managing Transparency</h2>
<p>To manage transparency:</p>
<ol>
-<li>To use an alpha channel on your map, enable the alpha channel feature with the <span style="font-family: Courier New,Courier,monospace;">evas_map_alpha_set()</span> function.
+<li>To use an alpha channel on your map, enable the alpha channel feature with the <code>evas_map_alpha_set()</code> function.
</li>
<li>Set the alpha value:
<ul>
-<li>Separately for each map point with the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function.</li>
-<li>Together to all map points with the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function.</li>
+<li>Separately for each map point with the <code>evas_map_point_color_set()</code> function.</li>
+<li>Together to all map points with the <code>evas_map_util_points_color_set()</code> function.</li>
</ul>
</li>
</ol>
<h2 id="Smoothing" name="Smoothing">Smoothing a Map</h2>
-<p>Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> function.</p>
+<p>Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <code>evas_map_smooth_get()</code> function.</p>
<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map.</p>
-<p>To disable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function with the second parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>:</p>
+<p>To disable smoothing when rendering a map, use the <code>evas_map_smooth_set()</code> function with the second parameter set to <code>EINA_FALSE</code>:</p>
<pre class="prettyprint">
evas_map_smooth_set(m, EINA_FALSE);
</pre>
-
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<li>
<p>Create the UI window and title text:</p>
<ul>
-<li>To create an Elementary window, use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give the name and title of the application.</li>
-<li>To set a callback for the hardware <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function.</li>
-<li>To create and display the title text as an Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> functions.</li>
+<li>To create an Elementary window, use the <code>elm_win_util_standard_add()</code> function and give the name and title of the application.</li>
+<li>To set a callback for the hardware <strong>Back</strong> key, use the <code>eext_object_event_callback_add()</code> function.</li>
+<li>To create and display the title text as an Evas object, use the <code>evas_object_evas_get()</code> and <code>evas_object_show()</code> functions.</li>
</ul>
<pre class="prettyprint">
static void
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);
<li>
<p>Create the buttons for mapping.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_resize()</span> functions to configure the button custom geometry.</p>
+<p>Use the <code>evas_object_move()</code> and <code>evas_object_resize()</code> functions to configure the button custom geometry.</p>
<pre class="prettyprint">
/* Create a button for mapping */
ad->button = elm_button_add(ad->win);
</ol>
<p>The following figure shows the example application UI before the map effects are added.</p>
-<p class="figure">Figure: Example application UI without map effects</p>
+<p align="center"><strong>Figure: Example application UI without map effects</strong></p>
<p align="center"><img alt="Example application UI without map effects" src="../../../images/evas_map_effect_without.png" /></p>
<ol>
<li>
-<p>Get the <span style="font-family: Courier New,Courier,monospace">Evas_Map</span> object and create a map using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> function:</p>
+<p>Get the <code>Evas_Map</code> object and create a map using the <code>evas_map_new()</code> function:</p>
<pre class="prettyprint">
Evas_Map *map;
map = evas_map_new(4);
</li>
<li>
-<p>Set the coordinates for each map point using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function.</p>
+<p>Set the coordinates for each map point using the <code>evas_map_point_coord_set()</code> function.</p>
<p>The coordinates used in this example move the button and change its shape.</p>
<pre class="prettyprint">
/* Set map coordinates */
</li>
<li>
-<p>Set the image UV points using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_image_uv_set()</span> function.</p>
+<p>Set the image UV points using the <code>evas_map_point_image_uv_set()</code> function.</p>
<p>These coordinates define how the button image is mapped.</p>
<pre class="prettyprint">
/* Set image UV */
</pre>
</li>
-<li>To apply the map on the button, use the <span style="font-family: Courier New,Courier,monospace">evas_object_map_set()</span> function.
+<li>To apply the map on the button, use the <code>evas_object_map_set()</code> function.
<pre class="prettyprint">
/* Apply the map to the button Evas object */
evas_object_map_set(ad->button, map);
</pre>
</li>
-<li>To enable the map, use the <span style="font-family: Courier New,Courier,monospace">evas_object_map_enable_set()</span> function.
+<li>To enable the map, use the <code>evas_object_map_enable_set()</code> function.
<p>When enabled, the original object geometry is saved, and the new map geometry is used to change the object position and size.</p>
<pre class="prettyprint">
</ol>
<p>The following figure shows the example application UI with the map effects.</p>
-<p class="figure">Figure: Example application UI with map effects</p>
+<p align="center"><strong>Figure: Example application UI with map effects</strong></p>
<p align="center"><img alt="Example application UI with map effects" src="../../../images/evas_map_effect.png" /></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<pre class="prettyprint">
Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
-/* Set the rectangle's red, green, blue and opacity levels */
-evas_object_color_set(bg, 255, 255, 255, 255); /* Opaque white background */
-evas_object_resize(bg, WIDTH, HEIGHT); /* Covers full canvas */
+/*
+ Set the rectangle's
+ red, green, blue and opacity levels
+*/
+/* Opaque white background */
+evas_object_color_set(bg, 255, 255, 255, 255);
+/* Covers full canvas */
+evas_object_resize(bg, WIDTH, HEIGHT);
evas_object_show(bg);
</pre>
evas_object_show(text);
</pre>
-<p>To set the text, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set()</span> function. You can get the current text with the <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get()</span> function.</p>
+<p>To set the text, use the <code>evas_object_text_text_set()</code> function. You can get the current text with the <code>evas_object_text_text_get()</code> function.</p>
<p>To manage the text style:</p>
<ul>
<li>
-<p>To set the font, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set()</span> function with the following parameters:</p>
+<p>To set the font, use the <code>evas_object_text_font_set()</code> function with the following parameters:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use.</li>
+<li><code>text</code>: The text object</li>
+<li><code>font</code>: The font name you want to use</li>
+<li><code>size</code>: The font size you want to use.</li>
</ul>
-<p>To query the current font, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_get()</span> function.</p>
+<p>To query the current font, use the <code>evas_object_text_font_get()</code> function.</p>
</li>
<li>
-<p>To set the text style, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set()</span> function with the style as the second parameter. The available values are defined in the <span style="font-family: Courier New,Courier,monospace">_Evas_Text_Style_Type</span> enumerator (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Text.html#ga3e88a64ab40f18048667e61894f077cf">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Text.html#ga3e88a64ab40f18048667e61894f077cf">wearable</a> applications).</p>
-<p>To query the current style, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get()</span> function.</p>
+<p>To set the text style, use the <code>evas_object_text_style_set()</code> function with the style as the second parameter. The available values are defined in the <code>Evas_Text_Style_Type</code> enumerator (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html#ga6b48c195b58fbe30ca8180e7451ad817">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html#ga6b48c195b58fbe30ca8180e7451ad817">wearable</a> applications).</p>
+<p>To query the current style, use the <code>evas_object_text_style_get()</code> function.</p>
</li>
<li>
-<p>If the text does not fit, make an ellipsis on it by using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set()</span> function. The (float) value specifies, which part of the text is shown.</p>
+<p>If the text does not fit, make an ellipsis on it by using the <code>evas_object_text_ellipsis_set()</code> function. The (float) value specifies, which part of the text is shown.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>
+<li><code>0.0</code>: The beginning is shown and the end trimmed.</li>
+<li><code>1.0</code>: The beginning is trimmed and the end shown.</li>
<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>
-<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled.</li>
+<li><code>-1.0</code>: Ellipsis is disabled.</li>
</ul>
-<p> To query the current ellipsis value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get()</span> function.</p>
+<p> To query the current ellipsis value, use the <code>evas_object_text_ellipsis_get()</code> function.</p>
</li>
<li>
-<p>When the text style is set to glow, set the glow color using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set()</span>, function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set()</span> function.</p>
-<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get()</span> functions.</p>
+<p>When the text style is set to glow, set the glow color using the <code>evas_object_text_glow_color_set()</code>, function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use the <code>evas_object_text_glow2_color_set()</code> function.</p>
+<p>To query the current color, use the <code>evas_object_text_glow_color_get()</code> and <code>evas_object_text_glow2_color_get()</code> functions.</p>
</li>
<li>
-<p>If the text style is set to display a shadow, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set()</span> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values.</p>
-<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get()</span> function.</p>
+<p>If the text style is set to display a shadow, use the <code>evas_object_text_shadow_color_set()</code> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values.</p>
+<p>To query the current color, use the <code>evas_object_text_shadow_color_get()</code> function.</p>
</li>
<li>
-<p>If the text style is set to display an outline, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set()</span> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values. </p>
-<p>To query the current color, use the <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get()</span> function.</p>
+<p>If the text style is set to display an outline, use the <code>evas_object_text_outline_color_set()</code> function, where the second, third, fourth, and fifth parameters are respectively the red, green, blue, and alpha values. </p>
+<p>To query the current color, use the <code>evas_object_text_outline_color_get()</code> function.</p>
</li>
</ul>
<li>The third one, at the second column and second line, fits in 1 cell</li>
<li>The fourth one, at the second column and third line, also fits in 1 cell</li>
</ul>
-<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_add()</span> function.</p>
+<p>To create a table, use the <code>evas_object_table_add()</code> function.</p>
<pre class="prettyprint">
table = evas_object_table_add(evas);
evas_object_show(rect);
evas_object_table_pack(table, rect, 2, 3, 1, 1);
</pre>
-<p>To set the table layout, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set()</span> function. The following values can be homogeneous:</p>
+<p>To set the table layout, use the <code>evas_object_table_homogeneous_set()</code> function. The following values can be homogeneous:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span> function. If the table area is too small to hold this minimum bounding box, the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To get the current mode, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get()</span> function.</li>
+<li><code>EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</code>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
+<li><code>EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</code>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
+<li><code>EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</code>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using the <code>evas_object_table_align_get()</code> function. If the table area is too small to hold this minimum bounding box, the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To get the current mode, use the <code>evas_object_table_homogeneous_get()</code> function.</li>
</ul>
-<p>The table's content alignment is set using the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set()</span> function, where the second and third parameters (<span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span>) are floating values. To see the current values, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span> function.</p>
-<p>To set the padding, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set()</span> function. To see the current value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get()</span> function.</p>
-<p>To see the current column and row count, use the <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get()</span> function.</p>
+<p>The table's content alignment is set using the <code>evas_object_table_align_set()</code> function, where the second and third parameters (<code>horizontal</code> and <code>vertical</code>) are floating values. To see the current values, use the <code>evas_object_table_align_get()</code> function.</p>
+<p>To set the padding, use the <code>evas_object_table_padding_set()</code> function. To see the current value, use the <code>evas_object_table_padding_get()</code> function.</p>
+<p>To see the current column and row count, use the <code>evas_object_table_col_row_size_get()</code> function.</p>
<h3>Grid</h3>
<p>A grid is a smart object that packs its children as with a regular grid layout.</p>
-<p>Grids are added to the canvas with the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add()</span> function.</p>
-<p>To change a grid's virtual resolution, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set()</span> function, and to get the current value, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get()</span> function.</p>
-<p>To add an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack()</span> function, where the third, fourth, fifth, and sixth parameters are the following:</p>
+<p>Grids are added to the canvas with the <code>evas_object_grid_add()</code> function.</p>
+<p>To change a grid's virtual resolution, use the <code>evas_object_grid_size_set()</code> function, and to get the current value, use the <code>evas_object_grid_size_get()</code> function.</p>
+<p>To add an object, use the <code>evas_object_grid_pack()</code> function, where the third, fourth, fifth, and sixth parameters are the following:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">x</span>: Virtual x coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">y</span>: Virtual y coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">w</span>: Virtual width of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">h</span>: Virtual height of the child</li>
+<li><code>x</code>: Virtual x coordinate of the child</li>
+<li><code>y</code>: Virtual y coordinate of the child</li>
+<li><code>w</code>: Virtual width of the child</li>
+<li><code>h</code>: Virtual height of the child</li>
</ul>
<h3>Box</h3>
<p>A box is a simple container that sets its children objects linearly.</p>
-<p>To add a box to your canvas, use the <span style="font-family: Courier New,Courier,monospace">evas_object_box_add()</span> function.</p>
+<p>To add a box to your canvas, use the <code>evas_object_box_add()</code> function.</p>
<p>To add a child to the box, use the following functions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append()</span>: The child is appended.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after()</span>: The child is added after the reference item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before()</span>: The child is added before the reference item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at()</span>: The child is added at the specified position.</li>
+<li><code>evas_object_box_append()</code>: The child is appended.</li>
+<li><code>evas_object_box_insert_after()</code>: The child is added after the reference item.</li>
+<li><code>evas_object_box_insert_before()</code>: The child is added before the reference item.</li>
+<li><code>evas_object_box_insert_at()</code>: The child is added at the specified position.</li>
</ul>
-<p>To set the alignment, use the <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set()</span> function with the following values.</p>
+<p>To set the alignment, use the <code>evas_object_box_align_set()</code> function with the following values.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right</li>
-<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom</li>
+<li><code>horizontal</code>: 0.0 means aligned to the left, 1.0 means to the right</li>
+<li><code>vertical</code>: 0.0 means aligned to the top, 1.0 means to the bottom</li>
</ul>
<p>Evas has the following predefined box layouts available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span></li>
+<li><code>evas_object_box_layout_horizontal()</code></li>
+<li><code>evas_object_box_layout_vertical()</code></li>
+<li><code>evas_object_box_layout_homogeneous_horizontal()</code></li>
+<li><code>evas_object_box_layout_homogeneous_vertical()</code></li>
+<li><code>evas_object_box_layout_homogeneous_max_size_horizontal()</code></li>
+<li><code>evas_object_box_layout_homogeneous_max_size_vertical()</code></li>
+<li><code>evas_object_box_layout_flow_horizontal()</code></li>
+<li><code>evas_object_box_layout_flow_vertical()</code></li>
+<li><code>evas_object_box_layout_stack()</code></li>
</ul>
<h2 id="image" name="image">Image Objects</h2>
<p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>
-<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
+<p>The image formats that Evas supports include <code>bmp</code>, <code>edj</code>, <code>gif</code>, <code>ico</code>, <code>jpeg</code>, <code>pmaps</code>, <code>png</code>, <code>psd</code>, <code>svg</code>, <code>tga</code>, <code>tiff</code>, <code>wbmp</code>, <code>webp</code>, and <code>xpm</code>.</p>
- <p class="figure">Figure: Evas image loader</p>
+ <p align="center"><strong>Figure: Evas image loader</strong></p>
<p align="center"><img alt="Evas image loader" src="../../../images/evas_image_loader.png" /></p>
<h3>Evas Object Image Functions</h3>
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>
<p>A common use case of an image object is to set a file as the image data source.</p>
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<p>In the following example, the <code>main()</code> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <code>evas_object_image_fill_set()</code> function.</p>
<pre class="prettyprint">
#include <Elementary.h>
return 0;
}
</pre>
- <p class="figure">Figure: Image object display</p>
+ <p align="center"><strong>Figure: Image object display</strong></p>
<p align="center"><img alt="Image object display" src="../../../images/evas_object_display.png" /></p>
<h3 id="manage" name="manage">Managing Images</h3>
<p>To manage image objects in Evas:</p>
<ul>
<li>Limiting visibility
-<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
+<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <code>evas_object_image_extension_can_load_get()</code> function.</p>
<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>
</pre>
-<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>
+<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <code>evas_object_image_filled_set()</code> function helper that you can use instead of the <code>evas_object_image_fill_set()</code> function:</p>
<pre class="prettyprint">
evas_object_image_filled_set(img, EINA_TRUE);
</pre>
</li>
<li>Scaling images
-<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>
+<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <code>evas_object_image_filled_set()</code> function.</p>
<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>
<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>
-<p>You can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
+<p>You can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <code>evas_object_image_fill_set()</code> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
- <p class="figure">Figure: Image scaling</p>
+ <p align="center"><strong>Figure: Image scaling</strong></p>
<p align="center"><img alt="Image scaling" src="../../../images/evas_image_scaling.png" /></p>
<table style="border:none;">
<td style="border:none;"><p align="center"><img alt="" src="../../../images/evas_scaling3.png" /></p></td>
</tr>
<tr>
- <td style="text-align:center; border:none;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
- <td style="text-align:center; border:none;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>
- <td style="text-align:center; border:none;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>
+ <td style="text-align:center; border:none;"><code>evas_object_image_fill_set(obj, 50, 0, 300, 300)</code></td>
+ <td style="text-align:center; border:none;"><code>evas_object_image_fill_set(obj, 0, 0, 200, 200)</code></td>
+ <td style="text-align:center; border:none;"><code>evas_object_image_fill_set(obj, 0, 0, 100, 127)</code></td>
</tr>
</tbody>
</table>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<p>The <code>evas_object_image_filled_set()</code> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <code>evas_object_image_fill_set()</code> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>
+<p>The <code>evas_object_image_filled_add()</code> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <code>evas_object_image_add()</code> and <code>evas_object_image_filled_set()</code> functions.</p>
<p>Scaled images' quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API for you to disable the function.</p>
}
</pre>
+ <p align="center" class="Table"><strong>Figure: Smooth scaling effects</strong></p>
<table style="border:none;">
- <caption>Figure: Smooth scaling effects</caption>
<tbody>
<tr>
<td style="border:none;"><p align="center"><img alt="Smooth scaling effects" src="../../../images/evas_smooth_enabled.png" /></p></td>
</tbody></table>
-<p>Evas caches scaled image data and reuses them. You can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>
+<p>Evas caches scaled image data and reuses them. You can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <code>jpeg</code> format at the moment.</p>
<p>The following example shows how to load the image in the scaled size.</p>
<pre class="prettyprint">
</ul>
<h3>Setting Raw Data to Image Object</h3>
-<p>You can set raw data to the image object manually using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data must be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
+<p>You can set raw data to the image object manually using the <code>evas_object_image_data_set()</code> function instead of setting an image file as the data source. The image data must be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
-<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, you must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>
+<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, you must set the size of the image using the <code>evas_object_image_size_set()</code> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If you pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>
+<p>The <code>evas_object_image_data_get()</code> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If you pass <code>EINA_TRUE</code> for <code>for_writing</code>, Evas updates the image pixels in the next rendering cycle.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>
+<p>The <code>evas_object_image_data_update_add()</code> helps to mark the updated area for rendering efficiency.</p>
<p>The following example code and figure show how to specify the area to update:</p>
<pre class="prettyprint">
evas_object_image_data_update_add(image, 85, 200, 160, 80);
</pre>
- <p class="figure">Figure: Partial image update</p>
+ <p align="center"><strong>Figure: Partial image update</strong></p>
<p align="center"><img alt="Partial image update" src="../../../images/evas_partial_update.png" /></p>
-<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
+<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <code>evas_object_image_save()</code> function.</p>
<pre class="prettyprint">
#include <Elementary.h>
}
</pre>
+ <p align="center" class="Table"><strong>Figure: Blur effect</strong></p>
<table style="border:none;">
- <caption>Figure: Blur effect</caption>
<tbody>
<tr>
<td style="border:none;"><p align="center"><img alt="Blur effect" src="../../../images/evas_blur1.png" /></p></td>
<h4>Specifying Borders</h4>
<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
-<p class="figure">Figure: Borders in Evas</p>
+<p align="center"><strong>Figure: Borders in Evas</strong></p>
<p align="center"><img alt="Borders in Evas" src="../../../images/9patch.png" /></p>
<p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>
<p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has 3 important parts: the text paragraphs, the format nodes and the cursors.</p>
-<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace"><font_size=50>Big!</font_size></span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace"><font_size=50 color=#F00>Big and Red!</font_size></span>. Note that <span style="font-family: Courier New,Courier,monospace"></font_size></span> is used although the format also included color. This is because the first format determines the matching closing tag's name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace"><font_size=30>Big</></span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
+<p>To set markup to format text, use for example <code><font_size=50>Big!</font_size></code>. Set more than one style directive in one tag with <code><font_size=50 color=#F00>Big and Red!</font_size></code>. Note that <code></font_size></code> is used although the format also included color. This is because the first format determines the matching closing tag's name. You can use anonymous tags, such as <code><font_size=30>Big</></code>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
<p>Textblock supports the following formats:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example <span style="font-family: Courier New,Courier,monospace">"Sans:style=Italic:lang=hi" or "Serif:style=Bold"</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_weight=Bold</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Bold</span>. The supported weights are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">thin</span>, <span style="font-family: Courier New,Courier,monospace">ultralight</span>, <span style="font-family: Courier New,Courier,monospace">light</span>, <span style="font-family: Courier New,Courier,monospace">book</span>, <span style="font-family: Courier New,Courier,monospace">medium</span>, <span style="font-family: Courier New,Courier,monospace">semibold</span>, <span style="font-family: Courier New,Courier,monospace">bold</span>, <span style="font-family: Courier New,Courier,monospace">ultrabold</span>, <span style="font-family: Courier New,Courier,monospace">black</span>, and <span style="font-family: Courier New,Courier,monospace">extrablack</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_style=Italic</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Italic</span>. The supported styles are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">oblique</span>, and <span style="font-family: Courier New,Courier,monospace">italic</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">font_width=Condensed</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:style=Condensed</span>. The supported widths are <span style="font-family: Courier New,Courier,monospace">normal</span>, <span style="font-family: Courier New,Courier,monospace">ultracondensed</span>, <span style="font-family: Courier New,Courier,monospace">extracondensed</span>, <span style="font-family: Courier New,Courier,monospace">condensed</span>, <span style="font-family: Courier New,Courier,monospace">semicondensed</span>, <span style="font-family: Courier New,Courier,monospace">semiexpanded</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">extraexpanded</span>, and <span style="font-family: Courier New,Courier,monospace">ultraexpanded</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in <span style="font-family: Courier New,Courier,monospace">font</span>. For example, <span style="font-family: Courier New,Courier,monospace">lang=he</span> is the same as <span style="font-family: Courier New,Courier,monospace">font=:lang=he</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>
-<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: <span style="font-family: Courier New,Courier,monospace">auto</span> (according to text direction), <span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">right</span>, <span style="font-family: Courier New,Courier,monospace">center</span>, or <span style="font-family: Courier New,Courier,monospace">middle</span>, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">bottom</span>, <span style="font-family: Courier New,Courier,monospace">middle</span>, <span style="font-family: Courier New,Courier,monospace">center</span>, <span style="font-family: Courier New,Courier,monospace">baseline</span>, or <span style="font-family: Courier New,Courier,monospace">base</span>, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: <span style="font-family: Courier New,Courier,monospace">word</span>, <span style="font-family: Courier New,Courier,monospace">char</span>, <span style="font-family: Courier New,Courier,monospace">mixed</span>, or <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either <span style="font-family: Courier New,Courier,monospace">reset</span> or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either <span style="font-family: Courier New,Courier,monospace">reset</span> or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: <span style="font-family: Courier New,Courier,monospace">on</span>, <span style="font-family: Courier New,Courier,monospace">off</span>, <span style="font-family: Courier New,Courier,monospace">single</span>, or <span style="font-family: Courier New,Courier,monospace">double</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: <span style="font-family: Courier New,Courier,monospace">#RRGGBB</span>, <span style="font-family: Courier New,Courier,monospace">#RRGGBBAA</span>, <span style="font-family: Courier New,Courier,monospace">#RGB</span>, or <span style="font-family: Courier New,Courier,monospace">#RGBA</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: <span style="font-family: Courier New,Courier,monospace">off</span>, <span style="font-family: Courier New,Courier,monospace">none</span>, <span style="font-family: Courier New,Courier,monospace">plain</span>, <span style="font-family: Courier New,Courier,monospace">shadow</span>, <span style="font-family: Courier New,Courier,monospace">outline</span>, <span style="font-family: Courier New,Courier,monospace">soft_outline</span>, <span style="font-family: Courier New,Courier,monospace">outline_shadow</span>, <span style="font-family: Courier New,Courier,monospace">outline_soft_shadow</span>, <span style="font-family: Courier New,Courier,monospace">glow</span>, <span style="font-family: Courier New,Courier,monospace">far_shadow</span>, <span style="font-family: Courier New,Courier,monospace">soft_shadow</span>, or <span style="font-family: Courier New,Courier,monospace">far_soft_shadow</span>. The direction is selected by adding <span style="font-family: Courier New,Courier,monospace">bottom_right</span>, <span style="font-family: Courier New,Courier,monospace">bottom</span>, <span style="font-family: Courier New,Courier,monospace">bottom_left</span>, <span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">top_left</span>, <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">top_right</span>, or <span style="font-family: Courier New,Courier,monospace">right</span>. For example, <span style="font-family: Courier New,Courier,monospace">style=shadow,bottom_right</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use <span style="font-family: Courier New,Courier,monospace">size</span>, <span style="font-family: Courier New,Courier,monospace">abssize</span>, or <span style="font-family: Courier New,Courier,monospace">relsize</span> to define the item's size, and an optional vsize = full/ascent to define the item's position in the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either <span style="font-family: Courier New,Courier,monospace">on</span> or <span style="font-family: Courier New,Courier,monospace">off</span>, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
+<li><code>font</code>: Font description in fontconfig such as format, for example <code>"Sans:style=Italic:lang=hi" or "Serif:style=Bold"</code>.</li>
+<li><code>font_weight</code>: Overrides the weight defined in <code>font</code>. For example, <code>font_weight=Bold</code> is the same as <code>font=:style=Bold</code>. The supported weights are <code>normal</code>, <code>thin</code>, <code>ultralight</code>, <code>light</code>, <code>book</code>, <code>medium</code>, <code>semibold</code>, <code>bold</code>, <code>ultrabold</code>, <code>black</code>, and <code>extrablack</code>.</li>
+<li><code>font_style</code>: Overrides the style defined in <code>font</code>. For example, <code>font_style=Italic</code> is the same as <code>font=:style=Italic</code>. The supported styles are <code>normal</code>, <code>oblique</code>, and <code>italic</code>.</li>
+<li><code>font_width</code>: Overrides the width defined in <code>font</code>. For example, <code>font_width=Condensed</code> is the same as <code>font=:style=Condensed</code>. The supported widths are <code>normal</code>, <code>ultracondensed</code>, <code>extracondensed</code>, <code>condensed</code>, <code>semicondensed</code>, <code>semiexpanded</code>, <code>expanded</code>, <code>extraexpanded</code>, and <code>ultraexpanded</code>.</li>
+<li><code>lang</code>: Overrides the language defined in <code>font</code>. For example, <code>lang=he</code> is the same as <code>font=:lang=he</code>.</li>
+<li><code>font_fallbacks</code>: A comma delimited list of fonts to try if finding the main font fails.</li>
+<li><code>font_size</code>: The font size in points.</li>
+<li><code>font_source</code>: The source of the font, for example an eet file.</li>
+<li><code>color</code>: The text color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>underline_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>underline2_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>outline_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>shadow_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>glow_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>glow2_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>strikethrough_color</code>: The color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>align</code>: The text alignment in one of the following formats: <code>auto</code> (according to text direction), <code>left</code>, <code>right</code>, <code>center</code>, or <code>middle</code>, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><code>valign</code>: The vertical text alignment in one of the following formats: <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>center</code>, <code>baseline</code>, or <code>base</code>, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><code>wrap</code>: The text wrap in one of the following formats: <code>word</code>, <code>char</code>, <code>mixed</code>, or <code>none</code>.</li>
+<li><code>left_margin</code>: Either <code>reset</code> or a pixel value indicating the margin.</li>
+<li><code>right_margin</code>: Either <code>reset</code> or a pixel value indicating the margin.</li>
+<li><code>underline</code>: The style of underlining in one of the following formats: <code>on</code>, <code>off</code>, <code>single</code>, or <code>double</code>.</li>
+<li><code>strikethrough</code>: The style of text that is either <code>on</code> or <code>off</code>.</li>
+<li><code>backing_color</code>: The background color in one of the following formats: <code>#RRGGBB</code>, <code>#RRGGBBAA</code>, <code>#RGB</code>, or <code>#RGBA</code>.</li>
+<li><code>backing</code>: The background color enabled or disabled: <code>on</code> or <code>off</code>.</li>
+<li><code>style</code>: The style of the text in one of the following formats: <code>off</code>, <code>none</code>, <code>plain</code>, <code>shadow</code>, <code>outline</code>, <code>soft_outline</code>, <code>outline_shadow</code>, <code>outline_soft_shadow</code>, <code>glow</code>, <code>far_shadow</code>, <code>soft_shadow</code>, or <code>far_soft_shadow</code>. The direction is selected by adding <code>bottom_right</code>, <code>bottom</code>, <code>bottom_left</code>, <code>left</code>, <code>top_left</code>, <code>top</code>, <code>top_right</code>, or <code>right</code>. For example, <code>style=shadow,bottom_right</code>.</li>
+<li><code>tabstops</code>: The pixel value for tab width.</li>
+<li><code>linesize</code>: To force a line size in pixels.</li>
+<li><code>linerelsize</code>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><code>linegap</code>: To force a line gap in pixels.</li>
+<li><code>linerelgap</code>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><code>item</code>: Creates an empty space that is filled by an upper layer. Use <code>size</code>, <code>abssize</code>, or <code>relsize</code> to define the item's size, and an optional vsize = full/ascent to define the item's position in the line.</li>
+<li><code>linefill</code>: Either a float value or percentage indicating how much to fill the line.</li>
+<li><code>ellipsis</code>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
+<li><code>password</code>: Either <code>on</code> or <code>off</code>, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
</ul>
<h3>Limiting Visibility </h3>
<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>
-<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. To do this, create a solid white rectangle (by default, so you need not use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> function) and give it a position and size of what is wanted visible. The following code example shows how to show the center half of <span style="font-family: Courier New,Courier,monospace">my_evas_object</span>: </p>
+<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. To do this, create a solid white rectangle (by default, so you need not use the <code>evas_object_color_set()</code> function) and give it a position and size of what is wanted visible. The following code example shows how to show the center half of <code>my_evas_object</code>: </p>
<pre class="prettyprint">
Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);
<h3>Creating a Map </h3>
<p>A map consists of a set of points, but currently only 4 are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>
-<p>The coordinates for each point are set with the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. In the following example, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
+<p>The coordinates for each point are set with the <code>evas_map_point_coord_set()</code> function. In the following example, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
<pre class="prettyprint">
Evas_Object *object = evas_object_rectangle_add(evas);
evas_object_move(object, 100, 100);
<p>To ease the process:</p>
<ul>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry()</span> function, where the map coordinates are set to the given rectangle, and the last parameter is the coordinate in the Z axis, which is the same for all points.</p>
+<p>Use the <code>evas_map_util_points_populate_from_geometry()</code> function, where the map coordinates are set to the given rectangle, and the last parameter is the coordinate in the Z axis, which is the same for all points.</p>
<pre class="prettyprint">
Evas_Object *object = evas_object_rectangle_add(evas);
evas_object_move(object, 100, 100);
</pre>
</li>
<li>
-<p>You can also use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object()</span> function.</p>
+<p>You can also use the <code>evas_map_util_points_populate_from_object()</code> function.</p>
<pre class="prettyprint">
Evas_Object *object = evas_object_rectangle_add(evas);
evas_object_move(object, 100, 100);
</pre>
</li>
<li>
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full()</span>, where the last parameter is the coordinate in the Z axis, which is the same for all points. </p>
+<p>You can also use <code>evas_map_util_points_populate_from_object_full()</code>, where the last parameter is the coordinate in the Z axis, which is the same for all points. </p>
<pre class="prettyprint">
Evas_Object *object = evas_object_rectangle_add(evas);
evas_object_move(object, 100, 100);
<h3>Basic Utility Functions </h3>
<p>Evas provides utility functions for common transformations:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span>: This function performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span>: This function performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
+<li><code>evas_map_util_rotate()</code>: This function performs a rotation of the <code>angle</code> degrees around the center point with the coordinates (cx, cy).</li>
+<li><code>evas_map_util_zoom()</code>: This function performs a <code>zoomx</code> and <code>zoomy</code> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
</ul>
<p>For example, the following code rotates an object around its center.</p>
<h3>3D Utility Functions </h3>
<p>Evas provides utility functions for 3D transformations.</p>
-<p>To make a 3D rotation, use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
-<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective()</span> function on the map after its position has been set. Use the following parameters:</p>
+<p>To make a 3D rotation, use the <code>evas_map_util_3d_rotate()</code> function. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
+<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with the <code>evas_map_util_3d_perspective()</code> function on the map after its position has been set. Use the following parameters:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the "infinite distance" point in the 3D conversion, where all lines converge to.</li>
-<li><span style="font-family: Courier New,Courier,monospace">z0</span> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focal</span> determines the "focal length" of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some "depth" control.</li>
+<li><code>px</code> and <code>py</code> specify the "infinite distance" point in the 3D conversion, where all lines converge to.</li>
+<li><code>z0</code> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
+<li><code>focal</code> determines the "focal length" of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <code>z0</code> value; this function allows for some "depth" control.</li>
</ul>
<h3>Color and Lighting</h3>
-<p>Each point in a map can be set to a color, which is multiplied with the object's own color and linearly interpolated in between adjacent points. To do this, use <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set()</span> to set every point into the same color.</p>
-<p>To add lighting for the objects, which is useful with 3D transforms, use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting()</span> function with the following parameters:</p>
+<p>Each point in a map can be set to a color, which is multiplied with the object's own color and linearly interpolated in between adjacent points. To do this, use <code>evas_map_point_color_set(map, index, r, g, b, a)</code> for each point of the map, or <code>evas_map_util_points_color_set()</code> to set every point into the same color.</p>
+<p>To add lighting for the objects, which is useful with 3D transforms, use the <code>evas_map_util_3d_lighting()</code> function with the following parameters:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>
-<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>
-<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from you and becomes obscured, since no light does not reflect from it.</li>
+<li><code>lightx</code>, <code>lighty</code> and <code>lightz</code> are the local light source coordinates;</li>
+<li><code>lightr</code>, <code>lightg</code> and <code>lightb</code> are the local light source colors;</li>
+<li><code>ambientr</code>, <code>ambientg</code> and <code>ambientb</code> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from you and becomes obscured, since no light does not reflect from it.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<p>The immediate mode is most commonly used in graphic toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the invalid portion of the client area.</p>
-<p class="figure">Figure: Immediate mode</p>
+<p align="center"><strong>Figure: Immediate mode</strong></p>
<p align="center"><img alt="Immediate mode" src="../../../images/immediate_mode.png" /></p>
<p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code:</p>
<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
-<p class="figure">Figure: Retained mode</p>
+<p align="center"><strong>Figure: Retained mode</strong></p>
<p align="center"><img alt="Retained mode" src="../../../images/retained_mode.png" /></p>
<p>Evas is a structural system in which you create and manage display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
<p>Tizen native applications run on the Ecore main loop, which performs a few steps for every frame. At the end of the loop, when it goes to the idle enterer step, Evas redraws any changes in the objects by calculating the changed portions of all display objects and redrawing them. If there are no changes, Evas rendering is skipped.</p>
-<p class="figure">Figure: Evas rendering in the main loop</p>
+<p align="center"><strong>Figure: Evas rendering in the main loop</strong></p>
<p align="center"><img alt="Evas rendering in the main loop" src="../../../images/rendering1.png" /></p>
<p>To minimize the required rendering, Evas tracks the states of all display objects, such as their position, size, visibility, and color. If a state is changed while the object is hidden by other obscured objects, the object is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
<p align="center"><img alt="Evas redrawing example 2" src="../../../images/redrawing02.png" /></p> </li>
-<li><p>Evas only renders the areas that require updates (changed areas of the objects have been removed in the below figure and only show the blue background). The unchanged parts of the screen are not rendered again.</p>
+<li><p>Evas only renders the areas that require updates (changed areas of the objects have been removed in the following figure and only show the blue background). The unchanged parts of the screen are not rendered again.</p>
<p align="center"><img alt="Evas redrawing example 3" src="../../../images/redrawing03.png" /></p> </li>
<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render primitive objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>
<p>Evas can work with and provides multiple engines, such as:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">buffer</span>: All the rendering takes place in a buffer.</li>
-<li><span style="font-family: Courier New,Courier,monospace">fb</span>: Rendering takes place in the system's framebuffer.</li>
-<li><span style="font-family: Courier New,Courier,monospace">software_x11</span>: Renders to an X11 window; this is the most used engine.</li>
-<li><span style="font-family: Courier New,Courier,monospace">gl_x11</span>: Renders to an X11 window, except that it uses OpenGL.</li>
+<li><code>buffer</code>: All the rendering takes place in a buffer.</li>
+<li><code>fb</code>: Rendering takes place in the system's framebuffer.</li>
+<li><code>software_x11</code>: Renders to an X11 window; this is the most used engine.</li>
+<li><code>gl_x11</code>: Renders to an X11 window, except that it uses OpenGL.</li>
</ul>
<p>The engines implement the rendering of all the basic objects by themselves, because they can often be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
<h1>Event Handling</h1>
<p>EFL relies on events and callbacks. In case of an event, such as a key press, mouse click, or a battery running low, the main loop calls the callback functions that are associated with that specific event. After the callbacks have finished, the main loop takes over and waits for new events, upon which to trigger new callbacks.</p>
-<p>It is important to do light work in the callbacks and to return to the main loop relatively quickly. If there is heavy work to do, use an asynchronous mechanism, such as <span style="font-family: Courier New,Courier,monospace">Ecore_con</span> for network I/O, or threads for CPU-intensive tasks. Failing to return quickly to the main loop blocks the application UI and makes it appear frozen.</p>
+<p>It is important to do light work in the callbacks and to return to the main loop relatively quickly. If there is heavy work to do, use an asynchronous mechanism, such as <code>Ecore_con</code> for network I/O, or threads for CPU-intensive tasks. Failing to return quickly to the main loop blocks the application UI and makes it appear frozen.</p>
<h2 id="events_types" name="events_types">EFL Event Types</h2>
<p>There are several event types in EFL, and their use depends on the level of the event. The event types from the lowest to the highest level are:</p>
<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of Evas objects. They are called "smart", because they have an internal logic and can define their own events, while the other event types are fixed.</li>
</ul>
- <p class="figure">Figure: Event types in the EFLs</p>
+ <p align="center"><strong>Figure: Event types in the EFLs</strong></p>
<p align="center"><img alt="Event types in the EFLs" src="../../../images/events_scope.png" /></p>
-
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program blocks in the theme EDC files. They can be used from the high level Elementary APIs or the low level Edje APIs.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program blocks in the theme EDC files. They can be used from the high level Elementary APIs or the low level Edje APIs.
+</div>
<h2 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h2>
<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
<p>The following steps are involved in the above basic event flow:</p>
<ol>
<li><p>Create a window and box, set the box to be vertical, and add a button and 2 progress bars. At first, only the button is fully visible.</p></li>
-<li><p>When the user clicks the button, an Evas smart object event named <span style="font-family: Courier New,Courier,monospace">clicked</span> is emitted.</p></li>
-<li><p>The callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event starts the download in <span style="font-family: Courier New,Courier,monospace">Ecore_con</span>, displays the first progress bar, and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p></li>
-<li><p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through the <span style="font-family: Courier New,Courier,monospace">Ecore_thread</span>. The processing function regularly updates the progress bar, which wrapped in the <span style="font-family: Courier New,Courier,monospace">ecore_main_loop_thread_safe_call_async()</span> function because GUI operations are not thread-safe.</p></li>
+<li><p>When the user clicks the button, an Evas smart object event named <code>clicked</code> is emitted.</p></li>
+<li><p>The callback for the <code>clicked</code> event starts the download in <code>Ecore_con</code>, displays the first progress bar, and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p></li>
+<li><p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through the <code>Ecore_thread</code>. The processing function regularly updates the progress bar, which wrapped in the <code>ecore_main_loop_thread_safe_call_async()</code> function because GUI operations are not thread-safe.</p></li>
</ol>
<p>Events enable operations taking more than a few milliseconds' time to be executed outside of the main loop, therefore not blocking UI redraws.</p>
<p>The following figure illustrates the event flow that follows a click on the screen.</p>
- <p class="figure">Figure: Event flow for a user click</p>
+ <p align="center"><strong>Figure: Event flow for a user click</strong></p>
<p align="center"><img alt="Event flow for a user click" src="../../../images/events_flow.png" /></p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
<p>Ecore events are used for low-level handling of events, such as key presses, network connections, and communication with sub-processes. In case of shortcuts, the low-level handling of key presses is particularly useful: instead of adding a signal handler to a specific graphical element, you can add one globally to guarantee that no matter which UI component is currently receiving events, the shortcut is caught correctly.</p>
<p>Ecore events can also be used to implement new graphical back-ends. However, they are low-level and not useful for most applications.</p>
-<p>In addition to using predefined Ecore events, you can create your own events with the <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span> function. The function generates a new unique identifier, which you can use as the event type parameter when managing your events and event handlers.</p>
+<p>In addition to using predefined Ecore events, you can create your own events with the <code>ecore_event_type_new()</code> function. The function generates a new unique identifier, which you can use as the event type parameter when managing your events and event handlers.</p>
<h3 id="ecore_events_useful_for_shortcuts">Shortcut Events</h3>
-<p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void*</span> object, whose type depends on the received event.</p>
+<p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <code>void*</code> object, whose type depends on the received event.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_UP</span>:
+<li><code>ECORE_EVENT_KEY_DOWN</code> and <code>ECORE_EVENT_KEY_UP</code>:
<pre class="prettyprint">
typedef struct _Ecore_Event_Key Ecore_Event_Key;
</li>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_UP</span>:
+<li><code>ECORE_EVENT_MOUSE_BUTTON_DOWN</code> and <code>ECORE_EVENT_MOUSE_BUTTON_UP</code>:
<pre class="prettyprint">
typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
} root;
struct {
- /* 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers) */
+ /*
+ 0 if normal mouse, 1+ for other mouse-devices
+ (such as multi-touch - other fingers)
+ */
int device;
- /* Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2) */
+ /*
+ Radius of press point - radius_x and radius_y
+ if it is an ellipse (radius is the average of the 2)
+ */
double radius;
double radius_x;
double radius_y;
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_MOVE</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_WHEEL</span>:
+<li><code>ECORE_EVENT_MOUSE_MOVE</code> and <code>ECORE_EVENT_MOUSE_WHEEL</code>:
<pre class="prettyprint">
typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
};
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_IN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_OUT</span>:
+<li><code>ECORE_EVENT_MOUSE_IN</code> and <code>ECORE_EVENT_MOUSE_OUT</code>:
<pre class="prettyprint">
typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
} root;
struct {
- /* 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers) */
+ /*
+ 0 if normal mouse, 1+ for other mouse-devices
+ (such as multi-touch - other fingers)
+ */
int device;
- /* Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2) */
+ /*
+ Radius of press point - radius_x and radius_y
+ if it is an ellipse (radius is the average of the 2)
+ */
double radius;
double radius_x;
double radius_y;
<p>To manage Ecore event handlers:</p>
-<ol><li>To add an Ecore event handler, register a callback for a specific event with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function.
-<p>The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
+<ol><li>To add an Ecore event handler, register a callback for a specific event with the <code>ecore_event_handler_add()</code> function.
+<p>The function takes as parameters the event type (such as <code>ECORE_EVENT_KEY_DOWN</code> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Handler_Cb()</span> callback function.
-<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function parameters, the event type, and the event object (<span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, or <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>). The function returns <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span> to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</p></li>
+<li>Define the <code>Ecore_Event_Handler_Cb()</code> callback function.
+<p>The function takes as parameters the additional data defined in the <code>ecore_event_handler_add()</code> function parameters, the event type, and the event object (<code>Ecore_Event_Key</code>, <code>Ecore_Event_Mouse_Button</code>, <code>Ecore_Event_Mouse_Wheel</code>, or <code>Ecore_Event_Mouse_Move</code>). The function returns <code>ECORE_CALLBACK_PASS_ON</code> to allow other callbacks for that event be called, or <code>ECORE_CALLBACK_DONE</code> to not call them.</p></li>
-<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function, using the event handler pointer as a parameter.</li></ol>
+<li>When no longer needed, remove the event handler with the <code>ecore_event_handler_del()</code> function, using the event handler pointer as a parameter.</li></ol>
-<p>The following example shows how you can set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the <strong>Ctrl</strong> key is pressed:</p>
+<p>The following example shows how you can set a global variable to <code>EINA_TRUE</code> when the <strong>Ctrl</strong> key is pressed:</p>
<pre class="prettyprint">
Eina_Bool ctrl_pressed = EINA_FALSE;
<h3 id="ecore_event_manage" name="ecore_event_manage">Sending Ecore Events to the Main Loop</h3>
<p>You can send Ecore events to the main loop yourself to handle actions of various origins through the same codepath. This is a thread-safe operation.</p>
-<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), additional data delivered to the callback, the <span style="font-family: Courier New,Courier,monospace">Ecore_End_Cb()</span> function used to free the additional data after it is delivered to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need them.</p>
+<p>To send an event, use the <code>ecore_event_add()</code> function. The function takes as parameters the event type (such as <code>ECORE_EVENT_KEY_DOWN</code> for key presses), additional data delivered to the callback, the <code>Ecore_End_Cb()</code> function used to free the additional data after it is delivered to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <code>NULL</code> if you do not need them.</p>
<h2 id="edje" name="edje">Edje Events</h2>
<p>Edje <a href="component_custom_n.htm#theme">themes</a> have program blocks in the EDC file, which are triggered upon the reception of a signal that can execute actions, such as changing the state of an Edje part and running another program.</p>
<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Managing a Single Signal Emitter</h3>
-<p>The following example shows a program block of an Edje file. The program is called <span style="font-family: Courier New,Courier,monospace">"change_color"</span>, and it is triggered on mouse clicks on the current part. It emits a <span style="font-family: Courier New,Courier,monospace">"got.a.click"</span> signal where the source is set to <span style="font-family: Courier New,Courier,monospace">"color_changer"</span>.</p>
+<p>The following example shows a program block of an Edje file. The program is called <code>"change_color"</code>, and it is triggered on mouse clicks on the current part. It emits a <code>"got.a.click"</code> signal where the source is set to <code>"color_changer"</code>.</p>
<pre class="prettyprint">
program
{
}
</pre>
-<p>To catch the emitted signal in the application code, use either the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
+<p>To catch the emitted signal in the application code, use either the <code>edje_object_signal_callback_add()</code> or <code>elm_object_signal_callback_add()</code> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
-<p>Both the functions take as parameters the object emitting the signal, the signal name, the signal source, the <span style="font-family: Courier New,Courier,monospace">Edje_Signal_Cb()</span> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, <span style="font-family: Courier New,Courier,monospace">"*"</span> acts as a wildcard. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+<p>Both the functions take as parameters the object emitting the signal, the signal name, the signal source, the <code>Edje_Signal_Cb()</code> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, <code>"*"</code> acts as a wildcard. The additional data is optional; use <code>NULL</code> if you do not need it.</p>
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
+<p>The callback function takes as parameters the additional data defined in the <code>edje_object_signal_callback_add()</code> or <code>elm_object_signal_callback_add()</code> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Managing Multiple Signal Emitters in Layouts</h3>
<p>Most of the time, Edje and Elementary are used together. In particular, you can define a group in Edje and use it as a <a href="container_layout_n.htm">layout</a> (containing several parts) in Elementary. The layouts enable you to perform theming and object placement in Edje while benefiting from the higher-level functions of Elementary.</p>
-<p>Since the layout contains multiple parts, you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions, as they require a single emitter object. The solution is to use the dedicated <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function.</p>
+<p>Since the layout contains multiple parts, you cannot use the <code>elm_object_signal_callback_add()</code> and <code>edje_object_signal_callback_add()</code> functions, as they require a single emitter object. The solution is to use the dedicated <code>elm_layout_signal_callback_add()</code> function.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function works similarly as the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>, it is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>, which is obtained through the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function. For more information, see <a href="container_layout_n.htm">Layout</a>.</p>
+<p>The <
code>elm_layout_signal_callback_add()</code> function works similarly as the <code>elm_object_signal_callback_add()</code> and <code>edje_object_signal_callback_add()</code> functions. The only difference is the type of the object in the first parameter. For <code>elm_layout_signal_callback_add()</code>, it is a pointer to an <code>Evas_Object</code>, which is obtained through the <code>elm_layout_add()</code> function. For more information, see <a href="container_layout_n.htm">Layout</a>.</p>
<h2 id="evas" name="evas">Evas Events</h2>
<h3>Managing Evas Event Handlers</h3>
-<p>Register and remove callback functions with the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> functions. The <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function), the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+<p>Register and remove callback functions with the <code>evas_event_callback_add()</code> and <code>evas_event_callback_add()</code> functions. The <code>evas_event_callback_add()</code> function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the <code>Evas_Object</code> through the <code>evas_object_evas_get()</code> function), the event type, the <code>Evas_Event_Cb</code> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <code>NULL</code> if you do not need it.</p>
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, and the event info data, which depends on the object type and the event at play.</p>
+<p>The callback function takes as parameters the additional data defined in the <code>evas_event_callback_add()</code> function parameters, the canvas where the event happened, and the event info data, which depends on the object type and the event at play.</p>
<pre class="prettyprint">
void
<p>The following table lists the available Evas event types.</p>
+ <p align="center" class="Table"><strong>Table: Evas event types</strong></p>
<table border="1">
- <caption>Table: Evas event types</caption>
<colgroup>
<col /><col />
</colgroup>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span></td>
+ <td><code>EVAS_CALLBACK_RENDER_FLUSH_PRE</code></td>
<td>Rendering on the canvas is about to be updated.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span></td>
+ <td><code>EVAS_CALLBACK_RENDER_FLUSH_POST</code></td>
<td>Rendering on the canvas is updated.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span></td>
+ <td><code>EVAS_CALLBACK_CANVAS_FOCUS_IN</code></td>
<td>Canvas receives focus.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span></td>
+ <td><code>EVAS_CALLBACK_CANVAS_FOCUS_OUT</code></td>
<td>Canvas loses focus.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span></td>
+ <td><code>EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</code></td>
<td>Any object on the canvas receives focus.
- <p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></td>
+ <p>Instead of this event type, use the <code>EVAS_CALLBACK_FOCUS_IN</code> type with the <code>evas_object_event_callback_add()</code> function.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span></td>
+ <td><code>EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</code></td>
<td>Any object on the canvas loses focus.
- <p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></td>
+ <p>Instead of this event type, use the <code>EVAS_CALLBACK_FOCUS_OUT</code> type with the <code>evas_object_event_callback_add()</code> function.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span></td>
+ <td><code>EVAS_CALLBACK_RENDER_PRE</code></td>
<td>Rendering on the canvas starts.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span></td>
+ <td><code>EVAS_CALLBACK_RENDER_POST</code></td>
<td>Rendering on the canvas finishes.</td>
</tr>
</tbody>
<p>Each Evas object on a specific Evas canvas can be manipulated independently. Each object can send events, which you can handle by registering callback functions for them. The events all relate to single objects, not the whole canvas.</p>
<h3>Managing Evas Object Event Handlers</h3>
-<p>Register and remove callback functions with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function takes as parameters the <span style="font-family: Courier New,Courier,monospace">Evas_Object_Event_Cb</span> callback function and the pointer to the additional data delivered to the callback.</p>
+<p>Register and remove callback functions with the <code>evas_object_event_callback_add()</code> and <code>evas_object_event_callback_del()</code> functions. The <code>evas_object_event_callback_add()</code> function takes as parameters the <code>Evas_Object_Event_Cb</code> callback function and the pointer to the additional data delivered to the callback.</p>
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+<p>The callback function takes as parameters the additional data defined in the <code>evas_event_callback_add()</code> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
<pre class="prettyprint">
void
<p>The following table lists the available Evas object event types.</p>
+ <p align="center" class="Table"><strong>Table: Evas object event types</strong></p>
<table border="1">
- <caption>Table: Evas object event types</caption>
<colgroup>
<col /><col />
</colgroup>
<tr>
<th>Event type</th>
<th>Description</th>
- <th><span style="font-family: Courier New,Courier,monospace">event_info</span></th>
+ <th><code>event_info</code></th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_IN</code></td>
<td>Pointer got over an object (with no other object between the 2).
This takes place no matter how the pointer becomes directly above the object.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span></td>
+ <td><code>Evas_Event_Mouse_In</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span></td>
- <td>Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event, but when the pointer goes outside the object area.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_OUT</code></td>
+ <td>Triggered similarly to the <code>EVAS_CALLBACK_MOUSE_IN</code> event, but when the pointer goes outside the object area.</td>
+ <td><code>Evas_Event_Mouse_Out</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_DOWN</code></td>
<td>Mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus).</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span></td>
+ <td><code>Evas_Event_Mouse_Down</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span></td>
- <td rowspan="8">Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_UP</code></td>
+ <td rowspan="8">Triggered similarly to the <code>EVAS_CALLBACK_MOUSE_DOWN</code> event.</td>
+ <td><code>Evas_Event_Mouse_Up</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_MOVE</code></td>
+ <td><code>Evas_Event_Mouse_Move</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span></td>
+ <td><code>EVAS_CALLBACK_MOUSE_WHEEL</code></td>
+ <td><code>Evas_Event_Mouse_Wheel</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span></td>
+ <td><code>EVAS_CALLBACK_MULTI_DOWN</code></td>
+ <td><code>Evas_Event_Multi_Down</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span></td>
+ <td><code>EVAS_CALLBACK_MULTI_UP</code></td>
+ <td><code>Evas_Event_Multi_Up</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span></td>
+ <td><code>EVAS_CALLBACK_MULTI_MOVE</code></td>
+ <td><code>Evas_Event_Multi_Move</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span></td>
+ <td><code>EVAS_CALLBACK_KEY_DOWN</code></td>
+ <td><code>Evas_Event_Key_Down</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span></td>
+ <td><code>EVAS_CALLBACK_KEY_UP</code></td>
+ <td><code>Evas_Event_Key_Up</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span></td>
+ <td><code>EVAS_CALLBACK_FOCUS_IN</code></td>
<td>Object gained focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span></td>
+ <td><code>Evas_Event_Mouse_In</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span></td>
+ <td><code>EVAS_CALLBACK_FOCUS_OUT</code></td>
<td>Object lost focus.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span></td>
+ <td><code>Evas_Event_Mouse_In</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span></td>
- <td>Object is shown by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>EVAS_CALLBACK_SHOW</code></td>
+ <td>Object is shown by a call to the <code>evas_object_show()</code> function.</td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span></td>
- <td>Object is hidden by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> function.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>EVAS_CALLBACK_HIDE</code></td>
+ <td>Object is hidden by a call to the <code>evas_object_hide()</code> function.</td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span></td>
+ <td><code>EVAS_CALLBACK_MOVE</code></td>
<td>Object origin was moved (origin is the top-left corner at the creation time of the object).</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span></td>
+ <td><code>EVAS_CALLBACK_RESIZE</code></td>
<td>Object is resized.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span></td>
- <td>Object is re-stacked by the <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span> or <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> function, or other events.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>EVAS_CALLBACK_RESTACK</code></td>
+ <td>Object is re-stacked by the <code>evas_object_stack_below()</code> or <code>evas_object_stack_above()</code> function, or other events.</td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span></td>
+ <td><code>EVAS_CALLBACK_DEL</code></td>
<td>Object is deleted.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span></td>
+ <td><code>EVAS_CALLBACK_FREE</code></td>
<td>For internal use only.
<p>Do not use (the object resources are about to be freed).</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span></td>
+ <td><code>EVAS_CALLBACK_HOLD</code></td>
<td>For internal use only.</td>
- <td><span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span></td>
+ <td><code>Evas_Event_Hold</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span></td>
+ <td><code>EVAS_CALLBACK_CHANGED_SIZE_HINTS</code></td>
<td>Object size hints changed.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span></td>
- <td>Image preloaded through the <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> function is loaded.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>EVAS_CALLBACK_IMAGE_PRELOADED</code></td>
+ <td>Image preloaded through the <code>evas_object_image_preload()</code> function is loaded.</td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span></td>
+ <td><code>EVAS_CALLBACK_IMAGE_UNLOADED</code></td>
<td>Image data is unloaded.</td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
-<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as <span style="font-family: Courier New,Courier,monospace">"clicked"</span>, <span style="font-family: Courier New,Courier,monospace">"clicked,double"</span> (double-click), and <span style="font-family: Courier New,Courier,monospace">"pressed"</span>. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
+<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as <code>"clicked"</code>, <code>"clicked,double"</code> (double-click), and <code>"pressed"</code>. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
<h3 id="evas_object_smart_callback" name="evas_object_smart_callback">Managing Evas Smart Object Event Handlers</h3>
-<ol><li>To add an Evas smart object event handler, register a callback for a specific event to an object with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.
-<p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p></li>
+<ol><li>To add an Evas smart object event handler, register a callback for a specific event to an object with the <code>evas_object_smart_callback_add()</code> function.
+<p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <code>NULL</code> if you do not need it.</p></li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb()</span> callback function.
-<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
-<p>If some of the parameters are not used by the callback function, the compiler can raise the "unused parameter" warning. To avoid it, annotate the parameter with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
+<li>Define the <code>Evas_Smart_Cb()</code> callback function.
+<p>The function takes as parameters the additional data defined in the <code>evas_object_smart_callback_add()</code> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+<p>If some of the parameters are not used by the callback function, the compiler can raise the "unused parameter" warning. To avoid it, annotate the parameter with the <code>__UNUSED__</code> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
<pre class="prettyprint">
void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);
</pre>
</li>
-<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function.
-<p>The function removes the first match for the given event and callback, and returns the data pointer that was used in the corresponding call to the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p></li></ol>
+<li>When no longer needed, remove the event handler with the <code>evas_object_smart_callback_del()</code> function.
+<p>The function removes the first match for the given event and callback, and returns the data pointer that was used in the corresponding call to the <code>evas_object_smart_callback_add()</code> function.</p></li></ol>
-<p>For a specific object and event, callbacks are called in the order they have been registered. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing, if it is called several times with the same callback function or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
+<p>For a specific object and event, callbacks are called in the order they have been registered. The <code>evas_object_smart_callback_add()</code> function does not execute any special processing, if it is called several times with the same callback function or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Example</h3>
-<p>The following example shows a button with a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal. Clicking the button removes the callback:</p>
+<p>The following example shows a button with a callback for the <code>clicked</code> signal. Clicking the button removes the callback:</p>
<pre class="prettyprint">
static void
_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>In the application, you can create text classes to apply the same font and font size to various text (textblock) parts.</p>
-<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system. If you use these text classes in a text or text block, a system font is applied to their texts. When the system font changes, the new font and size are applied to the texts too (except for the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class, which only applies the new font, not the size).</p>
+<p>The following words in the <code>text_class</code> definition are reserved for the system. If you use these text classes in a text or text block, a system font is applied to their texts. When the system font changes, the new font and size are applied to the texts too (except for the <code>tizen</code> text class, which only applies the new font, not the size).</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
+<li><code>button</code></li>
+<li><code>label</code></li>
+<li><code>entry</code></li>
+<li><code>title_bar</code></li>
+<li><code>list_item</code></li>
+<li><code>grid_item</code></li>
+<li><code>toolbar_item</code></li>
+<li><code>menu_item</code></li>
+<li><code>tizen</code></li>
</ul>
</li>
}
}</pre></li>
-<li>Use the system font when creating a text part with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class.
-<p>When the object is created or if the system setting changes, the part loads the new system font. However, the part font size remains 36 regardless of the new system font size, because the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class does not apply system font size changes.</p>
+<li>Use the system font when creating a text part with the <code>tizen</code> text class.
+<p>When the object is created or if the system setting changes, the part loads the new system font. However, the part font size remains 36 regardless of the new system font size, because the <code>tizen</code> text class does not apply system font size changes.</p>
<pre class="prettyprint">
description
<h2 id="supported" name="supported">Supported Font Styles</h2>
<p>The font styles supported by the EFL are listed in the following table.</p>
+<p align="center" class="Table"><strong>Table: Supported font styles</strong></p>
<table>
-<caption>Table: Supported font styles</caption>
<tbody>
<tr>
<th>Font feature</th>
<th>Style attribute</th>
</tr>
<tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+ <td rowspan="3"><code>font_style</code></td>
+ <td><code>normal</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
+ <td><code>oblique</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
+ <td><code>italic</code></td>
</tr>
<tr>
- <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+ <td rowspan="9"><code>font_width</code></td>
+ <td><code>normal</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
+ <td><code>ultracondensed</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
+ <td><code>extracondensed</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
+ <td><code>condensed</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
+ <td><code>semicondensed</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
+ <td><code>semiexpanded</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
+ <td><code>expanded</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
+ <td><code>extraexpanded</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
+ <td><code>ultraexpanded</code></td>
</tr>
<tr>
- <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+ <td rowspan="11"><code>font_weight</code></td>
+ <td><code>normal</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
+ <td><code>thin</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
+ <td><code>ultralight</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
+ <td><code>light</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
+ <td><code>book</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
+ <td><code>medium</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
+ <td><code>semibold</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
+ <td><code>bold</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
+ <td><code>ultrabold</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
+ <td><code>black</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
+ <td><code>extrablack</code></td>
</tr>
</tbody>
</table>
<p>The style attributes are not case-sensitive (however, the font feature names are).</p>
-<p>If you set the weight or width attribute to <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
+<p>If you set the weight or width attribute to <code>style=</code>, it is processed to the right attribute.</p>
<pre class="prettyprint">
font=TizenSans:style=Bold /* Textblock */
"TizenSans:style=Bold"; /* Text font */
<ul>
<li>Set the font for a common UI component:
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in EDC the same way (using markup tags), because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in EDC the same way (using markup tags), because the <code>TEXT</code> type does not support markup tags.
+</div>
<pre class="prettyprint">
char *buf = "<font=Sans:style=Regular font_size=50>Hello</font/>Font";
elm_object_part_text_set(layout, "textblock1", buf);
</pre>
</li>
-<li>Set the font for an entry component (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td>
- </tr>
- </tbody>
- </table>
+<li>Set the font for an entry component (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <code>elm_entry_text_style_user_push()</code> function. It overrides the default style of the entry component for each attribute.
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>elm_entry_text_style_user_push()</code> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.
+</div>
+
<pre class="prettyprint">
/* Main text font */
char *user_style = "DEFAULT='font=Sans:style=Regular font_size=40'";
<p>You can use the Edje Class: Text API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td>
- </tr>
- </tbody>
- </table>
-
+<div class="note">
+ <strong>Note</strong>
+ Note that the <code>text_class</code> cannot be used in a UI component with markup text or the <code>elm_entry_text_style_user_push()</code> function. You must set the <code>text_class</code> in EDC.
+</div>
<p>To set the text class, you can use reserved words or make your own text class:</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
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;
}
</pre>
-<p>In the above code, a header file (<span style="font-family: Courier New,Courier,monospace">Elementary.h</span>) is included. The Elementary library is a high-level wrapper of EFL, and you can use other EFL libraries, such as Evas, Ecore, and Edje, by including the Elementary header. The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function runs the application.</p>
+<p>In the above code, a header file (<code>Elementary.h</code>) is included. The Elementary library is a high-level wrapper of EFL, and you can use other EFL libraries, such as Evas, Ecore, and Edje, by including the Elementary header. The <code>ui_app_main()</code> function runs the application.</p>
<p>To run an Elementary application, you must initiate, run, and terminate the Elementary main loop. You cannot see the code in the template though, since it is hidden in a higher-layer library (application framework). The following code snippet shows the main function of a minimal Elementary application:</p>
<p>To use the Elementary library:</p>
<ol>
-<li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
-<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function. The function does not return and constantly loops and runs the event and processing tasks.</li>
-<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function. The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</li>
+<li>Initialize the Elementary library with the <code>elm_init()</code> function.</li>
+<li>Start the Elementary main loop with the <code>elm_run()</code> function. The function does not return and constantly loops and runs the event and processing tasks.</li>
+<li>When your application terminates, shut down the Elementary library with the <code>elm_shutdown()</code> function. The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</li>
</ol>
<p>EFL UI programming starts from adding a window. Basically, the way to build an EFL UI application is by adding a window and setting content in it.</p>
<p>The window is the bottom-most UI component in an EFL application. Usually, when an application is launched, a window that fits into the device screen is created and shown.</p>
-<p class="figure">Figure: Empty window</p>
+<p align="center"><strong>Figure: Empty window</strong></p>
<p align="center"><img alt="Empty window" src="../../../images/window.png" /></p>
<p>Windows are provided by the Elementary library. Since Elementary is a high-level wrapper on the top-most layer in the EFL hierarchy, you can start EFL UI programming with the Elementary library and expand the scope to lower-level libraries, as needed.</p>
<p>After adding a window, you need to fill the window with content. Usually, a window is filled with a UI container and the container is filled with another UI container or UI components. Building a user interface is basically a process of stacking UI components on top of each other in layers.</p>
-<p class="figure">Figure: Window filled with content</p>
+<p align="center"><strong>Figure: Window filled with content</strong></p>
<p align="center"><img alt="Window filled with content" src="../../../images/filled_window.png" /></p>
<p>A conformant is a UI container, which adjusts its size when a virtual keypad becomes visible. The following code snippet shows how to fill a window with a conformant container:</p>
<p>After arranging graphical elements, you can add a dynamic factor, such as user interaction or animation, in your application. EFL provides various event types that you can use to monitor and react to user input and system events in the UI. It also provides many animating methods.</p>
<ul>
-<li>Elementary UI components define their own behavior internally, which includes visual effects or the response to user input. For example, lists are scrolled up and down according to touch events. Some of them provide animation options by API. For instance, labels have a slide function. Besides these, each UI component defines its own callback signal, so you can define the action triggered by the event. The following code snippet shows how to register a callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal of a button:
+<li>Elementary UI components define their own behavior internally, which includes visual effects or the response to user input. For example, lists are scrolled up and down according to touch events. Some of them provide animation options by API. For instance, labels have a slide function. Besides these, each UI component defines its own callback signal, so you can define the action triggered by the event. The following code snippet shows how to register a callback for the <code>clicked</code> signal of a button:
<pre class="prettyprint">
evas_object_smart_callback_add(button, "clicked", _button_clicked, NULL);
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<li><a href="evas_objects_n.htm">Evas objects</a>
<p>The Evas object is the most basic visual entity.</p>
-<p class="figure">Figure: Evas objects</p>
+<p align="center"><strong>Figure: Evas objects</strong></p>
<p align="center"><img alt="Evas objects" src="../../../images/evas_object.png" /></p>
<p>Evas objects consists of primitive and smart objects:</p>
<p>Evas is designed to work on embedded systems all the way to large and powerful multi-CPU workstations. If necessary, it can be compiled to only have the features you need for your target platform. It has several display back-ends, allowing it to display on several display systems, making it portable for cross-device and cross-platform development.</p>
<p>Evas is not dependent or aware of main loops, or input and output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report window updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in the Ecore_Evas wrapper/helper set of functions.</p>
-
-
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Introduction</h1>
-<p>This topic provides some background information on what EFL is and how it works. To start programming right away, see <a href="getting_started_n.htm">Getting Started</a>.</p>
+<p>This topic provides some background information on what EFL is and how it works. To start programming right away, see <a href="getting_started_n.htm">Getting Started with EFL UI Programming</a>.</p>
<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS's existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
<p>EFL is a collection of libraries. They cover a range of functionality from managing the application life-cycle to rendering graphical objects. EFL libraries build on top of each other in layers, steadily becoming higher-level, yet allowing access to each level as they go. The higher up you go, the less you have to do yourself. The Elementary library is about as high up as you get, while you still access layers below it for day-to-day tasks, as there is no need to wrap tasks that work perfectly well as-is.</p>
-<p class="figure">Figure: EFL layers</p>
+<p align="center"><strong>Figure: EFL layers</strong></p>
<p align="center"><img alt="EFL layers" src="../../../images/efllibs.png" /></p>
-<table border="1">
- <caption>Table: Libraries in EFL</caption>
+<p align="center" class="Table"><strong>Table: Libraries in EFL</strong></p>
+<table border="1">
<colgroup>
<col /><col />
</colgroup>
<h2 id="how">How EFL Works</h2>
<p>EFL brings a few new or different paradigms to the table. Some of these mesh well with what is already done, while others are vastly different, but bring major benefits if understood and used correctly. One of the major paradigms is the rendering and canvas model that EFL has thanks mostly to Evas, Ecore, and Edje. In order to understand it, you must first understand the general event and work flow model. Everything slots in nicely if this model is embraced (and extended appropriately).</p>
-<p>EFL has embraced the same main loop concept that GTK+ and many other toolkits and software have adopted. It has rolled it wholeheartedly into the system as the core. The idea is that you do some initialization of the application and then enter a main loop function (in Ecore it is the <span style="font-family: Courier New,Courier,monospace">ecore_mainloop_begin()</span> function, or if you use Elementary, it wraps this with a shorter <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function):</p>
+<p>EFL has embraced the same main loop concept that GTK+ and many other toolkits and software have adopted. It has rolled it wholeheartedly into the system as the core. The idea is that you do some initialization of the application and then enter a main loop function (in Ecore it is the <code>ecore_mainloop_begin()</code> function, or if you use Elementary, it wraps this with a shorter <code>elm_run()</code> function):</p>
<ul>
<li>This loop function sits in a loop and checks for events, handles timers and other services, and calls callbacks set up beforehand or during the running of the loop.</li>
-<li>The loop function exits if it has been requested to exit (in Ecore using the <span style="font-family: Courier New,Courier,monospace">ecore_main_loop_quit()</span> function, and in Elementary that wraps Ecore using the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function).</li>
+<li>The loop function exits if it has been requested to exit (in Ecore using the <code>ecore_main_loop_quit()</code> function, and in Elementary that wraps Ecore using the <code>elm_exit()</code> function).</li>
</ul>
<p>For those familiar with traditional game programming, this is familiar, except that you have also implemented the main loop with an infinite while or for loop that fetches input events, updates the game world, renders the updated scene, and then loops and repeats as quickly as it can.</p>
<p>In the EFL view, the application, when executing any callbacks other than idlers, is "active". It goes in and out of this active state by calling the idle enterer and exiter callbacks (edge-triggered callbacks), which are triggered whenever going in and out of the idle state. Idlers themselves do not transition the main loop as such from being in an idle state, so any Idler that needs to "wake up" the loop conceptually to become active needs to queue something that ordinarily wakes up the main loop, such as a job or timer. This is the only exception due to the conceptual model and the need for efficiency (not entering and exiting idle per idler call).</p>
-<p>Besides the above exception, the loop model basically starts by calling the idle enterers, and then sleeps until something happens. What happens depends on the system, but wake-up events can be time-based (timers and animators) and these are scheduled by Ecore on a "best effort" basis. That means they use the system sleep mechanism (such as <span style="font-family: Courier New,Courier,monospace">select()</span> function with a timeout or <span style="font-family: Courier New,Courier,monospace">epoll()</span> function) to send the CPU to sleep and wait until an event on an input (a file descriptor) wakes up, or until the timeout happens.</p>
+<p>Besides the above exception, the loop model basically starts by calling the idle enterers, and then sleeps until something happens. What happens depends on the system, but wake-up events can be time-based (timers and animators) and these are scheduled by Ecore on a "best effort" basis. That means they use the system sleep mechanism (such as <code>select()</code> function with a timeout or <code>epoll()</code> function) to send the CPU to sleep and wait until an event on an input (a file descriptor) wakes up, or until the timeout happens.</p>
<p>The system can impose granularity limits on a sleep, so beware that this is not a guaranteed action, but in general good enough. Once Ecore wakes up, it finds out why it woke up and handles the situation appropriately. It calls timers or animators that expired, or calls fd handlers to read data (or write data) on "ready" fds and queue events as a result of this. Ecore also does some things that other main loops do not, such as serializing UNIX system handlers into the main loop event queue, so that things like SIGCHLD from child processes is handled for you with an event for the child exit placed in your event queue.</p>
<p>A major change caused by having such a canvas and state model for the GUI is that you no longer actually render anything yourself. You must change the mindset from a "I draw" to "I create and manipulate" model. This is very different from almost all lower and even mid-level APIs that developers are used to - everything from Xlib, Cairo, and GDI to OpenGL and more. They all work on the "draw and forget" model, while Evas is a retained-mode scene graph that you manipulate.</p>
-<p>Evas makes the cost of most operations (such as <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span>, <span style="font-family: Courier New,Courier,monospace">evas_object_resize()</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span>) be "zero cost" (or as close to zero as possible). All most of these calls do is to update coordinates within an object and set a changed flag. That is it. They do not draw anything. For example, even setting the file on an image object through the <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function only loads the image header, so the object can have the original image dimensions and alpha channel flag set. It does not decode the image data, avoiding a lot of file IO and decode overhead, and pushes this off until later (render time, if the image is visible and the data needed). If you are sure that you need the data though, Evas has the ability to begin an asynchronous preload of the image data in a background thread and inform you when it is ready.</p>
+<p>Evas makes the cost of most operations (such as <code>evas_object_move()</code>, <code>evas_object_resize()</code>, and <code>evas_object_show()</code>) be "zero cost" (or as close to zero as possible). All most of these calls do is to update coordinates within an object and set a changed flag. That is it. They do not draw anything. For example, even setting the file on an image object through the <code>evas_object_image_file_set()</code> function only loads the image header, so the object can have the original image dimensions and alpha channel flag set. It does not decode the image data, avoiding a lot of file IO and decode overhead, and pushes this off until later (render time, if the image is visible and the data needed). If you are sure that you need the data though, Evas has the ability to begin an asynchronous preload of the image data in a background thread and inform you when it is ready.</p>
<p>If you mold your programming paradigm around this scene graph and state engine, you find yourself spending less time fighting EFL, and in fact end up with very lean, compact, and concise code that is almost entirely program and UI logic, which is what your application should be anyway, with all the nasty footwork being done for you. If you want to work with a more traditional model, where you have to take care of rendering yourself and you literally drive the timeline by hand, you find yourself fighting EFL and spending a lot of code and time working against optimizations and streamlining. Work with the model and your applications begin to be clean and seamless expressions of high-level logic, with the low-level handled for you by EFL in a clean and efficient way.</p>
<p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
- <p class="figure">Figure: Menu and Back keys</p>
+ <p align="center"><strong>Figure: Menu and Back keys</strong></p>
<p align="center"><img alt="Menu and Back keys" src="../../../images/efl_phone.png" /></p>
<p>The EFL Extension library maintains its own object stack to determine which object receives the event. Only visible objects are added to the stack.</p>
<p>The stack is based on Evas layers, which means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event. The following figure shows an example of objects on different layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
-<p class="figure">Figure: Objects on different layers</p>
+<p align="center"><strong>Figure: Objects on different layers</strong></p>
<p align="center"><img alt="Objects on different layers" src="../../../images/efl_layers.png" /></p>
<p>If the objects with callbacks for the same event are on the same layer, the object which is registered the callback first gets the event.</p>
-<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_add()</span> function with the application callback type:</p>
+<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <code>eext_object_event_callback_add()</code> function with the application callback type:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
+<li><code>EEXT_CALLBACK_BACK</code>: Hardware <strong>Back</strong> key event</li>
+<li><code>EEXT_CALLBACK_MORE</code>: Hardware <strong>Menu</strong> key event</li>
</ul>
-<p>To delete a registered event in the EFL Extension, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_del()</span> function.</p>
+<p>To delete a registered event in the EFL Extension, use the <code>eext_object_event_callback_del()</code> function.</p>
<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for <a href="component_popup_mn.htm">popup</a>, <a href="component_ctxpopup_mn.htm">ctxpopup</a>, <a href="container_naviframe_n.htm">naviframe</a>, and <a href="component_entry_mn.htm">entry</a> components.</p>
<h2 id="hw" name="hw">Managing Hardware Key Events</h2>
-<p>The following example application has a window with a naviframe, and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe. When the <strong>Menu</strong> key is pressed, the <span style="font-family: Courier New,Courier,monospace">_create_popup()</span> callback creates a popup and registers an EFL Extension <strong>Back</strong> key event for the popup. When the <strong>Back</strong> key is pressed:</p>
+<p>The following example application has a window with a naviframe, and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe. When the <strong>Menu</strong> key is pressed, the <code>_create_popup()</code> callback creates a popup and registers an EFL Extension <strong>Back</strong> key event for the popup. When the <strong>Back</strong> key is pressed:</p>
<ul>
-<li>If the popup is shown, the <span style="font-family: Courier New,Courier,monospace">eext_popup_back_cb()</span> callback registered for the popup is triggered, because the popup is located on a higher level than the naviframe. The callback removes the popup.</li>
-<li>If the popup is not shown, the <span style="font-family: Courier New,Courier,monospace">_nf_back_cb()</span> callback registered for the naviframe is triggered. The callback hides the application.</li>
+<li>If the popup is shown, the <code>eext_popup_back_cb()</code> callback registered for the popup is triggered, because the popup is located on a higher level than the naviframe. The callback removes the popup.</li>
+<li>If the popup is not shown, the <code>_nf_back_cb()</code> callback registered for the naviframe is triggered. The callback hides the application.</li>
</ul>
<p>To manage hardware key events:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension</a> API, include the <span style="font-family: Courier New,Courier,monospace"><efl_extension.h></span> header file in your application:</p>
+<p>To use the functions and data types of the <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension</a> API, include the <code><efl_extension.h></code> header file in your application:</p>
<pre class="prettyprint">
#include <efl_extension.h>
</pre>
<li>In the <strong>Back</strong> key callbacks:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace;">eext_popup_back_cb()</span> callback is a macro function that removes the popup.
-<p>To use a hide effect in dismissing the popup, use the <span style="font-family: Courier New,Courier,monospace;">elm_popup_dismiss()</span> function in the callback:</p>
+<li>The <code>eext_popup_back_cb()</code> callback is a macro function that removes the popup.
+<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);
}
</pre>
</li>
-<li>To hide the application window, use the <span style="font-family: Courier New,Courier,monospace;">elm_win_lower()</span> function in the <span style="font-family: Courier New,Courier,monospace;">_nf_back_cb()</span> callback:
+<li>To hide the application window, use the <code>elm_win_lower()</code> function in the <code>_nf_back_cb()</code> callback:
<pre class="prettyprint">
static void
_nf_back_cb(void *data, Evas_Object *obj, void *event_info)
<p>The applications do not normally grab hardware key events, because each key event is delivered to the focused window by default. Some applications, however, have more advanced functionalities and behavior. For example, in most applications, a volume key press opens a volume control popup. But, in a memo application, you can use the volume key to resize the text.</p>
-<p>To receive special hardware key events in the application, use the <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_set()</span> and <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_unset()</span> functions.</p>
+<p>To receive special hardware key events in the application, use the <code>eext_win_keygrab_set()</code> and <code>eext_win_keygrab_unset()</code> functions.</p>
<p>To grab hardware key events:</p>
<ol>
-<li>To use the functions and data types of the EFL Extension API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><efl_extension.h></span> header file in your application:
+<li>To use the functions and data types of the EFL Extension API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <code><efl_extension.h></code> header file in your application:
<pre class="prettyprint">
#include <efl_extension.h>
</pre>
</pre>
</li>
-<li>Grab key events using the <
span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_set()</span> function with the application window object and the <a href="#keystring">key string</a> as parameters.
+<li>Grab key events using the <
code>eext_win_keygrab_set()</code> function with the application window object and the <a href="#keystring">key string</a> as parameters.
<pre class="prettyprint">
eext_win_keygrab_set(win, "XF86AudioRaiseVolume");
</pre>
</li>
-<li>When the application no longer needs to grab key events, call the <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_unset()</span> function:
+<li>When the application no longer needs to grab key events, call the <code>eext_win_keygrab_unset()</code> function:
<pre class="prettyprint">
eext_win_keygrab_unset(win, "XF86AudioRaiseVolume");
</pre>
<p>The following table lists the hardware keys from which you can grab events in different profiles.</p>
+ <p align="center" class="Table"><strong>Table: Supported hardware keys</strong></p>
<table id="keystring">
- <caption>
- Table: Supported hardware keys
- </caption>
<tbody>
<tr>
<th>Key</th>
<th>TV</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioRaiseVolume"</span></td>
+ <td><code>"XF86AudioRaiseVolume"</code></td>
<td>Key to raise the volume</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioLowerVolume"</span></td>
+ <td><code>"XF86AudioLowerVolume"</code></td>
<td>Key to lower the volume</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86PowerOff"</span></td>
+ <td><code>"XF86PowerOff"</code></td>
<td>Power key to switch the device on and off</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Menu"</span></td>
+ <td><code>"XF86Menu"</code></td>
<td>Application-specific menu key</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Home"</span></td>
+ <td><code>"XF86Home"</code></td>
<td>Key to go to the home screen</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Back"</span></td>
+ <td><code>"XF86Back"</code></td>
<td>Key to go back to the previous status or page</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Camera"</span></td>
+ <td><code>"XF86Camera"</code></td>
<td>Half shutter key to do something before taking a picture on the camera</td>
<td>Yes</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Camera_Full"</span></td>
+ <td><code>"XF86Camera_Full"</code></td>
<td>Key to take a picture on the camera</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Search"</span></td>
+ <td><code>"XF86Search"</code></td>
<td>Key to go to the search application</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioPlay"</span></td>
+ <td><code>"XF86AudioPlay"</code></td>
<td>Key to play media</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioPause"</span></td>
+ <td><code>"XF86AudioPause"</code></td>
<td>Key to pause the media being played</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioStop"</span></td>
+ <td><code>"XF86AudioStop"</code></td>
<td>Key to stop the media being played</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioNext"</span></td>
+ <td><code>"XF86AudioNext"</code></td>
<td>Key to go to the next media item</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioPrev"</span></td>
+ <td><code>"XF86AudioPrev"</code></td>
<td>Key to go to the previous media item</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioRewind"</span></td>
+ <td><code>"XF86AudioRewind"</code></td>
<td>Key to rewind the playing position of the media</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioForward"</span></td>
+ <td><code>"XF86AudioForward"</code></td>
<td>Key to forward the playing position of the media</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioMedia"</span></td>
+ <td><code>"XF86AudioMedia"</code></td>
<td>Key to go to the media player</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioPlayPause"</span></td>
+ <td><code>"XF86AudioPlayPause"</code></td>
<td>Key to toggle between play and pause</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioMute"</span></td>
+ <td><code>"XF86AudioMute"</code></td>
<td>Key to mute the media</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioRecord"</span></td>
+ <td><code>"XF86AudioRecord"</code></td>
<td>Key to start recording media</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Cancel"</span></td>
+ <td><code>"Cancel"</code></td>
<td>Key to cancel the action triggered by the previous keys</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86SoftKBD"</span></td>
+ <td><code>"XF86SoftKBD"</code></td>
<td>Key to show and hide the soft keyboard</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86QuickPanel"</span></td>
+ <td><code>"XF86QuickPanel"</code></td>
<td>Key to toggle the quick panel</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86TaskPane"</span></td>
+ <td><code>"XF86TaskPane"</code></td>
<td>Key to toggle the task switcher</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86HomePage"</span></td>
+ <td><code>"XF86HomePage"</code></td>
<td>Key to go to the homepage of the user-defined Web browser</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86WWW"</span></td>
+ <td><code>"XF86WWW"</code></td>
<td>Key to launch the user-defined Web browser</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Mail"</span></td>
+ <td><code>"XF86Mail"</code></td>
<td>Key to go to the user-defined email application</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86ScreenSaver"</span></td>
+ <td><code>"XF86ScreenSaver"</code></td>
<td>Key to activate the screen lock (such as a pattern lock or a PIN lock)</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86MonBrightnessDown"</span></td>
+ <td><code>"XF86MonBrightnessDown"</code></td>
<td>Key to lower the screen brightness</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86MonBrightnessUp"</span></td>
+ <td><code>"XF86MonBrightnessUp"</code></td>
<td>Key to raise the screen brightness</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Voice"</span></td>
+ <td><code>"XF86Voice"</code></td>
<td>Key to activate a voice-related application</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Hangul"</span></td>
+ <td><code>"Hangul"</code></td>
<td>Key to toggle the current language</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Apps"</span></td>
+ <td><code>"XF86Apps"</code></td>
<td>Key to call the application holder application</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Call"</span></td>
+ <td><code>"XF86Call"</code></td>
<td>Key to launch the call application</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Game"</span></td>
+ <td><code>"XF86Game"</code></td>
<td>Key to go to the game application</td>
<td>Yes</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86VoiceWakeUp_LPSD"</span></td>
+ <td><code>"XF86VoiceWakeUp_LPSD"</code></td>
<td>Key to wake up from voice input (LPSD)</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86VoiceWakeUp"</span></td>
+ <td><code>"XF86VoiceWakeUp"</code></td>
<td>Key to wake up from voice input</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86TV"</span></td>
+ <td><code>"XF86TV"</code></td>
<td>Key to display the TV screen directly</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Display"</span></td>
+ <td><code>"XF86Display"</code></td>
<td>Key to toggle the video source </td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86RCConfig"</span></td>
+ <td><code>"XF86RCConfig"</code></td>
<td>Key to set the remote control's specific configuration</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86RCMode"</span></td>
+ <td><code>"XF86RCMode"</code></td>
<td>Key to show and hide the virtual remote control on the screen</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"1"</span></td>
+ <td><code>"1"</code></td>
<td>Numeric key 1 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"2"</span></td>
+ <td><code>"2"</code></td>
<td>Numeric key 2 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"3"</span></td>
+ <td><code>"3"</code></td>
<td>Numeric key 3 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"4"</span></td>
+ <td><code>"4"</code></td>
<td>Numeric key 4 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"5"</span></td>
+ <td><code>"5"</code></td>
<td>Numeric key 5 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"6"</span></td>
+ <td><code>"6"</code></td>
<td>Numeric key 6 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"7"</span></td>
+ <td><code>"7"</code></td>
<td>Numeric key 7 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"8"</span></td>
+ <td><code>"8"</code></td>
<td>Numeric key 8 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"9"</span></td>
+ <td><code>"9"</code></td>
<td>Numeric key 9 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"0"</span></td>
+ <td><code>"0"</code></td>
<td>Numeric key 0 on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"-"</span></td>
+ <td><code>"-"</code></td>
<td>Minus key on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86LowerChannel"</span></td>
+ <td><code>"XF86LowerChannel"</code></td>
<td>Key to lower the channel number</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86RaiseChannel"</span></td>
+ <td><code>"XF86RaiseChannel"</code></td>
<td>Key to raise the channel number</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86ChannelList"</span></td>
+ <td><code>"XF86ChannelList"</code></td>
<td>Key to display the channel list</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86PreviousChannel"</span></td>
+ <td><code>"XF86PreviousChannel"</code></td>
<td>Key to display the previous channel</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86SysMenu"</span></td>
+ <td><code>"XF86SysMenu"</code></td>
<td>Key to launch the system menu</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86SimpleMenu"</span></td>
+ <td><code>"XF86SimpleMenu"</code></td>
<td>Key to launch the simple menu</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86History"</span></td>
+ <td><code>"XF86History"</code></td>
<td>Key to launch the history functionality</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Favorites"</span></td>
+ <td><code>"XF86Favorites"</code></td>
<td>Key to launch the favorite channels functionality</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Up"</span></td>
+ <td><code>"Up"</code></td>
<td>Arrow key UP on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Down"</span></td>
+ <td><code>"Down"</code></td>
<td>Arrow key DOWN on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Left"</span></td>
+ <td><code>"Left"</code></td>
<td>Arrow key LEFT on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Right"</span></td>
+ <td><code>"Right"</code></td>
<td>Arrow key RIGHT on the remote control</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"Return"</span></td>
+ <td><code>"Return"</code></td>
<td>OK key on the remote control to confirm or select an item</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Close"</span></td>
+ <td><code>"XF86Close"</code></td>
<td>Exit key on the remote control to terminate the current menu or application</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Info"</span></td>
+ <td><code>"XF86Info"</code></td>
<td>Key to display the basic and auxiliary information on the screen</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Red"</span></td>
+ <td><code>"XF86Red"</code></td>
<td>Key to execute the functionality registered to the RED key</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Green"</span></td>
+ <td><code>"XF86Green"</code></td>
<td>Key to execute the functionality registered to the GREEN key</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Yellow"</span></td>
+ <td><code>"XF86Yellow"</code></td>
<td>Key to execute the functionality registered to the YELLOW key</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Blue"</span></td>
+ <td><code>"XF86Blue"</code></td>
<td>Key to execute the functionality registered to the BLUE key</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86ProgInfo"</span></td>
+ <td><code>"XF86ProgInfo"</code></td>
<td>Key to display the program information</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86PictureMode"</span></td>
+ <td><code>"XF86PictureMode"</code></td>
<td>Key to change the screen mode</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86PictureSize"</span></td>
+ <td><code>"XF86PictureSize"</code></td>
<td>Key to change the screen size and aspect ratio</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86PIP"</span></td>
+ <td><code>"XF86PIP"</code></td>
<td>Key to set the PIP (Picture-In-Picture) mode to display one screen on the other</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Guide"</span></td>
+ <td><code>"XF86Guide"</code></td>
<td>Key to display the user guide</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86AudioMode"</span></td>
+ <td><code>"XF86AudioMode"</code></td>
<td>Key to set or change the audio mode</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF86Subtitle"</span></td>
+ <td><code>"XF86Subtitle"</code></td>
<td>Key to display or hide the subtitles</td>
<td>-</td>
<td>-</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">"XF863D"</span></td>
+ <td><code>"XF863D"</code></td>
<td>Key to set or change the 3D mode</td>
<td>-</td>
<td>-</td>
<h1 id="collections_block" name="collections_block">Collections Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
+<p>The <code>collections</code> block is used to list the groups that compose the theme. Additional <code>collections</code> blocks do not prevent overriding group names.</p>
-<p class="figure">Figure: Collections block</p>
-<p align="center"><img alt="Collections block" src="../../../images/diagram_collections.png" /></p>
+<p align="center"><strong>Figure: Collections block</strong></p>
+<p align="center"><img width="450" alt="Collections block" src="../../../images/diagram_collections.png" /></p>
<pre class="prettyprint">
collections {
</pre>
<ul>
-<li id="base_scale"><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
+<li id="base_scale"><code>base_scale: [scale factor]</code>
<p>Sets information about the scale factor in the EDC file.</p>
-<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of the application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0. If the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the base scale.</p>
+<p>Object scaling must be defined in the <code>config.xml</code> file of the application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0. If the application is based on another scale, this scale must be defined in the <code>config.xml</code> file. This predefined scale is called the base scale.</p>
<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
<p>For more information about supporting multiple screens in one EDC, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
</li>
-<li id="Sounds" name="Sounds"><span style="font-family: Courier New,Courier,monospace;">sounds</span> block
-<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains one or more sound sample and tone items.</p>
+<li id="Sounds" name="Sounds"><code>sounds</code> block
+<p>The <code>sounds</code> block contains one or more sound sample and tone items.</p>
<ul>
-<li id="Tone"><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
+<li id="Tone"><code>tone [tone name] [frequency]</code>
<p>Sets the sound of the given frequency.</p>
</li>
-<li id="Sample" name="Sample"><span style="font-family: Courier New,Courier,monospace;">sounds.sample</span> block
+<li id="Sample" name="Sample"><code>sounds.sample</code> block
-<p>The <span style="font-family: Courier New,Courier,monospace;">sample</span> block defines the sound sample.</p>
+<p>The <code>sample</code> block defines the sound sample.</p>
<ul>
-<li id="Name"><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
-<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool's <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. The valid compression types are:</p>
+<li id="Name"><code>name [sample name] [compression type] (quality)</code>
+<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with the <code>edje_cc</code> tool's <code>-sd</code> option. The valid compression types are:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
- <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
- <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
- <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
+ <li><code>RAW</code>: Uncompressed</li>
+ <li><code>COMP</code>: Lossless compression</li>
+ <li><code>LOSSY [-0.1 - 1.0]</code>: Lossy compression with quality from 0.0 to 1.0</li>
+ <li><code>AS_IS</code>: No compression or encoding, write the file information as it is</li>
</ul>
</li>
</ul>
<ul>
-<li id="Sound_Source"><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
+<li id="Sound_Source"><code>source [file name]</code>
<p>Sets the sound source file name (mono or stereo WAV file; only files with the 44.1 KHz sample rate are supported for now).</p>
</li>
</ul>
</ul>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">group</span> block
+<li><code>group</code> block
<p>The <a href="learn_edc_group_n.htm">group</a> block defines Edje Objects.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="color_classes_block" name="color_classes_block">Color Classes Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> block allows you to name an arbitrary group of colors to be used in the theme. The application can use that name to alter the color values at runtime.</p>
+<p>The <code>color_classes</code> block contains one or more <code>color_class</code> blocks. Each <code>color_class</code> block allows you to name an arbitrary group of colors to be used in the theme. The application can use that name to alter the color values at runtime.</p>
-<p class="figure">Figure: Color classes block</p>
-<p align="center"><img alt="Color classes block" src="../../../images/diagram_color_classes.png"/></p>
+<p align="center"><strong>Figure: Color classes block</strong></p>
+<p align="center"><img width="450" alt="Color classes block" src="../../../images/diagram_color_classes.png"/></p>
<pre class="prettyprint">
</pre>
<ul>
-<li id="name"><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
+<li id="name"><code>name [color class name]</code>
<p>Sets the name for the color class, and is used as a reference by both the theme and the application.</p>
</li>
-<li id="color"><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<li id="color"><code>color [red] [green] [blue] [alpha]</code>
<p>Sets the main color.</p>
</li>
-<li id="color2"><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<li id="color2"><code>color2 [red] [green] [blue] [alpha]</code>
<p>Used as an outline in text and textblock parts.</p>
</li>
-<li id="color3"><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<li id="color3"><code>color3 [red] [green] [blue] [alpha]</code>
<p>Used as a shadow in text and textblock parts.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="data_block" name="data_block">Data Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block behaves in the same way as the <span style="font-family: Courier New,Courier,monospace;">data</span> block inside the <span style="font-family: Courier New,Courier,monospace;">parts</span> block, but the usage is different: this block is useful for data that covers the whole theme, such as license information, version, and authors.</p>
+<p>The <code>data</code> block behaves in the same way as the <code>data</code> block inside the <code>parts</code> block, but the usage is different: this block is useful for data that covers the whole theme, such as license information, version, and authors.</p>
-<p class="figure">Figure: Data block</p>
-<p align="center"><img alt="Data block" src="../../../images/diagram_data.png"/></p>
+<p align="center"><strong>Figure: Data block</strong></p>
+<p align="center"><img width="450" alt="Data block" src="../../../images/diagram_data.png"/></p>
<pre class="prettyprint">
data {
file: "otherkey" "filename.ext";
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="fonts_block" name="fonts_block">Fonts Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
+<p>The <code>fonts</code> block is used to list each font file with an alias used later in the theme. As with the <code>images</code> block, additional <code>fonts</code> blocks can be included inside other blocks.</p>
-<p class="figure">Figure: Fonts block</p>
-<p align="center"><img alt="Fonts block" src="../../../images/diagram_fonts.png"/></p>
+<p align="center"><strong>Figure: Fonts block</strong></p>
+<p align="center"><img width="450" alt="Fonts block" src="../../../images/diagram_fonts.png"/></p>
<pre class="prettyprint">
fonts {
</pre>
<ul>
-<li id="font"><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
-<p>This property is included for each font, and it defines the <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>. The full path to the directory containing the font files can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool's <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
+<li id="font"><code>font [font filename] [font alias]</code>
+<p>This property is included for each font, and it defines the <code>font file</code> and <code>alias</code>. The full path to the directory containing the font files can be defined later with the <code>edje_cc</code> tool's <code>-fd</code> option.
</p></li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1 id="collections_block" name="collections_block">Group Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">group</span> block contains a list of parts and programs that compose a given Edje Object.</p>
+<p>The <code>group</code> block contains a list of parts and programs that compose a given Edje Object.</p>
-<p align="center"><img alt="Group block" src="../../../images/diagram_group.png"/></p>
+<p align="center"><strong>Figure: Group block</strong></p>
+<p align="center"><img width="450" alt="Group block" src="../../../images/diagram_group.png"/></p>
<pre class="prettyprint">
group {
</pre>
<ul>
-<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
+<li id="Group_Name"><code>name [group name]</code>
<p>Sets the name used by the application to load the resulting Edje object and to identify the group to swallow in a group part. If a group with the same name exists already, it is completely overridden by the new group.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
-<p>Flags the group as being used only for inheriting, which inhibits the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool from resolving programs and parts that do not exist in this group, but are located in the group which is inheriting this group.</p>
+<li><code>inherit_only [1 or 0]</code>
+<p>Flags the group as being used only for inheriting, which inhibits the <code>edje_cc</code> tool from resolving programs and parts that do not exist in this group, but are located in the group which is inheriting this group.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
-<p>Sets the parent group name for inheritance. The <span style="font-family: Courier New,Courier,monospace;">inherit</span> property is used to inherit any predefined group and change some properties which belong to a <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span>, or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table>
+<li><code>inherit [parent group name]</code>
+<p>Sets the parent group name for inheritance. The <code>inherit</code> property is used to inherit any predefined group and change some properties which belong to a <code>part</code>, <code>description</code>, <code>items</code>, or <code>program</code>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ When inheriting any parts, descriptions without state names are not allowed.
+</div>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
-<p>Determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
+<li><code>script_recursion [1/0]</code>
+<p>Determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <code>script{}</code> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
-<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
+<li id="Alias"><code>alias [additional group name]</code>
<p>Sets the additional name to be used as an identifier. Defining multiple aliases is supported.</p>
</li>
-<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<li id="Min"><code>min [width] [height]</code>
<p>Sets the minimum size for the container defined by the composition of the parts. It is not enforced.</p>
</li>
-<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<li id="Max"><code>max [width] [height]</code>
<p>Sets the maximum size for the container defined by the totality of the parts. It is not enforced.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
-<p>Determines whether a signal gets automatically broadcasted to all sub group parts. The default value is <span style="font-family: Courier New,Courier,monospace;">on</span>.</p>
+<li><code>broadcast_signal [on/off]</code>
+<p>Determines whether a signal gets automatically broadcasted to all sub group parts. The default value is <code>on</code>.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
+<li><code>orientation [AUTO/LTR/RTL]</code>
<p>Sets the group orientation. It is useful if you want to match the interface orientation with language.</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
- <li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in the Left To Right Languages (Latin)</li>
- <li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in the Right To Left Languages (Hebrew, Arabic)</li>
+ <li><code>AUTO</code>: Follow system defaults</li>
+ <li><code>LTR</code>: Used in the Left To Right Languages (Latin)</li>
+ <li><code>RTL</code>: Used in the Right To Left Languages (Hebrew, Arabic)</li>
</ul>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
-<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. The default value is <span style="font-family: Courier New,Courier,monospace;">1</span>, to maintain compatibility.</p>
+<li><code>mouse_events [1 or 0]</code>
+<p>Changes the default value of <code>mouse_events</code> for every part in this group. The default value is <code>1</code>, to maintain compatibility.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
+<li><code>program_source [source name]</code>
<p>Changes the default value of the source in the current group for every program which is declared after this value is set. The value defaults to an unset value to maintain compatibility. The name of the source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
</li>
-<li id="Parts" name="Parts"><span style="font-family: Courier New,Courier,monospace;">group.parts</span> block
+<li id="Parts" name="Parts"><code>group.parts</code> block
<pre class="prettyprint">
parts {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> block contains one or more <a href="learn_edc_part_n.htm">part</a>. Each part describes a visual element and has a type, such as <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, or <span style="font-family: Courier New,Courier,monospace;">table</span>.</p>
+<p>The <code>parts</code> block contains one or more <a href="learn_edc_part_n.htm">part</a>. Each part describes a visual element and has a type, such as <code>text</code>, <code>image</code>, or <code>table</code>.</p>
</li>
-<li id="Script" name="Script"><span style="font-family: Courier New,Courier,monospace;">group.script</span> block
+<li id="Script" name="Script"><code>group.script</code> block
<pre class="prettyprint">
group {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">script</span> block is used to inject embryo scripts to a given Edje theme. It functions in two modalities: when it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the <a href="learn_edc_program_n.htm">program</a> is run, and when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
+<p>The <code>script</code> block is used to inject embryo scripts to a given Edje theme. It functions in two modalities: when it is included inside a <code>program</code> block, the script is executed every time the <a href="learn_edc_program_n.htm">program</a> is run, and when included directly into a <code>group</code>, <code>part</code>, or <code>description</code> block, it is executed once at the load time, in the load order.</p>
</li>
-<li id="Limits" name="Limits"><span style="font-family: Courier New,Courier,monospace;">group.limits</span> block
+<li id="Limits" name="Limits"><code>group.limits</code> block
<pre class="prettyprint">
limits {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">limits</span> block is used to trigger signals when the Edje object is resized.</p>
+<p>The <code>limits</code> block is used to trigger signals when the Edje object is resized.</p>
<ul>
-<li id="Vertical"><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
-<p>Sends a <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> signal is sent. This limit is applied on the Y axis and is given in pixels.</p>
+<li id="Vertical"><code>vertical [name] [height barrier]</code>
+<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the Y axis and is given in pixels.</p>
</li>
-<li id="Horizontal"><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
-<p>Sends a <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> signal is sent. This limit is applied on the X axis and is given in pixels.</p>
+<li id="Horizontal"><code>horizontal [name] [width barrier]</code>
+<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the X axis and is given in pixels.</p>
</li>
</ul>
</li>
-<li id="Group_Data" name="Group_Data"><span style="font-family: Courier New,Courier,monospace;">group.data</span> block
+<li id="Group_Data" name="Group_Data"><code>group.data</code> block
<pre class="prettyprint">
data {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
+<p>The <code>data</code> block is used to pass arbitrary parameters from the theme to the application. Unlike the <code>images</code> and <code>fonts</code> blocks, additional <code>data</code> blocks can only be included inside the <code>group</code> block.</p>
<ul>
-<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: "key" "value";</span>
+<li id="Items"><code>items: "key" "value";</code>
<p>Sets a new parameter, the value is the string specified next to it.</p>
</li>
-<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: "key" "file";</span>
+<li id="File"><code>file: "key" "file";</code>
<p>Sets a new parameter, the value is the content of the specified file formatted as a single string of text. This property only works with plain text files.</p>
</li>
</ul>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.
+</div>
</li>
-<li id="Programs" name="Programs"><span style="font-family: Courier New,Courier,monospace;">group.programs</span> block
+<li id="Programs" name="Programs"><code>group.programs</code> block
<pre class="prettyprint">
programs {
}
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <a href="learn_edc_program_n.htm">program</a>. Each program contains code related to the interaction and animation of the visual elements.</p>
+<p>The <
code>programs</code> group contain one or more <a href="learn_edc_program_n.htm">program</a>. Each program contains code related to the interaction and animation of the visual elements.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="images_block" name="images_block">Images Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list the image files used in the theme. The used compression methods are also defined here. In addition to the top-level, the <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. Using the <span style="font-family: Courier New,Courier,monospace;">images</span> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
+<p>The <code>images</code> block is used to list the image files used in the theme. The used compression methods are also defined here. In addition to the top-level, the <code>images</code> blocks can be included inside other blocks, usually <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>images</code> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
-<p class="figure">Figure: Images block</p>
-<p align="center"><img alt="Images block" src="../../../images/diagram_images.png"/></p>
+<p align="center"><strong>Figure: Images block</strong></p>
+<p align="center"><img width="450" alt="Images block" src="../../../images/diagram_images.png"/></p>
<pre class="prettyprint">
images {
<ul>
-<li id="image"><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool's <span style="font-family: Courier New,Courier,monospace;">-id</span> option. The available compression methods are:</p>
+<li id="image"><code>image [image file] [compression method] (compression level)</code>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool's <code>-id</code> option. The available compression methods are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
-<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded in the file, refer to an external file instead</li>
+<li><code>RAW</code>: Uncompressed</li>
+<li><code>COMP</code>: Lossless compression</li>
+<li><code>LOSSY [0-100]</code>: JPEG lossy compression with quality from 0 to 100</li>
+<li><code>USER</code>: Not embedded in the file, refer to an external file instead</li>
</ul>
</li>
-<li id="set"><span style="font-family: Courier New,Courier,monospace;">images.set</span> block
+<li id="set"><code>images.set</code> block
<pre class="prettyprint">
set {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on its size. In addition to the top-level, the <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. Using the <span style="font-family: Courier New,Courier,monospace;">set</span> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
+<p>The <code>set</code> block is used to define an image with different content depending on its size. In addition to the top-level, the <code>set</code> blocks can be included inside other blocks, normally <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>set</code> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
+<li><code>name [image name]</code>
<p>Sets the name of this image description.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">images.set.image</span> block
+<li><code>images.set.image</code> block
<pre class="prettyprint">
image {
}
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">image</span> block defines the characteristics of an image. Every block describes one image and the size rule to use it. For full details, see <a href="learn_edc_part_n.htm#description_image">Image</a>.</p>
+<p>The <
code>image</code> block defines the characteristics of an image. Every block describes one image and the size rule to use it. For full details, see <a href="learn_edc_part_n.htm#description_image">Image</a>.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool's <span style="font-family: Courier New,Courier,monospace;">-id</span> option.</p>
+<li><code>image [image file] [compression method] (compression level)</code>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool's <code>-id</code> option.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
+<li><code>size [minw] [minh] [maxw] [maxh]</code>
<p>Sets the minimum and maximum size that selects a specific image.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<li><code>border [left] [right] [top] [bottom]</code>
<p>If set, the width (in pixels) of each side of the image is displayed as a fixed size border, from the side inwards, preventing the corners from being changed on a resize.</p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<li><code>border_scale_by [value]</code>
<p>If border scaling is enabled, normally the output border sizes scale accordingly. For example, if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column. This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to enable higher resolution outputs by always using the highest resolution artwork and then at runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to switch it off).</p>
</li>
</ul>
</ul>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>An EDC (Edje data collection) file is a text file that contains the code describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds. EDC is a description language where the objects of an interface are described by using a text description.</p>
-<p>The EDC file has the <span style="font-family: Courier New,Courier,monospace">.edc</span> file extension. The syntax for the EDC files follows a simple structure of blocks that can contain properties and other blocks.</p>
+<p>The EDC file has the <code>.edc</code> file extension. The syntax for the EDC files follows a simple structure of blocks that can contain properties and other blocks.</p>
<h2 id="simple_edc_file" name="simple_edc_file">Writing a Simple EDC File</h2>
</pre>
<p>The following chart shows the details of the top-level blocks.</p>
+ <p align="center" class="Table"><strong>Table: EDC blocks</strong></p>
<table>
- <caption> Table: EDC blocks</caption>
<tbody>
<tr>
<th>Block name</th>
</tr>
<tr>
<td><a href="learn_edc_styles_n.htm">styles</a></td>
- <td>Contains one or more style blocks. A style block is used to create style <span style="font-family: Courier New,Courier,monospace;"><tags></span> for advanced textblock formatting.</td>
+ <td>Contains one or more style blocks. A style block is used to create style <code><tags></code> for advanced textblock formatting.</td>
</tr>
</tbody>
</table>
<p>The following figure shows the relationships between blocks.</p>
-<p class="figure">Figure: EDC block diagram</p>
+<p align="center"><strong>Figure: EDC block diagram</strong></p>
<p align="center"><img alt="EDC block diagram" src="../../../images/diagram_edc_blocks.png"/></p>
<p>The following example shows an EDC file that contains only 1 part and 1 program. The part is a rectangle with a blue state and a red state, and the program changes the state from blue to red when the user clicks the rectangle:</p>
<h2 id="compile" name="compile">Compiling an EDC File</h2>
-<p>An EDC file needs to be compiled into a <span style="font-family: Courier New,Courier,monospace;">.edj</span> file using the Edje library tools. After compiling, the <span style="font-family: Courier New,Courier,monospace;">.edj</span> file can be used by a native Tizen application. The Tizen Studio automatically calls the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool during the project building, if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">../res/edje/</span> directory.</p>
+<p>An EDC file needs to be compiled into a <code>.edj</code> file using the Edje library tools. After compiling, the <code>.edj</code> file can be used by a native Tizen application. The Tizen Studio automatically calls the <code>edje_cc</code> tool during the project building, if it finds an EDC source file in the <code>../res/edje/</code> directory.</p>
-<p>The following Tizen Studio compilation log extract shows that if your EDC file uses images, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">../edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">../edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">../edje/sounds</span> directories. The Tizen Studio builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">../res/edje/</span> folder.</p>
+<p>The following Tizen Studio compilation log extract shows that if your EDC file uses images, they must be copied to the <code>../edje/images</code> directory. Fonts and sounds go to the <code>../edje/fonts</code> and <code>../edje/sounds</code> directories. The Tizen Studio builds the <code>helloworld.edj</code> file in the <code>../res/edje/</code> folder.</p>
<pre class="prettyprint">
Building file: ../res/edje/helloworld.edc
edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
</pre>
-<p>You need to connect the <span style="font-family: Courier New,Courier,monospace;">.edj</span> file to the C code. It can be achieved by using a layout, one of containers. If you use the basic Tizen EFL project template, it reduces the time to worry about the connecting process. For more information on using the basic Tizen project template, see <a href="../../../../../org.tizen.training/html/native/mobile/first_app_mn.htm">Creating Your First Tizen Mobile Native Application</a> or <a href="../../../../../org.tizen.training/html/native/wearable/first_app_wn.htm">Creating Your First Tizen Wearable Native Application</a>. If you want to know the way to use and connect a layout in detail, see <a href="container_layout_n.htm">Layout</a>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<p>You need to connect the <code>.edj</code> file to the C code. It can be achieved by using a layout, one of containers. If you use the basic Tizen EFL project template, it reduces the time to worry about the connecting process. For more information on using the basic Tizen project template, see <a href="../../../../../org.tizen.training/html/native/mobile/first_app_mn.htm">Creating Your First Tizen Mobile Native Application</a> or <a href="../../../../../org.tizen.training/html/native/wearable/first_app_wn.htm">Creating Your First Tizen Wearable Native Application</a>. If you want to know the way to use and connect a layout in detail, see <a href="container_layout_n.htm">Layout</a>.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="part_block" name="part_block">Part Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">part</span> block is used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
+<p>The <code>part</code> block is used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
-<p class="figure">Figure: Part block</p>
-<p align="center"><img alt="Part block" src="../../../images/diagram_part.png"/></p>
+<p>You can also position parts on the screen. You can define a size and relative position for each part, and add offsets for the relative positioning. For more information, see <a href="learn_edc_positioning_parts_n.htm">Positioning Parts</a>.</p>
+
+<p align="center"><strong>Figure: Part block</strong></p>
+<p align="center"><img width="450" alt="Part block" src="../../../images/diagram_part.png"/></p>
<pre class="prettyprint">
part {
<a href="#ignore_flags">ignore_flags</a>: NONE;
/* Set whether the part sizes scale with the edje scaling factor */
<a href="#scale">scale</a>: 0/1;
- /* Set whether fully-transparent pixels are taken into account for collision detection */
+ /* Set whether fully-transparent pixels are considered in collision detection */
<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
/* Only render the area of the part that coincides with the given part */
<a href="#clip_to">clip_to</a>: "anotherpart";
- /* For group/textblock parts: swallow the given group (for textblock: goes below text) */
+ /* For group/textblock: swallow the given group (for textblock: goes below text) */
<a href="#source">source</a>: "groupname";
/* Same as the source but goes on top of text */
<a href="#source2">source2</a>: "groupname";
- /* For textblock parts: swallow the given group below the mouse cursor when it hovers over the part */
+ /*
+ For textblock: swallow the given group below the mouse cursor
+ when it hovers over the part
+ */
<a href="#source3">source3</a>: "groupname";
/* Same as source3 but goes on top of the cursor */
<a href="#source4">source4</a>: "groupname";
- /* For textblock parts: swallow the given group below text anchors (<a>...</a>) */
+ /* For textblock: swallow the given group below text anchors (<a>...</a>) */
<a href="#source5">source5</a>: "groupname";
/* Same as source5 but goes on to top of the anchor */
<a href="#source6">source6</a>: "groupname";
/* Add a shadow effect to the part */
<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
- /* For textblock parts: makes the text editable, possibly with a specific behavior */
+ /* For textblock: makes the text editable, possibly with a specific behavior */
<a href="#entry_mode">entry_mode</a>: PASSWORD;
- /* For textblock parts: change how the text selection is triggered */
+ /* For textblock: change how the text selection is triggered */
<a href="#select_mode">select_mode</a>: EXPLICIT;
- /* For editable textblock parts: where to draw the (blinking) cursor */
+ /* For editable textblock: where to draw the (blinking) cursor */
<a href="#cursor_mode">cursor_mode</a>: UNDER;
- /* For editable textblock parts: allow multiple lines */
+ /* For editable textblock: allow multiple lines */
<a href="#multiline">multiline</a>: 0/1;
- /* For textblock parts: accessibility features are used */
+ /* For textblock: accessibility features are used */
<a href="#access">access</a>: 0/1;
/* No-one uses that */
<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
<a href="#dragable_threshold">threshold</a>: "another part";
/* Forward the drag events to the given part instead of handling them */
<a href="#dragable_events">events</a>: "another draggable part";
- /* Enable the horizontal drag of the part with step_size steps or with steps_count steps */
+ /* Enable the horizontal drag with step_size steps or with steps_count steps */
<a href="#dragable_x">x</a>: 0/1 <step_size> <steps_count>;
/* Same as x but vertical */
<a href="#dragable_y">y</a>: 1 0 100;
}
- /* For box or table parts */
+ /* For box or table */
<a href="#box_table">box/table</a> {
/* List of items */
<a href="#box_table_items">items</a> {
<a href="#description_inherit">inherit</a>: "default" 1.0;
/* Name the current description */
<a href="#description_state">state</a>: "default" 1.0;
- /* Use another part as content of the current proxy part */
- /* This description only works in the proxy part and the current part mirrors the rendering content of the source part */
+ /*
+ Use another part as content of the current proxy part
+ This description only works in the proxy part and
+ the current part mirrors the rendering content of the source part
+ */
<a href="#description_source">source</a>: "partname";
/* Make the part (in)visible (invisible parts emit no signals) */
<a href="#description_visible">visible</a>: 0/1;
<a href="#description_rel1_2">rel1/rel2</a> {
/* Make relative and offset use the given part for their positioning */
<a href="#description_rel1_2_to">to</a>: "partname";
- /* Position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end) */
+ /*
+ Position the corner relative to the part given through to
+ (0.0 being axis beginning, 1.0 being its end)
+ */
<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
/* Add an absolute offset (in pixels) along each axis */
<a href="#description_rel1_2_offset">offset</a>: 10 10;
<a href="#description_image">image</a> {
/* Set the name (not path) of the regular image */
<a href="#description_image_normal">normal</a>: "imagename";
- /* Set the image to use while transitioning to the normal image; use several times to create animations */
+ /*
+ Set the image to use while transitioning to the normal image;
+ use several times to create animations
+ */
<a href="#description_image_tween">tween</a>: "imagename2";
- /* Set the number of pixels that make up each border of the image, and are not resized with the image */
+ /*
+ Set the number of pixels that make up each border of the image,
+ and are not resized with the image
+ */
<a href="#description_image_border">border</a>: 4 4 4 4;
- /* Hide, strip from its alpha, or show (default) the non-border part of the image */
+ /*
+ Hide, strip from its alpha, or show (default)
+ the non-border part of the image
+ */
<a href="#description_image_middle">middle</a>: DEFAULT;
<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
/* Set whether to scale the border */
<a href="#description_image_fill_spread">spread</a>: ??;
/* Set whether to scale or tile to fit when resizing the image is needed */
<a href="#description_image_fill_type">type</a>: SCALE/TILE;
- /* Only display the part of the image that is below and to the right of the given point */
+ /* Only display the image area below and to the right of the given point */
<a href="#description_image_fill_origin">origin</a> {
/* Specify top-left point as relative coordinates */
<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
<a href="#description_text_font">font</a>: "Tizen Sans";
/* Set the text size */
<a href="#description_text_size">size</a>: 14;
- /* Set the text's class which can be used to factor font and font-size settings */
+ /* Set the text class which can be used to factor font and font-size settings */
<a href="#description_text_text_class">text_class</a>: "classname";
/* Set the styles defined in stylename */
<a href="#description_text_style">style</a>: "stylename";
- /* For textblocks in the password mode, replace characters to hide with this string */
+ /*
+ For textblocks in the password mode,
+ replace characters to hide with this string
+ */
<a href="#description_text_repch">repch</a>: "*";
- /* Set the min and max font sizes allowed when resizing (default is 0 0, or unrestricted) */
+ /*
+ Set the min and max font sizes allowed when
+ resizing (default is 0 0, or unrestricted)
+ */
<a href="#description_text_size_range">size_range</a>: 6 18;
- /* Increase the font size as much as possible while still remaining in the container for both axes */
+ /*
+ Increase the font size as much as possible
+ while still remaining in the container for both axes
+ */
<a href="#description_text_fit">fit</a>: 0/1 0/1;
- /* Make the min size of the container equal to the min size of the current text (0 0 by default) */
+ /*
+ Make the min size of the container equal to
+ the min size of the current text (0 0 by default)
+ */
<a href="#description_text_min">min</a>: 0/1 0/1;
- /* Make the max size of the container equal to the max size of the current text (0 0 by default) */
+ /*
+ Make the max size of the container equal to
+ the max size of the current text (0 0 by default)
+ */
<a href="#description_text_max">max</a>: 0/1 0/1;
/* Set the vertical and horizontal alignments of the text */
<a href="#description_text_align">align</a>: 0.5 0.5;
/* Reuse the text of another part */
<a href="#description_text_text_source">text_source</a>: "partname";
- /* When the text is too long to fit, set the relative position at which to cut the text and put an ellipsis ("...") */
+ /*
+ When the text is too long to fit, set the relative position
+ at which to cut the text and put an ellipsis ("...")
+ */
<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
}
/* Settings specific to parts of the box type */
<a href="#description_box_align">align</a>: 0.5 0.5;
/* Set the padding between items of the box */
<a href="#description_box_padding">padding</a>: 1 1;
- /* Make the box's min size the min size of its elements (make it shrinkable as much as its items) */
+ /*
+ Make the box's min size the min size of its elements
+ (make it shrinkable as much as its items)
+ */
<a href="#description_box_min">min</a>: 0 1;
}
<a href="#description_table">table</a> {
<a href="#description_table_align">align</a>: 0.5 0.5;
/* Set the padding between items of the table */
<a href="#description_table_padding">padding</a>: 1 1;
- /* Make the table's min size the min size of its elements (make it shrinkable as much as its items) */
+ /*
+ Make the table's min size the min size of its elements
+ (make it shrinkable as much as its items)
+ */
<a href="#description_table_min">min</a>: 0 1;
}
<a href="#description_map">map</a> {
</pre>
<ul>
-<li id="inherit"><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span>
+<li id="inherit"><code>inherit [part name]</code>
<p>Copies all properties except part name from the referenced part into the current part. All existing properties, except part name, are overwritten.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ When inheriting any parts, descriptions without state names are not allowed.
+</div>
</li>
-<li id="program_remove"><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span>
+<li id="program_remove"><code>program_remove [program name] (program name) (program name) ...</code>
<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ This breaks program sequences if a program in the middle of the sequence is removed.
+</div>
</li>
-<li id="part_remove"><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span>
+<li id="part_remove"><code>part_remove [part name] (part name) (part name) ...</code>
<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
</li>
-<li id="part_name"><span style="font-family: Courier New,Courier,monospace;">name [part name]</span>
+<li id="part_name"><code>name [part name]</code>
<p>Sets the part name is used as a reference in the theme's relative positioning system, by programs and in some cases by the application. The part name must be unique within the group.</p>
</li>
-<li id="type"><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span>
-<p>Sets the type (<span style="font-family: Courier New,Courier,monospace;">IMAGE</span> by default). The valid types are:</p>
+<li id="type"><code>type [TYPE]</code>
+<p>Sets the type (<code>IMAGE</code> by default). The valid types are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
-<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add an object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with, for example, multiple lines or mark-up elements</li>
-<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or a column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended for padding, because it does not allocate any memory.</li>
+<li><code>RECT</code>: Rectangle object in the screen</li>
+<li><code>TEXT</code>: Simple text</li>
+<li><code>IMAGE</code>: Image area</li>
+<li><code>SWALLOW</code>: Area where you can add an object</li>
+<li><code>TEXTBLOCK</code>: Complex text with, for example, multiple lines or mark-up elements</li>
+<li><code>GROUP</code>: Part which can include other groups in the same group</li>
+<li><code>BOX</code>: Container object as a container. It has a row or a column.</li>
+<li><code>TABLE</code>: Container object as a container. It has a row and column.</li>
+<li><code>PROXY</code>: Clone of another part in the same group. It shares the memory of the source part.</li>
+
+<li><code>SPACER</code>: Rectangle object, but invisible. Recommended for padding, because it does not allocate any memory.</li>
</ul>
</li>
-<li id="part_part"><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span>
+<li id="part_part"><code>part [part declaration]</code>
<p>Sets a nested part that adds hierarchy to Edje. A nested part inherits its location relative to the parent part. To declare a nested part, create a new part within the current part declaration. Define the parent part name before adding nested parts.</p>
<pre class="prettyprint">
part {
</pre>
</li>
-<li id="insert_before"><span style="font-family: Courier New,Courier,monospace;">insert_before [another part's name]</span>
-<p>Sets the part's name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer to more than one part name by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
+<li id="insert_before"><code>insert_before [another part's name]</code>
+<p>Sets the part's name which this part is inserted before. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_before</code>.</p>
</li>
-<li id="insert_after"><span style="font-family: Courier New,Courier,monospace;">insert_after [another part's name]</span>
-<p>Sets the part's name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer to more than one part name by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
+<li id="insert_after"><code>insert_after [another part's name]</code>
+<p>Sets the part's name which this part is inserted after. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_after</code>.</p>
</li>
-<li id="mouse_events"><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
-<p>Determines whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling (0) prevents the part from emitting a signal. The default value is 1, or the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level.</p>
+<li id="mouse_events"><code>mouse_events [1 or 0]</code>
+<p>Determines whether the part emits signals, although it is named <code>mouse_events</code>. Disabling (0) prevents the part from emitting a signal. The default value is 1, or the value set to <code>mouse_events</code> at the group level.</p>
</li>
-<li id="repeat_events"><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span>
+<li id="repeat_events"><code>repeat_events [1 or 0]</code>
<p>Determines whether a part echoes a mouse event to other parts below the pointer (1). The default value is 0.</p>
</li>
-<li id="ignore_flags"><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span>
+<li id="ignore_flags"><code>ignore_flags [FLAG] ...</code>
<p>Determines whether events with the given flags are ignored, or do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
+<li><code>NONE</code>: Event is handled properly (default value)</li>
+<li><code>ON_HOLD</code>: Event is not handled or passed in this part</li>
</ul>
</li>
-<li id="scale"><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span>
+<li id="scale"><code>scale [1 or 0]</code>
<p>Determines whether the part scales its size with an Edje scaling factor. This is used to scale properties, such as font size or min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best. By default the scaling is off (0) and the default scale factor is 1.0, which means no scaling.</p>
</li>
-<li id="pointer_mode"><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span>
-<p>Sets the mouse pointer behavior for a given part. The default value is <span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>. The available modes are:</p>
+<li id="pointer_mode"><code>pointer_mode [MODE]</code>
+<p>Sets the mouse pointer behavior for a given part. The default value is <code>AUTOGRAB</code>. The available modes are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>: When the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released</li>
-<li><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>: Effect is limited to the part's container</li>
+<li><code>AUTOGRAB</code>: When the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released</li>
+<li><code>NOGRAB</code>: Effect is limited to the part's container</li>
</ul>
</li>
-<li id="precise_is_inside"><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span>
+<li id="precise_is_inside"><code>precise_is_inside [1 or 0]</code>
<p>Enables precise point collision detection for the part, which is more resource-intensive. This setting is disabled by default.</p>
</li>
-<li id="use_alternate_font_metrics"><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span>
+<li id="use_alternate_font_metrics"><code>use_alternate_font_metrics [1 or 0]</code>
<p>Determines whether Edje uses different size measurement functions. This setting only affects text and textblock parts, and is disabled by default.</p>
</li>
-<li id="clip_to"><span style="font-family: Courier New,Courier,monospace;">clip_to [another part's name]</span>
+<li id="clip_to"><code>clip_to [another part's name]</code>
<p>Renders only the area of the part that coincides with another part's container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
</li>
-<li id="source"><span style="font-family: Courier New,Courier,monospace;">source [another group's name]</span>
-<p>Swallows the specified group into the part's container if the source is a group. If the source is a textblock, it is used for the group to be loaded and used for selection display under the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
+<li id="source"><code>source [another group's name]</code>
+<p>Swallows the specified group into the part's container if the source is a group. If the source is a textblock, it is used for the group to be loaded and used for selection display under the selected text. <code>source2</code> is used on top of the selected text, if <code>source2</code> is specified.</p>
<p>Only available to group or textblock parts.</p>
</li>
-<li id="source2"><span style="font-family: Courier New,Courier,monospace;">source2 [another group's name]</span>
-<p>Used for the group to be loaded and used for selection display over the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used under the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
+<li id="source2"><code>source2 [another group's name]</code>
+<p>Used for the group to be loaded and used for selection display over the selected text. <code>source</code> is used under the selected text, if <code>source</code> is specified.</p>
<p>Only available to textblock parts.</p>
</li>
-<li id="source3"><span style="font-family: Courier New,Courier,monospace;">source3 [another group's name]</span>
-<p>Used for the group to be loaded and used for cursor display under the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+<li id="source3"><code>source3 [another group's name]</code>
+<p>Used for the group to be loaded and used for cursor display under the cursor position. <code>source4</code> is used over the cursor text, if <code>source4</code> is specified.</p>
<p>Only available to textblock parts.</p>
</li>
-<li id="source4"><span style="font-family: Courier New,Courier,monospace;">source4 [another group's name]</span>
-<p>Used for the group to be loaded and used for cursor display over the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source3</span> is specified.</p>
+<li id="source4"><code>source4 [another group's name]</code>
+<p>Used for the group to be loaded and used for cursor display over the cursor position. <code>source3</code> is used under the cursor text, if <code>source3</code> is specified.</p>
<p>Only available to textblock parts.</p>
</li>
-<li id="source5"><span style="font-family: Courier New,Courier,monospace;">source5 [another group's name]</span>
-<p>Used for the group to be loaded and used for anchors display under the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used over the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+<li id="source5"><code>source5 [another group's name]</code>
+<p>Used for the group to be loaded and used for anchors display under the anchor position. <code>source6</code> is used over the anchor text, if <code>source6</code> is specified.</p>
<p>Only available to textblock parts.</p>
</li>
-<li id="source6"><span style="font-family: Courier New,Courier,monospace;">source6 [another group's name]</span>
-<p>Used for the group to be loaded and used for anchor display over the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source5</span> is specified.</p>
+<li id="source6"><code>source6 [another group's name]</code>
+<p>Used for the group to be loaded and used for anchor display over the anchor position. <code>source5</code> is used under the anchor text, if <code>source5</code> is specified.</p>
<p>Only available to textblock parts.</p>
</li>
-<li id="effect"><span style="font-family: Courier New,Courier,monospace;">effect [effect]</span> (shadow direction)
+<li id="effect"><code>effect [effect]</code> (shadow direction)
<p>Applies the selected outline, shadow, or glow effect to a textblock. Note that this effect only works for the textblock. The following table lists the available effects.</p>
+<p align="center" class="Table"><strong>Table: Effects</strong></p>
<table>
-<caption>Table: Effects</caption>
<tbody>
<tr>
<th>Effect</th>
<th>Example</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></td>
+ <td><code>PLAIN</code></td>
<td><img alt="PLAIN" src="../../../images/PLAIN.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></td>
+ <td><code>OUTLINE</code></td>
<td><img alt="OUTLINE" src="../../../images/OUTLINE.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></td>
+ <td><code>SOFT_OUTLINE</code></td>
<td><img alt="SOFT_OUTLINE" src="../../../images/SOFT_OUTLINE.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></td>
+ <td><code>SHADOW</code></td>
<td><img alt="SHADOW" src="../../../images/SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></td>
+ <td><code>SOFT_SHADOW</code></td>
<td><img alt="SOFT_SHADOW" src="../../../images/SOFT_SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></td>
+ <td><code>OUTLINE_SHADOW</code></td>
<td><img alt="OUTLINE_SHADOW" src="../../../images/OUTLINE_SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></td>
+ <td><code>OUTLINE_SOFT_SHADOW</code></td>
<td><img alt="OUTLINE_SOFT_SHADOW" src="../../../images/OUTLINE_SOFT_SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></td>
+ <td><code>FAR_SHADOW</code></td>
<td><img alt="FAR_SHADOW" src="../../../images/FAR_SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></td>
+ <td><code>FAR_SOFT_SHADOW</code></td>
<td><img alt="FAR_SOFT_SHADOW" src="../../../images/FAR_SOFT_SHADOW.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">GLOW</span></td>
+ <td><code>GLOW</code></td>
<td><img alt="GLOW" src="../../../images/GLOW.png" /></td>
</tr>
</tbody></table>
<p>The available shadow direction definitions are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span> (default)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
+<li><code>BOTTOM_RIGHT</code> (default)</li>
+<li><code>BOTTOM</code></li>
+<li><code>BOTTOM_LEFT</code></li>
+<li><code>LEFT</code></li>
+<li><code>TOP_LEFT</code></li>
+<li><code>TOP</code></li>
+<li><code>TOP_RIGHT</code></li>
+<li><code>RIGHT</code></li>
</ul>
</li>
-<li id="entry_mode"><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span>
+<li id="entry_mode"><code>entry_mode [mode]</code>
<p>Sets the edit mode for a textblock part. The available modes are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Textblock is non-editable</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>: Textblock is non-editable, but selectable</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>: Textblock is editable</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>: Textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In case of the password mode, the textblock is not selectable and all text characters are replaced with * characters, but they remain editable and pastable.</li>
+<li><code>NONE</code>: Textblock is non-editable</li>
+<li><code>PLAIN</code>: Textblock is non-editable, but selectable</li>
+<li><code>EDITABLE</code>: Textblock is editable</li>
+<li><code>PASSWORD</code>: Textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In case of the password mode, the textblock is not selectable and all text characters are replaced with * characters, but they remain editable and pastable.</li>
</ul>
</li>
-<li id="select_mode"><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span>
+<li id="select_mode"><code>select_mode [mode]</code>
<p>Sets the selection mode for a textblock part. The available modes are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>: Selection mode is what you would expect on any desktop. Press mouse, drag, and release to end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>: Mode requires the application controlling the Edje object to explicitly begin and end selection modes, and the selection itself is draggable at both ends</li>
+<li><code>DEFAULT</code>: Selection mode is what you would expect on any desktop. Press mouse, drag, and release to end.</li>
+<li><code>EXPLICIT</code>: Mode requires the application controlling the Edje object to explicitly begin and end selection modes, and the selection itself is draggable at both ends</li>
</ul>
</li>
-<li id="cursor_mode"><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span>
+<li id="cursor_mode"><code>cursor_mode [mode]</code>
<p>Sets the cursor mode for a textblock part. The available modes are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>: Cursor draws below the character pointed at. This is the default setting.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>: Cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it</li>
+<li><code>UNDER</code>: Cursor draws below the character pointed at. This is the default setting.</li>
+<li><code>BEFORE</code>: Cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it</li>
</ul>
</li>
-<li id="multiline"><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span>
+<li id="multiline"><code>multiline [1 or 0]</code>
<p>Enables multiple lines for editing in an editable a textblock.</p>
</li>
-<li id="access"><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span>
+<li id="access"><code>access [1 or 0]</code>
<p>Determines whether the part uses the accessibility feature (1). The default value is 0.</p>
</li>
-<li id="dragable" name="dragable"><span style="font-family: Courier New,Courier,monospace;">draggable</span> block
+<li id="dragable" name="dragable"><code>draggable</code> block
<pre class="prettyprint">
draggable {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">draggable</span> block enables the part to be dragged around the interface. Do not confuse this feature with external drag and drop. By default, Edje (and most applications) attempts to use the smallest possible size for a draggable part. If the <span style="font-family: Courier New,Courier,monospace;">min</span> property is not set in the description, the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
+<p>The <code>draggable</code> block enables the part to be dragged around the interface. Do not confuse this feature with external drag and drop. By default, Edje (and most applications) attempts to use the smallest possible size for a draggable part. If the <code>min</code> property is not set in the description, the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
<ul>
-<li id="dragable_x"><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span>
-<p>Sets up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the width of the <span style="font-family: Courier New,Courier,monospace;">confine</span> part divided by count.</p>
+<li id="dragable_x"><code>x [enable/disable] [step] [count]</code>
+<p>Sets up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the width of the <code>confine</code> part divided by count.</p>
</li>
-<li id="dragable_y"><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span>
-<p>Sets up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the height of the <span style="font-family: Courier New,Courier,monospace;">confine</span> part divided by count.</p>
+<li id="dragable_y"><code>y [enable/disable] [step] [count]</code>
+<p>Sets up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the height of the <code>confine</code> part divided by count.</p>
</li>
-<li id="dragable_confine"><span style="font-family: Courier New,Courier,monospace;">confine [another part's name]</span>
+<li id="dragable_confine"><code>confine [another part's name]</code>
<p>Limits the movement of the dragged part to another part's container. Set a min size for the part, or the dragged object does not show up.</p>
</li>
-<li id="dragable_threshold"><span style="font-family: Courier New,Courier,monospace;">threshold [another part's name]</span>
+<li id="dragable_threshold"><code>threshold [another part's name]</code>
<p>Allows (when set) the movement of the dragged part start only when it gets moved outside the threshold part.</p>
</li>
-<li id="dragable_events"><span style="font-family: Courier New,Courier,monospace;">events [another draggable part's name]</span>
+<li id="dragable_events"><code>events [another draggable part's name]</code>
<p>Causes the part to forward the drag events to another part, thus ignoring the drag events for itself.</p>
</li>
</ul>
</li>
-<li id="box_table" name="box_table"><span style="font-family: Courier New,Courier,monospace;">box</span> or <span style="font-family: Courier New,Courier,monospace;">table</span> block
+<li id="box_table" name="box_table"><code>box</code> or <code>table</code> block
<ul>
-<li id="box_table_items" name="box_table_items"><span style="font-family: Courier New,Courier,monospace;">box.items</span> or <span style="font-family: Courier New,Courier,monospace;">table.items</span> block
+<li id="box_table_items" name="box_table_items"><code>box.items</code> or <code>table.items</code> block
<pre class="prettyprint">
box/table {
}
</pre>
-<p>On a box part, the <span style="font-family: Courier New,Courier,monospace;">items</span> block is used to set other groups as elements of the box. These elements can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
+<p>On a box part, the <code>items</code> block is used to set other groups as elements of the box. These elements can be mixed with external objects set by the application through the <code>edje_object_part_box*()</code> functions.</p>
<ul>
-<li id="box_table_items_item" name="box_table_items_item"><span style="font-family: Courier New,Courier,monospace;">box.items.item</span> or <span style="font-family: Courier New,Courier,monospace;">table.items.item</span> block
-<p>The <span style="font-family: Courier New,Courier,monospace;">item</span> block defines an element within the box or table.</p>
+<li id="box_table_items_item" name="box_table_items_item"><code>box.items.item</code> or <code>table.items.item</code> block
+<p>The <code>item</code> block defines an element within the box or table.</p>
<ul>
-<li id="box_table_items_item_type"><span style="font-family: Courier New,Courier,monospace;">type [item type]</span>
+<li id="box_table_items_item_type"><code>type [item type]</code>
<p>Sets the type of the object this item holds. The supported type is:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
+ <li><code>GROUP</code> (default)</li>
</ul>
</li>
-<li id="box_table_items_item_name"><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span>
-<p>Sets the name of the object using the <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span> function.</p>
+<li id="box_table_items_item_name"><code>name [name for the object]</code>
+<p>Sets the name of the object using the <code>evas_object_name_set()</code> function.</p>
</li>
-<li id="box_table_items_item_source"><span style="font-family: Courier New,Courier,monospace;">source [another group's name]</span>
+<li id="box_table_items_item_source"><code>source [another group's name]</code>
<p>Sets the group this object is made of.</p>
</li>
-<li id="box_table_items_item_min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<li id="box_table_items_item_min"><code>min [width] [height]</code>
<p>Sets the minimum size hints for this object. </p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The minimum size hint must be -1 to get the expand behavior.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The minimum size hint must be -1 to get the expand behavior.
+</div>
</li>
-<li id="box_table_items_item_spread"><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span>
+<li id="box_table_items_item_spread"><code>spread [width] [height]</code>
<p>Replicates the item in a rectangle of size (width x height) box starting from the defined position of this item. The default value is 1 1.</p>
</li>
-<li id="box_table_items_item_prefer"><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span>
+<li id="box_table_items_item_prefer"><code>prefer [width] [height]</code>
<p>Sets the preferred size hints for this object.</p>
</li>
-<li id="box_table_items_item_max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<li id="box_table_items_item_max"><code>max [width] [height]</code>
<p>Sets the maximum size hints for this object.</p>
</li>
-<li id="box_table_items_item_padding"><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span>
+<li id="box_table_items_item_padding"><code>padding [left] [right] [top] [bottom]</code>
<p>Sets the padding hints for this object.</p>
</li>
-<li id="box_table_items_item_align"><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span>
+<li id="box_table_items_item_align"><code>align [x] [y]</code>
<p>Sets the alignment hints for this object.</p>
</li>
-<li id="box_table_items_item_weight"><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span>
+<li id="box_table_items_item_weight"><code>weight [x] [y]</code>
<p>Sets the weight hints for this object.</p>
</li>
-<li id="box_table_items_item_aspect"><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span>
+<li id="box_table_items_item_aspect"><code>aspect [w] [h]</code>
<p>Sets the aspect width and height hints for this object.</p>
</li>
-<li id="box_table_items_item_aspect_mode"><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span>
+<li id="box_table_items_item_aspect_mode"><code>aspect_mode [mode]</code>
<p>Sets the aspect control hints for this object. The available hints are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+<li><code>NONE</code></li>
+<li><code>NEITHER</code></li>
+<li><code>HORIZONTAL</code></li>
+<li><code>VERTICAL</code></li>
+<li><code>BOTH</code></li>
</ul>
</li>
-<li id="box_table_items_item_options"><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span>
+<li id="box_table_items_item_options"><code>options [extra options]</code>
<p>Sets extra options for the object.</p>
</li>
-<li id="box_table_items_item_position"><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span>
+<li id="box_table_items_item_position"><code>position [col] [row]</code>
<p>Sets the position this item has in the table. This is required for the table type parts only.</p>
</li>
-<li id="box_table_items_item_span"><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span>
+<li id="box_table_items_item_span"><code>span [col] [row]</code>
<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
</li>
</ul>
</li>
</ul>
</li>
-<li id="description" name="description"><span style="font-family: Courier New,Courier,monospace;">description</span> block
+<li id="description" name="description"><code>description</code> block
<pre class="prettyprint">
description {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">description</span> block is used to define the style and layout properties of a part in a given state. Every part can have one or more description blocks.</p>
+<p>The <code>description</code> block is used to define the style and layout properties of a part in a given state. Every part can have one or more description blocks.</p>
<ul>
-<li id="description_inherit"><span style="font-family: Courier New,Courier,monospace;">inherit [another description's name] [another description's index]</span>
+<li id="description_inherit"><code>inherit [another description's name] [another description's index]</code>
<p>Sets the description from which all the properties are inherited. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note that inheritance in Edje is single level only.</p>
</li>
-<li id="description_source"><span style="font-family: Courier New,Courier,monospace;">source [another part's name]</span>
+<li id="description_source"><code>source [another part's name]</code>
<p>Causes the part to use another part's content as the content of this part. This works only with a proxy part.</p>
</li>
-<li id="description_state"><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span>
-<p>Sets the name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like <span style="font-family: Courier New,Courier,monospace;">clicked</span> or <span style="font-family: Courier New,Courier,monospace;">invisible</span>. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named <span style="font-family: Courier New,Courier,monospace;">default 0.0</span>.</p>
+<li id="description_state"><code>state [name for the description] [index]</code>
+<p>Sets the name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like <code>clicked</code> or <code>invisible</code>. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named <code>default 0.0</code>.</p>
</li>
-<li id="description_visible"><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span>
+<li id="description_visible"><code>visible [0 or 1]</code>
<p>Determines whether a part is visible (1). Non-visible parts do not emit signals. The default value is 1.</p>
</li>
-<li id="description_limit"><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span>
-<p>Emits a signal when the part size changes from zero or to zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default, no signal is emitted. The valid values are:</p>
+<li id="description_limit"><code>limit [mode]</code>
+<p>Emits a signal when the part size changes from zero or to zero (<code>limit,width,over</code>, <code>limit,width,zero</code>). By default, no signal is emitted. The valid values are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+<li><code>NONE</code></li>
+<li><code>WIDTH</code></li>
+<li><code>HEIGHT</code></li>
+<li><code>BOTH</code></li>
</ul>
</li>
-<li id="description_align"><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span>
-<p>When the displayed object's size is smaller or bigger than its container, this property moves it relatively along both axes inside its container. 0.0 means left/top edges of the object touching container's respective ones, and 1.0 stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is <
span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>.</p>
+<li id="description_align"><code>align [X axis] [Y axis]</code>
+<p>When the displayed object's size is smaller or bigger than its container, this property moves it relatively along both axes inside its container. 0.0 means left/top edges of the object touching container's respective ones, and 1.0 stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is <
code>0.5 0.5</code>. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>.</p>
</li>
-<li id="description_fixed"><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span>
-<p>Sets the minimum size calculation. See the <
span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span> functions of the Edje Object Geometry API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Geometry__Group.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Geometry__Group.html">wearable</a> applications). The value tells the min size calculation routine where this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
+<li id="description_fixed"><code>fixed [width, 0 or 1] [height, 0 or 1]</code>
+<p>Sets the minimum size calculation. See the <
code>edje_object_size_min_calc()</code> and <code>edje_object_size_min_restricted_calc()</code> functions of the Edje Object Geometry API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Geometry__Group.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Geometry__Group.html">wearable</a> applications). The value tells the min size calculation routine where this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
</li>
-<li id="description_min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span>
-<p>Sets the minimum size of the state. When the property is set to <span style="font-family: Courier New,Courier,monospace;">SOURCE</span>, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an <span style="font-family: Courier New,Courier,monospace;">image</span> or a <span style="font-family: Courier New,Courier,monospace;">group</span> part.</p>
+<li id="description_min"><code>min [width] [height] or SOURCE</code>
+<p>Sets the minimum size of the state. When the property is set to <code>SOURCE</code>, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an <code>image</code> or a <code>group</code> part.</p>
</li>
-<li id="description_minmul"><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span>
+<li id="description_minmul"><code>minmul [width multiplier] [height multiplier]</code>
<p>Sets the multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
</li>
-<li id="description_max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span>
-<p>Sets the maximum size of the state. A size of -1.0 means that it is ignored in one direction. When the property is set to <span style="font-family: Courier New,Courier,monospace;">SOURCE</span>, Edje enforces the part to be not more than the original image size. The part must be an <span style="font-family: Courier New,Courier,monospace;">image</span> part.</p>
+<li id="description_max"><code>max [width] [height] or SOURCE</code>
+<p>Sets the maximum size of the state. A size of -1.0 means that it is ignored in one direction. When the property is set to <code>SOURCE</code>, Edje enforces the part to be not more than the original image size. The part must be an <code>image</code> part.</p>
</li>
-<li id="description_step"><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span>
-<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>, which disables stepping.</p>
+<li id="description_step"><code>step [width] [height]</code>
+<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is <code>0 0</code>, which disables stepping.</p>
</li>
-<li id="description_aspect"><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span>
-<p>Forces the width to height ratio to be kept between the minimum and maximum set. For example, <
span style="font-family: Courier New,Courier,monospace;">1.0 1.0</span> increases the width a pixel for every pixel added to height. The default value is <span style="font-family: Courier New,Courier,monospace;">0.0 0.0</span>, which disables aspect. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>. Normally the width and height can be resized to any values independently.</p>
+<li id="description_aspect"><code>aspect [min] [max]</code>
+<p>Forces the width to height ratio to be kept between the minimum and maximum set. For example, <
code>1.0 1.0</code> increases the width a pixel for every pixel added to height. The default value is <code>0.0 0.0</code>, which disables aspect. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>. Normally the width and height can be resized to any values independently.</p>
</li>
-<li id="description_aspect_preference"><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span>
-<p>Sets the dimensions to which the <span style="font-family: Courier New,Courier,monospace;">aspect</span> property applies. The available options are:</p>
+<li id="description_aspect_preference"><code>aspect_preference [DIMENSION]</code>
+<p>Sets the dimensions to which the <code>aspect</code> property applies. The available options are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><code>BOTH</code></li>
+<li><code>VERTICAL</code></li>
+<li><code>HORIZONTAL</code></li>
+<li><code>SOURCE</code></li>
+<li><code>NONE</code></li>
</ul>
<p>For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>.</p>
</li>
-<li id="description_color_class"><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span>
-<p>Sets the part to use the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>. These values can be overridden by the <span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">color2</span>, and <span style="font-family: Courier New,Courier,monospace;">color3</span> properties.</p>
+<li id="description_color_class"><code>color_class [color class name]</code>
+<p>Sets the part to use the color values of the named <code>color_class</code>. These values can be overridden by the <code>color</code>, <code>color2</code>, and <code>color3</code> properties.</p>
</li>
-<li id="description_color"><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<li id="description_color"><code>color [red] [green] [blue] [alpha]</code>
<p>Sets the main color to the specified values (between 0 and 255).</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The textblock part is not affected by the color description. Set the color in the text style.
+</div>
</li>
-<li id="description_color2"><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<li id="description_color2"><code>color2 [red] [green] [blue] [alpha]</code>
<p>Sets the text shadow color to the specified values (0 to 255).</p>
</li>
-<li id="description_color3"><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<li id="description_color3"><code>color3 [red] [green] [blue] [alpha]</code>
<p>Sets the text outline color to the specified values (0 to 255).</p>
</li>
-<li id="description_rel1_2" name="description_rel1_2"><span style="font-family: Courier New,Courier,monospace;">description.rel1</span> or <span style="font-family: Courier New,Courier,monospace;">description.rel2</span> block
+<li id="description_rel1_2" name="description_rel1_2"><code>description.rel1</code> or <code>description.rel2</code> block
<pre class="prettyprint">
description {
rel1 {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define the position of each corner of the part's container. <span style="font-family: Courier New,Courier,monospace;">rel1</span> refers to the left-top corner and <span style="font-family: Courier New,Courier,monospace;">rel2</span> to the right-down corner.</p>
+<p>The <code>rel1</code> and <code>rel2</code> blocks are used to define the position of each corner of the part's container. <code>rel1</code> refers to the left-top corner and <code>rel2</code> to the right-down corner.</p>
<ul>
-<li id="description_rel1_2_relative"><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span>
-<p>Moves the corner to a relative position inside the container of the relative <span style="font-family: Courier New,Courier,monospace;">to</span> part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) on each axis.</p>
+<li id="description_rel1_2_relative"><code>relative [X axis] [Y axis]</code>
+<p>Moves the corner to a relative position inside the container of the relative <code>to</code> part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) on each axis.</p>
</li>
-<li id="description_rel1_2_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<li id="description_rel1_2_offset"><code>offset [X axis] [Y axis]</code>
<p>Affects the corner position a fixed number of pixels along each axis.</p>
</li>
-<li id="description_rel1_2_to"><span style="font-family: Courier New,Courier,monospace;">to [another part's name]</span>
-<p>Positions the corner relative to another part's container. Setting to <span style="font-family: Courier New,Courier,monospace;">""</span> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to"><code>to [another part's name]</code>
+<p>Positions the corner relative to another part's container. Setting to <code>""</code> resets this value for inherited parts.</p>
</li>
-<li id="description_rel1_2_to_x"><span style="font-family: Courier New,Courier,monospace;">to_x [another part's name]</span>
-<p>Positions the corner relative to the X axis of another part's container. This affects the first parameter of the <span style="font-family: Courier New,Courier,monospace;">relative</span> property. Setting to <span style="font-family: Courier New,Courier,monospace;">""</span> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to_x"><code>to_x [another part's name]</code>
+<p>Positions the corner relative to the X axis of another part's container. This affects the first parameter of the <code>relative</code> property. Setting to <code>""</code> resets this value for inherited parts.</p>
</li>
-<li id="description_rel1_2_to_y"><span style="font-family: Courier New,Courier,monospace;">to_y [another part's name]</span>
-<p>Positions the corner relative to the Y axis of another part's container. This affects the second parameter of the <span style="font-family: Courier New,Courier,monospace;">relative</span> property. Setting to <span style="font-family: Courier New,Courier,monospace;">""</span> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to_y"><code>to_y [another part's name]</code>
+<p>Positions the corner relative to the Y axis of another part's container. This affects the second parameter of the <code>relative</code> property. Setting to <code>""</code> resets this value for inherited parts.</p>
</li>
</ul>
</li>
-<li id="description_image" name="description_image"><span style="font-family: Courier New,Courier,monospace;">description.image</span> block
+<li id="description_image" name="description_image"><code>description.image</code> block
<pre class="prettyprint">
description {
}
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block defines the settings for an image used in a visual element.</p>
+<p>The <code>image</code> block defines the settings for an image used in a visual element.</p>
<ul>
-<li id="description_image_normal"><span style="font-family: Courier New,Courier,monospace;">normal [image's filename]</span>
-<p>Sets the name of the image to be used as previously declared in the <span style="font-family: Courier New,Courier,monospace;">images</span> block. In an animation, this is the first and last image displayed. The file name is required in all image parts.</p>
+<li id="description_image_normal"><code>normal [image's filename]</code>
+<p>Sets the name of the image to be used as previously declared in the <code>images</code> block. In an animation, this is the first and last image displayed. The file name is required in all image parts.</p>
</li>
-<li id="description_image_tween"><span style="font-family: Courier New,Courier,monospace;">tween [image's filename]</span>
-<p>Sets the name of an image to be used in an animation loop. An <span style="font-family: Courier New,Courier,monospace;">image</span> block can have none, one, or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the <span style="font-family: Courier New,Courier,monospace;">normal</span> image is the final state.</p>
+<li id="description_image_tween"><code>tween [image's filename]</code>
+<p>Sets the name of an image to be used in an animation loop. An <code>image</code> block can have none, one, or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the <code>normal</code> image is the final state.</p>
</li>
-<li id="description_image_border"><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<li id="description_image_border"><code>border [left] [right] [top] [bottom]</code>
<p>Sets the width (in pixels) of each side of the image displayed as a fixed size border, from the side inwards, preventing the corners from being changed on a resize.</p>
</li>
-<li id="description_image_middle"><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span>
-<p>If a border is set, this value tells Edje whether the rest of the image (not covered by the defined border) is displayed or assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
+<li id="description_image_middle"><code>middle [mode]</code>
+<p>If a border is set, this value tells Edje whether the rest of the image (not covered by the defined border) is displayed or assumed to be solid (without alpha). The default value is <code>1/DEFAULT</code>. The available values are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
+<li><code>0</code> or <code>NONE</code></li>
+<li><code>1</code> or <code>DEFAULT</code></li>
+<li><code>SOLID</code> (strip alpha from the image over the middle zone)</li>
</ul>
</li>
-<li id="description_image_border_scale_by"><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<li id="description_image_border_scale_by"><code>border_scale_by [value]</code>
<p>If border scaling is enabled, normally the output border sizes scale accordingly. For example, if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column. This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then at runtime scaling it down. The value can be: 0.0 or bigger (0.0 or 1.0 to switch it off)</p>
</li>
-<li id="description_image_border_scale"><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span>
+<li id="description_image_border_scale"><code>border_scale [0/1]</code>
<p>Tells Edje whether the border is scaled by the object or global Edje scale factors.</p>
</li>
-<li id="description_image_scale_hint"><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span>
+<li id="description_image_scale_hint"><code>scale_hint [mode]</code>
<p>Sets the Evas image scale hint letting the engine more effectively save cached copies of the scaled image, if it makes sense. The valid values are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
+<li><code>0</code> or <code>NONE</code></li>
+<li><code>DYNAMIC</code></li>
+<li><code>STATIC</code></li>
</ul>
</li>
-<li id="description_image_fill" name="description_image_fill"><span style="font-family: Courier New,Courier,monospace;">description.image.fill</span> block
+<li id="description_image_fill" name="description_image_fill"><code>description.image.fill</code> block
<pre class="prettyprint">
image {
}
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace;">fill</span> block is an optional block that defines the way an <span style="font-family: Courier New,Courier,monospace;">image</span> part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. For more information, see the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function of the Image Object Functions API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Image.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Image.html">wearable</a> applications).</p>
+<p>The <
code>fill</code> block is an optional block that defines the way an <code>image</code> part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. For more information, see the <code>evas_object_image_fill_set()</code> function of the Image Object Functions API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Image.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Image.html">wearable</a> applications).</p>
<ul>
-<li id="description_image_fill_smooth"><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span>
+<li id="description_image_fill_smooth"><code>smooth [0 or 1]</code>
<p>Determines whether the image is smoothed on scaling (1). The default value is 1.</p>
</li>
-<li id="description_image_fill_spread"><span style="font-family: Courier New,Courier,monospace;">spread</span>
+<li id="description_image_fill_spread"><code>spread</code>
</li>
-<li id="description_image_fill_type"><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span>
-<p>Sets the image fill type. The <span style="font-family: Courier New,Courier,monospace;">min</span> part property must be set, it is the size of the tiled image. If the <span style="font-family: Courier New,Courier,monospace;">max</span> property is set, the tiled area has the size according to the <span style="font-family: Courier New,Courier,monospace;">max</span> value. The valid values are:</p>
+<li id="description_image_fill_type"><code>type [fill type]</code>
+<p>Sets the image fill type. The <code>min</code> part property must be set, it is the size of the tiled image. If the <code>max</code> property is set, the tiled area has the size according to the <code>max</code> value. The valid values are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>: Image is scaled according to the value of the <span style="font-family: Courier New,Courier,monospace;">relative</span> and <span style="font-family: Courier New,Courier,monospace;">offset</span> properties from the <span style="font-family: Courier New,Courier,monospace;">origin</span> and <span style="font-family: Courier New,Courier,monospace;">size</span> blocks. This is the default value.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>: Image is tiled according to the value of the <span style="font-family: Courier New,Courier,monospace;">relative</span> and <span style="font-family: Courier New,Courier,monospace;">offset</span> properties from the <span style="font-family: Courier New,Courier,monospace;">origin</span> and <span style="font-family: Courier New,Courier,monospace;">size</span> blocks</li>
+<li><code>SCALE</code>: Image is scaled according to the value of the <code>relative</code> and <code>offset</code> properties from the <code>origin</code> and <code>size</code> blocks. This is the default value.</li>
+<li><code>TILE</code>: Image is tiled according to the value of the <code>relative</code> and <code>offset</code> properties from the <code>origin</code> and <code>size</code> blocks</li>
</ul>
</li>
-<li id="description_image_fill_origin" name="description_image_fill_origin"><span style="font-family: Courier New,Courier,monospace;">image.fill.origin</span> block
+<li id="description_image_fill_origin" name="description_image_fill_origin"><code>image.fill.origin</code> block
<pre class="prettyprint">
image {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">origin</span> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element's left-top corner.</p>
+<p>The <code>origin</code> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element's left-top corner.</p>
<ul>
-<li id="description_image_fill_origin_relative"><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span>
+<li id="description_image_fill_origin_relative"><code>relative [X axis] [Y axis]</code>
<p>Sets the starting point relative to the displayed element's content.</p>
</li>
-<li id="description_image_fill_origin_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<li id="description_image_fill_origin_offset"><code>offset [X axis] [Y axis]</code>
<p>Affects the starting point a fixed number of pixels along each axis.</p>
</li>
</ul>
</li>
-<li id="description_image_fill_size" name="description_image_fill_size"><span style="font-family: Courier New,Courier,monospace;">image.fill.size</span> block
+<li id="description_image_fill_size" name="description_image_fill_size"><code>image.fill.size</code> block
<pre class="prettyprint">
image {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">size</span> block defines the tile size of the content that is displayed.</p>
+<p>The <code>size</code> block defines the tile size of the content that is displayed.</p>
<ul>
-<li id="description_image_fill_size_relative"><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span>
-<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span> represents half the size, while <span style="font-family: Courier New,Courier,monospace;">2.0 2.0</span> represents double. The default value is <span style="font-family: Courier New,Courier,monospace;">1.0 1.0</span>.</p>
+<li id="description_image_fill_size_relative"><code>relative [width] [height]</code>
+<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, <code>0.5 0.5</code> represents half the size, while <code>2.0 2.0</code> represents double. The default value is <code>1.0 1.0</code>.</p>
</li>
-<li id="description_image_fill_size_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<li id="description_image_fill_size_offset"><code>offset [X axis] [Y axis]</code>
<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
</li>
</li>
</ul></li>
-<li id="description_text" name="description_text"><span style="font-family: Courier New,Courier,monospace;">description.text</span> block
+<li id="description_text" name="description_text"><code>description.text</code> block
<pre class="prettyprint">
text {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">text</span> block defines a text part element.</p>
+<p>The <code>text</code> block defines a text part element.</p>
<ul>
-<li id="description_text_text"><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span>
+<li id="description_text_text"><code>text [a string of text, or nothing]</code>
<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
</li>
-<li id="description_text_text_class"><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span>
-<p>Sets the name used by the application to alter the font family and size at runtime (similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>).</p>
+<li id="description_text_text_class"><code>text_class [text class name]</code>
+<p>Sets the name used by the application to alter the font family and size at runtime (similar to <code>color_class</code>).</p>
</li>
-<li id="description_text_font"><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span>
-<p>Sets the font family to one of the aliases set up in the <span style="font-family: Courier New,Courier,monospace;">fonts</span> block. This can be overridden by the application settings.</p>
+<li id="description_text_font"><code>font [font alias]</code>
+<p>Sets the font family to one of the aliases set up in the <code>fonts</code> block. This can be overridden by the application settings.</p>
</li>
-<li id="description_text_style"><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span>
-<p>Causes the part to use the default style and tags defined in the <span style="font-family: Courier New,Courier,monospace;">style</span> block with the specified name.</p>
+<li id="description_text_style"><code>style [the style name]</code>
+<p>Causes the part to use the default style and tags defined in the <code>style</code> block with the specified name.</p>
</li>
-<li id="description_text_repch"><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span>
+<li id="description_text_repch"><code>repch [the replacement character string]</code>
<p>In the password mode, this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use any character you like.</p>
</li>
-<li id="description_text_size"><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span>
+<li id="description_text_size"><code>size [font size in points (pt)]</code>
<p>Sets the default font size for the text part. This can be overridden by the application settings.</p>
</li>
-<li id="description_text_size_range"><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span>
+<li id="description_text_size_range"><code>size_range [font min size in points (pt)] [font max size in points (pt)]</code>
<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
</li>
-<li id="description_text_fit"><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span>
+<li id="description_text_fit"><code>fit [horizontal] [vertical]</code>
<p>When any of the parameters is set to 1, Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
</li>
-<li id="description_text_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
-<p>When any of the parameters is enabled (1), it forces the minimum size of the container to be equal to the minimum size of the text. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_text_min"><code>min [horizontal] [vertical]</code>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the container to be equal to the minimum size of the text. The default value is <code>0 0</code>.</p>
</li>
-<li id="description_text_max"><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span>
-<p>When any of the parameters is enabled (1), it forces the maximum size of the container to be equal to the maximum size of the text. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_text_max"><code>max [horizontal] [vertical]</code>
+<p>When any of the parameters is enabled (1), it forces the maximum size of the container to be equal to the maximum size of the text. The default value is <code>0 0</code>.</p>
</li>
-<li id="description_text_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
-<p>Changes the position of the point of balance inside the container. The default value is <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>.</p>
+<li id="description_text_align"><code>align [horizontal] [vertical]</code>
+<p>Changes the position of the point of balance inside the container. The default value is <code>0.5 0.5</code>.</p>
</li>
-<li id="description_text_source"><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part's name]</span>
+<li id="description_text_source"><code>source [another TEXT part's name]</code>
<p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
</li>
-<li id="description_text_text_source"><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part's name]</span>
+<li id="description_text_text_source"><code>text_source [another TEXT part's name]</code>
<p>Causes the part to display the text content of another part and update them as they change.</p>
</li>
-<li id="description_text_ellipsis"><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span>
+<li id="description_text_ellipsis"><code>ellipsis [point of balance]</code>
<p>Balances the text in a relative point from 0.0 to 1.0. This point is the last section of the string to be cut out in case of a resize to a smaller size than the text itself. The default value is 0.0.</p>
</li>
</ul>
</li>
-<li id="description_box" name="description_box"><span style="font-family: Courier New,Courier,monospace;">description.box</span> block
+<li id="description_box" name="description_box"><code>description.box</code> block
<pre class="prettyprint">
box {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">box</span> block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
+<p>The <code>box</code> block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
<ul>
-<li id="description_box_layout"><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span>
+<li id="description_box_layout"><code>layout [primary layout] (fallback layout)</code>
<p>Sets the layout for the box:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal</span> (default)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal_homogeneous</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical_homogeneous</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal_max</span> (homogeneous to the max sized child)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical_max</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal_flow</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical_flow</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">stack</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
-<p>Set a custom layout as a fallback. For more information, see the <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span> function in the Edje Box Part API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Part__Box.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Part__Box.html">wearable</a> applications). If an unregistered layout is used, it defaults to <span style="font-family: Courier New,Courier,monospace;">horizontal</span>.</p></li>
+<li><code>horizontal</code> (default)</li>
+<li><code>vertical</code></li>
+<li><code>horizontal_homogeneous</code></li>
+<li><code>vertical_homogeneous</code></li>
+<li><code>horizontal_max</code> (homogeneous to the max sized child)</li>
+<li><code>vertical_max</code></li>
+<li><code>horizontal_flow</code></li>
+<li><code>vertical_flow</code></li>
+<li><code>stack</code></li>
+<li><code>some_other_custom_layout_set_by_the_application</code>
+<p>Set a custom layout as a fallback. For more information, see the <code>edje_box_layout_register()</code> function in the Edje Box Part API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Part__Box.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Part__Box.html">wearable</a> applications). If an unregistered layout is used, it defaults to <code>horizontal</code>.</p></li>
</ul>
</li>
-<li id="description_box_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
+<li id="description_box_align"><code>align [horizontal] [vertical]</code>
<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
</li>
-<li id="description_box_padding"><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span>
-<p>Sets the space between cells in pixels. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_box_padding"><code>padding [horizontal] [vertical]</code>
+<p>Sets the space between cells in pixels. The default value is <code>0 0</code>.</p>
</li>
-<li id="description_box_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
-<p>When any of the parameters is enabled (1), it forces the minimum size of the box to be equal to the minimum size of the items. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_box_min"><code>min [horizontal] [vertical]</code>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the box to be equal to the minimum size of the items. The default value is <code>0 0</code>.</p>
</li>
</ul>
</li>
-<li id="description_table" name="description_table"><span style="font-family: Courier New,Courier,monospace;">description.table</span> block
+<li id="description_table" name="description_table"><code>description.table</code> block
<pre class="prettyprint">
table {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">table</span> block can contain other objects packed in multiple columns and rows, and each item can span across more than one column or row.</p>
+<p>The <code>table</code> block can contain other objects packed in multiple columns and rows, and each item can span across more than one column or row.</p>
<ul>
-<li id="description_table_homogeneous"><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span>
+<li id="description_table_homogeneous"><code>homogeneous [homogeneous mode]</code>
<p>Sets the homogeneous mode for the table:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Default</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Available space is evenly divided between children (the space overflows onto other children if too little space is available)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: Size of each item is the largest minimum size of all the items</li>
+<li><code>NONE</code>: Default</li>
+<li><code>TABLE</code>: Available space is evenly divided between children (the space overflows onto other children if too little space is available)</li>
+<li><code>ITEM</code>: Size of each item is the largest minimum size of all the items</li>
</ul>
</li>
-<li id="description_table_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
-<p>Changes the position of the point of balance inside the container. The default value is <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>.</p>
+<li id="description_table_align"><code>align [horizontal] [vertical]</code>
+<p>Changes the position of the point of balance inside the container. The default value is <code>0.5 0.5</code>.</p>
</li>
-<li id="description_table_padding"><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span>
-<p>Sets the space between cells in pixels. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_table_padding"><code>padding [horizontal] [vertical]</code>
+<p>Sets the space between cells in pixels. The default value is <code>0 0</code>.</p>
</li>
-<li id="description_table_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
-<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+<li id="description_table_min"><code>min [horizontal] [vertical]</code>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is <code>0 0</code>.</p>
</li>
</ul>
</li>
-<li id="description_map" name="description_map"><span style="font-family: Courier New,Courier,monospace;">description.map</span> block
+<li id="description_map" name="description_map"><code>description.map</code> block
<pre class="prettyprint">
map {
<ul>
-<li id="description_map_perspective"><span style="font-family: Courier New,Courier,monospace;">perspective [another part's name]</span>
+<li id="description_map_perspective"><code>perspective [another part's name]</code>
<p>Sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color, and visibility are not relevant, just the center point, zplane, and focal are used. This also implicitly enables perspective transforms.</p>
</li>
-<li id="description_map_light"><span style="font-family: Courier New,Courier,monospace;">light [another part's name]</span>
-<p>Sets the part that is used as the light for calculating the brightness (based on how directly the part's surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part <span style="font-family: Courier New,Courier,monospace;">color</span> property is used as the light color (alpha not used for light color). The <span style="font-family: Courier New,Courier,monospace;">color2</span> property is used for the ambient lighting when calculating brightness (alpha also not used).</p>
+<li id="description_map_light"><code>light [another part's name]</code>
+<p>Sets the part that is used as the light for calculating the brightness (based on how directly the part's surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part <code>color</code> property is used as the light color (alpha not used for light color). The <code>color2</code> property is used for the ambient lighting when calculating brightness (alpha also not used).</p>
</li>
-<li id="description_map_on"><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span>
+<li id="description_map_on"><code>on [1 or 0]</code>
<p>Enables mapping for the part. The default value is 0.</p>
</li>
-<li id="description_map_smooth"><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span>
+<li id="description_map_smooth"><code>smooth [1 or 0]</code>
<p>Enables smooth map rendering. This can be linear interpolation, anisotropic filtering, or anything the engine decides is smooth. This is a best-effort hint and it may not produce precisely the same results in all engines and situations. The default value is 1.</p>
</li>
-<li id="description_map_alpha"><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span>
+<li id="description_map_alpha"><code>alpha [1 or 0]</code>
<p>Enables the alpha channel when map rendering. The default value is 1.</p>
</li>
-<li id="description_map_backface_cull"><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span>
+<li id="description_map_backface_cull"><code>backface_cull [1 or 0]</code>
<p>Enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated). This means that the object is hidden when the backface is culled.</p>
</li>
-<li id="description_map_perspective_on"><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span>
-<p>Enables perspective when rotating even without a perspective point object. This uses a perspective set for the object itself or for the canvas as a whole as the global perspective with the <
span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span> functions of the Edje Perspective API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Perspective.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Perspective.html">wearable</a> applications).</p>
+<li id="description_map_perspective_on"><code>perspective_on [1 or 0]</code>
+<p>Enables perspective when rotating even without a perspective point object. This uses a perspective set for the object itself or for the canvas as a whole as the global perspective with the <
code>edje_perspective_set()</code> and <code>edje_perspective_global_set()</code> functions of the Edje Perspective API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Perspective.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Perspective.html">wearable</a> applications).</p>
</li>
-<li id="description_map_color"><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span>
+<li id="description_map_color"><code>color [point] [red] [green] [blue] [alpha]</code>
<p>Sets the color of a vertex in the map. The colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255), which means it has no affect on modifying the part pixels. Currently only 4 points are supported:</p>
<ul>
<li>0: Left-top point of a part</li>
<li>3: Right-bottom point of a part</li>
</ul>
</li>
-<li id="description_map_rotation" name="description_map_rotation"><span style="font-family: Courier New,Courier,monospace;">map.rotation</span> block
+<li id="description_map_rotation" name="description_map_rotation"><code>map.rotation</code> block
<pre class="prettyprint">
rotation {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">rotation</span> block rotates the part, optionally with the center on another part.</p>
+<p>The <code>rotation</code> block rotates the part, optionally with the center on another part.</p>
<ul>
-<li id="description_map_rotation_center"><span style="font-family: Courier New,Courier,monospace;">center [another part's name]</span>
+<li id="description_map_rotation_center"><code>center [another part's name]</code>
<p>Sets the part that is used as the center of rotation when rotating the part with this description. The part's center point is used as the rotation center when applying rotation around the X, Y and Z axes. If no center is given, the part's original center itself is used for the rotation center.</p>
</li>
-<li id="description_map_rotation_x"><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span>
+<li id="description_map_rotation_x"><code>x [X degrees]</code>
<p>Sets the rotation around the X axis of the part considering the center set. The value is given in degrees.</p>
</li>
-<li id="description_map_rotation_y"><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span>
+<li id="description_map_rotation_y"><code>y [Y degrees]</code>
<p>Sets the rotation around the Y axis of the part considering the center set. The value is given in degrees.</p>
</li>
-<li id="description_map_rotation_z"><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span>
+<li id="description_map_rotation_z"><code>z [Z degrees]</code>
<p>Sets the rotation around the Z axis of the part considering the center set. The value is given in degrees.</p>
</li>
</ul>
</li>
-<li id="description_map_perspective2" name="description_map_perspective2"><span style="font-family: Courier New,Courier,monospace;">map.perspective</span> block
+<li id="description_map_perspective2" name="description_map_perspective2"><code>map.perspective</code> block
<pre class="prettyprint">
perspective {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">perspective</span> block adds focal and plane perspective to the part. Active if the <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> property is <span style="font-family: Courier New,Courier,monospace;">true</span>. This must be provided, if the part is being used by another part as its perspective target.</p>
+<p>The <code>perspective</code> block adds focal and plane perspective to the part. Active if the <code>perspective_on</code> property is <code>true</code>. This must be provided, if the part is being used by another part as its perspective target.</p>
<ul>
-<li id="description_map_perspective_zplane"><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span>
+<li id="description_map_perspective_zplane"><code>zplane [unscaled Z value]</code>
<p>Sets the Z value that is not scaled. Normally this is 0 as that is the Z distance.</p>
</li>
-<li id="description_map_perspective_focal"><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span>
+<li id="description_map_perspective_focal"><code>focal [distance]</code>
<p>Sets the distance from the focal Z plane (zplane) and the camera, for example, equating to focal length of the camera.</p>
</li>
</ul>
</li>
-<li id="description_map_link" name="description_map_link"><span style="font-family: Courier New,Courier,monospace;">map.link</span> block
+<li id="description_map_link" name="description_map_link"><code>map.link</code> block
<pre class="prettyprint">
link {
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">link</span> block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with the following properties:</p>
+<p>The <code>link</code> block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with the following properties:</p>
<pre class="prettyprint">
<ul>
-<li id="description_map_link_base"><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span>
+<li id="description_map_link_base"><code>base [signal] [source]</code>
<p>Sets the signal and source which triggers the transition to this state. The source parameter is optional, and it is filled with the current group's default value if it is not provided.</p>
</li>
</ul>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>To set the size and relative position of a part in the EDC file:</p>
<ul>
-<li>Set the size of a part in pixels using the <span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span> properties.
+<li>Set the size of a part in pixels using the <code>min</code> and <code>max</code> properties.
<p>The following example sets the minimum and maximum size of the rectangle part to 200 x 200 px:</p>
<pre class="prettyprint">
}
</pre>
</li>
-<li>Define the position of the part in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks, which determine the upper-left corner and the lower-right corner of the part.
-<p>The position can be defined in relation to another part (with the <span style="font-family: Courier New,Courier,monospace;">relative</span> property), or as an offset (with the <span style="font-family: Courier New,Courier,monospace;">offset</span> property). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent's part.</p>
+<li>Define the position of the part in the <code>rel1</code> and <code>rel2</code> blocks, which determine the upper-left corner and the lower-right corner of the part.
+<p>The position can be defined in relation to another part (with the <code>relative</code> property), or as an offset (with the <code>offset</code> property). When using relative positioning, the <code>to</code>, <code>to_x</code> and <code>to_y</code> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent's part.</p>
<p>To demonstrate relative positioning, the following example creates another rectangle part and positions it under the first part created above. The upper-left corner of the new part starts at the lower-left corner of the previous one.</p>
}
}
</pre>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The <span style="font-family: Courier New,Courier,monospace;">align</span> property defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
-</tr>
-</tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>align</code> property defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.
+</div>
</li>
</ul>
<h2 id="offset" name="offset">Adding an Offset to Relative Positioning</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks support offset, which is a complement to the relative positioning: the corners are first placed according to their relative parameters, and then adjusted using the offsets.</p>
+<p>The <code>rel1</code> and <code>rel2</code> blocks support offset, which is a complement to the relative positioning: the corners are first placed according to their relative parameters, and then adjusted using the offsets.</p>
<p>The following figure shows the pixel positions for a 4 x 4 rectangle. The indexes start in the top-left corner at (0, 0), and increase to the right and to the bottom. Since the indexes have started at 0, the fourth pixel has an index of 3. To create a 2 x 2 blue rectangle centered inside the green rectangle, the top-left corner must be (1, 1) and the bottom-right one (2, 2).</p>
-<p class="figure">Figure: Offset indexes</p>
+<p align="center"><strong>Figure: Offset indexes</strong></p>
<p align="center"><img alt="Offset indexes" src="../../../images/rel1_rel2_offsets.png" /></p>
<p>To determine the relative position of the blue rectangle, Edje needs the following definitions:</p>
<p>The following figure shows how to refer to pixels using relative positioning when the offsets are (0, 0).</p>
-<p class="figure">Figure: Relative positioning</p>
+<p align="center"><strong>Figure: Relative positioning</strong></p>
<p align="center"><img alt="Relative positioning" src="../../../images/rel1_rel2_offsets_and_relative.png" /></p>
-<p>Note that in addressing the pixels, (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2).</p>
+<p>Note that in addressing the pixels, (0, 0) is addressed through <code>relative: 0 0; offset 0 0;</code> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <code>relative: 0.75 0.75; offset: 0 0;</code> is at (3, 3) and not (2, 2).</p>
-<p>This addressing method comes from a design choice in Evas and Edje, favoring simplicity. In the examples shown in this topic, there are 4 pixels, and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1]</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25], [0.25; 0.50], [0.50; 0.75], [0.75; 0.100]</span>. With Edje, the value used to refer to each segment is the left bound, and therefore 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100]</span> (the bottom-right pixel of the green rectangle shown in red).</p>
+<p>This addressing method comes from a design choice in Evas and Edje, favoring simplicity. In the examples shown in this topic, there are 4 pixels, and therefore when the <code>[0; 1]</code> range is divided in 4, the result is <code>[0; 0.25], [0.25; 0.50], [0.50; 0.75], [0.75; 0.100]</code>. With Edje, the value used to refer to each segment is the left bound, and therefore 0.75 refers to <code>[0.75; 0.100]</code> (the bottom-right pixel of the green rectangle shown in red).</p>
-<p>To refer to the previous pixel (the bottom-right pixel of the blue rectangle), set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> block bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as expressed naturally, and define the offset as <span style="font-family: Courier New,Courier,monospace;">-1 -1</span>. This definition can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (the resulting range being <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75]</span>).</p>
+<p>To refer to the previous pixel (the bottom-right pixel of the blue rectangle), set the <code>rel2</code> block bound to <code>relative: 0.75 0.75;</code>, as expressed naturally, and define the offset as <code>-1 -1</code>. This definition can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (the resulting range being <code>[0.50; 0.75]</code>).</p>
-<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for the <span style="font-family: Courier New,Courier,monospace;">rel2</span> block, it is set as the default value.</p>
+<p>Since <code>-1 -1</code> is the most common offset wanted for the <code>rel2</code> block, it is set as the default value.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1 id="program1" name="program1">Program Block</h1>
-<p id="program">The <span style="font-family: Courier New,Courier,monospace;">program</span> block defines how your interface reacts to events. Programs can change the part state or trigger other events.</p>
+<p id="program">The <code>program</code> block defines how your interface reacts to events. Programs can change the part state or trigger other events.</p>
+<p>The events are handled as signals, which can be emitted between the application logic (code) and UI (theme). For more information, see <a href="learn_edc_signal_handling_n.htm">Signal Handling</a>.</p>
-<p class="figure">Figure: Program block</p>
-<p align="center"><img alt="Program block" src="../../../images/diagram_program.png"/></p>
+
+<p align="center"><strong>Figure: Program block</strong></p>
+<p align="center"><img width="450" alt="Program block" src="../../../images/diagram_program.png"/></p>
<pre class="prettyprint">
program {
<a href="#in">in</a>: 0.3 0.0;
/* Set the action to perform */
<a href="#action">action</a>: STATE_SET "statename" state_value;
- /* If the action is STATE_SET, define a transition from the current to the target state */
+ /*
+ If the action is STATE_SET,
+ define a transition from the current to the target state
+ */
<a href="#transition">transition</a>: LINEAR 0.5;
/* If the action is SIGNAL_EMIT, set the name of the part which receives the signal */
<a href="#target">target</a>: "partname";
<ul>
-<li id="program_name"><span style="font-family: Courier New,Courier,monospace;">name [program name]</span>
+<li id="program_name"><code>name [program name]</code>
<p>Sets the symbolic name of the program as a unique identifier.</p>
</li>
-<li id="signal"><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span>
+<li id="signal"><code>signal [signal name]</code>
<p>Sets the signals that cause the program to run. The signal received must match the specified source to run. There can be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">hold,on</span>: Holding on the mouse event matching the source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">hold,off</span>: Holding off the mouse event matching the source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">focus,part,in</span>: Focusing in the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">focus,part,out</span>: Focusing out of the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,in</span>: Moving the mouse into the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,out</span>: Moving the mouse out of the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,move</span>: Moving the mouse in the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span>: Pressing the mouse button in the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,up,*</span>: Releasing the mouse button in the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,clicked,*</span>: Clicking any mouse button in the matching source that starts the program</li>
-<li><span style="font-family: Courier New,Courier,monospace;">mouse,wheel,0,*</span>: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">drag,start</span>: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">drag,stop</span>: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">drag</span>: Dragging the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
+<li><code>hold,on</code>: Holding on the mouse event matching the source that starts the program</li>
+<li><code>hold,off</code>: Holding off the mouse event matching the source that starts the program</li>
+<li><code>focus,part,in</code>: Focusing in the matching source that starts the program</li>
+<li><code>focus,part,out</code>: Focusing out of the matching source that starts the program</li>
+<li><code>mouse,in</code>: Moving the mouse into the matching source that starts the program</li>
+<li><code>mouse,out</code>: Moving the mouse out of the matching source that starts the program</li>
+<li><code>mouse,move</code>: Moving the mouse in the matching source that starts the program</li>
+<li><code>mouse,down,*</code>: Pressing the mouse button in the matching source that starts the program</li>
+<li><code>mouse,up,*</code>: Releasing the mouse button in the matching source that starts the program</li>
+<li><code>mouse,clicked,*</code>: Clicking any mouse button in the matching source that starts the program</li>
+<li><code>mouse,wheel,0,*</code>: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
+<li><code>drag,start</code>: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the <code>draggable</code> part.</li>
+<li><code>drag,stop</code>: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the <code>draggable</code> part.</li>
+<li><code>drag</code>: Dragging the mouse in the matching source that starts the program. This signal works only in the <code>draggable</code> part.</li>
</ul>
</li>
-<li id="program_source"><span style="font-family: Courier New,Courier,monospace;">source [source name]</span>
-<p>Sets the source of an accepted signal. There can be several signals, but only one source keyword per program can be used. For example, <span style="font-family: Courier New,Courier,monospace;">source: button-*</span> means that signals from any part or program named <span style="font-family: Courier New,Courier,monospace;">button-*</span> are accepted.</p>
+<li id="program_source"><code>source [source name]</code>
+<p>Sets the source of an accepted signal. There can be several signals, but only one source keyword per program can be used. For example, <code>source: button-*</code> means that signals from any part or program named <code>button-*</code> are accepted.</p>
</li>
-<li id="filter"><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span>
-<p>Filters the signals to be only accepted if the part is in the <span style="font-family: Courier New,Courier,monospace;">[state]</span> state. Only 1 filter per program can be used. If the <span style="font-family: Courier New,Courier,monospace;">[state]</span> parameter is not given, the source of the event is used instead.</p>
+<li id="filter"><code>filter [part] [state]</code>
+<p>Filters the signals to be only accepted if the part is in the <code>[state]</code> state. Only 1 filter per program can be used. If the <code>[state]</code> parameter is not given, the source of the event is used instead.</p>
</li>
-<li id="in"><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span>
-<p>Waits <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
+<li id="in"><code>in [from] [range]</code>
+<p>Waits <code>[from]</code> seconds before executing the program and add a random number of seconds (from 0 to <code>[range]</code>) to the total waiting time.</p>
</li>
-<li id="action"><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span>
+<li id="action"><code>action [type] (param1) (param2) (param3) (param4)</code>
<p>Sets the action to be performed by the program. The valid actions (only 1 can be specified) are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set the <span style="font-family: Courier New,Courier,monospace;">target part</span> state as <span style="font-family: Courier New,Courier,monospace;">target state</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE "sample name" speed (channel)</span>: Play a music sample clip
-
-<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>'s (optional) channel can be one of:</p>
+<li><code>STATE_SET</code>: Set the <code>target part</code> state as <code>target state</code></li>
+<li><code>ACTION_STOP</code>: Stop the ongoing transition</li>
+<li><code>SIGNAL_EMIT</code>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
+<li><code>DRAG_VAL_SET</code>: Set a value for the <code>draggable</code> part (x, y values)</li>
+<li><code>DRAG_VAL_STEP</code>: Set a step for the <code>draggable</code> part (x, y values)</li>
+<li><code>DRAG_VAL_PAGE</code>: Set a page for the <code>draggable</code> part (x, y values)</li>
+<li><code>FOCUS_SET</code>: Set the focus to the target group</li>
+<li><code>PLAY_SAMPLE "sample name" speed (channel)</code>: Play a music sample clip
+
+<p><code>PLAY_SAMPLE</code>'s (optional) channel can be one of:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
+<li><code>EFFECT/FX</code></li>
+<li><code>BACKGROUND/BG</code></li>
+<li><code>MUSIC/MUS</code></li>
+<li><code>FOREGROUND/FG</code></li>
+<li><code>INTERFACE/UI</code></li>
+<li><code>INPUT</code></li>
+<li><code>ALERT</code></li>
</ul>
</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE "tone name" duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION "sample name" repeat (repeat count)</span></li>
+<li><code>PLAY_TONE "tone name" duration_in_seconds (Range 0.1 to 10.0)</code>: Play a predefined tone of a specific duration</li>
+<li><code>PLAY_VIBRATION "sample name" repeat (repeat count)</code></li>
</ul></li>
-<li id="transition"><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span>
-<p>Determines how transitions occur using the <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. The <span style="font-family: Courier New,Courier,monospace;">[type]</span> parameter is the style of the transition and the <span style="font-family: Courier New,Courier,monospace;">[length]</span> parameter is a double specifying the number of seconds in which to perform the transition. The valid types are:</p>
+<li id="transition"><code>transition [type] [length] (interp val 1) (interp val 2) (option)</code>
+<p>Determines how transitions occur using the <code>STATE_SET</code> action. The <code>[type]</code> parameter is the style of the transition and the <code>[length]</code> parameter is a double specifying the number of seconds in which to perform the transition. The valid types are:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
+<li><code>LIN</code> or <code>LINEAR</code></li>
+<li><code>SIN</code> or <code>SINUSOIDAL</code></li>
+<li><code>ACCEL</code> or <code>ACCELERATE</code></li>
+<li><code>DECEL</code> or <code>DECELERATE</code></li>
+<li><code>ACCEL_FAC</code> or <code>ACCELERATE_FACTOR</code></li>
+<li><code>DECEL_FAC</code> or <code>DECELERATE_FACTOR</code></li>
+ <li><code>SIN_FAC</code> or <code>SINUSOIDAL_FACTOR</code></li>
+ <li><code>DIVIS</code> or <code>DIVISOR_INTERP</code></li>
+ <li><code>BOUNCE</code></li>
+ <li><code>SPRING</code></li>
</ul>
<p>The types have the following requirements:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span>, and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional <span style="font-family: Courier New,Courier,monospace;">interp val 1</span> to determine the <span style="font-family: Courier New,Courier,monospace;">factor</span> of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</li>
+<li><code>ACCEL_FAC</code>, <code>DECEL_FAC</code>, and <code>SIN_FAC</code> need the extra optional <code>interp val 1</code> to determine the <code>factor</code> of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>, and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require <span style="font-family: Courier New,Courier,monospace;">interp val 2</span> in addition to <span style="font-family: Courier New,Courier,monospace;">interp val 1</span>.</li>
+<li><code>DIVIS</code>, <code>BOUNCE</code>, and <code>SPRING</code> also require <code>interp val 2</code> in addition to <code>interp val 1</code>.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (for example, 0.0 is horizontal, 1.0 is diagonal (linear), and 2.0 is twice the gradient of linear). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to a linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</li>
+<li><code>DIVIS</code> uses <code>[val 1]</code> as the initial gradient start (for example, 0.0 is horizontal, 1.0 is diagonal (linear), and 2.0 is twice the gradient of linear). <code>[val 2]</code> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <code>[val 2]</code> is equivalent to a linear interpolation. Note that <code>DIVIS</code> can exceed 1.0.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives a linear decay per bounce and higher values give much more decay.</li>
+<li><code>BOUNCE</code> uses <code>[val 2]</code> as the number of bounces (so it is rounded down to the nearest integer value), with <code>[val 1]</code> determining how much the bounce decays; 0.0 gives a linear decay per bounce and higher values give much more decay.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</li>
+<li><code>SPRING</code> is similar to bounce; <code>[val 2]</code> specifies the number of spring swings and <code>[val 1]</code> specifies the decay, but it can exceed 1.0 on the outer swings.</li>
<li>The valid options are:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span>: Causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
+<li><code>CURRENT</code>: Causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
</ul>
</li>
</ul>
</li>
-<li id="target"><span style="font-family: Courier New,Courier,monospace;">target [target]</span>
+<li id="target"><code>target [target]</code>
<p>Sets the program or part on which the specified action acts.</p>
</li>
-<li id="after"><span style="font-family: Courier New,Courier,monospace;">after [after]</span>
-<p>Determines the program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</p>
+<li id="after"><code>after [after]</code>
+<p>Determines the program that is run after the current program completes. The source and signal parameters of a program run as an <code>after</code> are ignored. Multiple <code>after</code> statements can be specified per program.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>Using signals in the EDC file is simple:</p>
<ol>
-<li>Create a program that changes the rectangle color between red and blue when specific signals are received. Set the signal name to the <span style="font-family: Courier New,Courier,monospace;">signal</span> attribute:
+<li>Create a program that changes the rectangle color between red and blue when specific signals are received. Set the signal name to the <code>signal</code> attribute:
<pre class="prettyprint">
collections {
<p align="center"><img alt="Signal implemented on the screen" src="../../../images/edje_signal1.png" /></p>
</li>
<li>
-<p>The following example implements the callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span> event from the check component. When the <span style="font-family: Courier New,Courier,monospace;">changed</span> event is triggered, a signal is emitted from the C code to the EDC file.</p>
+<p>The following example implements the callback for the <code>changed</code> event from the check component. When the <code>changed</code> event is triggered, a signal is emitted from the C code to the EDC file.</p>
<pre class="prettyprint">
static void
_check_toggled(void *data, Evas_Object *obj, void *event_info)
<h1 id="styles_block" name="styles_block">Styles Block</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;"><tags></span> for advanced textblock formatting.</p>
+<p>The <code>styles</code> block contains one or more <code>style</code> blocks. A <code>style</code> block is used to create style <code><tags></code> for advanced textblock formatting.</p>
-<p class="figure">Figure: Styles block</p>
-<p align="center"><img alt="Styles block" src="../../../images/diagram_styles.png"/></p>
+<p align="center"><strong>Figure: Styles block</strong></p>
+<p align="center"><img width="450" alt="Styles block" src="../../../images/diagram_styles.png"/></p>
<pre class="prettyprint">
styles {
</pre>
<ul>
-<li id="name"><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
+<li id="name"><code>name [style name]</code>
<p>Sets the name of the style to be used as a reference later in the theme.</p>
</li>
-<li id="base"><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
+<li id="base"><code>base [style properties string]</code>
<p>Sets the default style properties applied to the complete text. The following tags can be used in the style property:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">font</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">font_size</span>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it in the Emulator menu.</td>
- </tr>
- </tbody>
- </table>
+ <li><code>font</code></li>
+ <li><code>font_size</code>
+<div class="note">
+ <strong>Note</strong>
+ The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it in the emulator menu.
+</div>
</li>
- <li><span style="font-family: Courier New,Courier,monospace;">color</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">color_class</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">text_class</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">ellipsis</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">wrap</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">style</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">valign</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">align</span></li>
+ <li><code>color</code></li>
+ <li><code>color_class</code></li>
+ <li><code>text_class</code></li>
+ <li><code>ellipsis</code></li>
+ <li><code>wrap</code></li>
+ <li><code>style</code></li>
+ <li><code>valign</code></li>
+ <li><code>align</code></li>
</ul>
</li>
-<li id="tag"><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
-<p>Sets the style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;"><tags>..</tags></span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;"><bold></bold></span>, a '+' sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;"><bold></span>). If the second part (<span style="font-family: Courier New,Courier,monospace;"></bold></span>) is also defined, a '-' sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;"><tab></span>, must not have a starting '+'.</p>
+<li id="tag"><code>tag [tag name] [style properties string]</code>
+<p>Sets the style to be applied only to text between style <code><tags>..</tags></code>. When creating paired tags, like <code><bold></bold></code>, a '+' sign must be added at the start of the style properties of the first part (<code><bold></code>). If the second part (<code></bold></code>) is also defined, a '-' sign must be added to its style properties. This applies only to paired tags; single tags, like <code><tab></code>, must not have a starting '+'.</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">br</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">tab</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">b</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">match</span></li>
+ <li><code>br</code></li>
+ <li><code>tab</code></li>
+ <li><code>b</code></li>
+ <li><code>match</code></li>
</ul>
</pre>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<h2 id="start" name="start">Starting the Main Loop</h2>
-<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
+<p>To start the Ecore main loop and move your application into the running state, call the <code>ui_app_main()</code> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
<pre class="prettyprint">
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;
}
<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
-<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
+<p>A timer callback prototype looks like the <code>my_timed_cb()</code> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
+<li><code>ECORE_CALLBACK_RENEW</code>: the function is called again after the timeout.</li>
+<li><code>ECORE_CALLBACK_CANCEL</code>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
</ul>
<p>To create and destroy a timer:</p>
<ul>
-<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
+<li>To create a timer, use the <code>ecore_timer_add()</code> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <code>Ecore_Timer</code> object.
+<p>In the following example, the <code>my_timed_cb()</code> function is run after 2 seconds and it receives <code>my_data</code>. It is renewed while its count variable value is under 5, and stops after that.</p>
<pre class="prettyprint">
Eina_Bool
my_timed_cb(void *data)
</pre>
</li>
-<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
+<li>To delete the timer, use the <code>ecore_timer_del()</code> function. The timer to delete must still be running, that is, it has not returned a <code>false</code> value. If the timer is not running, the function cannot be called.</li>
</ul>
<p>To manage a timer:</p>
<ul>
-<li>To change the timer's interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer's current interval.</li>
+<li>To change the timer's interval, use the <code>ecore_timer_interval_set()</code> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <code>ecore_timer_interval_get()</code> function to get the timer's current interval.</li>
-<li>To get the timer's pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
+<li>To get the timer's pending time, use the <code>ecore_timer_pending_get()</code> function.</li>
-<li>To delay the timer's next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences' interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
+<li>To delay the timer's next occurrence, use the <code>ecore_timer_delay()</code> function. The function adds the specified time to the current interval. It does not change the future occurrences' interval. You can also reset the current interval to its full value by using the <code>ecore_timer_reset()</code> function.</li>
-<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
+<li>To pause the currently running timer, use the <code>ecore_timer_freeze()</code> function. The remaining time is saved and used again when the timer is resumed with the <code>ecore_timer_thaw()</code> function.</li>
-<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
-<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
+<li>To query the current value of the defined timer infrastructure precision, use the <code>ecore_timer_precision_get()</code> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
+<p>To set the precision, use the <code>ecore_timer_precision_set()</code> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
</ul>
<h2 id="Animators" name="Animators">Animators</h2>
ecore_animator_add(my_anim_cb, my_data);
</pre>
-<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
+<p>This example looks the same as the one using an Ecore timer. The <code>ecore_animator_add()</code> function takes the callback function and data to pass to it, and returns an <code>Ecore_Animator</code> object. The function is called at a system-defined interval until it returns <code>ECORE_CALLBACK_CANCEL</code> instead of <code>ECORE_CALLBACK_RENEW</code>.</p>
<h3>Specific-duration Animator</h3>
<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
-<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
+<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <code>ECORE_CALLBACK_CANCEL</code> to abort, or <code>ECORE_CALLBACK_RENEW</code> to continue.</p>
<p>To create and destroy the animator:</p>
<ul>
-<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
+<li>To create the animator, use the <code>ecore_animator_timeline_add()</code> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
<pre class="prettyprint">
Eina_Bool
my_anim_cb(void *data, double position)
ecore_animator_timeline_add(5., my_anim_cb, my_data);
</pre>
-<p>In this example, the animator is specified to run for 5 seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
+<p>In this example, the animator is specified to run for 5 seconds. The function returns <code>ECORE_CALLBACK_CANCEL</code> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
-<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
+<p>Ecore can generate a virtual position from the original one using <code>ecore_animator_pos_map(position, map, v1, v2)</code>. Several maps are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+<li><code>ECORE_POS_MAP_LINEAR</code>: linear from 0.0 to 1.0.</li>
+<li><code>ECORE_POS_MAP_ACCELERATE</code>: start slow, then speed up.</li>
+<li><code>ECORE_POS_MAP_DECELERATE</code>: start fast, then slow down.</li>
+<li><code>ECORE_POS_MAP_SINUSOIDAL</code>: start slow, speed up, then slow down at the end.</li>
+<li><code>ECORE_POS_MAP_ACCELERATE_FACTOR</code>: start slow, then speed up, <code>v1</code> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
+<li><code>ECORE_POS_MAP_DECELERATE_FACTOR</code>: start fast, then slow down, <code>v1</code> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
+<li><code>ECORE_POS_MAP_SINUSOIDAL_FACTOR</code>: start slow, speed up, then slow down at the end, <code>v1</code> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
+<li><code>ECORE_POS_MAP_DIVISOR_INTERP</code>: start at gradient <code>* v1</code>, interpolated with the power of <code>v2</code> curve.</li>
+<li><code>ECORE_POS_MAP_BOUNCE</code>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <code>v2</code> times, with a decay factor of <code>v1</code>.</li>
+<li><code>ECORE_POS_MAP_SPRING</code>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <code>v2</code> times, with a decay factor of <code>v1</code>.</li>
</ul>
-<p class="figure">Figure: Position maps</p>
+<p align="center"><strong>Figure: Position maps</strong></p>
<p align="center"><img alt="Position maps" src="../../../images/pos_map_all.png" /></p>
</li>
-<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
+<li>To destroy the animator, use the <code>ecore_animator_del()</code> function. The animator to destroy must be running, that is, it has not returned a <code>false</code> value. If the animator is not running, the function cannot be called.</li>
</ul>
<p>To manage the animator:</p>
<ul>
-<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
+<li>To pause the currently running animator, use the <code>ecore_animator_freeze()</code> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <code>ecore_animator_thaw()</code> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
-<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
+<li>To query Ecore for the interval between 2 animator calls, use the <code>ecore_animator_frametime_get()</code> function.</li>
-<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
+<li>To change the interval, use the <code>ecore_animator_frametime_set(interval)</code> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
</ul>
<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
<p>To manage the file descriptors:</p>
<ul>
-<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
+<li>To set a callback, use the <code>_my_cb_func()</code> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <code>ECORE_CALLBACK_RENEW</code> or <code>ECORE_CALLBACK_CANCEL</code>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
-<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
+<li>To listen to events, use the <code>ecore_main_fd_handler_add()</code> function.</li>
-<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
+<li>To wait for incoming data (that is, to read data) on the <code>my_fd</code> file descriptor, passing <code>my_data</code>:
<pre class="prettyprint">
Eina_Bool
</pre>
</li>
-<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
+<li>To delete a file descriptor handler, use the <code>ecore_main_fd_handler_del()</code> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
-<li>To get the handler's file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
+<li>To get the handler's file descriptor, use the <code>ecore_main_fd_handler_fd_get()</code> function.</li>
-<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
+<li>To select whether a flag is active on a handler, use the <code>ecore_main_fd_handler_active_get()</code> function. For example, the handler is set to monitor both <code>ECORE_FD_READ</code> and <code>ECORE_FD_ERROR</code>. The following example finds out whether the function was called because of an error:
<pre class="prettyprint">
Eina_Bool
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>
-<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
+<li>To change the flags the handler is monitoring, use the <code>ecore_main_fd_handler_active_set()</code> function.</li>
</ul>
<h2 id="Threads" name="Threads">Threads</h2>
<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
-<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
+<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <code>my_short_job()</code> and <code>my_feedback_job()</code>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<code>my_job_cancel()</code>) or end normally (<code>my_job_end()</code>).</p>
<pre class="prettyprint">
struct feedback_msg {
<p>To manage threads:</p>
<ul>
-<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
+<li>To cancel a thread, use the <code>ecore_thread_cancel()</code> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <code>ecore_thread_check()</code> function regularly to check whether the thread has been marked for cancellation and exit if <code>true</code>.</li>
-<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
+<li>To run threads that are not accounted for in the worker thread pool, use the <code>ecore_thread_feedback_run()</code> function with the last parameter set to <code>EINA_TRUE</code>.
<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
</li>
-<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
+<li>To execute a thread later, use the <code>ecore_thread_reschedule()</code> function. This function is added to the end of the pending tasks.</li>
-<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
+<li>To get the maximum number of concurrent threads, use the <code>ecore_thread_max_get()</code> function. If needed, set it by using the <code>ecore_thread_max_set()</code> function, or reset the default value using the <code>ecore_thread_max_reset()</code> function.</li>
-<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
+<li>To query the number of active threads, use the <code>ecore_thread_active_get()</code> function. To query the number of available worker threads, use the <code>ecore_thread_available_get()</code> function, which is basically the same as the <code>ecore_thread_max_get()</code> - <code>ecore_thread_active_get()</code>.</li>
</ul>
<h2 id="Idlers" name="Idlers">Idlers</h2>
-<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
+<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <code>Ecore_Idle_Enterer</code>, <code>Ecore_Idle_Exiter</code>, and <code>Ecore_Idler</code>.</p>
-<p class="figure">Figure: Idle loop</p>
+<p align="center"><strong>Figure: Idle loop</strong></p>
<p align="center"><img alt="Idle loop" src="../../../images/idlers.png" /></p>
-<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or is finished.</p>
+<p>The idle enterers, exiters, and idlers all have the same prototype, <code>my_idler()</code>, which receives data and returns <code>ECORE_CALLBACK_RENEW</code> or <code>ECORE_CALLBACK_CANCEL</code> to tell Ecore whether it wants to be called again or is finished.</p>
<p>To manage the idlers:</p>
<ul>
-<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
-<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
+<li>To add an idler, use the <code>ecore_idler_add()</code> function.</li>
+<li>To delete an idler, use the <code>ecore_idler_del()</code> function.</li>
-<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
+<li>To add and delete idle exiters, use the <code>ecore_idle_exiter_add()</code> and <code>ecore_idle_exiter_del()</code> functions.</li>
-<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
+<li>To add and delete idle enterers, use the <code>ecore_idle_enterer_add()</code> and <code>ecore_idle_enterer_del()</code> functions. The <code>ecore_idle_enterer_before_add()</code> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
</ul>
<pre class="prettyprint">
ecore_idler_add(my_idler_cb, my_data);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</ul>
<h3 id="multi" name="multi">Multi-scale in the Tizen Native UI Framework</h3>
- <p>Tizen native UI framework supports multiple scaling. If the application is implemented to be scalable, it can be scaled to different device environments by simply changing the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in the target environment without modifying the application code.</p>
+ <p>Tizen native UI framework supports multiple scaling. If the application is implemented to be scalable, it can be scaled to different device environments by simply changing the <code>elm_scale</code> value in the target environment without modifying the application code.</p>
<p>Scale 1.0 in the Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the DPI between 80 and 100.</p>
<p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed without scaling in a mobile environment, it looks very small. To show the object in the mobile environment with a similar size as in the monitor, a device-specific scale value of 2.0 is used, resulting in the object size of 100 px instead of 50 px.</p>
- <p class="figure">Figure: Scaling from desktop to mobile</p>
+ <p align="center"><strong>Figure: Scaling from desktop to mobile</strong></p>
<p align="center"><img alt="Scaling from desktop to mobile" src="../../../images/scaling.png" /> </p>
<h3 id="base" name="base">Base Scale</h3>
<p>The size of the scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object has a size of 10 in the base scale 1.0, it is created with that same size 10 in a device with the scale 1.0. In a device with the scale 2.0, the object size is 20; and in a device with the scale 4.0, the object size is 40.</p>
- <p class="figure">Figure: Base scale</p>
+ <p align="center"><strong>Figure: Base scale</strong></p>
<p align="center"><img alt="Base scale" src="../../../images/base_scale.png" /> </p>
<p>The middle object in the above figure has a base scale 2.0. To calculate the size of the scalable object in a device when the base scale is something other than 1.0, use the following formula:</p>
<p>The following table lists the profile factors for various profiles.</p>
+<p align="center" class="Table"><strong>Table: Profile factors</strong></p>
<table>
-<caption>Table: Profile factors</caption>
<tbody>
<tr>
<th>Profile</th>
<h3 id="set_edc" name="set_edc">Setting the Base Scale in the EDC File</h3>
<p>The application must specify its base scale.</p>
-<p>The EDJE objects are scaled properly, if the base scale is set in the collections block of the EDC file and the object is set as scalable with the <span style="font-family: Courier New,Courier,monospace;">scale</span> property:</p>
+<p>The EDJE objects are scaled properly, if the base scale is set in the collections block of the EDC file and the object is set as scalable with the <code>scale</code> property:</p>
<pre class="prettyprint">
collections
}
</pre>
- <table class="note"><tbody>
-<tr>
-<th class="note">Note</th>
- </tr>
-<tr>
-<td class="note">The base scale for the WVGA resolution is 1.8 and for the HD resolution 2.4.</td>
- </tr>
-</tbody></table>
+<div class="note">
+ <strong>Note</strong>
+ The base scale for the WVGA resolution is 1.8 and for the HD resolution 2.4.
+</div>
<h3 id="set_c" name="set_c">Setting the Base Scale in the C Code</h3>
<p>The object size must be specified in the EDC file. However, sometimes it is better to set the object size in a C file.</p>
-<p>If the size is defined in the C file with no scaling, the object is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro:</p>
+<p>If the size is defined in the C file with no scaling, the object is displayed in the same size even if the scale changes. To avoid this, use the <code>ELM_SCALE_SIZE</code> macro:</p>
<pre class="prettyprint">
#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()
</pre>
-<p>In the above definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is first changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and then multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
+<p>In the above definition, the size (<code>x</code>) is first changed to a size based on 1.0 (<code>x/elm_app_base_scale_get()</code>) and then multiplied with the scale of the current target (<code>elm_config_scale_get()</code>).</p>
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in your application:</p>
+<p>To use the <code>ELM_SCALE_SIZE</code> macro in your application:</p>
<ol>
-<li>Set the application base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:
+<li>Set the application base scale using the <code>elm_app_base_scale_set()</code> function:
<pre class="prettyprint">
int
}
</pre>
</li>
-<li>Define the object size in the application using the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro:
+<li>Define the object size in the application using the <code>ELM_SCALE_SIZE</code> macro:
<pre class="prettyprint">
evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
</pre>
- <p>You can use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in all functions related to setting objects sizes in Tizen native applications.</p>
+ <p>You can use the <code>ELM_SCALE_SIZE</code> macro in all functions related to setting objects sizes in Tizen native applications.</p>
</li>
</ol>
<p>The following table shows some examples of pixel conversions.</p>
+<p align="center" class="Table"><strong>Table: Pixel conversions</strong></p>
<table>
-<caption>Table: Pixel conversions</caption>
<tbody>
<tr>
<th></th>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
<p>To initialize multi-point touch for use:</p>
<ol>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file, define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that includes the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers for various UI components, a list, and a Boolean flag:</p>
+<p>In the <code>multitouch.c</code> file, define the <code>appdata</code> structure that includes the <code>Evas_Object</code> pointers for various UI components, a list, and a Boolean flag:</p>
<pre class="prettyprint">
struct appdata {
Evas_Object *win;
</pre>
</li>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">main()</span> function, initialize the event callbacks and call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application main loop:</p>
+<p>In the <code>main()</code> function, initialize the event callbacks and call the <code>ui_app_main()</code> function to start the EFL application main loop:</p>
<pre class="prettyprint">
int
main(int argc, char *argv[])
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]);
<p>The following figure illustrates the example application screen.</p>
- <p class="figure">Figure: Multi-point touch screen</p>
+ <p align="center"><strong>Figure: Multi-point touch screen</strong></p>
<p align="center"><img alt="Multi-point touch screen" src="../../../images/multipoint_touch.png" /></p>
</li>
</ol>
<p>To handle the canvas:</p>
<ol>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, create the base UI elements, including the naviframe and button. The naviframe includes each view screen as an item, and the item in turn includes a title, a button which clears the spots when clicked, and the actual content (in this case, a box component).</p>
+<p>In the <code>create_base_gui()</code> function, create the base UI elements, including the naviframe and button. The naviframe includes each view screen as an item, and the item in turn includes a title, a button which clears the spots when clicked, and the actual content (in this case, a box component).</p>
<pre class="prettyprint">
static void
</pre>
</li>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, create the view screen content: the box with a label and an event rectangle.</p>
+<p>In the <code>create_main_view()</code> function, create the view screen content: the box with a label and an event rectangle.</p>
<p>The label displays information on the mouse event status and coordinates (X and Y positions). The event rectangle is received completely through the mouse (touch) events.</p>
<p>A box is used as a container for the label and rectangle, because to show multiple elements in a naviframe content area, a container combining those elements is necessary. The label and rectangle are packed at the end of the box, and the box is embedded into the naviframe content area.</p>
</pre>
</li>
<li>
-<p>In the <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function, create a rectangle, resize it according to the received size input, and move it according to the received coordinate input (X and Y positions):</p>
+<p>In the <code>create_spot()</code> function, create a rectangle, resize it according to the received size input, and move it according to the received coordinate input (X and Y positions):</p>
<pre class="prettyprint">
Evas_Object*
</pre>
</li>
<li>
-<p>The created rectangle is stored in the <span style="font-family: Courier New,Courier,monospace">Eina_List(ad->spots)</span> list to allow it to be removed when the user clicks <strong>Clear</strong>.</p>
-<p>In the <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> button click callback, remove all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> from the <span style="font-family: Courier New,Courier,monospace">ad->spots</span> list, to clear all spot rectangles from the screen.</p>
+<p>The created rectangle is stored in the <code>Eina_List(ad->spots)</code> list to allow it to be removed when the user clicks <strong>Clear</strong>.</p>
+<p>In the <code>button_clicked_cb()</code> button click callback, remove all <code>evas_objects</code> from the <code>ad->spots</code> list, to clear all spot rectangles from the screen.</p>
<pre class="prettyprint">
static void
<h2 id="touch" name="touch">Managing Touch Events</h2>
-<p>Within the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, where the box component is created, event callbacks are added for the box to draw event rectangles according to touch events. The event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+<p>Within the <code>create_main_view()</code> function, where the box component is created, event callbacks are added for the box to draw event rectangles according to touch events. The event callback is added using the <code>evas_object_event_callback_add()</code> function.</p>
<p>The following example shows how to add and define an event callback for a move event by drawing a black rectangle after each movement. To distinguish the places where the user touches down and releases the touch, you can add and define additional event callbacks for down and up events, by setting a different color for the down and up rectangles.</p>
-<p>If the given object receives a touch event, a callback function is called, and event information, such as coordinates (X and Y positions) is passed. In this example, the <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function updates the label text with the touch coordinates, and draws a spot rectangle in those coordinates.</p>
+<p>If the given object receives a touch event, a callback function is called, and event information, such as coordinates (X and Y positions) is passed. In this example, the <code>mousemove_cb()</code> function updates the label text with the touch coordinates, and draws a spot rectangle in those coordinates.</p>
<pre class="prettyprint">
static void
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The event types for a touch event contain the "MOUSE" keyword due to backward compatibility with Tizen 2.3. Before the multi-point touch concept was introduced, there was no difference between a single touch event and a mouse event. As a result, the single touch event used the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN/UP/MOVE</span> event types.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The event types for a touch event contain the "MOUSE" keyword due to backward compatibility with Tizen 2.3. Before the multi-point touch concept was introduced, there was no difference between a single touch event and a mouse event. As a result, the single touch event used the <code>EVAS_CALLBACK_MOUSE_DOWN/UP/MOVE</code> event types.
+</div>
<p>The following touch event types are supported:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: Object receives the mouse/touch down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: Object receives the mouse/touch up event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: Object receives the mouse/touch move event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: Object has already received the mouse/touch down event and receives the multi-mouse/touch down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: Object receives the multi-mouse/touch up event. </li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: Object receives the multi-mouse/touch move event.</li>
+<li><code>EVAS_CALLBACK_MOUSE_DOWN</code>: Object receives the mouse/touch down event.</li>
+<li><code>EVAS_CALLBACK_MOUSE_UP</code>: Object receives the mouse/touch up event.</li>
+<li><code>EVAS_CALLBACK_MOUSE_MOVE</code>: Object receives the mouse/touch move event.</li>
+<li><code>EVAS_CALLBACK_MULTI_DOWN</code>: Object has already received the mouse/touch down event and receives the multi-mouse/touch down event.</li>
+<li><code>EVAS_CALLBACK_MULTI_UP</code>: Object receives the multi-mouse/touch up event. </li>
+<li><code>EVAS_CALLBACK_MULTI_MOVE</code>: Object receives the multi-mouse/touch move event.</li>
</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h2 id="type">Object Type</h2>
-<p>Evas library is in charge of rendering in EFL, and it renders graphics by displaying a unit called an Evas object. It defines the data structure of the object type and provides the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> handle. In short, all graphical objects in EFL have the same data type: <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>Evas library is in charge of rendering in EFL, and it renders graphics by displaying a unit called an Evas object. It defines the data structure of the object type and provides the <code>Evas_Object</code> handle. In short, all graphical objects in EFL have the same data type: <code>Evas_Object</code>.</p>
<p>The following code snippet shows the return type of several EFL APIs:</p>
img = evas_object_image_add(evas);
</pre>
-<p>In the above example, the object created by each function has the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type:</p>
+<p>In the above example, the object created by each function has the <code>Evas_Object*</code> type:</p>
<ol>
-<li>The objects created by the Elementary APIs are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type, whether they are a window or a button. Remember that Elementary is a wrapper of EFL, including Evas for user convenience.</li>
-<li>The objects created by Evas APIs are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type, whether they are a rectangle or an image.</li>
+<li>The objects created by the Elementary APIs are of the <code>Evas_Object*</code> type, whether they are a window or a button. Remember that Elementary is a wrapper of EFL, including Evas for user convenience.</li>
+<li>The objects created by Evas APIs are of the <code>Evas_Object*</code> type, whether they are a rectangle or an image.</li>
</ol>
<p>Although Evas treats its objects equally, they have types which define their specific behavior and individual API.</p>
<h2 id="visibility">Object Visibility</h2>
-<p>All graphical objects in EFL (which are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> type) are hidden by default. This avoids unwanted events, such as mouse in, move, and out events due to objects being created underneath the current pointer position. It is more efficient, as you can show the object after you have finished defining its state. To show an object, you need to call the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function explicitly.</p>
+<p>All graphical objects in EFL (which are of the <code>Evas_Object</code> type) are hidden by default. This avoids unwanted events, such as mouse in, move, and out events due to objects being created underneath the current pointer position. It is more efficient, as you can show the object after you have finished defining its state. To show an object, you need to call the <code>evas_object_show()</code> function explicitly.</p>
<p>The following code snippet shows the process of displaying an object:</p>
<ul>
<li>Evas treats its objects equally, so it offers a function set that applies to any Evas object, whichever type that may have. These functions manipulate generic Evas objects:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_show()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_del()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span></li>
+<li><code>evas_object_show()</code></li>
+<li><code>evas_object_hide()</code></li>
+<li><code>evas_object_del()</code></li>
+<li><code>evas_object_geometry_get()</code></li>
</ul>
<p>For more information, see the Generic Object Functions API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Group.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Group.html">wearable</a> applications).</p>
</li>
-<li>Some function usage is limited to a certain object type. The following functions can only be used for the objects generated by the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function:
+<li>Some function usage is limited to a certain object type. The following functions can only be used for the objects generated by the <code>evas_object_image_add()</code> function:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_image_size_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span></li>
+<li><code>evas_object_image_file_set()</code></li>
+<li><code>evas_object_image_size_get()</code></li>
+<li><code>evas_object_image_preload()</code></li>
</ul>
<p>For more information, see the Specific Object Functions API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Specific.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Specific.html">wearable</a> applications).</p>
</li>
<p>The Elementary UI components inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span></li>
+<li><code>elm_object_part_content_set()</code></li>
+<li><code>elm_object_part_content_get()</code></li>
+<li><code>elm_object_part_content_unset()</code></li>
</ul>
<p>For more information, see the General API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__General.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__General.html">wearable</a> applications).</p>
</li>
-<li>A single UI component has its individual API as well. The following functions can only be used for the objects generated by <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function:
+<li>A single UI component has its individual API as well. The following functions can only be used for the objects generated by <code>elm_entry_add()</code> function:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_entry_file_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_entry_bounce_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_entry_utf8_to_markup()</span></li>
+<li><code>elm_entry_file_set()</code></li>
+<li><code>elm_entry_bounce_set()</code></li>
+<li><code>elm_entry_utf8_to_markup()</code></li>
</ul>
<p>For more information, see the Elementary Widgets API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__elm__widget__group.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__elm__widget__group.html">wearable</a> applications).</p>
</li>
-<li>In case of the elm_scroller, it is a UI component and an implementation of a scrollable interface at the same time. The following functions can be used for all UI components, which implement a scrollable interface, such as <span style="font-family: Courier New,Courier,monospace">elm_entry</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>:
+<li>In case of the elm_scroller, it is a UI component and an implementation of a scrollable interface at the same time. The following functions can be used for all UI components, which implement a scrollable interface, such as <code>elm_entry</code> and <code>elm_genlist</code>:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_scroller_region_show()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_scroller_region_bring_in()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_scroller_gravity_set()</span></li>
+<li><code>elm_scroller_region_show()</code></li>
+<li><code>elm_scroller_region_bring_in()</code></li>
+<li><code>elm_scroller_gravity_set()</code></li>
</ul>
<p>For more information, see the Scroller API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Scroller.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Scroller.html">wearable</a> applications).</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control the resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.</p>
<p>The image sets can have the following properties:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">image: image-name</span>
+<ul><li><code>image: image-name</code>
<p>Specifies the name of the image file.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">size: minw minh maxw maxh</span>
+<li><code>size: minw minh maxw maxh</code>
<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown. </p></li></ul>
+ <p align="center" class="Table"><strong>Table: Image set implementation</strong></p>
<table>
- <caption>
- Table: Image set implementation
- </caption>
<tbody>
<tr>
<th>Example code</th>
<p>Use the rotary event handler when you do not want to take care of an Evas object, or when the application is not implemented using an Evas object.</p>
<p>The handler is implemented like the <a href="event_types_n.htm#ecore">Ecore event</a> in EFL:</p>
-<ol><li>Register the handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_add()</span> function and define the handler function.</li>
-<li>When no longer needed, remove the handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_del()</span> function.</li></ol>
-<p>The rotary event handlers are treated "first come first served". This means that the first registered handler is called first when a rotary event occurs. If that handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next handler is called. The loop continues until a handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> or all handlers have been called.</p>
+<ol><li>Register the handler with the <code>eext_rotary_event_handler_add()</code> function and define the handler function.</li>
+<li>When no longer needed, remove the handler with the <code>eext_rotary_event_handler_del()</code> function.</li></ol>
+<p>The rotary event handlers are treated "first come first served". This means that the first registered handler is called first when a rotary event occurs. If that handler returns <code>EINA_TRUE</code>, the next handler is called. The loop continues until a handler returns <code>EINA_FALSE</code> or all handlers have been called.</p>
<p>The callback is implemented as follows:</p>
-<ol><li>Register the callback with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function and define the callback.</li>
-<li>When no longer needed, remove the callback with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_del()</span> function.</li></ol>
+<ol><li>Register the callback with the <code>eext_rotary_object_event_callback_add()</code> function and define the callback.</li>
+<li>When no longer needed, remove the callback with the <code>eext_rotary_object_event_callback_del()</code> function.</li></ol>
-<p>The callbacks are treated based on the callback priority. If you register multiple callbacks for the same object, the callback with the lowest priority number is called first. If that callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next higher priority number is called. The loop continues until a callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> or all callbacks have been called.</p>
+<p>The callbacks are treated based on the callback priority. If you register multiple callbacks for the same object, the callback with the lowest priority number is called first. If that callback returns <code>EINA_TRUE</code>, the next higher priority number is called. The loop continues until a callback returns <code>EINA_FALSE</code> or all callbacks have been called.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function registers the rotary event callback with a default priority number (0). To use another priority, define it with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_priority_add()</span> function.</p>
+<p>The <code>eext_rotary_object_event_callback_add()</code> function registers the rotary event callback with a default priority number (0). To use another priority, define it with the <code>eext_rotary_object_event_callback_priority_add()</code> function.</p>
<h3>Activated Objects</h3>
-<p>The rotary event is delivered to a specific object called <strong>activated object</strong>. If no activated object exists, the event is not delivered anywhere. To set an object as the activated object (and automatically deactivate any previously activated object), use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_activated_set()</span> function with the second parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>. The <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> parameter value deactivates the object.</p>
+<p>The rotary event is delivered to a specific object called <strong>activated object</strong>. If no activated object exists, the event is not delivered anywhere. To set an object as the activated object (and automatically deactivate any previously activated object), use the <code>eext_rotary_object_event_activated_set()</code> function with the second parameter set to <code>EINA_TRUE</code>. The <code>EINA_FALSE</code> parameter value deactivates the object.</p>
-<p>If the activated object has registered callbacks that all return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the rotary event is also delivered to the upper parents of the activated object, until a callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> or the top parent object is reached.</p>
+<p>If the activated object has registered callbacks that all return <code>EINA_TRUE</code>, the rotary event is also delivered to the upper parents of the activated object, until a callback returns <code>EINA_FALSE</code> or the top parent object is reached.</p>
-<p>When an object is activated or deactivated, a <span style="font-family: Courier New,Courier,monospace;">rotary,activated</span> or <span style="font-family: Courier New,Courier,monospace;">rotary,deactivated</span> signal is sent. You can <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">register callbacks for the signals</a> with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.</p>
+<p>When an object is activated or deactivated, a <code>rotary,activated</code> or <code>rotary,deactivated</code> signal is sent. You can <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">register callbacks for the signals</a> with the <code>evas_object_smart_callback_add()</code> function.</p>
<h2 id="rotary">Managing Rotary Events</h2>
/* 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);
<li>Set the slider as the activated object, and define the slider step.
<p>The slider step defines how much a rotary event increases or decreases the slider value.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Since the EFL Extension API is used to create the slider component, the rotary event callbacks are registered internally and automatically change the slider value based on the slider step. To receive a rotary event for an EFL Extension object, you only need to set the object as activated.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Since the EFL Extension API is used to create the slider component, the rotary event callbacks are registered internally and automatically change the slider value based on the slider step. To receive a rotary event for an EFL Extension object, you only need to set the object as activated.
+</div>
<pre class="prettyprint">
/* Set the slider as activated */
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
-<p class="figure">Figure: Relative position</p>
+<p align="center"><strong>Figure: Relative position</strong></p>
<p align="center"> <img alt="Relative position" src="../../../images/scale_relative.png" /> </p>
<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
-<p class="figure">Figure: Fixed position</p>
+<p align="center"><strong>Figure: Fixed position</strong></p>
<p align="center"> <img alt="Fixed position" src="../../../images/scale_fixed.png" /> </p> </li>
<li>Use the relative position
<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
-<p class="figure">Figure: Scaling relative position</p>
+<p align="center"><strong>Figure: Scaling relative position</strong></p>
<p align="center"> <img alt="Scaling relative position" src="../../../images/scale_relative_scaled.png" /> </p> </li>
<li>If you use the fixed size, make the object scalable
-<p>If you use the EDC file to set up the layout, you can set the object scalable in the <span style="font-family: Courier New,Courier,monospace">part</span> block:</p>
+<p>If you use the EDC file to set up the layout, you can set the object scalable in the <code>part</code> block:</p>
<pre class="prettyprint">
parts
{
}
</pre>
-<p>If you set the fixed size in the C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro to ensure that the object size reacts to scale changes:</p>
+<p>If you set the fixed size in the C code, you can use the <code>ELM_SCALE_SIZE</code> macro to ensure that the object size reacts to scale changes:</p>
<pre class="prettyprint">
evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
</pre>
<li>Do not fill the width or height out with a fixed size only
<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
-<p class="figure">Figure: Height filled with a fixed size</p>
+<p align="center"><strong>Figure: Height filled with a fixed size</strong></p>
<p align="center"> <img alt="Height filled with a fixed size" src="../../../images/scale_fixed_height.png" /> </p>
<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p>
-<p class="figure">Figure: Height with a flexible area</p>
+<p align="center"><strong>Figure: Height with a flexible area</strong></p>
<p align="center"> <img alt="Height with a flexible area" src="../../../images/scale_flexible_height.png" /> </p> </li></ul>
<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use the Elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using Elementary UI components, make sure you understand some core concepts, such as how to create effective layouts with containers, and how to use weight and align properties.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Elementary library provides 3 groups of APIs:
- <ul><li>Infrastructure: Control of the behavior of Elementary objects.</li>
- <li>Container: UI component that can contain other UI components.</li>
- <li>UI component: Elementary UI component, such as button, list, or check or radio box.</li></ul></td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The Elementary library provides 3 groups of APIs:
+<ul><li>Infrastructure: Control of the behavior of Elementary objects.</li>
+<li>Container: UI component that can contain other UI components.</li>
+<li>UI component: Elementary UI component, such as button, list, or check or radio box.</li></ul>
+</div>
<h3>Using Containers for Effective Layouts</h3>
<ul><li>A vertical box calculates its height as the sum of its children's height and its width as the width of the widest child.</li>
<li>A horizontal box calculates its width as the sum of its children's width and its height as the height of the tallest child.</li></ul>
-<p class="figure">Figure: Box layout</p>
+<p align="center"><strong>Figure: Box layout</strong></p>
<p align="center"> <img alt="Box layout" src="../../../images/scale_box.png" /> </p>
<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then pack the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
-<p class="figure">Figure: Grid layout</p>
+<p align="center"><strong>Figure: Grid layout</strong></p>
<p align="center"> <img alt="Grid layout" src="../../../images/scale_grid.png" /> </p>
<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
<h4>Weight</h4>
-<p>You can set the horizontal and vertical weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function:</p>
+<p>You can set the horizontal and vertical weight property with the <code>evas_object_size_hint_weight_set()</code> function:</p>
<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
<li>The parameter values can be 0 or positive values (default: 0.0).
<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
-<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
+<p>1.0 (<code>EVAS_HINT_EXPAND</code>) means that the container allocates all of the remaining area to the UI component.</p></li>
<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
<p>The following figures shows how the different weight hints (horizontal, vertical) of a UI component affect the size allocated to it in a container.</p>
-<p class="figure">Figure: Weight hint with 1 child UI component</p>
+<p align="center"><strong>Figure: Weight hint with 1 child UI component</strong></p>
<p align="center"> <img alt="Weight hint" src="../../../images/scale_weight_hint.png" /> </p>
-<p class="figure">Figure: Weight hint across multiple child UI components</p>
+<p align="center"><strong>Figure: Weight hint across multiple child UI components</strong></p>
<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../../images/scale_weight_hint_multiple.png" /> </p>
<h4>Align</h4>
-<p>You can set the horizontal and vertical align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span> function:</p>
+<p>You can set the horizontal and vertical align property with the <code>evas_object_size_hint_align_set()</code> function:</p>
<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
<li>Bottom: (y=1.0)</li>
<li>Center: (x=0.5, y=0.5)</li>
</ul>
-<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
+<p>-1.0 (<code>EVAS_HINT_FILL</code>) means that the UI component fills all of the allocated area.</p></li></ul>
-<p class="figure">Figure: Alignment hint</p>
+<p align="center"><strong>Figure: Alignment hint</strong></p>
<p align="center"> <img alt="Alignment hint" src="../../../images/scale_align_hint.png" /> </p>
<h2 id="edje" name="edje">Scalability Using the EDC File</h2>
<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the application layout, look, and feel.</p>
-<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an EDC file. The file can be manually produced with the <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> tool by taking a text file (<span style="font-family: Courier New,Courier,monospace">.edc</span> file) and "compiling" an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data. The Tizen Studio complies the EDJ file from the EDC file automatically when you build the application.</p>
+<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an EDC file. The file can be manually produced with the <code>Edje_cc</code> tool by taking a text file (<code>.edc</code> file) and "compiling" an output <code>.edj</code> file that contains the state graph information, images, and any other needed data. The Tizen Studio complies the EDJ file from the EDC file automatically when you build the application.</p>
<p>While creating the EDC file, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with various scalability properties and part types described in the following sections.</p>
<h3>Part</h3>
<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
<p>The part blocks in the EDC file can have the following property related to scalability:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
+<ul><li><code>scale</code>: 0-1
<p>Specifies whether the part scales its size according to the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale object properties, such as font size or min/max size of the part.</p>
<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
</li></ul>
<p>Every part can have 1 or more description blocks to define the layout properties of the part.</p>
<p>The description blocks in the EDC file can have the following properties related to scalability:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
+<ul><li><code>min</code>/<code>max</code>: width height
<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+<p>When the <code>scale</code> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
-<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
+<li><code>fixed</code>: 0-1 0-1
+<p>When the <code>min</code> or <code>max</code> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
+<p>The default value is <code>0 0</code>. To fix a part size to its min or max, set the value to 1.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
+<li><code>align</code>: X-axis Y-axis
<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
+<p>The default value is <code>0.5 0.5</code>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
+<li><code>rel1</code>/<code>rel2</code>
<p>Specifies the position of the left-top and bottom-right corners of the part's container.</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
+<ul><li><code>relative</code>: X-axis Y-axis
<p>Specifies the relative position of the part's container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
+<p>The default value is <code>0.0 0.0</code> for <code>rel1.relative</code> and <code>1.0 1.0</code> for <code>rel2.relative</code>.</p></li>
+<li><code>to</code>/<code>to_x</code>/<code>to_y</code>
<p>Specifies that a corner must be positioned relatively to another part's container.</p>
<p>By default, the corners of a part are placed to cover whole interface.</p></li></ul>
+<p align="center" class="Table"><strong>Table: Example of the EDC file part block and its properties</strong></p>
<table>
-<caption>Table: Example of the EDC file part block and its properties</caption>
<tbody>
<tr>
<th align="center">Example code</th>
</tbody></table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
-<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
+<li><code>aspect</code>: min max
+<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <code>min</code> and <code>max</code> properties when resized.</p>
+<p>The default value is <code>0.0 0.0</code>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
-<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
-<p>The possible values are <span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
+<li><code>aspect_preference</code>: dimension
+<p>Specifies the scope of the <code>aspect</code> property to a given dimension.</p>
+<p>The possible values are <code>BOTH</code>, <code>VERTICAL</code>, <code>HORIZONTAL</code>, and <code>NONE</code>. The default is <code>NONE</code>.</p>
+<p align="center" class="Table"><strong>Table: Example of the EDC file aspect property</strong></p>
<table>
-<caption>Table: Example of the EDC file aspect property</caption>
<tbody>
<tr>
<th align="center">Example code</th>
<p>The text elements are used to display text on the screen.</p>
<p>The text blocks in the EDC file can have the following properties related to scalability:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
-<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+<ul><li><code>size</code>: font-size
+<p>Specifies the font size for the text. When the <code>scale</code> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
+<li><code>min</code>: horizontal vertical
<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
+<p>When <code>min</code> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
+<p>The default value is <code>0 0</code>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
+<li><code>max</code>: horizontal vertical
<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+<p>When <code>max</code> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
+<p>The default value is <code>0 0</code>.</p>
+<p align="center" class="Table"><strong>Table: Example of the EDC file text block and its properties</strong></p>
<table>
-<caption>Table: Example of the EDC file text block and its properties</caption>
<tbody>
<tr>
<th align="center">Example code</th>
</tbody></table>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
+<li><code>fit</code>: horizontal vertical
<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally or vertically.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+<p>The default value is <code>0 0</code>.</p>
+<p align="center" class="Table"><strong>Table: Example of the EDC file fit property</strong></p>
<table>
-<caption>Table: Example of the EDC file fit property</caption>
<tbody>
<tr>
<th align="center">Example code</th>
<p>The image elements are used to display images on the screen.</p>
<p>The image blocks in the EDC file can have the following properties related to scalability:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
+<ul><li><code>border</code>: left right top bottom
<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
+<li><code>border_scale</code>
<p>Specifies whether the border scales its size according to the scaling factor.</p>
<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
+<p align="center" class="Table"><strong>Table: Example of the EDC file image block and its properties</strong></p>
<table>
-<caption>Table: Example of the EDC file image block and its properties</caption>
<tbody>
<tr>
<th align="center">Example code</th>
<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.</p>
<p>The images.set blocks in the EDC file can have the following properties related to scalability:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">image</span>: image-name
+<ul><li><code>image</code>: image-name
<p>Specifies the name of the image file.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
+<li><code>size</code>: minw minh maxw maxh
<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
+<p align="center" class="Table"><strong>Table: Example of the EDC file images.set block and its properties</strong></p>
<table>
-<caption>Table: Example of the EDC file images.set block and its properties</caption>
<tbody>
<tr>
<th align="center">Example code</th>
<ul><li>Fixed parts
<ul><li>Fixed parts have a minimum size (at least width or height).</li>
-<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
+<li>When the part <code>scale</code> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
<li>Flexible parts
<ul><li>Flexible parts resize according to the container size and other fixed parts' size.</li>
<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
-<p class="figure">Figure: Fixed and flexible parts</p>
+<p align="center"><strong>Figure: Fixed and flexible parts</strong></p>
<p align="center"> <img alt="Fixed and flexible parts" src="../../../images/scale_fixed_flexible.png" /> </p>
<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figure, when scaling properties are applied. in the table, the red dashed rectangle illustrates the container size.</p>
-<p class="figure">Figure: Original image [1920x1280 (8:5)]</p>
+<p align="center"><strong>Figure: Original image [1920x1280 (8:5)]</strong></p>
<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../../images/scale_original_image.png" /> </p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> property in the EDC file.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ To set the required aspect ratio, use the <code>evas_object_size_hint_aspect_set()</code> function or the <code>aspect_preference</code> property in the EDC file.
+</div>
+<p align="center" class="Table"><strong>Table: Image resizing effects with a specific aspect ratio</strong></p>
<table>
-<caption>Table: Image resizing effects with a specific aspect ratio</caption>
<col width="40%" />
<tbody>
<tr>
<h3>Setting the Image Aspect Ratio</h3>
<p>In case of an image object, you can set its aspect ratio with additional functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
-<p>If the second function parameter is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
+<ul><li><code>elm_image_fill_outside_set()</code>
+<p>If the second function parameter is set to <code>TRUE</code>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
+<li><code>elm_image_aspect_fixed_set()</code>
-<p>If the second function parameter is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
+<p>If the second function parameter is set to <code>FALSE</code>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
<p>The following table shows how, to fit in, the image in the 720x384 container area is flattened vertically while the image in the 720x640 container area is flattened horizontally.</p>
+<p align="center" class="Table"><strong>Table: Image resizing without keeping the aspect ratio</strong></p>
<table>
-<caption>Table: Image resizing without keeping the aspect ratio</caption>
<tbody>
<tr>
<th colspan="2">Container area</th>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
<p>While threads can be useful, they are not always the best choice:</p>
-<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
+<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <code>Ecore_Con</code> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
<p>Thread pools solve this problem. In thread pools, up to a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
-<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
+<p>In EFL, the thread pool is controlled by a <code>thread_max</code> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <code>func_end()</code> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
<p>To manage the maximum number of threads:</p>
<ul>
-<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
+<li>To retrieve the current value, use the <code>ecore_thread_max_get()</code> function.
</li>
-<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
+<li>To set the value, use the <code>ecore_thread_max_set()</code> function. The value has a maximum of 16 times the CPU count.
</li>
-<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
+<li>To reset the maximum number of threads, use the <code>ecore_thread_max_reset()</code> function.
</li>
-<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
+<li>To get the number of available threads in the pool, use the <code>ecore_thread_available_get()</code> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
</li>
</ul>
-<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
+<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The <code>thread_max</code> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <code>func_end()</code> callback currently called.</p>
-<p class="figure">Figure: Thread pool, step 1</p>
+<p align="center"><strong>Figure: Thread pool, step 1</strong></p>
<p align="center"><img alt="Thread pool, step 1" src="../../../images/thread_pool_lifecycle_1.png" /></p>
-<p>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
+<p>When a task, applying the sepia filter on image1, finishes, the corresponding <code>func_end()</code> function is invoked from the main loop.</p>
-<p class="figure">Figure: Thread pool, step 2</p>
+<p align="center"><strong>Figure: Thread pool, step 2</strong></p>
<p align="center"><img alt="Thread pool, step 2" src="../../../images/thread_pool_lifecycle_2.png" /></p>
<p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
-<p class="figure">Figure: Thread pool, step 3</p>
+<p align="center"><strong>Figure: Thread pool, step 3</strong></p>
<p align="center"><img alt="Thread pool, step 3" src="../../../images/thread_pool_lifecycle_3.png" /></p>
<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
<ul><li>To return values to the main thread:
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
+<p>Use the <code>ecore_thread_feedback_run()</code> function to send intermediate feedback from the thread to the main loop.</p></li>
<li>To return only the final value to the main thread:
-<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
+<p>To create and run a thread, use the <code>ecore_thread_run()</code> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <code>NULL</code> on failure.</p>
-<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
+<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <code>func_cancel()</code> or <code>func_end()</code> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
-<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
+<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <code>func_end()</code> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <code>Eina_List</code>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
<h3>Running Callbacks from the Main Loop</h3>
-<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
+<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <code>ecore_main_loop_thread_safe_call_async()</code> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
<p>Depending on the kind of thread the function is called from, the process differs:</p>
<ul>
<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
</ul>
-<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
+<p>If you want to wait until the callback is called and returns, use the <code>ecore_main_loop_thread_safe_call_sync()</code> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
<h2 id="low_level" name="low_level">Low-level Functions</h2>
<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
+<p align="center" class="Table"><strong>Table: Locks (mutual exclusions)</strong></p>
<table>
-<caption>Table: Locks (mutual exclusions)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td>
+<td><code>pthread_mutex_new()</code></td>
+<td><code>eina_lock_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td>
+<td><code>pthread_mutex_destroy()</code></td>
+<td><code>eina_lock_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td>
+<td><code>pthread_mutex_lock()</code></td>
+<td><code>eina_lock_take()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td>
+<td><code>pthread_mutex_trylock()</code></td>
+<td><code>eina_lock_take_try()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td>
+<td><code>pthread_mutex_unlock()</code></td>
+<td><code>eina_lock_release()</code></td>
</tr>
<tr>
<td>none (prints debug information on the lock)</td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td>
+<td><code>eina_lock_debug()</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Conditions (notifications when condition objects change)</strong></p>
<table>
-<caption>Table: Conditions (notifications when condition objects change)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td>
+<td><code>pthread_cond_init()</code></td>
+<td><code>eina_condition_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td>
+<td><code>pthread_cond_destroy()</code></td>
+<td><code>eina_condition_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td>
+<td><code>pthread_cond_wait()</code></td>
+<td><code>eina_condition_wait()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td>
+<td><code>pthread_cond_timedwait()</code></td>
+<td><code>eina_condition_timedwait()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td>
+<td><code>pthread_cond_broadcast()</code></td>
+<td><code>eina_condition_broadcast()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td>
+<td><code>pthread_cond_signal()</code></td>
+<td><code>eina_condition_signal()</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</strong></p>
<table>
-<caption>Table: RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_new()</span></td>
+<td><code>pthread_rwlock_init()</code></td>
+<td><code>
+eina_rwlock_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td>
+<td><code>pthread_rwlock_destroy()</code></td>
+<td><code>eina_rwlock_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_read()</span></td>
+<td><code>pthread_rwlock_rwlock_rdlock()</code></td>
+<td><code>
+eina_rwlock_take_read()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_write()</span></td>
+<td><code>pthread_rwlock_rwlock_wrlock()</code></td>
+<td><code>
+eina_rwlock_take_write()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_release()</span></td>
+<td><code>pthread_rwlock_unlock()</code></td>
+<td><code>
+eina_rwlock_release()</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: TLS (Thread-Local Storage)</strong></p>
<table>
-<caption>Table: TLS (Thread-Local Storage)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td>
+<td><code>pthread_key_create()</code></td>
+<td><code>eina_tls_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td>
+<td><code>pthread_key_delete()</code></td>
+<td><code>eina_tls_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td>
+<td><code>pthread_getspecific()</code></td>
+<td><code>eina_tls_get()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td>
+<td><code>pthread_setspecific</code></td>
+<td><code>eina_tls_set()</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Semaphores (access restrictions for a set of resources)</strong></p>
<table>
-<caption>Table: Semaphores (access restrictions for a set of resources)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td>
+<td><code>sem_init()</code></td>
+<td><code>eina_semaphore_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td>
+<td><code>sem_destroy()</code></td>
+<td><code>eina_semaphore_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td>
+<td><code>sem_wait()</code></td>
+<td><code>eina_semaphore_lock()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td>
+<td><code>sem_post()</code></td>
+<td><code>eina_semaphore_release()</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Barriers</strong></p>
<table>
-<caption>Table: Barriers</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
<th>Eina equivalent</th>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td>
+<td><code>pthread_barrier_init()</code></td>
+<td><code>eina_barrier_new()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td>
+<td><code>pthread_barrier_destroy()</code></td>
+<td><code>eina_barrier_free()</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td>
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td>
+<td><code>pthread_barrier_wait()</code></td>
+<td><code>eina_barrier_wait()</code></td>
</tr>
</tbody>
</table>
<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
+<p>To use the <code>ecore_thread_feedback()</code> function:</p>
<ol>
}
</pre>
</li>
-<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
+<li>Send the feedback from the other thread using the <code>ecore_thread_feedback()</code> function. The following function does nothing besides sending the feedback and sleeping.
<pre class="prettyprint">
static void
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
+<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>
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
+<p>To use the <code>ecore_main_loop_thread_safe_call_sync()</code> function:</p>
<ol>
<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays "Tick d" or "Tock d".
{
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;
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
+<li>Use the <code>ecore_main_loop_thread_safe_call_sync()</code> function call the GUI function. Differentiate between the ticks and the tocks:
<pre class="prettyprint">
static void
</pre>
</li>
-<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
+<li>Start the thread through the <code>ecore_thread_run()</code> function:
<pre class="prettyprint">
ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li>Log: Full-featured logging system</li>
<li>Magic: Provides runtime type checking</li>
<li><a href="#memory">Memory Pool</a>: Abstraction for various memory allocators</li>
-<li>Module lists: Loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>
+<li>Module lists: Loads and shares modules using the <code>Eina_Module</code> standard</li>
<li>Rectangle: Rectangle structure and standard manipulation methods</li>
<li><a href="#safety">Safety Checks</a>: Extra checks that report unexpected conditions and can be disabled during compilation</li>
<li><a href="#string">String</a>: Set of functions that manage C strings</li>
<p>When creating applications, you always need to manipulate strings. Use the following Eina functions for manipulating C strings:</p>
-<ul><li>To split a string into an array of strings based on a delimiter that determines where the string is split, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.
+<ul><li>To split a string into an array of strings based on a delimiter that determines where the string is split, use the <code>eina_str_split()</code> function.
-<p>The split is the most common string manipulation method. For example, if you have the <span style="font-family: Courier New,Courier,monospace;">"Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master"</span> string, and you want to print it in an easily readable format, you can split it using the ":" character as a delimiter.</p>
+<p>The split is the most common string manipulation method. For example, if you have the <code>"Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master"</code> string, and you want to print it in an easily readable format, you can split it using the ":" character as a delimiter.</p>
-<p>In the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function, the first parameter is the string to split, the second is the delimiter, and the third is the maximum number of strings to split the string into. If you set the third parameter to be smaller than 1, the function splits the string as many times as possible.</p>
-<p>The function returns a newly-allocated <span style="font-family: Courier New,Courier,monospace;">NULL</span>-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. When no longer needed, free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>
+<p>In the <code>eina_str_split()</code> function, the first parameter is the string to split, the second is the delimiter, and the third is the maximum number of strings to split the string into. If you set the third parameter to be smaller than 1, the function splits the string as many times as possible.</p>
+<p>The function returns a newly-allocated <code>NULL</code>-terminated array of strings, or <code>NULL</code>, if it fails to allocate the array. When no longer needed, free the memory allocated by the <code>eina_str_split()</code> function.</p>
<pre class="prettyprint">
char *nicks = "Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master";
</pre></li>
-<li>To change a string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They modify the original string by changing the case for all characters in the string.
+<li>To change a string to lowercase or uppercase, use the <code>eina_str_tolower()</code> and <code>eina_str_toupper()</code> functions. They modify the original string by changing the case for all characters in the string.
<pre class="prettyprint">
char *str;
/* Free the memory */
free(str);
</pre></li>
-<li>To join 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The first parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.
+<li>To join 2 strings of known length, use the <code>eina_str_join()</code> function. The first parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.
<pre class="prettyprint">
char *part1 = "Tizen powered by";
/* Free the memory */
free(res);
</pre></li>
-<li>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.
+<li>To check whether a string starts or ends with another string, use the <code>eina_str_has_prefix()</code> or <code>eina_str_has_suffix()</code> function. You can also check whether a string has a particular extension with the <code>eina_str_has_extension()</code> function.
-<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if it does not.</p>
+<p>These functions return <code>EINA_TRUE</code> if the string contains the specified prefix, suffix, or extension, and <code>EINA_FALSE</code> if it does not.</p>
<pre class="prettyprint">
char *names = "Carsten;Cedric;Tom;Chidambar;Boris;Philippe";
<h2 id="memory" name="memory">Memory Pool</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides the memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
+<p>The <code>Eina_Mempool</code> tool provides the memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
<p>The following memory pools are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed</span> and <span style="font-family: Courier New,Courier,monospace;">ememoa_unknown</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>
+<li><code>buddy</code></li>
+<li><code>chained_pool</code></li>
+<li><code>ememoa_fixed</code> and <code>ememoa_unknown</code></li>
+<li><code>fixed_bitmap</code></li>
+<li><code>pass_through</code></li>
+<li><code>one_big</code></li>
</ul>
<h2 id="safety" name="safety">Safety Checks</h2>
-<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks simply log the parameter or value and return, instead of aborting your program.</p>
+<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <code>assert()</code> function, but safety checks simply log the parameter or value and return, instead of aborting your program.</p>
<p>The following safety checks are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>
+<li><code>EINA_SAFETY_ON_NULL_RETURN(exp)</code></li>
+<li><code>EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</code></li>
+<li><code>EINA_SAFETY_ON_NULL_GOTO(exp, label)</code></li>
+<li><code>EINA_SAFETY_ON_TRUE_RETURN(exp)</code></li>
+<li><code>EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</code></li>
+<li><code>EINA_SAFETY_ON_TRUE_GOTO(exp, label)</code></li>
+<li><code>EINA_SAFETY_ON_FALSE_RETURN(exp)</code></li>
+<li><code>EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</code></li>
+<li><code>EINA_SAFETY_ON_FALSE_GOTO(exp, label)</code></li>
+<li><code>EINA_ARG_NONNULL(...)</code></li>
</ul>
<p>The following examples show how to use the safety checks:</p>
<ul>
-<li>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls <span style="font-family: Courier New,Courier,monospace;">return</span> if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.
+<li>To return if a variable is <code>NULL</code>, use the <code>EINA_SAFETY_ON_NULL_RETURN()</code> function. This macro calls <code>return</code> if the given parameter is <code>NULL</code>.
<pre class="prettyprint">
Eina_Bool
}
</pre>
</li>
-<li>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns a given value if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.
+<li>To return a specific value, use the <code>EINA_SAFETY_ON_NULL_RETURN_VAL()</code> function instead of the <code>EINA_SAFETY_ON_NULL_RETURN()</code> function. This macro returns a given value if the given parameter is <code>NULL</code>.
<pre class="prettyprint">
Eina_Bool void
}
</pre>
</li>
-<li>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function, except that it calls <span style="font-family: Courier New,Courier,monospace;">goto</span> with the given function instead of <span style="font-family: Courier New,Courier,monospace;">return</span>.
+<li>To call another function if a parameter is <code>NULL</code>, use the <code>EINA_SAFETY_ON_NULL_GOTO()</code> function. This macro works similarly to the <code>EINA_SAFETY_ON_NULL_RETURN()</code> function, except that it calls <code>goto</code> with the given function instead of <code>return</code>.
<pre class="prettyprint">
static void
</li>
</ul>
-<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example:</p>
+<p>Eina also provides macros that check whether a given value is <code>TRUE</code> or <code>FALSE</code>. For example:</p>
<ul>
-<li>To call <span style="font-family: Courier New,Courier,monospace;">return</span> if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function.</li>
-<li>To call <span style="font-family: Courier New,Courier,monospace;">goto</span> in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function.</li>
+<li>To call <code>return</code> if a given value is <code>TRUE</code>, use the <code>EINA_SAFETY_ON_TRUE_RETURN()</code> function.</li>
+<li>To call <code>goto</code> in a given function if a given value is <code>TRUE</code>, use the <code>EINA_SAFETY_ON_NULL_GOTO()</code> function.</li>
</ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ol>
<li>
<p>Create a window for the application layout.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add()</span> function adds a rectangle for getting user input in the same Evas with a window object.</p>
+<p>The <code>evas_object_rectangle_add()</code> function adds a rectangle for getting user input in the same Evas with a window object.</p>
<pre class="prettyprint">
Evas_Object *win;
-Evas_Object *r; /* Gesture layer transparent object */
-Evas_Object *g; /* Gesture layer object */
+/* Gesture layer transparent object */
+Evas_Object *r;
+/* 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 */
</pre>
</li>
<li>
-<p>Create a new gesture layer with the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_add()</span> function.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> function attaches a given gesture layer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This object listens to all mouse and key events, and reports the gestures made upon it.</p>
+<p>Create a new gesture layer with the <code>elm_gesture_layer_add()</code> function.</p>
+<p>The <code>elm_gesture_layer_attach()</code> function attaches a given gesture layer to an <code>Evas_Object</code>. This object listens to all mouse and key events, and reports the gestures made upon it.</p>
<pre class="prettyprint">
/* Gesture layer object */
g = elm_gesture_layer_add(win);
<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>
-<li><p>The gesture layer uses the finger size to detect a double and triple tap. If you do not set a finger size, the gesture layer uses the default <span style="font-family: Courier New,Courier,monospace">elm_config</span> finger size defined in the system policy. In Tizen, it is 40.</p>
+<li><p>The gesture layer uses the finger size to detect a double and triple tap. If you do not set a finger size, the gesture layer uses the default <code>elm_config</code> finger size defined in the system policy. In Tizen, it is 40.</p>
<p>You can also define the tolerance for each tap.</p>
<pre class="prettyprint">
/* Get or set the gesture layer finger size for taps */
<ul>
<li>Single tap
<ol>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<li><p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS, ELM_GESTURE_STATE_START,
n_finger_tap_start, NULL);
</pre>
</li>
<li>
-<p>When a mouse down event occurs, the <span style="font-family: Courier New,Courier,monospace">n_finger_tap_start()</span> callback function is called:</p>
+<p>When a mouse down event occurs, the <code>n_finger_tap_start()</code> callback function is called:</p>
<pre class="prettyprint">
/* Start gesture callback */
static Evas_Event_Flags
return EVAS_EVENT_FLAG_ON_HOLD;
}
</pre>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EVAS_EVENT_FLAG_ON_HOLD</span>, if the component acted upon the event.</p>
+<p>The function returns <code>EVAS_EVENT_FLAG_ON_HOLD</code>, if the component acted upon the event.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> attribute contains the tap information in the <span style="font-family: Courier New,Courier,monospace">_Elm_Gesture_Taps_Info</span> data structure. If the number of fingers is bigger than 2, the <span style="font-family: Courier New,Courier,monospace">x</span> and <span style="font-family: Courier New,Courier,monospace">y</span> values get the average value of each <span style="font-family: Courier New,Courier,monospace">x</span> and <span style="font-family: Courier New,Courier,monospace">y</span> geometry values.</p>
+<p>The <code>event_info</code> attribute contains the tap information in the <code>_Elm_Gesture_Taps_Info</code> data structure. If the number of fingers is bigger than 2, the <code>x</code> and <code>y</code> values get the average value of each <code>x</code> and <code>y</code> geometry values.</p>
<pre class="prettyprint">
struct _Elm_Gesture_Taps_Info {
Evas_Coord x, y; /* Center point between fingers */
</pre>
</li>
<li>
-<p>When a mouse up event occurs, and the current tap gesture is in the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state, the <span style="font-family: Courier New,Courier,monospace">n_finger_tap_end()</span> callback function is called:</p>
+<p>When a mouse up event occurs, and the current tap gesture is in the <code>ELM_GESTURE_STATE_START</code> state, the <code>n_finger_tap_end()</code> callback function is called:</p>
<pre class="prettyprint">
static Evas_Event_Flags
n_finger_tap_end(void *data, void *event_info)
</pre>
</li>
<li>
-<p>When an unexpected event occurs after a mouse down event, the <span style="font-family: Courier New,Courier,monospace">n_finger_tap_abort()</span> callback function is called.</p>
+<p>When an unexpected event occurs after a mouse down event, the <code>n_finger_tap_abort()</code> callback function is called.</p>
<p>For example, if a move event occurs after a tap start callback function is called, or a down event occurs after a long-press event.</p>
<pre class="prettyprint">
static Evas_Event_Flags
<li>Double tap
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_START,
dbl_click_start, NULL);
dbl_click_abort, NULL);
</pre>
</li>
-<li><p>A double tap gesture is started by calling the <span style="font-family: Courier New,Courier,monospace">dbl_click_start()</span> callback function when a mouse down event occurs.</p>
+<li><p>A double tap gesture is started by calling the <code>dbl_click_start()</code> callback function when a mouse down event occurs.</p>
-<p>After a mouse down event occurs, a mouse up event has to occur within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> time limit.</p>
-<p>In this case, the <span style="font-family: Courier New,Courier,monospace">dbl_click_move()</span> callback function is called, which means a double tap gesture event is ongoing. Otherwise, the abort callback function is called.</p>
-<p>If the mouse up is not called within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> value, the touch event moves out of the area defined in the down event geometry.</p>
+<p>After a mouse down event occurs, a mouse up event has to occur within the <code>double_tap_timeout</code> time limit.</p>
+<p>In this case, the <code>dbl_click_move()</code> callback function is called, which means a double tap gesture event is ongoing. Otherwise, the abort callback function is called.</p>
+<p>If the mouse up is not called within the <code>double_tap_timeout</code> value, the touch event moves out of the area defined in the down event geometry.</p>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">dbl_click_end()</span> callback function is called when the same area is clicked 2 times within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> value (meaning that the <span style="font-family: Courier New,Courier,monospace">dbl_click_move()</span> callback function has been called 2 times).</p>
+<p>The <code>dbl_click_end()</code> callback function is called when the same area is clicked 2 times within the <code>double_tap_timeout</code> value (meaning that the <code>dbl_click_move()</code> callback function has been called 2 times).</p>
-<p>If any wrong gesture is detected during the double tap gesture detection, the <span style="font-family: Courier New,Courier,monospace">dbl_click_abort()</span> callback function is called.</p>
+<p>If any wrong gesture is detected during the double tap gesture detection, the <code>dbl_click_abort()</code> callback function is called.</p>
</li>
</ol>
</li>
<li>Triple tap
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_START,
triple_click_start, NULL);
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">triple_click_start()</span> callback function is called when a mouse down event occurs.</p>
+<p>The <code>triple_click_start()</code> callback function is called when a mouse down event occurs.</p>
-<p>After a mouse down occurs, a mouse up event has to occur within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> value. If so, the <span style="font-family: Courier New,Courier,monospace">triple_click_move()</span> callback function is called, which means a triple tap gesture event is ongoing. Otherwise, the abort callback is called.</p>
-<p>If the mouse up is not called within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> value, the touch event moves out of the area defined in the down event geometry.</p>
+<p>After a mouse down occurs, a mouse up event has to occur within the <code>double_tap_timeout</code> value. If so, the <code>triple_click_move()</code> callback function is called, which means a triple tap gesture event is ongoing. Otherwise, the abort callback is called.</p>
+<p>If the mouse up is not called within the <code>double_tap_timeout</code> value, the touch event moves out of the area defined in the down event geometry.</p>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">triple_click_end()</span> callback function is called if the same area is clicked 3 times within the <span style="font-family: Courier New,Courier,monospace">double_tap_timeout</span> value (meaning that the <span style="font-family: Courier New,Courier,monospace">triple_click_move()</span> callback function has been called 3 times: 1 tap start and move, 2 tap move and move, and 3 tap move and end).</p>
+<p>The <code>triple_click_end()</code> callback function is called if the same area is clicked 3 times within the <code>double_tap_timeout</code> value (meaning that the <code>triple_click_move()</code> callback function has been called 3 times: 1 tap start and move, 2 tap move and move, and 3 tap move and end).</p>
-<p>If any wrong gesture is detected during the triple tap gesture detection, the <span style="font-family: Courier New,Courier,monospace">triple_click_abort()</span> callback function is called.</p>
+<p>If any wrong gesture is detected during the triple tap gesture detection, the <code>triple_click_abort()</code> callback function is called.</p>
</li>
</ol>
</li>
<li>Long tap
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_START,
n_long_tap_start, NULL);
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">n_long_tap_start()</span> callback function is called when a mouse down event occurs.</p>
+<p>The <code>n_long_tap_start()</code> callback function is called when a mouse down event occurs.</p>
-<p>After a mouse down occurs, the mouse down state has to remain for a time defined in the <span style="font-family: Courier New,Courier,monospace">long_tap_timeout</span> value.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">n_long_tap_move()</span> callback function is called after the <span style="font-family: Courier New,Courier,monospace">long_tap_timeout</span> time. If the down gesture continues, the <span style="font-family: Courier New,Courier,monospace">n_long_tap_move()</span> callback function is called at the <span style="font-family: Courier New,Courier,monospace">long_tap_timeout</span> time value intervals, such as 0.5, 1.0, and 1.5.</p>
+<p>After a mouse down occurs, the mouse down state has to remain for a time defined in the <code>long_tap_timeout</code> value.</p>
+<p>The <code>n_long_tap_move()</code> callback function is called after the <code>long_tap_timeout</code> time. If the down gesture continues, the <code>n_long_tap_move()</code> callback function is called at the <code>long_tap_timeout</code> time value intervals, such as 0.5, 1.0, and 1.5.</p>
</li>
<li>
-<p>After the <span style="font-family: Courier New,Courier,monospace">n_long_tap_move()</span> callback function is called, if the mouse up event occurs in the same geometry with the down event, the <span style="font-family: Courier New,Courier,monospace">n_long_tap_end()</span> callback function is called.</p>
-<p>If any wrong gesture is detected during the long tap gesture detection, the <span style="font-family: Courier New,Courier,monospace">n_long_tap_abort()</span> callback function is called.</p>
+<p>After the <code>n_long_tap_move()</code> callback function is called, if the mouse up event occurs in the same geometry with the down event, the <code>n_long_tap_end()</code> callback function is called.</p>
+<p>If any wrong gesture is detected during the long tap gesture detection, the <code>n_long_tap_abort()</code> callback function is called.</p>
</li>
</ol>
</li>
<p>To implement a momentum gesture:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_START,
momentum_start, NULL);
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">momentum_start()</span> callback function is called when a mouse move event occurs after a mouse down event:</p>
+<p>The <code>momentum_start()</code> callback function is called when a mouse move event occurs after a mouse down event:</p>
<pre class="prettyprint">
static Evas_Event_Flags
momentum_start(void *data, void *event_info)
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> attribute contains the momentum information in the <span style="font-family: Courier New,Courier,monospace">Elm_Gesture_Momentum_Info</span> data structure:</p>
+<p>The <code>event_info</code> attribute contains the momentum information in the <code>Elm_Gesture_Momentum_Info</code> data structure:</p>
<pre class="prettyprint">
/* Report line ends, timestamps, and momentum computed */
struct _Elm_Gesture_Momentum_Info {
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">momentum_move()</span> callback function is called whenever mouse move events are detected:</p>
+<p>The <code>momentum_move()</code> callback function is called whenever mouse move events are detected:</p>
<pre class="prettyprint">
static Evas_Event_Flags
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;
</pre>
</li>
<li>
-<p>The mouse up event occurs after the mouse move events have been detected. The gesture layer checks the <span style="font-family: Courier New,Courier,monospace">mx</span> and <span style="font-family: Courier New,Courier,monospace">my</span> values internally. If <span style="font-family: Courier New,Courier,monospace">mx</span> and <span style="font-family: Courier New,Courier,monospace">my</span> have values, the <span style="font-family: Courier New,Courier,monospace">momentum_end()</span> callback function is called. Otherwise, <span style="font-family: Courier New,Courier,monospace">mx</span> and <span style="font-family: Courier New,Courier,monospace">my</span> have 0 values in the mouse up time, and the <span style="font-family: Courier New,Courier,monospace">momentum_abort()</span> callback function is called.</p>
+<p>The mouse up event occurs after the mouse move events have been detected. The gesture layer checks the <code>mx</code> and <code>my</code> values internally. If <code>mx</code> and <code>my</code> have values, the <code>momentum_end()</code> callback function is called. Otherwise, <code>mx</code> and <code>my</code> have 0 values in the mouse up time, and the <code>momentum_abort()</code> callback function is called.</p>
<pre class="prettyprint">
static Evas_Event_Flags
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>
<li>
-<p>Enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+<p>Enable the continue mode to allow the line, flick, zoom, and rotate gesture to restart. The default value is <code>TRUE</code>.</p>
<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>To create a line gesture:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_START,
line_start, NULL);
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">line_start()</span> callback function is called when a mouse move event occurs after a mouse down event:</p>
+<p>The <code>line_start()</code> callback function is called when a mouse move event occurs after a mouse down event:</p>
<pre class="prettyprint">
static Evas_Event_Flags
line_start(void *data, void *event_info)
return EVAS_EVENT_FLAG_ON_HOLD;
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> attribute contains the line information in the <span style="font-family: Courier New,Courier,monospace">Elm_Gesture_Line_Info</span> data structure:</p>
+<p>The <code>event_info</code> attribute contains the line information in the <code>Elm_Gesture_Line_Info</code> data structure:</p>
<pre class="prettyprint">
struct _Elm_Gesture_Line_Info {
Elm_Gesture_Momentum_Info momentum; /* Line momentum info */
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">line_move()</span> callback function is called on every mouse move event detected except when the line distance is outside the tolerance distance value.</p>
+<p>The <code>line_move()</code> callback function is called on every mouse move event detected except when the line distance is outside the tolerance distance value.</p>
<p>If the continue mode is enabled and the momentum value is 0, the callback is not called.</p>
<pre class="prettyprint">
static Evas_Event_Flags
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">line_end</span> callback function is called when a mouse up event occurs with a gesture that is longer than the line minimum length value. If the continue mode is enabled, the callback is called when the user stops drawing a line and the timing is started again. (Pause after the timing restart; either the end callback is called, or if the mouse up does not happen, the start callback is called again).</p>
+<p>The <code>line_end</code> callback function is called when a mouse up event occurs with a gesture that is longer than the line minimum length value. If the continue mode is enabled, the callback is called when the user stops drawing a line and the timing is started again. (Pause after the timing restart; either the end callback is called, or if the mouse up does not happen, the start callback is called again).</p>
<pre class="prettyprint">
static Evas_Event_Flags
line_end(void *data, void *event_info)
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">line_abort()</span> callback function is called when a mouse move event occurs and the geometry angle is outside the tolerance angle value and the line is shorter than the line minimum length value:</p>
+<p>The <code>line_abort()</code> callback function is called when a mouse move event occurs and the geometry angle is outside the tolerance angle value and the line is shorter than the line minimum length value:</p>
<pre class="prettyprint">
static Evas_Event_Flags
line_abort(void *data, void *event_info)
<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>
<p>To create a flick gesture:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_START,
flick_start, NULL);
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_ABORT,
flick_abort, NULL);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">flick_move()</span> callback function works the same way as the <span style="font-family: Courier New,Courier,monospace">line_move()</span> callback.</p>
+<p>The <code>flick_move()</code> callback function works the same way as the <code>line_move()</code> callback.</p>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">flick_start()</span> callback function is called when a mouse move event occurs after a mouse down event.</p>
-<p>After calling the <span style="font-family: Courier New,Courier,monospace">flick_start()</span> callback function, the gesture layer detects a line gesture on it. If so, it checks the flick time limit, and if the line event occurs within the limit, the <span style="font-family: Courier New,Courier,monospace">flick_end()</span> callback function is called. Otherwise, the <span style="font-family: Courier New,Courier,monospace">flick_abort()</span> callback function is called.</p>
+<p>The <code>flick_start()</code> callback function is called when a mouse move event occurs after a mouse down event.</p>
+<p>After calling the <code>flick_start()</code> callback function, the gesture layer detects a line gesture on it. If so, it checks the flick time limit, and if the line event occurs within the limit, the <code>flick_end()</code> callback function is called. Otherwise, the <code>flick_abort()</code> callback function is called.</p>
</li>
</ol>
<p>You can modify various zoom values, such as zoom step and distance tolerance.</p>
<p>The default values are defined in the system policy. In Tizen, they are:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">zoom_step</span>: 0.0</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom_finger_factor</span>: 1.0</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom_wheel_factor</span>: 0.05</li>
- <li><span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span>: 1.0</li>
+ <li><code>zoom_step</code>: 0.0</li>
+ <li><code>zoom_finger_factor</code>: 1.0</li>
+ <li><code>zoom_wheel_factor</code>: 0.05</li>
+ <li><code>zoom_distance_tolerance</code>: 1.0</li>
</ul>
<pre class="prettyprint">
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 */
<p>When using zoom gestures, pay attention to the following:</p>
<ul><li>
<p>The default zoom value is 1, when the zoom gesture starts. After every zoom gesture, the value is increased or decreased according to the internal calculation logic. The radius value is used for the calculation.</p></li>
-<li><p>If the mouse wheel events are sent with the <strong>Ctrl</strong> key on the gesture layer, the <span style="font-family: Courier New,Courier,monospace">zoom_start()</span> callback function is called with the default zoom value (1) and the zoom value (<span style="font-family: Courier New,Courier,monospace">zoom_finger_factor * zoom _wheel_factor</span>) is increased or decreased on every step to follow the wheel up or down.</p></li>
-<li><p>If a 2-finger down event points closer than the zoom distance tolerance value, the zoom gesture is not started. After the gap is bigger than the <span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span> value, the zoom gesture is started with the default value 1 and the event info gets a radius value and the gesture's momentum value.</p></li></ul>
+<li><p>If the mouse wheel events are sent with the <strong>Ctrl</strong> key on the gesture layer, the <code>zoom_start()</code> callback function is called with the default zoom value (1) and the zoom value (<code>zoom_finger_factor * zoom _wheel_factor</code>) is increased or decreased on every step to follow the wheel up or down.</p></li>
+<li><p>If a 2-finger down event points closer than the zoom distance tolerance value, the zoom gesture is not started. After the gap is bigger than the <code>zoom_distance_tolerance</code> value, the zoom gesture is started with the default value 1 and the event info gets a radius value and the gesture's momentum value.</p></li></ul>
<p>To create a zoom gesture:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_START,
zoom_start, NULL);
</pre>
</li>
<li>
-<p>When 2 mouse down events occur, the <span style="font-family: Courier New,Courier,monospace">zoom_start()</span> callback function is called with the zoom value (1), and the calculated radius and momentum for the current zoom gesture:</p>
+<p>When 2 mouse down events occur, the <code>zoom_start()</code> callback function is called with the zoom value (1), and the calculated radius and momentum for the current zoom gesture:</p>
<pre class="prettyprint">
static Evas_Event_Flags
zoom_start(void *data, void *event_info)
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> attribute contains the zoom information in the <span style="font-family: Courier New,Courier,monospace">Elm_Gesture_Zoom_Info</span> data structure:</p>
+<p>The <code>event_info</code> attribute contains the zoom information in the <code>Elm_Gesture_Zoom_Info</code> data structure:</p>
<pre class="prettyprint">
struct _Elm_Gesture_Zoom_Info {
Evas_Coord x, y; /* Zoom center point reported to the user */
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">zoom_move()</span> callback function is called when the user moves 2 mouse down events, except that the gap of each mouse down point is smaller than the <span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span> value.</p>
+<p>The <code>zoom_move()</code> callback function is called when the user moves 2 mouse down events, except that the gap of each mouse down point is smaller than the <code>zoom_distance_tolerance</code> value.</p>
<p>The normal zoom gesture detecting logic:</p>
<ol type="a">
<li>The gesture layer remembers the gap of each touched geometry.</li>
<li>When the user moves each touched point, the gesture layer calculates the gap of each touched geometry for each move event.</li>
- <li>If the values (gap + <span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span>, gap – <span style="font-family: Courier New,Courier,monospace">zoom_distance_tolerance</span>) are bigger or smaller than the first calculated gap values, the gesture layer calls the <span style="font-family: Courier New,Courier,monospace">zoom_move()</span> callback function with the calculated result.</li>
+ <li>If the values (gap + <code>zoom_distance_tolerance</code>, gap – <code>zoom_distance_tolerance</code>) are bigger or smaller than the first calculated gap values, the gesture layer calls the <code>zoom_move()</code> callback function with the calculated result.</li>
</ol>
<pre class="prettyprint">
static Evas_Event_Flags
</pre>
</li>
<li>
-<p>When the mouse up event occurs and the <strong>Ctrl</strong> key up signal is detected (in case of zooming with a mouse wheel and <strong>Ctrl</strong> key), the <span style="font-family: Courier New,Courier,monospace">zoom_end()</span> callback function is called:</p>
+<p>When the mouse up event occurs and the <strong>Ctrl</strong> key up signal is detected (in case of zooming with a mouse wheel and <strong>Ctrl</strong> key), the <code>zoom_end()</code> callback function is called:</p>
<pre class="prettyprint">
static Evas_Event_Flags
zoom_end(void *data, void *event_info)
</pre>
</li>
<li>
-<p>When the down event count is bigger than 3, the <span style="font-family: Courier New,Courier,monospace">zoom_abort()</span> callback function is called.</p>
+<p>When the down event count is bigger than 3, the <code>zoom_abort()</code> callback function is called.</p>
<pre class="prettyprint">
static Evas_Event_Flags
zoom_abort(void *data, void *event_info EINA_UNUSED)
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>
<p>When using rotate gestures, pay attention to the following:</p>
<ul><li>
<p>When the gesture layer has detected 2 mouse down events, calculate the angle between the 2 points.</p>
-<p>Then the gesture layer detects every mouse move event for calculating the angle between the 2 points. If the angle value is bigger than the sum of the first calculated angle and <span style="font-family: Courier New,Courier,monospace">rotate_angular_tolerance</span>, the <span style="font-family: Courier New,Courier,monospace">rotate_move()</span> callback function is called with the result.</p></li>
-<li><p>If the step for the rotate gesture is set, the <span style="font-family: Courier New,Courier,monospace">rotate_move()</span> callback function is called on every step.</p></li></ul>
+<p>Then the gesture layer detects every mouse move event for calculating the angle between the 2 points. If the angle value is bigger than the sum of the first calculated angle and <code>rotate_angular_tolerance</code>, the <code>rotate_move()</code> callback function is called with the result.</p></li>
+<li><p>If the step for the rotate gesture is set, the <code>rotate_move()</code> callback function is called on every step.</p></li></ul>
<p>To create a rotate gesture:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function to set callbacks to be notified about the change of the gesture state:</p>
+<p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_START,
rotate_start, NULL);
</pre>
</li>
<li>
-<p>When 2 points of the gesture layer are tapped on, the <span style="font-family: Courier New,Courier,monospace">rotate_start()</span> callback function is called:</p>
+<p>When 2 points of the gesture layer are tapped on, the <code>rotate_start()</code> callback function is called:</p>
<pre class="prettyprint">
static Evas_Event_Flags
rotate_start(void *data, void *event_info)
return EVAS_EVENT_FLAG_ON_HOLD;
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">event_info</span> attribute contains the rotation information in the <span style="font-family: Courier New,Courier,monospace">Elm_Gesture_Rotate_Info</span> data structure:</p>
+<p>The <code>event_info</code> attribute contains the rotation information in the <code>Elm_Gesture_Rotate_Info</code> data structure:</p>
<pre class="prettyprint">
struct _Elm_Gesture_Rotate_Info {
Evas_Coord x, y; /* Zoom center point reported to the user */
Evas_Coord radius; /* Radius between fingers reported to the user */
double base_angle; /* Holds the start angle */
double angle; /* Rotation value: 0.0 means no rotation */
- double momentum; /* Rotation momentum: rotation done per second (NOT YET SUPPORTED) */
+ double momentum; /* Rotation momentum: rotation done per second (NOT SUPPORTED) */
};
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">rotate_move()</span> function is called for each detected point when a mouse move event occurs and its angle is bigger than the sum of the base angle and the angular tolerance:</p>
+<p>The <code>rotate_move()</code> function is called for each detected point when a mouse move event occurs and its angle is bigger than the sum of the base angle and the angular tolerance:</p>
<pre class="prettyprint">
static Evas_Event_Flags
rotate_move(void *data, void *event_info)
</pre>
</li>
<li>
-<p>When a mouse up event occurs, the <span style="font-family: Courier New,Courier,monospace">rotate_end()</span> callback function is called:</p>
+<p>When a mouse up event occurs, the <code>rotate_end()</code> callback function is called:</p>
<pre class="prettyprint">
static Evas_Event_Flags
rotate_end(void *data, void *event_info)
</pre>
</li>
<li>
-<p>If a mouse down event count is higher than 3, the <span style="font-family: Courier New,Courier,monospace">rotate_abort()</span> callback function is called:</p>
+<p>If a mouse down event count is higher than 3, the <code>rotate_abort()</code> callback function is called:</p>
<pre class="prettyprint">
static Evas_Event_Flags
rotate_abort(void *data, void *event_info EINA_UNUSED)
<p>The UI components are mobile-friendly: for example, the naviframe container component supports multiple view management, the entry component supports various modes (such as password, single-line or multi-line, edit or no-edit), the index component supports fast access to another group of UI items, and the toolbar component shows a menu when an item is selected.</p>
<p>The mobile UI components are designed to allow the user to interact with touch screen-equipped mobile devices. Therefore, when developing mobile applications, you can easily use them through the mobile-related infrastructure in company with view management, and when reacting to touch events and the user finger size.</p>
+ <p align="center" class="Table"><strong>Table: Available UI components</strong></p>
<table border="1">
- <caption>
- Table: Available UI components
- </caption>
<colgroup>
<col />
<col />
</tr>
<tr>
<td><a href="component_check_mn.htm">Check</a></td>
- <td>The check component toggles the Boolean value between <span style="font-family: Courier New,Courier,monospace">true</span> and <span style="font-family: Courier New,Courier,monospace">false</span>.</td>
+ <td>The check component toggles the Boolean value between <code>true</code> and <code>false</code>.</td>
</tr>
<tr>
<td><a href="component_radio_mn.htm">Radio</a></td>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>Elementary library provides a set of pre-built UI components that allow you to build a rich graphical user interface for your applications. Each profile provides different set of UI components, as you can see in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</p>
-<p>The preconditions of using Elementary UI components are covered in <a href="getting_started_n.htm">Getting
started</a>. Elementary UI components share the same APIs for general features. For more information, see the General API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__General.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__General.html">wearable</a> applications).</p>
+<p>The preconditions of using Elementary UI components are covered in <a href="getting_started_n.htm">Getting
Started with EFL UI Programming</a>. Elementary UI components share the same APIs for general features. For more information, see the General API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__General.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__General.html">wearable</a> applications).</p>
-<p class="figure">Figure: Mobile UI components</p>
+<p align="center"><strong>Figure: Mobile UI components</strong></p>
<p align="center"><img alt="Mobile UI components" src="../../../images/UIComponents.png" /></p>
<h2 id="basic">Basic Usage</h2>
<p>You can use all UI components as follows:</p>
<ol>
- <li>Add an object with the <span style="font-family: Courier New,Courier,monospace">elm_<UI_component>_add()</span> function.</li>
- <li>Set a style to the object with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function and fill the layout of the style with a text or an image, if necessary.
+ <li>Add an object with the <code>elm_<UI_component>_add()</code> function.</li>
+ <li>Set a style to the object with the <code>elm_object_style_set()</code> function and fill the layout of the style with a text or an image, if necessary.
<p>You can skip this step and use the default style.</p>
</li>
<li>Arrange the object in the <a href="ui_layouts_n.htm">UI layout</a> you have built.</li>
- <li>Register callback functions with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_call()</span> function.</li>
+ <li>Register callback functions with the <code>evas_object_smart_callback_call()</code> function.</li>
</ol>
<h2 id="style">Styles</h2>
<p>In the layout, there are spaces for texts or images which sometimes remain empty for you to fill. In EFL, that space is a "part" (the term comes from <a href="learn_edc_part_n.htm">part</a> in <a href="learn_edc_intro_n.htm">EDC</a>). A layout of a UI component has 2 types of parts: a text part and a swallow part. A swallow part is a blank you can fill with any kind of object.</p>
<p>The following figure shows a default style button. The default style of a button has 1 swallow part and 1 text part. If you create a button and do not set a text or an image, the button looks like the left side. If you set a text and an image to the button, it looks like the right side.</p>
-<p class="figure">Figure: Empty button and button filled with an icon and a text</p>
+<p align="center"><strong>Figure: Empty button and button filled with an icon and a text</strong></p>
<p align="center"><img alt="Empty button and button filled with an icon and a text" src="../../../images/UIComponent_buttons.png" /></p>
<p>The following code snippet shows how to implement the button on the right:</p>
</pre>
<p>Use the following functions to fill a part with a text or an icon:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span></li>
+ <li><code>elm_object_part_text_set()</code></li>
+ <li><code>elm_object_part_content_set()</code></li>
</ul>
-<p>If the part name is <span style="font-family: Courier New,Courier,monospace">default</span>, you can use the following functions without specifying the part name:</p>
+<p>If the part name is <code>default</code>, you can use the following functions without specifying the part name:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span></li>
+ <li><code>elm_object_text_set()</code></li>
+ <li><code>elm_object_content_set()</code></li>
</ul>
<h2 id="callback">Callbacks</h2>
<p>UI components emit signals on specific situations so that you can perform some action by registering a callback function connected to the signal. The callback is called a "smart callback", distinguished from an event callback.</p>
-<p>For example, a button object emits a <span style="font-family: Courier New,Courier,monospace">clicked</span> signal when it is clicked, and you can define a specific action every time the button is clicked. Each UI component provides different kinds of signals. For the available signals, see the topic for each individual UI component.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to register a callback. The following code snippet shows how to register a callback function to the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal:</p>
+<p>For example, a button object emits a <code>clicked</code> signal when it is clicked, and you can define a specific action every time the button is clicked. Each UI component provides different kinds of signals. For the available signals, see the topic for each individual UI component.</p>
+<p>Use the <code>evas_object_smart_callback_add()</code> function to register a callback. The following code snippet shows how to register a callback function to the <code>clicked</code> signal:</p>
<pre class="prettyprint">
-/* Add a callback function connected to the clicked signal
+/* Add a callback function connected to the clicked signal */
evas_object_smart_callback_add(btn, "clicked", _clicked_cb, NULL);
/* Print a log every time the button is clicked */
dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
}
</pre>
-<p>Besides smart signals, which are defined on the Elementary level, Evas event signals are also available on UI components. You can register callback functions connected to input events (key up, key down, mouse wheel) using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+<p>Besides smart signals, which are defined on the Elementary level, Evas event signals are also available on UI components. You can register callback functions connected to input events (key up, key down, mouse wheel) using the <code>evas_object_event_callback_add()</code> function.</p>
<p>The following code snippet shows how to register a callback function to the mouse down event:</p>
<pre class="prettyprint">
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
<p>This feature is supported in wearable applications only.</p>
-<p>The UI components are wearable-friendly: for example, the circle datetime component extends the basic datetime component (<span style="font-family: Courier New,Courier,monospace">elm_datetime</span>) by visualizing the selected field, the circle genlist component provides a scrollbar with circular movement, and the circle progressbar, circle scroller, and circle slider components are all adjusted to the circular design.</p>
+<p>The UI components are wearable-friendly: for example, the circle datetime component extends the basic datetime component (<code>elm_datetime</code>) by visualizing the selected field, the circle genlist component provides a scrollbar with circular movement, and the circle progressbar, circle scroller, and circle slider components are all adjusted to the circular design.</p>
<p>The wearable UI components are designed to allow the user to interact with small touch screen-equipped wearable devices with rotary component parts. Therefore, when developing wearable applications, you can easily use them through the wearable-related infrastructure in company with full notification, and when reacting to touch and rotary events and the user finger size.</p>
+ <p align="center" class="Table"><strong>Table: Available UI components</strong></p>
<table border="1">
- <caption>
- Table: Available UI components
- </caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
</tr>
<tr>
<td><a href="component_check_wn.htm">Check</a></td>
- <td>The check component toggles the Boolean value between <span style="font-family: Courier New,Courier,monospace">true</span> and <span style="font-family: Courier New,Courier,monospace">false</span>.</td>
+ <td>The check component toggles the Boolean value between <code>true</code> and <code>false</code>.</td>
</tr>
<tr>
<td><a href="component_radio_wn.htm">Radio</a></td>
<p>The following UI components are designed for specific circular wearable devices which have rotary component parts. In a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the <a href="https://developer.tizen.org/design/wearable" target="_blank">Wearable Design</a> guidelines.</p>
+ <p align="center" class="Table"><strong>Table: Available circular UI components</strong></p>
<table border="1">
- <caption>
- Table: Available circular UI components
- </caption>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
</tr>
<tr>
<td><a href="component_circ_datetime_wn.htm">Circle Datetime</a></td>
- <td>The circle datetime extends the basic datetime component (<span style="font-family: Courier New,Courier,monospace">elm_datetime</span>) by visualizing the selected field.</td>
+ <td>The circle datetime extends the basic datetime component (<code>elm_datetime</code>) by visualizing the selected field.</td>
</tr>
<tr>
<td><a href="component_circ_genlist_wn.htm">Circle Genlist</a></td>
<tr>
<td><a href="component_circ_object_wn.htm">Circle Object</a></td>
<td>The circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features for the elementary component, and sometimes it works as an independent component with its own UI and functionalities.
- <p>Circular components can usually be added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_[component_name]_add()</span> function, which returns a circle object handle. Circular components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_XXX()</span> functions. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter-clockwise rotary event decreases the value.</p></td>
+ <p>Circular components can usually be added with the <code>eext_circle_object_[component_name]_add()</code> function, which returns a circle object handle. Circular components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <code>eext_circle_object_item_XXX()</code> functions. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter-clockwise rotary event decreases the value.</p></td>
</tr>
<tr>
<td><a href="component_circ_progressbar_wn.htm">Circle Progressbar</a></td>
</tr>
<tr>
<td><a href="component_circ_slider_wn.htm">Circle Slider</a></td>
- <td>The circle slider changes based on rotary events. The circle slider not only extends the UI feature of the basic slider component (<span style="font-family: Courier New,Courier,monospace">elm_slider</span>), but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
+ <td>The circle slider changes based on rotary events. The circle slider not only extends the UI feature of the basic slider component (<code>elm_slider</code>), but also replaces the functionalities of the <code>elm_slider</code> in a circular design.</td>
</tr>
<tr>
<td><a href="component_circ_surface_wn.htm">Circle Surface</a></td>
<h2 id="styles_c" name="styles_c">Wearable Circular UI Component Styles</h2>
-<p>EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+<p>EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <code>elm_object_style_get()</code> and <code>elm_object_style_set()</code> functions to get and apply the style for a specific UI component.</p>
-<p>The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen.</p>
+<p>The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other <code>Evas_Object</code> included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen.</p>
+<p align="center" class="Table"><strong>Table: Button styles</strong></p>
<table>
-<caption>Table: Button styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">bottom</span></td>
+ <td><code>bottom</code></td>
<td align="center"><img alt="bottom" src="../../../images/button_bottom_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">popup/circle</span></td>
+ <td><code>popup/circle</code></td>
<td align="center"><img alt="popup/circle" src="../../../images/button_popupcircle_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">popup/circle/left</span></td>
+ <td><code>popup/circle/left</code></td>
<td align="center"><img alt="popup/circle/left" src="../../../images/button_popupcircleleft_wn.png" /></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">popup/circle/right</span></td>
+ <td><code>popup/circle/right</code></td>
<td align="center"><img alt="popup/circle/right" src="../../../images/button_popupcircleright_wn.png" /></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.swallow.content</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Check styles</strong></p>
<table>
-<caption>Table: Check styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/check_default_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">small</span></td>
+ <td><code>small</code></td>
<td align="center"><img alt="small" src="../../../images/check_small_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td><code>on&off</code></td>
<td align="center"><img alt="on_off" src="../../../images/check_onoff_o_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Contextual popup (Ctxpopup) styles</strong></p>
<table>
-<caption>Table: Contextual popup (Ctxpopup) styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode</span></td>
+ <td><code>select_mode</code></td>
<td align="center"><img alt="select_mode" src="../../../images/contextual_select_o_wn.png" /></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode/top</span></td>
+ <td><code>select_mode/top</code></td>
<td align="center"><img alt="select_mode/top" src="../../../images/contextual_top_o_wn.png" /></td>
- <td>Pair this style with the <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span> style.</td>
+ <td>Pair this style with the <code>select_mode/bottom</code> style.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span></td>
+ <td><code>select_mode/bottom</code></td>
<td align="center"><img alt="select_mode/bottom" src="../../../images/contextual_bottom_o_wn.png" /></td>
- <td>Pair this style with the <span style="font-family: Courier New,Courier,monospace">select_mode/top</span> style.</td>
+ <td>Pair this style with the <code>select_mode/top</code> style.</td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Datetime styles</strong></p>
<table>
-<caption>Table: Datetime styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">datepicker/circle</span></td>
+ <td><code>datepicker/circle</code></td>
<td align="center"><img alt="datepicker/circle" src="../../../images/datetime_date_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">timepicker/circle</span></td>
+ <td><code>timepicker/circle</code></td>
<td align="center"><img alt="timepicker/circle" src="../../../images/datetime_time_o_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Entry styles</strong></p>
<table>
-<caption>Table: Entry styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/entry_default_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td><code>elm.guide</code>: for the guide text.
+ <p><code>elm.text</code>: for the main text.</p></td>
<td>The guide text is automatically erased when the main text is entered.</td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Genlist styles</strong></p>
<table>
-<caption>Table: Genlist styles</caption>
-
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/genlist_def_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>: for the icon on the left.
+ <p><code>elm.swallow.end</code>: for the icon on the right.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">title</span></td>
+ <td><code>title</code></td>
<td align="center"><img alt="title" src="../../../images/genlist_title_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">group_index</span></td>
+ <td><code>group_index</code></td>
<td align="center"><img alt="group_index" src="../../../images/genlist_group_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text</span></td>
+ <td><code>1text</code></td>
<td align="center"><img alt="1text" src="../../../images/genlist_1text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></td>
+ <td><code>1text.1icon</code></td>
<td align="center"><img alt="1text.1icon" src="../../../images/genlist_1text1icon_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></td>
+ <td><code>1text.1icon.1</code></td>
<td align="center"><img alt="1text.1icon.1" src="../../../images/genlist_1text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></td>
+ <td><code>1text.1icon.divider</code></td>
<td align="center"><img alt="1text.1icon.divider" src="../../../images/genlist_1text1icondivider_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code>: for the icon.
+ <p><code>elm.divider</code>: for the icon divider.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text</span></td>
+ <td><code>2text</code></td>
<td align="center"><img alt="2text" src="../../../images/genlist_2text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text.1icon</span></td>
+ <td><code>2text.1icon</code></td>
<td align="center"><img alt="2text.1icon.1" src="../../../images/genlist_2text1icon_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
+<td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></td>
+ <td><code>2text.1icon.1</code></td>
<td align="center"><img alt="2text.1icon.1" src="../../../images/genlist_2text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
+<td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text.1icon.divider</span></td>
+ <td><code>2text.1icon.divider</code></td>
<td align="center"><img alt="1text.1icon.divider" src="../../../images/genlist_2text1icondivider_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
+ <td><code>elm.icon</code>: for the icon.
+ <p><code>elm.divider</code>: for the icon divider.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">editfield</span></td>
+ <td><code>editfield</code></td>
<td align="center"><img alt="editfield" src="../../../images/genlist_edit_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multiline</span></td>
+ <td><code>multiline</code></td>
<td align="center"><img alt="multiline" src="../../../images/genlist_multiline_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
</table>
+<p align="center" class="Table"><strong>Table: Index styles</strong></p>
<table>
-<caption>Table: Index styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">thumbnail</span></td>
+ <td><code>thumbnail</code></td>
<td align="center"><img alt="thumbnail" src="../../../images/index_thumb_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">circle</span></td>
+ <td><code>circle</code></td>
<td align="center"><img alt="circle" src="../../../images/index_circle_o_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Popup styles</strong></p>
<table>
-<caption>Table: Popup styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">circle</span></td>
+ <td><code>circle</code></td>
<td align="center"><img alt="circle" src="../../../images/popup_circle_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace"></span></td>
- <td><span style="font-family: Courier New,Courier,monospace">button1</span>
- <p><span style="font-family: Courier New,Courier,monospace">button2</span></p></td>
+ <td><code></code></td>
+ <td><code>button1</code>
+ <p><code>button2</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toast/circle</span></td>
+ <td><code>toast/circle</code></td>
<td align="center"><img alt="toast/circle" src="../../../images/popup_toast_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">toast,icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>toast,icon</code></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Progressbar styles</strong></p>
<table>
-<caption>Table: Progressbar styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">process</span></td>
+ <td><code>process</code></td>
<td align="center"><img alt="process" src="../../../images/progressbar_process_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">process/small</span></td>
+ <td><code>process/small</code></td>
<td align="center"><img alt="process/small" src="../../../images/progressbar_small_o_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></td>
+ <td><code>process/popup/small</code></td>
<td align="center"><img alt="process/popup/small" src="../../../images/progressbar_popupsmall_o_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Radio styles</strong></p>
<table>
-<caption>Table: Radio styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/radio_default_o_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Slider styles</strong></p>
<table>
-<caption>Table: Slider styles</caption>
<tbody>
<tr>
<th>Style</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal/default</span></td>
+ <td><code>horizontal/default</code></td>
<td align="center"><img alt="horizontal/default" src="../../../images/slider_hor_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td><code>elm.swallow.icon</code></td>
</tr>
</tbody>
</table>
<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2>
-<p>EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+<p>EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <code>elm_object_style_get()</code> and <code>elm_object_style_set()</code> functions to get and apply the style for a specific UI component.</p>
-<p>The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other <
span style="font-family: Courier New,Courier,monospace">Evas_Object</span> included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen. For more detailed information, see <a href="component_custom_n.htm#theme">Style, Theme, and EDC</a>.</p>
+<p>The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other <
code>Evas_Object</code> included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen. For more detailed information, see <a href="component_custom_n.htm#theme">Style, Theme, and EDC</a>.</p>
+<p align="center" class="Table"><strong>Table: Button styles</strong></p>
<table>
-<caption>Table: Button styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">green</span></td>
+ <td><code>green</code></td>
<td align="center"><img alt="green" src="../../../images/button_green_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">orange</span></td>
+ <td><code>orange</code></td>
<td align="center"><img alt="orange" src="../../../images/button_orange_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">red</span></td>
+ <td><code>red</code></td>
<td align="center"><img alt="red" src="../../../images/button_red_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.content</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">nextdepth</span></td>
+ <td><code>nextdepth</code></td>
<td align="center"><img alt="nextdepth" src="../../../images/button_next_wn.png" /></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">naviframe/title_icon</span></td>
+ <td><code>naviframe/title_icon</code></td>
<td align="center"><img alt="naviframe/title_icon" src="../../../images/button_titleicon_wn.png" /></td>
<td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, "icon", ic)</span> function.</td>
+ <td><code>elm.swallow.content</code></td>
+ <td>The icon can be set with the <code>elm_object_part_content_set(btn, "icon", ic)</code> function.</td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Check styles</strong></p>
<table>
-<caption>Table: Check styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/check_default_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">on&off</span></td>
+ <td><code>on&off</code></td>
<td align="center"><img alt="on_off" src="../../../images/check_onoff_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Contextual popup (Ctxpopup) styles</strong></p>
<table>
-<caption>Table: Contextual popup (Ctxpopup) styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/contextual_wn.png" /></td>
- <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
+ <td>Use the <code>elm_ctxpopup_item_append()</code> function to add both text and an icon to the list.</td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Datetime styles</strong></p>
<table>
-<caption>Table: Datetime styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></td>
+ <td><code>datepicker_layout</code></td>
<td align="center"><img alt="datepicker_layout" src="../../../images/datetime_date_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></td>
+ <td><code>timepicker_layout</code></td>
<td align="center"><img alt="timepicker_layout" src="../../../images/datetime_time_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Entry styles</strong></p>
<table>
-<caption>Table: Entry styles</caption>
<tbody>
<tr>
<th>Style</th>
<th>Notes</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/entry_default_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td><code>elm.guide</code>: for the guide text.
+ <p><code>elm.text</code>: for the main text.</p></td>
<td>The guide text is automatically erased when the main text is entered.</td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Genlist styles</strong></p>
<table>
-<caption>Table: Genlist styles</caption>
-
<tbody>
<tr>
<th>Style</th>
<th>Swallow part</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/genlist_def_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.swallow.icon</code>: for the icon on the left.
+ <p><code>elm.swallow.end</code>: for the icon on the right.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">group_index</span></td>
+ <td><code>group_index</code></td>
<td align="center"><img alt="group_index" src="../../../images/genlist_group_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
+ <td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text</span></td>
+ <td><code>1text</code></td>
<td align="center"><img alt="1text" src="../../../images/genlist_1text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><code>elm.text</code></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></td>
+ <td><code>1text.1icon</code></td>
<td align="center"><img alt="1text.1icon" src="../../../images/genlist_1text1icon_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text</span></td>
+ <td><code>2text</code></td>
<td align="center"><img alt="2text" src="../../../images/genlist_2text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text.1</span></td>
+ <td><code>2text.1</code></td>
<td align="center"><img alt="2text.1" src="../../../images/genlist_2text1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></td>
+ <td><code>1text.1icon.divider</code></td>
<td align="center"><img alt="1text.1icon.divider" src="../../../images/genlist_1text1icondivider_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code>: for the icon.
+ <p><code>elm.divider</code>: for the icon divider.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></td>
+ <td><code>1text.1icon.1</code></td>
<td align="center"><img alt="1text.1icon.1" src="../../../images/genlist_1text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code></td>
+ <td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></td>
+ <td><code>2text.1icon.1</code></td>
<td align="center"><img alt="2text.1icon.1" src="../../../images/genlist_2text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the sub text.</p></td>
+<td><code>elm.icon</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></td>
+ <td><code>multiline/1text</code></td>
<td align="center"><img alt="multiline/1text" src="../../../images/genlist_multi1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
+ <td><code>elm.text</code>: for the multi-line text.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></td>
+ <td><code>multiline/2text</code></td>
<td align="center"><img alt="multiline/2text" src="../../../images/genlist_multi2_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
+ <td><code>elm.text</code>: for the main text.
+ <p><code>elm.text.1</code>: for the multi-line sub text.</p></td>
<td></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Index styles</strong></p>
<table>
-<caption>Table: Index styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">thumbnail</span></td>
+ <td><code>thumbnail</code></td>
<td align="center"><img alt="thumbnail" src="../../../images/index_thumb_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tab</span></td>
+ <td><code>tab</code></td>
<td align="center"><img alt="tab" src="../../../images/index_tab_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Popup styles</strong></p>
<table>
-<caption>Table: Popup styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/popup_default_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">toast</span></td>
+ <td><code>toast</code></td>
<td align="center"><img alt="toast" src="../../../images/popup_toast_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Progressbar styles</strong></p>
<table>
-<caption>Table: Progressbar styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/progressbar_default_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">pending_list</span></td>
+ <td><code>pending_list</code></td>
<td align="center"><img alt="pending_list" src="../../../images/progressbar_pending_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">process</span></td>
+ <td><code>process</code></td>
<td align="center"><img alt="process" src="../../../images/progressbar_process_wn.png" /></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></td>
+ <td><code>process/groupindex</code></td>
<td align="center"><img alt="process/groupindex" src="../../../images/progressbar_group_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Radio styles</strong></p>
<table>
-<caption>Table: Radio styles</caption>
<col width="20%"/>
<col width="80%"/>
<tbody>
<th>Sample</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">default</span></td>
+ <td><code>default</code></td>
<td align="center"><img alt="default" src="../../../images/radio_default_wn.png" /></td>
</tr>
</tbody>
</table>
+<p align="center" class="Table"><strong>Table: Slider styles</strong></p>
<table>
-<caption>Table: Slider styles</caption>
<tbody>
<tr>
<th>Style</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">horizontal/default</span></td>
+ <td><code>horizontal/default</code></td>
<td align="center"><img alt="horizontal/default" src="../../../images/slider_hor_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td><code>elm.swallow.icon</code></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API References for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Container UI components do not have their own visual identity. They only have logical structures for assignment or placement of other UI components. The use of container UI components only differs from the use of the UI components due to the absence of a visual identity.</p>
+ <p align="center" class="Table"><strong>Table: UI containers</strong></p>
<table border="1">
- <caption>Table: UI containers</caption>
<colgroup>
<col /><col />
</colgroup>
<p>The above structure is highly recommended and very usual, but it is not essential for every application. For example, if your application displays only one view statically throughout the running time, it does not need a naviframe.</p>
-<p class="figure">Figure: Basic EFL UI Layout</p>
+<p align="center"><strong>Figure: Basic EFL UI Layout</strong></p>
<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../../images/base_layout.png"/></p>
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 */
<ul>
<li>Alignment
-<p>To change the alignment of an object relative to its container, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span> function. It takes 2 double values, a horizontal and vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. By default, the object is centered with a value of 0.5.</p>
-<p><span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> or -1.0 can be given as a horizontal and vertical value, meaning that you request Evas to fill the Evas object in the parent area.</p>
+<p>To change the alignment of an object relative to its container, use the <code>evas_object_size_hint_align_set()</code> function. It takes 2 double values, a horizontal and vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. By default, the object is centered with a value of 0.5.</p>
+<p><code>EVAS_HINT_FILL</code> or -1.0 can be given as a horizontal and vertical value, meaning that you request Evas to fill the Evas object in the parent area.</p>
</li>
<li>Weight
-<p>To set a weight size hint, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function. The weight size hint represents the Evas objects weight comparing to that of other Evas objects in the container.</p>
+<p>To set a weight size hint, use the <code>evas_object_size_hint_weight_set()</code> function. The weight size hint represents the Evas objects weight comparing to that of other Evas objects in the container.</p>
<p>By default, the weight is not set, and the size of the object is its minimum size. But if you set this value to 1.0, the object expands as much as it can inside the container.</p>
</li>
<li>Minimum and maximum size
-<p>To set the minimum size of an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function. Evas respects the minimum size you define for the object. You can also set a maximum size of an object using the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span> function.</p>
+<p>To set the minimum size of an object, use the <code>evas_object_size_hint_min_set()</code> function. Evas respects the minimum size you define for the object. You can also set a maximum size of an object using the <code>evas_object_size_hint_max_set()</code> function.</p>
<p>When you resize the parent of an object, the minimum size of the parent is the minimum hint size of the object, if there are no constraints to the parent. If you increase the parent size, the object grows larger until its maximum hint size is reached. After this point, the object does not grow any larger and there is empty space around it within the parent.</p>
</li>
<li>Aspect
-<p>To fix the dimensional proportions of the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function. When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object.</p>
+<p>To fix the dimensional proportions of the object, use the <code>evas_object_size_hint_aspect_set()</code> function. When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object.</p>
</li>
</ul>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
<li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
<h2 id="scalability" name="scalability">Scaling UI Components</h2>
<p>Through its configuration (Elementary Config API in <a href="../../../../../org.tizen.native.mobile.apireference/group__Config.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Config.html">wearable</a> applications), Elementary provides a way to scale UI components with 2 different parameters:</p>
<ul>
-<li id="Finger_Size">The <span style="font-family: Courier New,Courier,monospace;">finger_size</span> parameter is used when the interactive (clickable or editable) zones of the UI components need to be scaled in order to be comfortably used with a finger.
-<p>The <span style="font-family: Courier New,Courier,monospace;">finger_size</span> parameter scales UI components based on the user's finger size. This is useful when using a touch screen with a finger rather than with a stylus. The finger size parameter is in pixels, and determines the minimum size of a square on the screen that is reliably hittable with a finger.</p>
+<li id="Finger_Size">The <code>finger_size</code> parameter is used when the interactive (clickable or editable) zones of the UI components need to be scaled in order to be comfortably used with a finger.
+<p>The <code>finger_size</code> parameter scales UI components based on the user's finger size. This is useful when using a touch screen with a finger rather than with a stylus. The finger size parameter is in pixels, and determines the minimum size of a square on the screen that is reliably hittable with a finger.</p>
-<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of the UI components so that they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> function. The finger size is always in pixels.</p>
+<p>The global finger size is set with the <code>elm_config_finger_size_set()</code> function. This adjusts the size and hit area of the UI components so that they are easy to hit with a finger. The current value is retrieved with the <code>elm_config_finger_size_get()</code> function. The finger size is always in pixels.</p>
<p>To increase the current global finger size by 20 px:</p>
elm_config_finger_size_set(finger_size + 20);
</pre>
</li>
-<li id="Scale">The <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter is responsible for scaling readable parts of a UI component (such as text or icons), so that it is more visible in the user interface.
+<li id="Scale">The <code>scale</code> parameter is responsible for scaling readable parts of a UI component (such as text or icons), so that it is more visible in the user interface.
-<p>The <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter only scales the readable areas of the UI component. Parts that must stay pixel-perfect, such as the highlights, shading, textures, and decorations, stay as they are.</p>
+<p>The <code>scale</code> parameter only scales the readable areas of the UI component. Parts that must stay pixel-perfect, such as the highlights, shading, textures, and decorations, stay as they are.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor that affects all UI components. It is also possible to use the <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> function to set the scaling factor on a given Elementary UI component and all its children.</p>
+<p>The <code>elm_config_scale_set()</code> function is used to set the global scaling factor that affects all UI components. It is also possible to use the <code>elm_object_scale_set()</code> function to set the scaling factor on a given Elementary UI component and all its children.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The scaling factor is multiplicative: if a child already has a scale size set, it is multiplied by its parent's scale size.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The scaling factor is multiplicative: if a child already has a scale size set, it is multiplied by its parent's scale size.
+</div>
<p>The following example sets the global scaling factor to 2.0 and the scaling factor of an existing Elementary button object to 2.0. As a result, the button appears as if it had a 4.0 scaling factor, while the rest of the application is displayed with a 2.0 scaling factor.</p>
<li>The screenshot on the right shows what happens when the finger size is increased from 50 px to 150 px. Only the button on the top gets bigger, enabling the user more reliably to hit it with a bigger finger.</li>
</ul>
-<p class="figure">Figure: Scalability example</p>
+<p align="center"><strong>Figure: Scalability example</strong></p>
<p align="center"><img alt="scalability example" src="../../../images/scale_3_finger_50.png" />
<img alt="Scale increased (5.00)" src="../../../images/scale_5_finger_50.png" />
<img alt="Finger size increased (150 px)" src="../../../images/scale_3_finger_150.png" /></p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">It is up to the theme (Edje file) to use the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to define which parts are scalable. This is something that needs to be taken into account when developing a new Edje theme. For more information on how to set the scalability in EDC, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ It is up to the theme (Edje file) to use the <code>scale</code> parameter to define which parts are scalable. This is something that needs to be taken into account when developing a new Edje theme. For more information on how to set the scalability in EDC, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.
+</div>
<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
-<p>To make an Edje object scalable, you must set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable.</p>
+<p>To make an Edje object scalable, you must set the <code>scale</code> parameter to 1 on the parts you want to be scalable.</p>
<p>The following example shows a basic button that is composed of a background image part and a swallow part that can receive some content. Both the background and swallow parts are set to be scalable.</p>
<pre class="prettyprint">
<ul>
<li>Image sets
-<p>If the application is potentially used at different resolutions, use image sets to provide separate image files for different resolutions. For example, in case of the button defined above, consider having 2 different image files for the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> background image. Change the <span style="font-family: Courier New,Courier,monospace;">images</span> block in the above code to contain an image set named <span style="font-family: Courier New,Courier,monospace;">bg.png</span> instead of a single image file:</p>
+<p>If the application is potentially used at different resolutions, use image sets to provide separate image files for different resolutions. For example, in case of the button defined above, consider having 2 different image files for the <code>bg.png</code> background image. Change the <code>images</code> block in the above code to contain an image set named <code>bg.png</code> instead of a single image file:</p>
<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> image file when the size of the image is under 200 px.</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image file for higher resolutions.</li>
+<li>Use the <code>bg_low.png</code> image file when the size of the image is under 200 px.</li>
+<li>Use the <code>bg_high.png</code> image file for higher resolutions.</li>
</ul>
<pre class="prettyprint">
images
<p>The following figure shows the effects of the image set. The screen shows 3 buttons:</p>
<ul>
-<li>The top button size is 100 x 50 pixels, so the background image uses the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> image file with the same size.</li>
+<li>The top button size is 100 x 50 pixels, so the background image uses the <code>bg_low.png</code> image file with the same size.</li>
<li>The middle button size is twice the first one (200 x 100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</li>
-<li>The bottom image uses the <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image file, which is defined to be used when the size is bigger than 200 x 100 pixels. The bottom image size is 201 x 101 pixels, and with the <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image file, it has much better quality than the scaled middle image.</li>
+<li>The bottom image uses the <code>bg_high.png</code> image file, which is defined to be used when the size is bigger than 200 x 100 pixels. The bottom image size is 201 x 101 pixels, and with the <code>bg_high.png</code> image file, it has much better quality than the scaled middle image.</li>
</ul>
-<p class="figure">Figure: Image set example</p>
+<p align="center"><strong>Figure: Image set example</strong></p>
<p align="center"><img alt="Image set example" src="../../../images/scale.png" /></p>
</li>
<li>Image borders
-<p>When the button defined above is resized, its image part is also resized because it is marked as scalable. To resize only the image itself, but not its borders, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter to specify a static unscalable border size.</p>
+<p>When the button defined above is resized, its image part is also resized because it is marked as scalable. To resize only the image itself, but not its borders, use the <code>border</code> parameter to specify a static unscalable border size.</p>
-<p>To add a 40-pixel border on the left and right side of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image, and a 20-pixel border at its top and bottom, modify the <span style="font-family: Courier New,Courier,monospace;">description</span> block of the image part:</p>
+<p>To add a 40-pixel border on the left and right side of the <code>bg</code> image, and a 20-pixel border at its top and bottom, modify the <code>description</code> block of the image part:</p>
<pre class="prettyprint">
parts
<p>The following figure shows the original button at the top, and the resized button at the bottom. When the button is resized, the borders (and consequently the corners) keep their initial ratio, and only the middle part of the button is changed.</p>
-<p class="figure">Figure: Image border example</p>
+<p align="center"><strong>Figure: Image border example</strong></p>
<p align="center"><img alt="Image border example" src="../../../images/border.png" /></p>
</li></ul>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Alarms</title>
- </head>
+ <title>Alarms</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="https://developer.tizen.org/development/sample/web/Application/Exercise_Planner" target="_blank">Exercise Planner Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Alarms</h1>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Alarm API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Alarm API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/alarm"/>
</pre>
<p>To obtains a list of alarms, and create and delete alarms:</p>
<ol>
- <li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <span style="font-family: Courier New,Courier,monospace">getAll()</span> method:</p> <pre class="prettyprint">
-var alarms = tizen.alarm.getAll();
+ <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.");
-</pre></li>
+</pre></li>
<li>To create an alarm:
<ul>
- <li><p>To create an absolute alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmAbsolute">TV</a> applications).</p> <p>You must define the time and date when the alarm is triggered as a <span style="font-family: Courier New,Courier,monospace">Date</span> object.</p> <pre class="prettyprint">
+ <li><p>To create an absolute alarm, create an instance of the <code>AlarmAbsolute</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmAbsolute">TV</a> applications).</p> <p>You must define the time and date when the alarm is triggered as a <code>Date</code> object.</p>
+<pre class="prettyprint">
/* Alarm is triggered at 8:00 on April 4, 2012 */
var date = new Date(2012, 3, 4, 8, 0);
var alarm1 = new tizen.AlarmAbsolute(date);
-</pre> </li>
- <li><p>To create a relative alarm, create an instance of the <
span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmRelative">TV</a> applications). </p> <p>You must define the delay after which the alarm is triggered. Use the predefined constants from the <span style="font-family: Courier New,Courier,monospace">AlarmManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmManager">TV</a> applications).</p>
+</pre></li>
+ <li><p>To create a relative alarm, create an instance of the <
code>AlarmRelative</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmRelative">TV</a> applications). </p> <p>You must define the delay after which the alarm is triggered. Use the predefined constants from the <code>AlarmManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmManager">TV</a> applications).</p>
<pre class="prettyprint">
/* Alarm is triggered in 3 hours */
-var alarm2 = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
-</pre> </li>
- <li><p>To create a recurring absolute alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> interface. </p> <p>You must define the time and date when the alarm is triggered as a <span style="font-family: Courier New,Courier,monospace">Date</span> object. In addition, you can define the weekdays or a time period when the alarm is repeated. Define the time period using the predefined constants from the <span style="font-family: Courier New,Courier,monospace">AlarmManager</span> interface.</p> <pre class="prettyprint">
+var alarm2 = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
+</pre></li>
+ <li><p>To create a recurring absolute alarm, create an instance of the <code>AlarmAbsolute</code> interface. </p> <p>You must define the time and date when the alarm is triggered as a <code>Date</code> object. In addition, you can define the weekdays or a time period when the alarm is repeated. Define the time period using the predefined constants from the <code>AlarmManager</code> interface.</p>
+<pre class="prettyprint">
/* Alarm is triggered for the first time at 8:00 on April 4, 2012 */
var date = new Date(2012, 3, 4, 8, 0);
/* Alarm repeats every 2 days, at 08:00, starting after April 4, 2012 */
var alarm3 = new tizen.AlarmAbsolute(date, 2 * tizen.alarm.PERIOD_DAY);
-/* Alarm repeats every Saturday and Sunday, at 08:00, starting after April 4, 2012 */
-var alarm4 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
-</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You cannot define both a time period and a weekday recurrence for the same alarm.</td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>To create a recurring relative alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> interface.</p> <p>You must define the delay after which the alarm is triggered, and the period after which it is repeated.</p> <pre class="prettyprint">
-/* 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);
-</pre> </li>
+/*
+ Alarm repeats every Saturday and Sunday,
+ at 08:00, starting after April 4, 2012
+*/
+var alarm4 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
+</pre>
+<div class="note">
+ <strong>Note</strong>
+ You cannot define both a time period and a weekday recurrence for the same alarm.
+</div>
+</li>
+ <li><p>To create a recurring relative alarm, create an instance of the <code>AlarmRelative</code> interface.</p> <p>You must define the delay after which the alarm is triggered, and the period after which it is repeated.</p>
+<pre class="prettyprint">
+/*
+ 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);
+</pre></li>
</ul></li>
- <li><p>To delete an alarm, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the alarm ID:</p> <pre class="prettyprint">
+ <li><p>To delete an alarm, use the <code>remove()</code> method with the alarm ID:</p>
+<pre class="prettyprint">
/* First add created alarm to the device */
-tizen.alarm.add(alarm1, "tizen.internet"); /* Tizen alias ID is deprecated since Tizen 2.3.1 */
+/* Tizen alias ID is deprecated since Tizen 2.3.1 */
+tizen.alarm.add(alarm1, "tizen.internet");
/* Then remove it */
tizen.alarm.remove(alarm1.id);
-</pre> <p>To delete all alarms at once, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method.</p></li>
+</pre>
+<p>To delete all alarms at once, use the <code>removeAll()</code> method.</p></li>
</ol>
<h2 id="launch" name="launch">Launching Applications with Alarms</h2>
- <p>Learning how to launch application with alarms is a basic alarm management skill:</p>
+ <p>Learning how to launch application with alarms is a basic alarm management skill:</p>
<ol>
- <li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <span style="font-family: Courier New,Courier,monospace">add()</span> method used to add the created alarm to the system:</p> <pre class="prettyprint">
+ <li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <code>add()</code> method used to add the created alarm to the system:</p>
+<pre class="prettyprint">
/* Run the browser */
var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
-tizen.alarm.add(alarm, "tizen.internet"); /* Tizen alias ID is deprecated since Tizen 2.3.1 */
-</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 <span style="font-family: Courier New,Courier,monospace">add()</span> method used to add the created alarm to the system:</p> <pre class="prettyprint">
-/* Run the browser and open the defined browser page with the operation/view application control */
+/* Tizen alias ID is deprecated since Tizen 2.3.1 */
+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">
+/*
+ Run the browser and open the defined browser page
+ with the operation/view application control
+*/
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);
-</pre> </li>
- </ol>
-
+</pre></li>
+ </ol>
+
<h2 id="check" name="check">Checking for Alarm Events</h2>
-<p>You can retrieve information about the next alarm event using the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmAbsolute">TV</a> applications) and <span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmRelative">TV</a> applications) interfaces. They provide the time and date of the next scheduled absolute alarm, or the time remaining before the next relative alarm.</p>
-<ol>
- <li><p>Create an absolute alarm:</p> <pre class="prettyprint">
+<p>You can retrieve information about the next alarm event using the <code>AlarmAbsolute</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmAbsolute">TV</a> applications) and <code>AlarmRelative</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmRelative">TV</a> applications) interfaces. They provide the time and date of the next scheduled absolute alarm, or the time remaining before the next relative alarm.</p>
+<ol>
+ <li><p>Create an absolute alarm:</p>
+<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));
+var alarm = new tizen.AlarmAbsolute(new Date(2012, 3, 4, 8, 0));
tizen.alarm.add(alarm, "org.tizen.browser");
-
-</pre> </li>
-
<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getNextScheduledDate()</span> method to retrieve the time and date of the next absolute alarm to be triggered:</p> <pre class="prettyprint">
+</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());
-</pre> </li>
- <li><p>Create a relative alarm:</p> <pre class="prettyprint">
+</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);
+var alarm = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
tizen.alarm.add(alarm, "org.tizen.browser");
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getRemainingSeconds()</span> method to retrieve the number of seconds till the next relative alarm is triggered:</p> <pre class="prettyprint">
+</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");
-</pre></li>
+</pre></li>
</ol>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Application Data Exchange</title>
+ <title>Application Data Exchange</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li>Tizen 3.0 and Higher for TV</li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Data Exchange</h1>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Application Controls</title>
- </head>
+ <title>Application Controls</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="#handle">Receiving and Replying to Application Control Requests</a></li>
<li><a href="#broadcast_event">Broadcasting and Listening for Events</a></li>
<li><a href="#background_category">Background Execution</a></li>
-
-
-
-
-
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="https://developer.tizen.org/development/sample/web/Application/App_Caller" target="_blank">App Caller Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/Application/App_Manager" target="_blank">App Manager Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/System/%28Circle%29_Stop_Watch" target="_blank">(Circle) Stop Watch Sample Description</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Application/Recent_Apps" target="_blank">Recent Apps Sample Description</a></li>
+ <li><a href="https://developer.tizen.org/development/sample/web/Application/Recent_Apps" target="_blank">Recent Apps Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Controls</h1>
-
+
<p>Tizen provides various application management features, including application launching, event handling, and information retrieval.</p>
<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
-
+
<p>The main application management features are:</p>
- <ul>
- <li>Application management <p>You can <a href="#manage">manage applications</a> by launching and stopping other applications, and hiding or exiting the current application.</p></li>
+ <ul>
+ <li>Application management <p>You can <a href="#manage">manage applications</a> by launching and stopping other applications, and hiding or exiting the current application.</p></li>
<li>Application information retrieval <p>You can display a list of applications that are currently installed or running on the device, and <a href="#retrieve">retrieve application information</a>, such as application name, application ID, and context ID.</p></li>
-
<li>Application controls
<p>An application control (app control) is a way of sharing an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your application.</p>
<p>You can use in your application operations, such as calling, Web browsing, and playing media items, which are exported by other applications. This mechanism allows you to conveniently launch other applications whose functionalities you need in your application. If you need to use functionality from another application, launching an application control allows you to request the system to launch that application according to your requirements. You can launch applications based on your immediate needs - you do not need to know their identifiers or specifications. You can use application controls by creating an <a href="#controls">application control request</a>. The request allows you to <a href="#launch">launch other applications</a> to use their functionalities.</p>
<p>If you want to allow other applications to use your application functionalities, you must <a href="#exporting">export your application controls</a> and be prepared to <a href="#handle">receive requests and respond to them</a>.</p></li>
-
<li>Event handling
<p>You can <a href="#broadcast_event">send and receive events</a> between 2 applications using events. Your application can broadcast its own events, and listen for events broadcast by others.</p>
- </li>
-
+ </li>
<li>Background execution
<p>Usually, when a Web application moves to the background, it gets suspended. To enable <a href="#background_category">background execution</a>, you must declare a background category for your application.</p>
</li>
- </ul>
+ </ul>
- <h2 id="controls" name="controls">Application Control Request</h2>
+ <h2 id="controls" name="controls">Application Control Request</h2>
-<p>The application control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. You can request other applications to perform specific operations using the <
span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> (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) and <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications) interfaces. The operations can be, for example, making a phone call, browsing local files so the user can pick an image of their choosing, or playing a video in a video player.</p>
+<p>The application control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. You can request other applications to perform specific operations using the <
code>ApplicationControl</code> (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) and <code>RequestedApplicationControl</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications) interfaces. The operations can be, for example, making a phone call, browsing local files so the user can pick an image of their choosing, or playing a video in a video player.</p>
<p>The application control consists of an operation, URI, MIME type, and some data, and it describes the request to be performed by the newly launched application. This information is used to resolve the application control. When the system gets an application control request, it finds the proper provider application by resolving the application control, and then launches the provider application. Once the provider application has performed the requested task, it must pass control back to the calling application and provide the result of the operation. Basically, the application control process flows as follows:</p>
<ol>
-<li>The calling application launches the application control with the <
span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> 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).</li>
-<li>The provider application calls the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface to get the reference of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> object. This object contains the application control passed by the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method from the calling application.</li>
-<li>The provider application calls either the <
span style="font-family: Courier New,Courier,monospace">replyResult()</span> method (in case of success) or the <span style="font-family: Courier New,Courier,monospace">replyFailure()</span> method (in case of failure) of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface to return control back to the calling application. The result of the provided operation (if any), is delivered as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications). </li>
-<li>The calling application receives the result through the <
span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> event handler (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlDataArrayReplyCallback">TV</a> applications).</li></ol>
-
+<li>The calling application launches the application control with the <
code>launchAppControl()</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).</li>
+<li>The provider application calls the <code>getRequestedAppControl()</code> method of the <code>Application</code> interface to get the reference of the <code>RequestedApplicationControl</code> object. This object contains the application control passed by the <code>launchAppControl()</code> method from the calling application.</li>
+<li>The provider application calls either the <
code>replyResult()</code> method (in case of success) or the <code>replyFailure()</code> method (in case of failure) of the <code>RequestedApplicationControl</code> interface to return control back to the calling application. The result of the provided operation (if any), is delivered as an array of <code>ApplicationControlData</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications). </li>
+<li>The calling application receives the result through the <
code>ApplicationControlDataArrayReplyCallback</code> event handler (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlDataArrayReplyCallback">TV</a> applications).</li></ol>
+
<p>The application control uses the following primary information:</p>
<ul><li>Application ID
-<p>Used to identify the provider application of the requested application control. Besides the application ID, a <a href="#common">common application control</a> has a special alias name for the application ID with the prefix <span style="font-family: Courier New,Courier,monospace">tizen</span>. For example, the platform phone application has the alias application ID of <span style="font-family: Courier New,Courier,monospace">tizen.phone</span>.</p>
+<p>Used to identify the provider application of the requested application control. Besides the application ID, a <a href="#common">common application control</a> has a special alias name for the application ID with the prefix <code>tizen</code>. For example, the platform phone application has the alias application ID of <code>tizen.phone</code>.</p>
<p>Used to identify the provider application of the requested application control.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">From Tizen 2.4 onwards, the platform-defined application controls and aliased application IDs which were defined in previous Tizen versions may not be supported. If they are used, the application control behavior is undefined and cannot be guaranteed.</td>
- </tr>
- </tbody>
- </table>
-
+<div class="note">
+ <strong>Note</strong>
+ From Tizen 2.4 onwards, the platform-defined application controls and aliased application IDs which were defined in previous Tizen versions may not be supported. If they are used, the application control behavior is undefined and cannot be guaranteed.
+</div>
</li>
-<li>Operation
-<p>Describes an action to be performed by the provider application. The operation ID of the platform-provided operation is in the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/<verb></span> format. For example, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span>.</p>
-<p>For more information on valid operations, see <a href="common_appcontrol_w.htm">Common Application Controls</a>. You can also see which operations allow a URI to be specified and which MIME types an operation supports.</p></li>
- </ul>
-
+<li>Operation
+<p>Describes an action to be performed by the provider application. The operation ID of the platform-provided operation is in the <code>http://tizen.org/appcontrol/operation/<verb></code> format. For example, <code>http://tizen.org/appcontrol/operation/view</code>.</p>
+<p>For more information on valid operations, see <a href="common_appcontrol_w.htm">Common Application Controls</a>. You can also see which operations allow a URI to be specified and which MIME types an operation supports.</p></li>
+</ul>
+
<p>An application can be launched by the user from the Launcher or by another application. Each application has a launch mode, which determines how the application is launched: in a separate instance or in the same group as the calling application. For more information on the launch modes, see <a href="app_group_w.htm">Application Groups</a>.</p>
- <p>There are different types of application control requests for <a href="#launch">launching other applications</a>:</p>
- <ul>
- <li><a href="#explicit">Explicit launch</a> <p>You determine which application must be launched by explicitly specifying an application ID. The application ID determines which application is launched and the application performs the operation as specified in the application control request.</p></li>
- <li><a href="#implicit">Implicit launch</a> <p>You provide information to describe the request to be performed by the newly launched application without specifying the application ID. The system uses the information to resolve the application control. It does this by trying to find a proper application to perform the application control request and then launching the selected application.</p></li>
- </ul>
-
-<p>You can take advantage of the Tizen <a href="#common">common application functionalities</a> through the application control feature. You can also <a href="#exporting">export your application functionality</a> to allow other applications to launch your application.</p>
-
+ <p>There are different types of application control requests for <a href="#launch">launching other applications</a>:</p>
+ <ul>
+ <li><a href="#explicit">Explicit launch</a> <p>You determine which application must be launched by explicitly specifying an application ID. The application ID determines which application is launched and the application performs the operation as specified in the application control request.</p></li>
+ <li><a href="#implicit">Implicit launch</a> <p>You provide information to describe the request to be performed by the newly launched application without specifying the application ID. The system uses the information to resolve the application control. It does this by trying to find a proper application to perform the application control request and then launching the selected application.</p></li>
+ </ul>
+
+<p>You can take advantage of the Tizen <a href="#common">common application functionalities</a> through the application control feature. You can also <a href="#exporting">export your application functionality</a> to allow other applications to launch your application.</p>
+
<h3 name="explicit" id="explicit">Explicit Launch</h3>
-<p>If you specify the exact application ID of the application for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface, you can request the application control from a specific application. The application ID determines which application is launched and the application performs the operation as specified in the control request.</p>
+<p>If you specify the exact application ID of the application for the <code>launchAppControl()</code> method of the <code>Application</code> interface, you can request the application control from a specific application. The application ID determines which application is launched and the application performs the operation as specified in the control request.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">An explicit launch request cannot be completed if the user does not have the specified application on their device. Hence implicit launches can be more effective, because the system can find an available application to complete the request. The implicit launch can also enhance the user experience because it allows the user to select a preferred application to complete the task.</td>
- </tr>
- </tbody>
- </table>
-<h3 name="implicit" id="implicit">Implicit Launch</h3>
+<div class="note">
+ <strong>Note</strong>
+ An explicit launch request cannot be completed if the user does not have the specified application on their device. Hence implicit launches can be more effective, because the system can find an available application to complete the request. The implicit launch can also enhance the user experience because it allows the user to select a preferred application to complete the task.
+</div>
-<p>If you do not explicitly provide an exact application ID with the application control request in the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface, you must provide enough information for the system to determine which of the available applications can best handle the control request. For example, the nature of the service or the file types that the application can handle.</p>
+<h3 name="implicit" id="implicit">Implicit Launch</h3>
-<p>The application control consists of an operation ID, URI, MIME type, some additional data, and a launch mode setting. The system compares some of the attributes of the control request against the service descriptions of the installed applications to determine which of the available applications are suitable for the request. The request is resolved only if all specified information matches the service descriptions retrieved from the installed applications. The application control <span style="font-family: Courier New,Courier,monospace">data</span> attribute is not used in resolving the control request.</p>
+<p>If you do not explicitly provide an exact application ID with the application control request in the <code>launchAppControl()</code> method of the <code>Application</code> interface, you must provide enough information for the system to determine which of the available applications can best handle the control request. For example, the nature of the service or the file types that the application can handle.</p>
+
+<p>The application control consists of an operation ID, URI, MIME type, some additional data, and a launch mode setting. The system compares some of the attributes of the control request against the service descriptions of the installed applications to determine which of the available applications are suitable for the request. The request is resolved only if all specified information matches the service descriptions retrieved from the installed applications. The application control <code>data</code> attribute is not used in resolving the control request.</p>
<p>The following attributes are used to resolve application control requests:</p>
<ul>
<li>Operation <p>Mandatory string that defines the action to be performed by the application control. You can define your own operation to describe a specific action of your application.</p></li>
- <li>URI scheme <p>Data on which the action is performed. For example, if you want to use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation to view a specific image, the URI must be the URI of the image (which can be obtained using the <span style="font-family: Courier New,Courier,monospace">toURI()</span> method after resolving the file path). The same operation can be used to launch a Web page in a browser, except that the URI in that case is the URL of the Web site, such as <span style="font-family: Courier New,Courier,monospace">https://www.tizen.org/</span>.</p></li>
- <li>MIME type <p>Specific type of the URI. For example, if you want to view only JPEG images, you must use the <span style="font-family: Courier New,Courier,monospace">image/jpeg</span> MIME type. The MIME type can be important because it ensures that the system finds an application that is capable of supporting a specified MIME type.</p></li>
+ <li>URI scheme <p>Data on which the action is performed. For example, if you want to use the <code>http://tizen.org/appcontrol/operation/view</code> operation to view a specific image, the URI must be the URI of the image (which can be obtained using the <code>toURI()</code> method after resolving the file path). The same operation can be used to launch a Web page in a browser, except that the URI in that case is the URL of the Web site, such as <code>https://www.tizen.org/</code>.</p></li>
+ <li>MIME type <p>Specific type of the URI. For example, if you want to view only JPEG images, you must use the <code>image/jpeg</code> MIME type. The MIME type can be important because it ensures that the system finds an application that is capable of supporting a specified MIME type.</p></li>
</ul>
- <p>The following code example shows an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> instance that launches an application to pick images:</p>
+ <p>The following code example shows an <code>ApplicationControl</code> instance that launches an application to pick images:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
null, "image/*", null, null);
tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
-</pre>
+</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 <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method of <span style="font-family: Courier New,Courier,monospace">Application</span> 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 <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method:</p>
+<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" has been resolved and saved in variable 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.findAppControl(appControl, function(appInfos, appCtrl)
{
- tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
- }
-}, function(e) {/* Error handling */});
-</pre>
+ if (appInfos.length >= 1)
+ {
+ tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
+ }
+ }, function(e) {/* Error handling */});
+</pre>
<h3 id="common" name="common">Common Application Controls</h3>
<li><a href="common_appcontrol_w.htm#voice">Voice Recorder</a></li>
<li><a href="common_appcontrol_w.htm#inputdelegator">Input Delegator</a></li>
</ul>
-
+
<h2 id="exporting" name="exporting">Application Control Export</h2>
-
-<p>Your application can export application control functionality. This means that the application can register itself as a provider application, allowing it to receive application control requests from other applications. You can <a href="#handle">handle an incoming application control request</a> using the <
span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> 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), and respond to the incoming request using the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications).</p>
-<p>The system compares the attributes of the application control request against the service descriptions of installed applications to determine which of the available applications are suitable for the request. The service description of the installed applications contains information about the requests that they can handle. The request is resolved only if all specified information in the request matches with the service description retrieved from an installed application. The application control <span style="font-family: Courier New,Courier,monospace">data</span> attribute is not used in resolving the control request.</p>
-<p>To advertise your application features to other applications, allow other applications to use the functionalities of your application, and launch your application implicitly without an application ID, you can define 1 or more application control service descriptions in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of your application. Each description specifies the operation, URI scheme, and MIME type of the application control service your application can offer.</p>
+
+<p>Your application can export application control functionality. This means that the application can register itself as a provider application, allowing it to receive application control requests from other applications. You can <a href="#handle">handle an incoming application control request</a> using the <
code>getRequestedAppControl()</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), and respond to the incoming request using the <code>RequestedApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications).</p>
+<p>The system compares the attributes of the application control request against the service descriptions of installed applications to determine which of the available applications are suitable for the request. The service description of the installed applications contains information about the requests that they can handle. The request is resolved only if all specified information in the request matches with the service description retrieved from an installed application. The application control <code>data</code> attribute is not used in resolving the control request.</p>
+<p>To advertise your application features to other applications, allow other applications to use the functionalities of your application, and launch your application implicitly without an application ID, you can define 1 or more application control service descriptions in the <code>config.xml</code> file of your application. Each description specifies the operation, URI scheme, and MIME type of the application control service your application can offer.</p>
<p>The following code example shows a service description which allows an application to handle requests to view JPEG images:</p>
-<ul><li>The <span style="font-family: Courier New,Courier,monospace">src</span> field describes the application page (usually an HTML file) that handles the request.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">operation</span> field is mandatory, while the <span style="font-family: Courier New,Courier,monospace">uri</span> and <span style="font-family: Courier New,Courier,monospace">mime</span> fields are optional. If the value of <span style="font-family: Courier New,Courier,monospace">uri</span> field is <span style="font-family: Courier New,Courier,monospace">file</span>, the value can be left out.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">uri</span> field in the service description is used to inform the platform about how to interpret and process the rest of the URI. For example, the <span style="font-family: Courier New,Courier,monospace">http</span> URI scheme informs the platform to interpret and process the URI as a Web resource using HTTP. However, if the <span style="font-family: Courier New,Courier,monospace">uri</span> field value is set to <span style="font-family: Courier New,Courier,monospace">file</span>, leave the attribute out of the service description.</li></ul>
+<ul><li>The <code>src</code> field describes the application page (usually an HTML file) that handles the request.</li>
+<li>The <code>operation</code> field is mandatory, while the <code>uri</code> and <code>mime</code> fields are optional. If the value of <code>uri</code> field is <code>file</code>, the value can be left out.</li>
+<li>The <code>uri</code> field in the service description is used to inform the platform about how to interpret and process the rest of the URI. For example, the <code>http</code> URI scheme informs the platform to interpret and process the URI as a Web resource using HTTP. However, if the <code>uri</code> field value is set to <code>file</code>, leave the attribute out of the service description.</li></ul>
-<pre class="prettyprint"><tizen:app-control>
+<pre class="prettyprint">
+<tizen:app-control>
<src name="view.html"/>
<operation name="http://tizen.org/appcontrol/operation/view"/>
<uri name="file"/>
<mime name="image/jpeg"/>
-</tizen:app-control></pre>
-
+</tizen:app-control>
+</pre>
-<p>For example, consider the following example of an <
span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> instance (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>For example, consider the following example of an <
code>ApplicationControl</code> instance (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>
<pre class="prettyprint">
-/* Assuming that the filesystem virtual root "images" has been resolved and saved in variable 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(),
- null, null, null);</pre>
+ null, null, null);
+</pre>
-<p>When the system attempts to resolve the request and find the application to be launched, it checks the service descriptions. In the following example, the application with the first service description is not launched, since the <span style="font-family: Courier New,Courier,monospace">uri</span> information does not match the request. However, the application with the second service description is a match and can be launched:</p>
+<p>When the system attempts to resolve the request and find the application to be launched, it checks the service descriptions. In the following example, the application with the first service description is not launched, since the <code>uri</code> information does not match the request. However, the application with the second service description is a match and can be launched:</p>
<pre class="prettyprint">
<!--First service description: not a match-->
<tizen:app-control>
<tizen:app-control>
<operation name="http://tizen.org/appcontrol/operation/view"/>
<mime name="image/*"/>
-</tizen:app-control></pre>
+</tizen:app-control>
+</pre>
-<p>If your application offers the same service (operation) with different parameters (for example, different MIME types), you must define each set of parameters separately in their own service description. For example, if your application can handle both image and audio file MIME types with the view operation, 2 <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span> elements with different MIME types and the same <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation are required. The following example shows how to define the service descriptions for 2 MIME types for the same operation in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>If your application offers the same service (operation) with different parameters (for example, different MIME types), you must define each set of parameters separately in their own service description. For example, if your application can handle both image and audio file MIME types with the view operation, 2 <code><tizen:app-control></code> elements with different MIME types and the same <code>http://tizen.org/appcontrol/operation/view</code> operation are required. The following example shows how to define the service descriptions for 2 MIME types for the same operation in the <code>config.xml</code> file:</p>
-<pre class="prettyprint"><tizen:app-control>
+<pre class="prettyprint">
+<tizen:app-control>
<operation name="http://tizen.org/appcontrol/operation/view"/>
<mime name="image/*"/>
</tizen:app-control>
<tizen:app-control>
<operation name="http://tizen.org/appcontrol/operation/view"/>
<mime name="audio/*"/>
-</tizen:app-control></pre>
+</tizen:app-control>
+</pre>
<h3 id="appcontrol_event" name="appcontrol_event">Preventing Page Reloads for Incoming Requests</h3>
<p>When a Web application receives an application control request from another application, the receiving application finds the proper page for that request and loads that page. If the found page is already loaded and displayed, the page is reloaded (refreshed) to process the incoming application control request. However, in some cases, a Web application is able to handle the application control request without reloading the page in order to keep the previous context.</p>
-<p>From Tizen 2.4 onwards, the Web runtime provides a way to handle application control requests without page reloading by extending the <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span> element of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and sending a new <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event to the receiving application.</p>
-<p>The following code example demonstrates a service description in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, which can handle an image editing application control request without reloading the Web page:</p>
+<p>From Tizen 2.4 onwards, the Web runtime provides a way to handle application control requests without page reloading by extending the <code><tizen:app-control></code> element of the <code>config.xml</code> file and sending a new <code>appcontrol</code> event to the receiving application.</p>
+<p>The following code example demonstrates a service description in the <code>config.xml</code> file, which can handle an image editing application control request without reloading the Web page:</p>
<pre class="prettyprint">
<tizen:app-control>
<src name="edit.html" reload="disable"/>
<operation name="http://tizen.org/appcontrol/operation/edit"/>
<mime name="image/*"/>
-</tizen:app-control></pre>
+</tizen:app-control>
+</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is added to the <span style="font-family: Courier New,Courier,monospace">src</span> element (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_appcontrol">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#appcontrol">wearable</a> applications), and used to set whether the page must be reloaded when an application control request is received. The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is optional and the default value is <span style="font-family: Courier New,Courier,monospace">enable</span>. If the attribute is not set, the page reloads.</p>
-<p>If the currently loaded page is selected by an incoming application control request, and the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>, an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is dispatched to that page instead of reloading it. By using an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener, the Web application can get the requested information by calling the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface. An <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is dispatched only if the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>.</p>
-<p>The following example demonstrates adding an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener and handling an event:</p>
+<p>The <code>reload</code> attribute is added to the <code>src</code> element (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_appcontrol">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#appcontrol">wearable</a> applications), and used to set whether the page must be reloaded when an application control request is received. The <code>reload</code> attribute is optional and the default value is <code>enable</code>. If the attribute is not set, the page reloads.</p>
+<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 */
- }
-});</pre>
+ var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
+ if (reqAppControl)
+ {
+ /* Handle the application control request */
+ }
+ });
+</pre>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/application.info"/>
<tizen:privilege name="http://tizen.org/privilege/appmanager.kill"/>
</pre>
-
<h2 id="retrieve" name="retrieve">Retrieving Application Information</h2>
-
+
<p>You can retrieve information about applications in various ways:</p>
- <ul>
- <li>Retrieve information about installed applications with the <
span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> and <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications).
- <p>These methods can be used to access the <
span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationInformation">TV</a> applications) to retrieve information about installed applications, such as their name, icon path, and version.</p></li>
- <li>Retrieve information about running applications with the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> and <span style="font-family: Courier New,Courier,monospace">getAppsContext()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.
- <p>These methods can be used to access the <
span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationContext">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationContext">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationContext">TV</a> applications) to retrieve the application ID and context ID of the running application.</p>
- <p>The application ID can be used to retrieve application information, or to launch an application. The context ID is a unique identifier given by the platform to a running application.</p></li>
+ <ul>
+ <li>Retrieve information about installed applications with the <
code>getAppInfo()</code> and <code>getAppsInfo()</code> methods of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications).
+ <p>These methods can be used to access the <
code>ApplicationInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationInformation">TV</a> applications) to retrieve information about installed applications, such as their name, icon path, and version.</p></li>
+ <li>Retrieve information about running applications with the <code>getAppContext()</code> and <code>getAppsContext()</code> methods of the <code>ApplicationManager</code> interface.
+ <p>These methods can be used to access the <
code>ApplicationContext</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationContext">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationContext">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationContext">TV</a> applications) to retrieve the application ID and context ID of the running application.</p>
+ <p>The application ID can be used to retrieve application information, or to launch an application. The context ID is a unique identifier given by the platform to a running application.</p></li>
</ul>
<p>Learning how to retrieve information about installed and running applications allows you to manage all the device applications from your application: </p>
<ol>
- <li><p>To retrieve a list of installed applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
+ <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);
}
tizen.application.getAppsInfo(onListInstalledApplications);
-</pre>
-<p>The list of applications is returned to the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationArraySuccessCallback</span> event handler as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects.</p> </li>
- <li><p>To retrieve a list of running applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
+</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);
}
tizen.application.getAppsContext(onRunningApplicationContexts);
-</pre>
-<p>The list of application contexts is returned to the given event handler as an array of the <span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> objects.</p></li>
- <li><p>To retrieve basic application information, use the <span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> 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>
+<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);
-</pre> </li>
- <li><p>To retrieve application context information, use the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> 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>
+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);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="manage" name="manage">Managing Applications</h2>
-<p>You can manage and retrieve information about the current application with the <span style="font-family: Courier New,Courier,monospace">Application</span> object (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). The <span style="font-family: Courier New,Courier,monospace">Application</span> object is retrieved using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications). You can exit or hide the current application using the <span style="font-family: Courier New,Courier,monospace">Application</span> interface.</p>
+<p>You can manage and retrieve information about the current application with the <code>Application</code> object (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). The <code>Application</code> object is retrieved using the <code>getCurrentApplication()</code> method of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications). You can exit or hide the current application using the <code>Application</code> interface.</p>
<p>Learning how to launch and stop other applications, and hide or exit applications running on the device, allows you to manage all the device applications from your application:</p>
<ol>
- <li><p>To launch or stop another application, you need the application ID (for launching) or context ID (for stopping) to identify the application. </p> <p>To launch an application, use the <span style="font-family: Courier New,Courier,monospace">launch()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface, and to stop an application, use the <span style="font-family: Courier New,Courier,monospace">kill()</span> method.</p> <p>In the following example, the application to be launched and stopped is an alarm, with the <span style="font-family: Courier New,Courier,monospace">"samplealarm"</span> ID.</p>
+ <li><p>To launch or stop another application, you need the application ID (for launching) or context ID (for stopping) to identify the application. </p> <p>To launch an application, use the <code>launch()</code> method of the <code>ApplicationManager</code> interface, and to stop an application, use the <code>kill()</code> method.</p> <p>In the following example, the application to be launched and stopped is an alarm, with the <code>"samplealarm"</code> ID.</p>
<pre class="prettyprint">
/* Launch the application */
}
tizen.application.getAppsContext(onGetAppsContextSuccess);
-</pre>
+</pre>
<p>You can also <a href="#launch">launch an application using the application control</a>.</p> </li>
- <li><p>To retrieve the current application, use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p>
+ <li><p>To retrieve the current application, use the <code>getCurrentApplication()</code> method:</p>
<pre class="prettyprint">
var currApp = tizen.application.getCurrentApplication();
-</pre> </li>
- <li><p>To hide the current application, use the <span style="font-family: Courier New,Courier,monospace">hide()</span> method:</p>
+</pre></li>
+ <li><p>To hide the current application, use the <code>hide()</code> method:</p>
<pre class="prettyprint">
currApp.hide();
-</pre> </li>
- <li><p>To exit the current application, use the <span style="font-family: Courier New,Courier,monospace">exit()</span> method:</p>
+</pre></li>
+ <li><p>To exit the current application, use the <code>exit()</code> method:</p>
<pre class="prettyprint">
currApp.exit();
-</pre> </li>
+</pre></li>
</ol>
<h2 id="launch" name="launch">Launching Applications with the Application Control</h2>
-<p>With the application control, you can send a request to launch other applications based on their functionality using the <
span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) (which can also contain some data).</p>
+<p>With the application control, you can send a request to launch other applications based on their functionality using the <
code>launchAppControl()</code> method of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) (which can also contain some data).</p>
-<p>Any installed application can provide a service which can be identified by the operation name. When other applications request the provided service of the provider application (and optionally passing some data to the service), the provider application is launched and performs a specific operation. The provider application also sends back a response to the request with an <
span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications) (which can also contain some data).</p>
+<p>Any installed application can provide a service which can be identified by the operation name. When other applications request the provided service of the provider application (and optionally passing some data to the service), the provider application is launched and performs a specific operation. The provider application also sends back a response to the request with an <
code>ApplicationControlData</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications) (which can also contain some data).</p>
<p>Learning to use application controls to launch other applications from your application allows you to take advantage of the functionality of other device applications.</p>
<ol>
-<li><p>To use the application control mechanism to pick image files from a list of images, create an <
span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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 <span style="font-family: Courier New,Courier,monospace">null</span>, and the MIME type set as <span style="font-family: Courier New,Courier,monospace">image/*</span>.</p>
+<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/*");
-</pre> </li>
+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:
+<li>Define the format of the reply you want to receive from the application control:
<pre class="prettyprint">
var appControlReplyCB =
{
}
}
}
-</pre> </li>
- <li>Call the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method to find a suitable application to select the images:
+</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);
-</pre> </li>
+tizen.application.launchAppControl(appControl, null, function()
+ {
+ console.log("launch appControl succeeded");
+ }, function(e) {/* Error handling */}, appControlReplyCB);
+</pre></li>
</ol>
<h2 id="handle" name="handle">Receiving and Replying to Application Control Requests</h2>
<p>Learning how to handle requests from other applications allows you to create Web applications that can be called from other applications to perform specific actions.</p>
- <p>Web applications can provide a service which can be identified by an operation name. Other applications can request and use the provided service of other applications (and optionally pass some data to the service). The provider application receives the request, performs some actions, and sends the result to the caller application in an <
span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> array (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications).</p>
-
+ <p>Web applications can provide a service which can be identified by an operation name. Other applications can request and use the provided service of other applications (and optionally pass some data to the service). The provider application receives the request, performs some actions, and sends the result to the caller application in an <
code>ApplicationControlData</code> array (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications).</p>
+
<ol>
- <li><p>To enable an application to receive application control requests, open the <a href="../../../../org.tizen.training/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a> in the Tizen Studio and add an operation in the <span style="font-family: Courier New,Courier,monospace">app-control</span> section of the <strong>Tizen</strong> tab.</p>
- <p>In this example, the name of the operation is <
span style="font-family: Courier New,Courier,monospace">http://example.tizen.org/operation/get_time</span>. The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains a <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_appcontrol"><tizen:app-control></a> element:</p>
-
+ <li><p>To enable an application to receive application control requests, open the <a href="../../../../org.tizen.training/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a> in the Tizen Studio and add an operation in the <code>app-control</code> section of the <strong>Tizen</strong> tab.</p>
+ <p>In this example, the name of the operation is <
code>http://example.tizen.org/operation/get_time</code>. The <code>config.xml</code> file contains a <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_appcontrol"><tizen:app-control></a> element:</p>
+
<pre class="prettyprint lang-xml">
<tizen:app-control>
<tizen:src name="index.html"/>
</pre>
<p>For more information, see <a href="#exporting">Application Control Export</a>.</p>
</li>
- <li><p>To retrieve an object of the <
span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications), use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) and the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> 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>
+ <li><p>To retrieve an object of the <
code>RequestedApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications), use the <code>getCurrentApplication()</code> method of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) and the <code>getRequestedAppControl()</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">
var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
if (reqAppControl && reqAppControl.callerAppId)
{
- console.log("Requester AppID: " + reqAppControl.callerAppId + "\nwith operation: " + reqAppControl.appControl.operation);
+ 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 <span style="font-family: Courier New,Courier,monospace">replyResult()</span> method of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface:</p>
+ <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
{
reqAppControl.replyResult([data]);
}
</pre></li>
+</ol>
- </ol>
+<p>If the provider application is not already running when the application control request is made, it is automatically launched. If the application control <a href="../messaging/push_w.htm#HandlingWhenLaunched">request arrives from the push service</a>, you can use the <code>appControl</code> object of the <code>RequestedApplicationControl</code> interface in the launched application to recognize the launch reason:</p>
+<ul>
+<li>If the application is launched because a push notification with the <code>LAUNCH</code> option has arrived, the <code>http://tizen.org/appcontrol/data/push/launch_type</code> data key of the <code>appControl</code> object is set to <code>notification</code>.</li>
+<li>If the push registration state has changed, the data key is set to <code>registration_change</code>.</li>
+</ul>
+
+<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))
+ }
+ }
+}
+</pre>
<h2 id="broadcast_event" name="broadcast_event">Broadcasting and Listening for Events</h2>
<p>To manage event broadcasting:</p>
-<ul><li>You can broadcast an event with the <span style="font-family: Courier New,Courier,monospace">broadcastEvent()</span> or <span style="font-family: Courier New,Courier,monospace">broadcastTrustedEvent()</span> method.</li>
-<li>You can receive event data from other applications with the <span style="font-family: Courier New,Courier,monospace">addEventListener()</span> method.</li>
-<li>You can stop receiving event data from other applications with the <span style="font-family: Courier New,Courier,monospace">removeEventListener()</span> method.</li></ul>
+<ul><li>You can broadcast an event with the <code>broadcastEvent()</code> or <code>broadcastTrustedEvent()</code> method.</li>
+<li>You can receive event data from other applications with the <code>addEventListener()</code> method.</li>
+<li>You can stop receiving event data from other applications with the <code>removeEventListener()</code> method.</li></ul>
<p>Learning how to broadcast and listen for events allows you to create Web applications that can send and receive data between each other:</p>
<ul>
<li>The first application can broadcast an event.
-<p>To broadcast events, use the <span style="font-family: Courier New,Courier,monospace">broadcastEvent()</span> method:</p>
+<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"};
app.broadcastEvent(appEvent, data);
</pre>
-<p>Web applications can also broadcast trusted events for trusted listeners with the same certificate as the sender application. To broadcast trusted events, use the <span style="font-family: Courier New,Courier,monospace">broadcastTrustedEvent()</span> method:</p>
+<p>Web applications can also broadcast trusted events for trusted listeners with the same certificate as the sender application. To broadcast trusted events, use the <code>broadcastTrustedEvent()</code> method:</p>
<pre class="prettyprint">
app.broadcastTrustedEvent(appEvent, data);
</pre>
</li>
<li>The second application can listen for the first application and receive data.
-<p>To receive data from the first application, use the <span style="font-family: Courier New,Courier,monospace">addEventListener()</span> method with the sender application ID and event name:</p>
+<p>To receive data from the first application, use the <code>addEventListener()</code> method with the sender application ID and event name:</p>
<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 <span style="font-family: Courier New,Courier,monospace">removeEventListener()</span> method with the proper <span style="font-family: Courier New,Courier,monospace">watchId</span>:</p>
+<p>To stop receiving data from the first application, use the <code>removeEventListener()</code> method with the proper <code>watchId</code>:</p>
<pre class="prettyprint">
app.removeEventListener(watchId);
</pre>
<h2 id="background_category" name="background_category">Background Execution</h2>
-<p>When a Web application becomes invisible (moves to the background), it is suspended. Before Tizen 2.4, to continue to execute the application on the background, you had to set the <
span style="font-family: Courier New,Courier,monospace">background-support</span> attribute of the <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span> element to <span style="font-family: Courier New,Courier,monospace">enable</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications).</p>
+<p>When a Web application becomes invisible (moves to the background), it is suspended. Before Tizen 2.4, to continue to execute the application on the background, you had to set the <
code>background-support</code> attribute of the <code><tizen:setting></code> element to <code>enable</code> in the <code>config.xml</code> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications).</p>
<p>Since Tizen 2.4, the background process management policy has been changed. The system does not allow applications to run on the background except when they are explicitly declared to do so by having a specific background category. For more information on the available background categories, see the <a href="../../native/app_management/efl_ui_app_n.htm#allow_bg_table">Allowed background application policy</a> table.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To guarantee that a Web application runs on the background, at least one <span style="font-family: Courier New,Courier,monospace">background-category</span> element must be declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_bg_category">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_bg_category">wearable</a> applications), and the <span style="font-family: Courier New,Courier,monospace">background-support</span> attribute of the <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span> element must be set to <span style="font-family: Courier New,Courier,monospace">enable</span>.</td>
- </tr>
- </tbody>
- </table>
-
-<p>The following <span style="font-family: Courier New,Courier,monospace">config.xml</span> file example shows how an application can be configured to run on the background:</p>
+<div class="note">
+ <strong>Note</strong>
+ To guarantee that a Web application runs on the background, at least one <code>background-category</code> element must be declared in the <code>config.xml</code> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_bg_category">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_bg_category">wearable</a> applications), and the <code>background-support</code> attribute of the <code><tizen:setting></code> element must be set to <code>enable</code>.
+</div>
+
+<p>The following <code>config.xml</code> file example shows how an application can be configured to run on the background:</p>
<pre class="prettyprint">
<?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
id="http://yourdomain/BackgroundCategory" version="1.0.0" viewmodes="maximized">
<tizen:application id="background.category" package="background" required_version="2.4"/>
<content src="index.html"/>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Application Groups</title>
- </head>
+ <title>Application Groups</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="#group">Group Behavior</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#mode">Controlling the Launch Mode</a></li>
-
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<h1>Application Groups</h1>
<p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
<p>The main application group features include:</p>
<ul>
<li>Grouping applications in manageable entities
<p>Application grouping has an effect on what happens when the user hides or exits an application. When applications <a href="#group">belong to the same group</a>, they are hidden and exited together.</p></li>
<li>Controlling the launch mode
<p>The launch mode determines how a newly launched application is grouped. You can <a href="#mode">control the launch mode</a> by:</p>
-<ul><li>Setting it in the application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</li>
+<ul><li>Setting it in the application <code>config.xml</code> file.</li>
<li>Defining it in an application control that is used to launch the application.</li></ul>
</li>
<p>Applications in the same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the <strong>Home</strong> key, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
<p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
- <p class="figure">Figure: Group behavior when using the Home key</p>
-<p align="center"><img alt="Group behavior when using the Home key" src="../../images/app_group_behavior.png" /></p>
+ <p align="center"><strong>Figure: Group behavior when using the Home key</strong></p>
+<p align="center"><img alt="Group behavior when using the Home key" src="../../images/app_group_behavior.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
</pre>
<h2 id="mode" name="mode">Controlling the Launch Mode</h2>
- <p>You can set the application launch mode in the <
span style="font-family: Courier New,Courier,monospace">config.xml</span> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_application">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_application">wearable</a> applications) with one of the following values:</p>
+ <p>You can set the application launch mode in the <
code>config.xml</code> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_application">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_application">wearable</a> applications) with one of the following values:</p>
<ul>
- <li>The <span style="font-family: Courier New,Courier,monospace">SINGLE</span> launch mode means that the application is launched as a main application (in a new group).</li>
- <li>The <span style="font-family: Courier New,Courier,monospace">GROUP</span> launch mode means that the application can be launched as a sub application
+ <li>The <code>SINGLE</code> launch mode means that the application is launched as a main application (in a new group).</li>
+ <li>The <code>GROUP</code> launch mode means that the application can be launched as a sub application
belonging to the same group as the caller application which is causing the application to be launched.</li>
</ul>
- <p>Additionally, if the launch mode is not set to <span style="font-family: Courier New,Courier,monospace">SINGLE</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and the application is launched by the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href ="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href ="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href ="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) with the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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), the <span style="font-family: Courier New,Courier,monospace">launchMode</span> property of this object <a href="">overrides the launch mode of the called application</a>. If the launch mode in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file is set to <span style="font-family: Courier New,Courier,monospace">SINGLE</span>, the value of the <span style="font-family: Courier New,Courier,monospace">ApplicationControl.launchMode</span> property is ignored and the sub application is always called in the <span style="font-family: Courier New,Courier,monospace">SINGLE</span> mode.</p>
-<p>To launch an application in a <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode:</p>
+ <p>Additionally, if the launch mode is not set to <code>SINGLE</code> in the <code>config.xml</code> file and the application is launched by the <code>launchAppControl()</code> method of the <code>ApplicationManager</code> interface (in <a href ="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href ="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href ="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) with the <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), the <code>launchMode</code> property of this object <a href="">overrides the launch mode of the called application</a>. If the launch mode in the <code>config.xml</code> file is set to <code>SINGLE</code>, the value of the <code>ApplicationControl.launchMode</code> property is ignored and the sub application is always called in the <code>SINGLE</code> mode.</p>
+<p>To launch an application in a <code>GROUP</code> mode:</p>
<ol>
-<li>Define the application control object with the <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode:
+<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 <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> method:
+<li>Define an array with callbacks for the <code>tizen.application.launchAppControl()</code> method:
<pre class="prettyprint">
-var appControlReplyCallback =
+var appControlReplyCallback =
{
- /* Callee sent a reply */
- onsuccess: function(data)
+ /* Callee sent a reply */
+ onsuccess: function(data)
{
console.log("onsuccess");
},
/* Callee returned failure */
- onfailure: function()
+ onfailure: function()
{
console.log("onfailure");
}
</pre>
</li>
-<li>Launch the application in the <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode with the previously defined application control object:
+<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>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Application Icons</title>
- </head>
+ <title>Application Icons</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="#receive">Receiving Notifications on Badge Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
- <ul class="toc">
+ <ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">Badge API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">Badge API for Wearable Web</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">Badge API for Wearable Web</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Icons</h1>
<p>When an application has new information requiring user attention, such as missed calls or new messages, it has a number in the upper right hand corner of the application icon. This number is called a badge. For example, when a new message is received, the badge appears on the application icon. The badge remains until the user reads the message.</p>
-
+
<p><p>This feature is supported in mobile and wearable applications only.</p></p>
-
- <p class="figure">Figure: Badge</p>
+
+ <p align="center"><strong>Figure: Badge</strong></p>
<p align="center"><img alt="Badge" src="../../images/badge.png" /></p>
<p>The main features of the Badge API include:</p>
<ul>
<li>Listening to badge changes
<p>You can <a href="#receive">receive notifications on badge changes</a> to display and react to badges.</p></li>
</ul>
-
+
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Badge API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Badge API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/notification"/>
</pre>
<p>Getting and setting the badge number is a useful UI management skill:</p>
<ol>
-<li><p>Retrieve application identifier using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p>
+<li><p>Retrieve application identifier using the <code>getCurrentApplication()</code> method:</p>
<pre class="prettyprint">
-var appId = tizen.application.getCurrentApplication().appInfo.id;</pre> </li>
-<li><p>To check the badge number of the current application, use the <span style="font-family: Courier New,Courier,monospace">getBadgeCount()</span> method of the <span style="font-family: Courier New,Courier,monospace">BadgeManager</span> 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>
+var appId = tizen.application.getCurrentApplication().appInfo.id;
+</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);
-</pre> </li>
-<li><p>To change the badge of the current application, use the <span style="font-family: Courier New,Courier,monospace">setBadgeCount()</span> method:</p>
+</pre></li>
+<li><p>To change the badge of the current application, use the <code>setBadgeCount()</code> method:</p>
<pre class="prettyprint">
var appId = tizen.application.getCurrentApplication().appInfo.id;
-tizen.badge.setBadgeCount(appId, 82);</pre> </li>
-<li><p>To hide the badge of the current application, use the <span style="font-family: Courier New,Courier,monospace">setBadgeCount()</span> method to set the number to 0:</p>
+tizen.badge.setBadgeCount(appId, 82);
+</pre></li>
+<li><p>To hide the badge of the current application, use the <code>setBadgeCount()</code> method to set the number to 0:</p>
<pre class="prettyprint">
tizen.badge.setBadgeCount(appId, 0);
</pre>
</li>
</ol>
-
+
<h2 id="receive" name="receive">Receiving Notifications on Badge Changes</h2>
<p>Registering a listener for badge count changes to react to new badges and display your badges is a useful UI management skill:</p>
<ol>
-<li><p>To register an event handler for receiving a notification about badge changes, use the <
span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BadgeManager</span> 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>
+<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)
{
tizen.badge.addChangeListener(["BDb5tZJe47.TestSample"], watcher);
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">BDb5tZJe47.TestSample</span> is the application ID of the application to monitor. The first argument of the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> 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 <span style="font-family: Courier New,Courier,monospace">removeChangeListener ()</span> method:</p>
+<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"]);</pre> </li>
+tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Application Information and Controls</title>
- </head>
+ <title>Application Information and Controls</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
<li>Tizen 3.0 and Higher for TV</li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Information and Controls</h1>
-
-<p>The application information and control features allow you to manage application widgets, and use application controls to take advantage of other application's features.</p>
-
- <p>You can use the following application information and control features in your Web applications:</p>
+
+<p>The application information and control features allow you to manage application widgets, and use application controls to take advantage of other application's features.</p>
+
+ <p>You can use the following application information and control features in your Web applications:</p>
<ul>
<li><a href="app_controls_w.htm">Application Controls</a>
<p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Applications</title>
+ <title>Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">Application API for TV Web</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Applications</h1>
-
-<p>The <a href="../../../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a> enables you to create Web applications for mobile and wearable devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device. A <a href="../../../../org.tizen.training/html/web/process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p>
-
+ <h1>Applications</h1>
+
+<p>The <a href="../../../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a> enables you to create Web applications for mobile and wearable devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device. A <a href="../../../../org.tizen.training/html/web/process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p>
+
<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
-
<h2 id="app_models">Web Application Models</h2>
-<p>The application models support a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.</p>
+<p>The application models support a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.</p>
<p>Tizen provides various application models to allow you to create applications targeted for specific tasks:</p>
<ul>
<li>UI Application
<p>The UI application is the most general Tizen application that has a graphical user interface. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging functionality.</p></li>
-
<li><a href="service_app_w.htm">Service Application</a>
<p>The service application is a Tizen Web application without a graphical user interface that runs in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p></li>
-
<li><a href="web_widget_ww.htm">Widget Application</a> <strong>in wearable applications only</strong>
<p>The widget application (or widget) is the specialized application that is useful in providing users with quick view of specific information from the parent application. Also, the widget allows users to access certain features without launching the applications. Combined with their parent application, your widgets can have various features to increase usability of your applications.</p></li>
-
<li>Watch Application <strong>in wearable applications only</strong>
<p>Tizen watch application is one of Tizen Web applications for wearable devices. It can be shown on the idle screen of the wearable device.</p></li>
</ul>
-
- <h2 id="package" name="package">Application Package Manager</h2>
- <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p>
+
+ <h2 id="package" name="package">Application Package Manager</h2>
+ <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p>
<p>The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it. </p>
- <p class="figure">Figure: Application package manager</p>
+ <p align="center"><strong>Figure: Application package manager</strong></p>
<p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p>
-
+
<p>Tizen supports both Web application packages and hybrid application packages, which combine a Web application and 1 or more native service applications. Applications in the same package follow the same installation life-cycle, handled by the application package manager.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>An application control provides functions for launching other applications with a specific operation, URI, MIME type, and extra data. The requesting application can get a result back from the launched application. This topic introduces the common application controls that you can use. </p>
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
<p>All the common application controls are supported in mobile applications, except for the Input Delegator. In Tizen 2.3.2 and higher, only the Map and Input Delegator are supported in wearable applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">It is possible that no application suitable to receive the application control exists. In that case, before you send the launch request, verify that a suitable application exists.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ It is possible that no application suitable to receive the application control exists. In that case, before you send the launch request, verify that a suitable application exists.
+</div>
<h2 id="browser" name="browser">Browser in Mobile Applications</h2>
<h3>Performing a Web Search</h3>
-<p>To find what you are looking for on the Web, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/search</span> operation.</p>
-<p class="figure">Figure: Performing a Web search</p>
+<p>To find what you are looking for on the Web, use the <code>http://tizen.org/appcontrol/operation/search</code> operation.</p>
+<p align="center"><strong>Figure: Performing a Web search</strong></p>
<p align="center"><img src="../../images/common_appcontrol_browser.png" alt="Performing a Web search" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/search</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/search</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The text to search. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
</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",
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>
-<p>To open a web page, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation and specify the Web URL in the URI.</p>
+<p>To open a web page, use the <code>http://tizen.org/appcontrol/operation/view</code> operation and specify the Web URL in the URI.</p>
-<p class="figure">Figure: Loading a Web page</p>
+<p align="center"><strong>Figure: Loading a Web page</strong></p>
<p align="center"><img src="../../images/common_appcontrol_browser2.png" alt="Loading a Web page" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">javascript:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
+ <li><code>javascript:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">image/svg+xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/html</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/xhtml+xml</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>
+ <li><code>image/svg+xml</code></li>
+ <li><code>text/html</code></li>
+ <li><code>application/xml</code></li>
+ <li><code>application/xhtml+xml</code></li>
+ <li><code>text/plain</code></li>
</ul>
<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);
+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);
+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>
<h3>Adding a Calendar Event</h3>
-<p>To add a new event to the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To add a new event to the user's calendar, use the <code>http://tizen.org/appcontrol/operation/add</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Adding a calendar event</p>
+<p align="center"><strong>Figure: Adding a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar.png" alt="Adding a calendar event" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/add</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/all_day</span></td>
- <td>The string to indicate if an event applies to all day. The available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/all_day</code></td>
+ <td>The string to indicate if an event applies to all day. The available values are <code>true</code> or <code>false</code>. This key must be passed as a string.</td>
<td rowspan="5">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/start_time</span></td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/start_time</code></td>
<td>The start time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/end_time</span></td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/end_time</code></td>
<td>The end time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/title</span></td>
+ <td><code>http://tizen.org/appcontrol/data/title</code></td>
<td>The title of the event. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The description of the event. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string. </td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<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 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");
+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);
+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>
-<p>To edit an existing event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To edit an existing event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/edit</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Editing a calendar event</p>
+<p align="center"><strong>Figure: Editing a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar4.png" alt="Editing a calendar event" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/edit</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/all_day</span></td>
- <td>The string to indicate if an event applies to all day. The available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/all_day</code></td>
+ <td>The string to indicate if an event applies to all day. The available values are <code>true</code> or <code>false</code>. This key must be passed as a string.</td>
<td rowspan="5">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/start_time</span></td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/start_time</code></td>
<td>The start time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/calendar/end_time</span></td>
+ <td><code>http://tizen.org/appcontrol/data/calendar/end_time</code></td>
<td>The end time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/title</span></td>
+ <td><code>http://tizen.org/appcontrol/data/title</code></td>
<td>The title of event. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The description of event. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</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 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");
+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);
+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>
-<p>To display a specified event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation. To specify various event details, refer to the extras defined below.</p>
-<p>To display a specified event from a vcalendar file, use the <span style="font-family: Courier New,Courier,monospace">file:</span> URI. To display a specified event using the calendar ID, use the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type with <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span>.</p>
+<p>To display a specified event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/view</code> operation. To specify various event details, refer to the extras defined below.</p>
+<p>To display a specified event from a vcalendar file, use the <code>file:</code> URI. To display a specified event using the calendar ID, use the <code>application/vnd.tizen.calendar</code> MIME type with <code>http://tizen.org/appcontrol/data/id</code>.</p>
-<p class="figure">Figure: Viewing a calendar event</p>
+<p align="center"><strong>Figure: Viewing a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar2.png" alt="Viewing a calendar event" /></p>
<h4>Operation</h4>
-<p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+<p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI</h4>
-<p><span style="font-family: Courier New,Courier,monospace">file:<path></span></p>
-<p>For example: <span style="font-family: Courier New,Courier,monospace">file://<media storage path>/file.vcs</span></p>
+<p><code>file:<path></code></p>
+<p>For example: <code>file://<media storage path>/file.vcs</code></p>
<h4>MIME Type</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span>
- <p>In case of viewing an event by an event ID, the event ID (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type must be specified.</p>
+ <li><code>application/vnd.tizen.calendar</code>
+ <p>In case of viewing an event by an event ID, the event ID (ID in the <code>_calendar_event</code> view) extra data and <code>application/vnd.tizen.calendar</code> MIME type must be specified.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-vcalendar</span> (for vcalendar file)</li>
- <li><span style="font-family: Courier New,Courier,monospace">text/vcalendar</span> (for vcalendar file)</li>
+ <li><code>text/x-vcalendar</code> (for vcalendar file)</li>
+ <li><code>text/vcalendar</code> (for vcalendar file)</li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
- <td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span>.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view). This key must be passed as a string.</td>
+ <td>This key is mandatory when the MIME type is set to <code>application/vnd.tizen.calendar</code>.</td>
</tr>
</tbody>
</table>
<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");
+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);
+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 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);
+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);
+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>
-<p>To select a specified event in the user's calendar, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
-<p class="figure">Figure: Selecting a calendar event</p>
+<p>To select a specified event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Selecting a calendar event</strong></p>
<p align="center"><img src="../../images/common_appcontrol_calendar3.png" alt="Selecting a calendar event" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/pick</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+ <p><code>application/vnd.tizen.calendar</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> (default) and <span style="font-family: Courier New,Courier,monospace">vcs</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> (default) and <code>vcs</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selection_mode</span></td>
- <td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/selection_mode</code></td>
+ <td>The selection mode of the PICK operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_count</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_count</code></td>
<td>The total number of events to be returned. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> and <span style="font-family: Courier New,Courier,monospace">vcs</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> and <code>vcs</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
- <td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) or the paths of the vcs files. This key must be passed as an array.</td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
+ <td>The database record ID of the event (ID in the <code>_calendar_event</code> view) or the paths of the vcs files. This key must be passed as an array.</td>
</tr>
</tbody>
</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 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");
+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);
+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>
<h3>Making a Phone Call</h3>
-<p>To directly initiate a phone call, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span> operation with a phone number URI scheme.</p>
-<p class="figure">Figure: Making a phone call</p>
+<p>To directly initiate a phone call, use the <code>http://tizen.org/appcontrol/operation/call</code> operation with a phone number URI scheme.</p>
+<p align="center"><strong>Figure: Making a phone call</strong></p>
<p align="center"><img src="../../images/common_appcontrol_call1.png" alt="Making a phone call" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span></p>
- <p>To request this operation, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/call</span> privilege is needed.</p>
+ <p><code>http://tizen.org/appcontrol/operation/call</code></p>
+ <p>To request this operation, the <code>http://tizen.org/privilege/call</code> privilege is needed.</p>
<h4>URI (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">tel:<number></span></p>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+ <p><code>tel:<number></code></p>
+ <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);
+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);
+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>Launching a Call Application with a Phone Number</h3>
-<p>To open a call application and display a predefined a phone number, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span> action with a phone number URI scheme. When the call application opens, it displays the phone number, but the user must press the <strong>Call</strong> button to initiate the phone call.</p>
-<p class="figure">Figure: Launching a Call application</p>
+<p>To open a call application and display a predefined a phone number, use the <code>http://tizen.org/appcontrol/operation/dial</code> action with a phone number URI scheme. When the call application opens, it displays the phone number, but the user must press the <strong>Call</strong> button to initiate the phone call.</p>
+<p align="center"><strong>Figure: Launching a Call application</strong></p>
<p align="center"><img src="../../images/common_appcontrol_call2.png" alt="Launching a Call application" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/dial</code></p>
<h4>URI (Optional)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">tel:<number></span></p>
+ <p><code>tel:<number></code></p>
<p>If empty, a dialer UI without a number is presented.</p>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+ <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);
+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);
+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="camera" name="camera">Camera in Mobile Applications</h2>
<h3>Capturing a Picture or Video</h3>
-<p>To take a picture or record video, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span> operation with the MIME type. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Taking pictures (left) and recording videos (right)</p>
+<p>To take a picture or record video, use the <code>http://tizen.org/appcontrol/operation/create_content</code> operation with the MIME type. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Taking pictures (left) and recording videos (right)</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera.png" alt="Taking picture" /> <img src="../../images/common_appcontrol_camera2.png" alt="Recording video" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/create_content</code></p>
<h4>MIME Type (Mandatory)</h4>
<ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">image/*</span></p></li>
+ <p><code>image/*</code></p></li>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">video/*</span></p></li>
+ <p><code>video/*</code></p></li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The path of the created image or video file. This key must be passed as a string.</td>
</tr>
</tbody>
</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);
+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);
+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>
-<p>To capture a still image, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/image_capture</span> operation. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Taking a picture</p>
+<p>To capture a still image, use the <code>http://tizen.org/appcontrol/operation/image_capture</code> operation. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Taking a picture</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera.png" alt="Taking picture" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/image_capture</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/image_capture</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The path of the created file. This key must be passed as a string.</td>
</tr>
</tbody>
</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);
+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);
+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>
-<p>To record a video, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/video_capture</span> operation. To specify an option, refer to the extras defined below.</p>
-<p class="figure">Figure: Record a video</p>
+<p>To record a video, use the <code>http://tizen.org/appcontrol/operation/video_capture</code> operation. To specify an option, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Record a video</strong></p>
<p align="center"><img src="../../images/common_appcontrol_camera2.png" alt="Recording video" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/video_capture</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/video_capture</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The path of the created file. This key must be passed as a string.</td>
</tr>
</tbody>
</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);
+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);
+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>
<h3>Adding a Contact</h3>
-<p>To add a new contact, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Adding a contact</p>
+<p>To add a new contact, use the <code>http://tizen.org/appcontrol/operation/add</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p align="center"><strong>Figure: Adding a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_add.png" alt="Adding a contact" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/add</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/add</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/phone</span></td>
+ <td><code>http://tizen.org/appcontrol/data/phone</code></td>
<td>The phone number. This key must be passed as a string.</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/email</span></td>
+ <td><code>http://tizen.org/appcontrol/data/email</code></td>
<td>The email address. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/url</span></td>
+ <td><code>http://tizen.org/appcontrol/data/url</code></td>
<td>The homepage URL. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/name</span></td>
+ <td><code>http://tizen.org/appcontrol/data/name</code></td>
<td>The contact's name. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the added person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the added person (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</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,
+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);
+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 Contact</h3>
-<p>To edit a known contact, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To edit a known contact, use the <code>http://tizen.org/appcontrol/operation/edit</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Editing a contact</p>
+<p align="center"><strong>Figure: Editing a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_edit.png" alt="Editing a contact" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/edit</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/edit</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the person to be edited (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/phone</span></td>
+ <td><code>http://tizen.org/appcontrol/data/phone</code></td>
<td>The phone number that is added to the contact. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/email</span></td>
+ <td><code>http://tizen.org/appcontrol/data/email</code></td>
<td>The email address that is added to the contact. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/url</span></td>
+ <td><code>http://tizen.org/appcontrol/data/url</code></td>
<td>The homepage URL that is added to the contact. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the person to be edited (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
</tr>
</tbody>
</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 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);
+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>
-<p>To display a specified contact in the contact database, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation. To specify various contact details, refer to the extras defined below.</p>
-<p>To display a specified contact from a vcard file, use the <span style="font-family: Courier New,Courier,monospace">file:</span> URI. To display a specified contact with the person ID, use the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type with <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span>.</p>
+<p>To display a specified contact in the contact database, use the <code>http://tizen.org/appcontrol/operation/view</code> operation. To specify various contact details, refer to the extras defined below.</p>
+<p>To display a specified contact from a vcard file, use the <code>file:</code> URI. To display a specified contact with the person ID, use the <code>application/vnd.tizen.contact</code> MIME type with <code>http://tizen.org/appcontrol/data/id</code>.</p>
-<p class="figure">Figure: Viewing a contact based on ID (left) and from a vcard file (right)</p>
+<p align="center"><strong>Figure: Viewing a contact based on ID (left) and from a vcard file (right)</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_view1.png" alt="Viewing a contact" /> <img src="../../images/common_appcontrol_contact_view2.png" alt="Viewing a contact" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI</h4>
- <p><span style="font-family: Courier New,Courier,monospace">file:<path></span></p>
+ <p><code>file:<path></code></p>
<h4>MIME Type</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span>
- <p>In case of viewing a contact by a person ID, the person ID (ID in the <span style="font-family: Courier New,Courier,monospace">_contact_person</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type must be specified.</p>
+ <li><code>application/vnd.tizen.contact</code>
+ <p>In case of viewing a contact by a person ID, the person ID (ID in the <code>_contact_person</code> view) extra data and <code>application/vnd.tizen.contact</code> MIME type must be specified.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">text/vcard</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-vcard</span></li>
+ <li><code>text/vcard</code></li>
+ <li><code>text/x-vcard</code></li>
</ul>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the edited person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
- <td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span>.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the edited person (ID in the <code>_contacts_person</code> view). This key must be passed as a string.</td>
+ <td>This key is mandatory when the MIME type is set to <code>application/vnd.tizen.contact</code>.</td>
</tr>
</tbody>
</table>
<pre class="prettyprint">
function launchContactDetails(personId)
{
- var appControlData = [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["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");
+ 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);
+ 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");
+ 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);
+ 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 Contact</h3>
-<p>To select a specified contact in the user's contacts, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To select a specified contact in the user's contacts, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
-<p class="figure">Figure: Selecting a contact</p>
+<p align="center"><strong>Figure: Selecting a contact</strong></p>
<p align="center"><img src="../../images/common_appcontrol_contact_select.png" alt="Selecting a contact" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/pick</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selection_mode</span></td>
- <td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/selection_mode</code></td>
+ <td>The selection mode of the PICK operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> (default), <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code> (default), <code>phone</code>, <code>email</code>, and <code>vcf</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_count</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_count</code></td>
<td>The total number of events to be returned. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span>, <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of items to be delivered. The available values are <code>id</code>, <code>phone</code>, <code>email</code>, and <code>vcf</code>. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The extra field to get the return information. The content of this key depends on its type:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">id</span> – The database record ID of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">phone</span> – The database record ID of the number of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_number</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">email</span> – The database record ID of the email of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_email</span> view).</li>
- <li><span style="font-family: Courier New,Courier,monospace">vcf</span> – The path to the vCard file.</li>
+ <li><code>id</code>: The database record ID of the selected person (ID in the <code>_contacts_person</code> view).</li>
+ <li><code>phone</code>: The database record ID of the number of the selected person (ID in the <code>_contacts_number</code> view).</li>
+ <li><code>email</code>: The database record ID of the email of the selected person (ID in the <code>_contacts_email</code> view).</li>
+ <li><code>vcf</code>: The path to the vCard file.</li>
</ul>
<p>This key must be passed as an array.</p>
</td>
<pre class="prettyprint">
function launchContactPick(selectionMode, dataType)
{
- var appControlReplyCallback =
+ var appControlReplyCallback =
{
- onsuccess: function(data)
+ onsuccess: function(data)
{
- for (var i = 0; i < data.length; i++)
+ for (var i = 0; i < data.length; i++)
{
if (data[i].key == "http://tizen.org/appcontrol/data/type")
{
}
}
},
- onfailure: function()
+ 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 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);
+ 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>
<h3>Sharing a Contact</h3>
-<p>To share a single contact, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To share a single contact, use the <code>http://tizen.org/appcontrol/operation/share</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/share</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record ID of the person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view) when <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span> is set to <span style="font-family: Courier New,Courier,monospace">person</span>.
- <p>The database record ID of my profile (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_my_profile</span> view) when <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span> is set to <span style="font-family: Courier New,Courier,monospace">my_profile</span>. This key must be passed as a string.</p></td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record ID of the person (ID in the <code>_contacts_person</code> view) when <code>http://tizen.org/appcontrol/data/type</code> is set to <code>person</code>.
+ <p>The database record ID of my profile (ID in the <code>_contacts_my_profile</code> view) when <code>http://tizen.org/appcontrol/data/type</code> is set to <code>my_profile</code>. This key must be passed as a string.</p></td>
<td rowspan="2">This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of contact. The available values are <span style="font-family: Courier New,Courier,monospace">my_profile</span> and <span style="font-family: Courier New,Courier,monospace">person</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of contact. The available values are <code>my_profile</code> and <code>person</code>. This key must be passed as a string.</td>
</tr>
</tbody>
</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 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);
+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>
-<p>To share a set of contacts, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To share a set of contacts, use the <code>http://tizen.org/appcontrol/operation/multi_share</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/multi_share</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+ <p><code>application/vnd.tizen.contact</code></p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/id</span></td>
- <td>The database record IDs of the person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as an array.</td>
+ <td><code>http://tizen.org/appcontrol/data/id</code></td>
+ <td>The database record IDs of the person (ID in the <code>_contacts_person</code> view). This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
</tbody>
</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 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");
+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);
+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>
<h3>Composing an Email</h3>
-<p>To compose an email with optional recipients, subject, and body text, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span> operation.</p>
+<p>To compose an email with optional recipients, subject, and body text, use the <code>http://tizen.org/appcontrol/operation/compose</code> operation.</p>
-<p class="figure">Figure: Composing an email</p>
+<p align="center"><strong>Figure: Composing an email</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email.png" alt="Composing an email" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/compose</code></p>
<h4>URI (Mandatory)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:<email address></span></p>
-<p>If the <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is empty, it filters out all but email applications in the system, and you can use the extra data only to pass optional parameters.</p>
+<p><code>mailto:<email address></code></p>
+<p>If the <code>mailto:</code> field is empty, it filters out all but email applications in the system, and you can use the extra data only to pass optional parameters.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/to</span></td>
+ <td><code>http://tizen.org/appcontrol/data/to</code></td>
<td>The email address of the main recipients. This key must be passed as an array.</td>
<td rowspan="6">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/cc</span></td>
+ <td><code>http://tizen.org/appcontrol/data/cc</code></td>
<td>The email address of the recipients that must be carbon copied. This key must be passed as an array.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/bcc</span></td>
+ <td><code>http://tizen.org/appcontrol/data/bcc</code></td>
<td>The email address of the recipients that must be blind carbon copied. This key must be passed as an array.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/subject</span></td>
+ <td><code>http://tizen.org/appcontrol/data/subject</code></td>
<td>The subject of an email message. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The body of the email to be sent. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
</tr>
</tbody>
<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>
-<p>To share a single file of any MIME type in an email message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> operation.</p>
+<p>To share a single file of any MIME type in an email message, use the <code>http://tizen.org/appcontrol/operation/share</code> operation.</p>
-<p class="figure">Figure: Sharing a single file</p>
+<p align="center"><strong>Figure: Sharing a single file</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email2.png" alt="Sharing a single file" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/share</code></p>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mailto:</span>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. This can be used to filter out all but email applications available in the system.</p></li>
+ <ul><li><code>file:<path></code></li>
+ <li><code>mailto:</code>
+<p>Only an empty <code>mailto:</code> field is allowed. This can be used to filter out all but email applications available in the system.</p></li>
</ul>
<h4>MIME Type</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>In case of sharing a single item through <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span> and URI specified with <span style="font-family: Courier New,Courier,monospace">mailto:</span>, the MIME type must be explicitly set. </p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>In case of sharing a single item through <code>http://tizen.org/appcontrol/data/path</code> and URI specified with <code>mailto:</code>, the MIME type must be explicitly set. </p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
- <td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
- <td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto:</span>.</td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
+ <td>When the URI is set to <code>mailto</code>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+ <td>This key is mandatory when the URI is set to <code>mailto:</code>.</td>
</tr>
</tbody>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData = [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
+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");
+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);
+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>
-<p>To share multiple files of any MIME type using an email message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> operation.</p>
+<p>To share multiple files of any MIME type using an email message, use the <code>http://tizen.org/appcontrol/operation/multi_share</code> operation.</p>
-<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><strong>Figure: Sharing multiple items</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email3.png" alt="Sharing multiple items" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/multi_share</code></p>
<h4>URI (Optional)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. This can be used to filter out all but email applications available in the system.</p>
+<p><code>mailto:</code></p>
+<p>Only an empty <code>mailto:</code> field is allowed. This can be used to filter out all but email applications available in the system.</p>
<h4>MIME Type (Mandatory)</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>If you try to share a set of files with different MIME types, use <span style="font-family: Courier New,Courier,monospace"><type>/*</span> or <span style="font-family: Courier New,Courier,monospace">*/*</span>. For example, if you send <span style="font-family: Courier New,Courier,monospace">video/mp4</span> and <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, the MIME type must be <span style="font-family: Courier New,Courier,monospace">*/*</span>.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>If you try to share a set of files with different MIME types, use <code><type>/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
<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 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");
+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);
+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>
-<p>To share any text with an email message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span> operation. You can also define the message subject and a list of file attachments.</p>
+<p>To share any text with an email message, use the <code>http://tizen.org/appcontrol/operation/share_text</code> operation. You can also define the message subject and a list of file attachments.</p>
-<p class="figure">Figure: Sharing text</p>
+<p align="center"><strong>Figure: Sharing text</strong></p>
<p align="center"><img src="../../images/common_appcontrol_email4.png" alt="Sharing text" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/share_text</code></p>
<h4>URI (Mandatory)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. It filters out all but email applications in the system.</p>
+<p><code>mailto:</code></p>
+<p>Only an empty <code>mailto:</code> field is allowed. It filters out all but email applications in the system.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/subject</span></td>
+ <td><code>http://tizen.org/appcontrol/data/subject</code></td>
<td>The subject of an email message. This key must be passed as a string.</td>
<td rowspan="2">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared using an email message. This key must be passed as an array.</td>
</tr>
</tbody>
<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>
<h3>Retrieving a Specific Type of File</h3>
-<p>To select any kind of file from the storage, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation with the corresponding MIME type. To give options for the pick operation, refer to the extras defined below.</p>
+<p>To select any kind of file from the storage, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the corresponding MIME type. To give options for the pick operation, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/pick</code></p>
<h4>MIME Type (Optional)</h4>
<p>*/*</p>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selection_mode</span></td>
- <td>The selection mode of the pick operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/selection_mode</code></td>
+ <td>The selection mode of the pick operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_count</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_count</code></td>
<td>The total number of items to be returned. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
</tr>
<th>Value Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The list of selected file paths. This key must be passed as an array.</td>
</tr>
</tbody>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData = [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["single"])];
+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");
+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);
+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>
-<p>To download a file, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/download</span> operation and specify the URL in the URI.</p>
+<p>To download a file, use the <code>http://tizen.org/appcontrol/operation/download</code> operation and specify the URL in the URI.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/download</span></p>
- <p>To request this operation, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/download</span> privilege is needed since Tizen 2.4.</p>
+ <p><code>http://tizen.org/appcontrol/operation/download</code></p>
+ <p>To request this operation, the <code>http://tizen.org/privilege/download</code> privilege is needed since Tizen 2.4.</p>
<h4>URI</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
</ul>
<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);
+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);
+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="map" name="map">Map</h2>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In wearable applications, this application control is available since Tizen 2.3.2.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ In wearable applications, this application control is available since Tizen 2.3.2.
+</div>
<h3>Showing a Location on a Map</h3>
-<p>To open a map to show a location, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation with an URI. To specify various map details, refer to the extras defined below.</p>
+<p>To open a map to show a location, use the <code>http://tizen.org/appcontrol/operation/view</code> operation with an URI. To specify various map details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">geo:latitude,longitude</span>
- <p>Show the map with 2 values that represent the latitude and longitude. For example: <span style="font-family: Courier New,Courier,monospace">geo:50.1,-50.1</span></p></li>
- <li><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span>
- <p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=Eiffel%20Tower</span></p>
- <p>All strings passed in the <span style="font-family: Courier New,Courier,monospace">geo:</span> URI must be encoded. If only <span style="font-family: Courier New,Courier,monospace">geo:</span> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p></li>
+ <ul><li><code>geo:latitude,longitude</code>
+ <p>Show the map with 2 values that represent the latitude and longitude. For example: <code>geo:50.1,-50.1</code></p></li>
+ <li><code>geo:0,0?q=keyword</code>
+ <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
+ <p>All strings passed in the <code>geo:</code> URI must be encoded. If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p></li>
</ul>
<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);
+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);
+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>
-<p>To pick a location from the map, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation. To specify various map details, refer to the extras defined below.</p>
+<p>To pick a location from the map, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation. To specify various map details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/pick</code></p>
<h4>URI (Mandatory)</h4>
- <p><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span></p>
- <p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=Eiffel%20Tower</span></p>
- <p>All strings passed in the <span style="font-family: Courier New,Courier,monospace">geo:</span> URI must be encoded.</p>
- <p>If only <span style="font-family: Courier New,Courier,monospace">geo:</span> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
+ <p><code>geo:0,0?q=keyword</code></p>
+ <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
+ <p>All strings passed in the <code>geo:</code> URI must be encoded.</p>
+ <p>If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/type</span></td>
- <td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">address</span> (default), <span style="font-family: Courier New,Courier,monospace">image</span>, <span style="font-family: Courier New,Courier,monospace">poi</span>, or <span style="font-family: Courier New,Courier,monospace">all</span>. This key must be passed as a string.</td>
- <td>This key is optional. <strong>The <span style="font-family: Courier New,Courier,monospace">poi</span> value is not supported in Tizen 2.4.</strong></td>
+ <td><code>http://tizen.org/appcontrol/data/type</code></td>
+ <td>The type of items to be delivered. The available values are <code>address</code> (default), <code>image</code>, <code>poi</code>, or <code>all</code>. This key must be passed as a string.</td>
+ <td>This key is optional. <strong>The <code>poi</code> value is not supported in Tizen 2.4.</strong></td>
</tr>
</tbody>
</table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The address of the selected location. This key must be passed as a string.</td>
<td></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/name</span> <strong></strong></td>
+ <td><code>http://tizen.org/appcontrol/data/name</code> <strong></strong></td>
<td>The name of the selected location. This key must be passed as a string.</td>
<td><strong>This key is not supported in Tizen 2.4.</strong></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The file path of the image showing the selected location. This key must be passed as a string.</td>
<td></td>
</tr>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData = [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["poi"])];
+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 appControl =
+ new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+ "geo:0,0?q=Eiffel Tower", null, null, null,
+ "GROUP");
-var appControlReplyCallback =
+var appControlReplyCallback =
{
- onsuccess: function(data)
+ onsuccess: function(data)
{
- for (var i = 0; i < data.length; i++)
+ for (var i = 0; i < data.length; i++)
{
console.log("ret: " + data[i].key);
console.log("result: " + data[i].value[0]);
}
},
- onfailure: function()
+ 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>
<h3>Composing a Message</h3>
-<p>To compose a new message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span> operation. To specify various message details, refer to the extras defined below.</p>
+<p>To compose a new message, use the <code>http://tizen.org/appcontrol/operation/compose</code> operation. To specify various message details, refer to the extras defined below.</p>
-<p class="figure">Figure: Composing a message</p>
+<p align="center"><strong>Figure: Composing a message</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message.png" alt="Composing a message" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/compose</code></p>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">sms:<phone-number></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">sms:+17913331234</span></p></li>
- <li><span style="font-family: Courier New,Courier,monospace">mmsto:<phone-number></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p></li>
+ <ul><li><code>sms:<phone-number></code>
+ <p>For example: <code>sms:+17913331234</code></p></li>
+ <li><code>mmsto:<phone-number></code>
+ <p>For example: <code>mmsto:+17913331234</code></p></li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/to</span></td>
+ <td><code>http://tizen.org/appcontrol/data/to</code></td>
<td>The phone numbers of recipients. This key must be passed as an array.</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/subject</span></td>
+ <td><code>http://tizen.org/appcontrol/data/subject</code></td>
<td>The subject of an MMS message. If this value is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
</tr>
</tbody>
<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 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");
+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);
+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>
-<p>To share a single item using an MMS message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span> operation.</p>
+<p>To share a single item using an MMS message, use the <code>http://tizen.org/appcontrol/operation/share</code> operation.</p>
-<p class="figure">Figure: Sharing a single item</p>
+<p align="center"><strong>Figure: Sharing a single item</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message2.png" alt="Sharing a single item" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/share</code></p>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">mmsto:</span>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span>
- <p>For example: <span style="font-family: Courier New,Courier,monospace">file://<media storage path>/item.jpg</span></p></li>
+ <ul><li><code>mmsto:</code>
+ <p>Only an empty <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p></li>
+ <li><code>file:<path></code>
+ <p>For example: <code>file://<media storage path>/item.jpg</code></p></li>
</ul>
<h4>MIME Type</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>In case of sharing a single item through <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span> and URI specified with <span style="font-family: Courier New,Courier,monospace">mmsto:</span>, the MIME type must be explicitly set.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>In case of sharing a single item through <code>http://tizen.org/appcontrol/data/path</code> and URI specified with <code>mmsto:</code>, the MIME type must be explicitly set.</p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
- <td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
- <td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>.</td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
+ <td>When the URI is set to <code>mmsto</code>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+ <td>This key is mandatory when the URI is set to <code>mmsto</code>.</td>
</tr>
</tbody>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData = [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
+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");
+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);
+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>
-<p>To share multiple items using an MMS message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span> operation.</p>
+<p>To share multiple items using an MMS message, use the <code>http://tizen.org/appcontrol/operation/multi_share</code> operation.</p>
-<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><strong>Figure: Sharing multiple items</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message3.png" alt="Sharing multiple items" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/multi_share</code></p>
<h4>URI (Optional)</h4>
-<p><span style="font-family: Courier New,Courier,monospace">mmsto:</span></p>
- <p>Only an empty <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p>
+<p><code>mmsto:</code></p>
+ <p>Only an empty <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p>
<h4>MIME Type (Mandatory)</h4>
- <p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
- <p>If you try to share a set of files with different MIME types, use <span style="font-family: Courier New,Courier,monospace"><type>/*</span> or <span style="font-family: Courier New,Courier,monospace">*/*</span>. For example, if you send <span style="font-family: Courier New,Courier,monospace">video/mp4</span> and <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, the MIME type must be <span style="font-family: Courier New,Courier,monospace">*/*</span>.</p>
+ <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
+ <p>If you try to share a set of files with different MIME types, use <code><type>/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
<h4>Extra Input</h4>
<table>
<tbody>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
<td>This key is mandatory.</td>
</tr>
<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 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");
+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);
+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>
-<p>To share any text with an SMS or MMS message, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span> operation.</p>
+<p>To share any text with an SMS or MMS message, use the <code>http://tizen.org/appcontrol/operation/share_text</code> operation.</p>
-<p class="figure">Figure: Sharing text</p>
+<p align="center"><strong>Figure: Sharing text</strong></p>
<p align="center"><img src="../../images/common_appcontrol_message4.png" alt="Sharing text" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share_text</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/share_text</code></p>
<h4>URI (Mandatory)</h4>
- <ul><li><span style="font-family: Courier New,Courier,monospace">sms:</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mmsto:</span></li>
+ <ul><li><code>sms:</code></li>
+ <li><code>mmsto:</code></li>
</ul>
-<p>Only an empty <span style="font-family: Courier New,Courier,monospace">sms:</span> or <span style="font-family: Courier New,Courier,monospace">mmsto:</span> field is allowed. This can be used to filter out all but message applications available in the system.</p>
+<p>Only an empty <code>sms:</code> or <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The body of the message to be sent. This key must be passed as a string.</td>
<td>This key is mandatory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/subject</span></td>
+ <td><code>http://tizen.org/appcontrol/data/subject</code></td>
<td>The subject of an MMS message. If it is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
<td rowspan="2">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td>
+ <td><code>http://tizen.org/appcontrol/data/path</code></td>
<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
</tr>
</tbody>
<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>
<h3>Playing an Audio or Video File</h3>
-<p>To play an audio or video file, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation with a URI. To specify various details, refer to the extras defined below.</p>
+<p>To play an audio or video file, use the <code>http://tizen.org/appcontrol/operation/view</code> operation with a URI. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">rtsp:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">rtp:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
+ <li><code>rtsp:<path></code></li>
+ <li><code>rtp:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text/x-iMelody</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.apple.mpegurl</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/x-mpegurl</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/sdp</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/ogg</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/x-smaf</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">application/vnd.smaf</span></li>
+ <li><code>audio/*</code></li>
+ <li><code>video/*</code></li>
+ <li><code>text/x-iMelody</code></li>
+ <li><code>application/vnd.apple.mpegurl</code></li>
+ <li><code>application/x-mpegurl</code></li>
+ <li><code>application/sdp</code></li>
+ <li><code>application/ogg</code></li>
+ <li><code>application/x-smaf</code></li>
+ <li><code>application/vnd.smaf</code></li>
</ul>
<h4>Example Code</h4>
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);
+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>
-<p>To display an image file, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation with a URI. To specify various details, refer to the extras defined below.</p>
+<p>To display an image file, use the <code>http://tizen.org/appcontrol/operation/view</code> operation with a URI. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/view</code></p>
<h4>URI (Mandatory)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">https:<path></span></li>
- <li><span style="font-family: Courier New,Courier,monospace">file:<path></span></li>
+ <li><code>http:<path></code></li>
+ <li><code>https:<path></code></li>
+ <li><code>file:<path></code></li>
</ul>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+ <li><code>image/*</code></li>
</ul>
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);
+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>Retrieving a Media File</h3>
-<p>To retrieve a specific type of media file, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation. To specify various details, refer to the extras defined below.</p>
+<p>To retrieve a specific type of media file, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation. To specify various details, refer to the extras defined below.</p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/pick</code></p>
<h4>MIME Type (Optional)</h4>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+ <li><code>audio/*</code></li>
+ <li><code>image/*</code></li>
+ <li><code>video/*</code></li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selection_mode</span></td>
- <td>The selection mode of the pick operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> (default) and <span style="font-family: Courier New,Courier,monospace">multiple</span>. This key must be passed as a string.</td>
+ <td><code>http://tizen.org/appcontrol/data/selection_mode</code></td>
+ <td>The selection mode of the pick operation. The available values are <code>single</code> (default) and <code>multiple</code>. This key must be passed as a string.</td>
<td rowspan="3">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_count</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_count</code></td>
<td>The total number of items to be returned. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Value Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
- <td>The paths of the selected files. This key must be passed as an array.</td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
+ <td>The paths of the selected files. This key must be passed as an array.</td>
</tr>
</tbody>
</table>
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);
+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>
<h3>Showing System Settings</h3>
-<p>To display various setting menus for, for example, Connections, Devices, and System Information, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting</span> operation.</p>
-<p class="figure">Figure: Showing system settings</p>
+<p>To display various setting menus for, for example, Connections, Devices, and System Information, use the <code>http://tizen.org/appcontrol/operation/setting</code> operation.</p>
+<p align="center"><strong>Figure: Showing system settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_setting.png" alt="Showing system settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
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>
<h3>Showing Bluetooth Settings to Activate Bluetooth</h3>
-<p>To launch the Bluetooth setting application to allow the user to activate or deactivate Bluetooth, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_enable</span> operation.</p>
+<p>To launch the Bluetooth setting application to allow the user to activate or deactivate Bluetooth, use the <code>http://tizen.org/appcontrol/operation/setting/bt_enable</code> operation.</p>
-<p class="figure">Figure: Showing Bluetooth activation settings</p>
+<p align="center"><strong>Figure: Showing Bluetooth activation settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_bluetooth.png" alt="Showing Bluetooth activation settings" /> <img src="../../images/common_appcontrol_system_bluetooth2.png" alt="Showing Bluetooth activation settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_enable</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting/bt_enable</code></p>
<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);
+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);
+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>
-<p>To launch the Bluetooth setting application to allow the user to configure the visibility of the device, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_visibility</span> operation.</p>
+<p>To launch the Bluetooth setting application to allow the user to configure the visibility of the device, use the <code>http://tizen.org/appcontrol/operation/setting/bt_visibility</code> operation.</p>
-<p class="figure">Figure: Showing Bluetooth visibility settings</p>
+<p align="center"><strong>Figure: Showing Bluetooth visibility settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_bluetooth_visibility.png" alt="Showing Bluetooth visibility settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/bt_visibility</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting/bt_visibility</code></p>
<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);
+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);
+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>
<h3>Showing Location Settings</h3>
-<p>To launch the location setting application to allow the user to configure the source of the location information, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/location</span> operation.</p>
-<p>If the location service is not active when an application tries to use the <
span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
-<p class="figure">Figure: Showing location settings</p>
+<p>To launch the location setting application to allow the user to configure the source of the location information, use the <code>http://tizen.org/appcontrol/operation/setting/location</code> operation.</p>
+<p>If the location service is not active when an application tries to use the <
code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
+<p align="center"><strong>Figure: Showing location settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_location.png" alt="Showing location settings" /> <img src="../../images/common_appcontrol_system_location2.png" alt="Showing location settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/location</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting/location</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/location",
- null, null, null, null, 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);
+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>
<h3>Showing NFC Settings</h3>
-<p>To launch the NFC setting application to allow the user to activate or deactivate NFC, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/nfc</span> operation.</p>
-<p class="figure">Figure: Showing NFC settings</p>
+<p>To launch the NFC setting application to allow the user to activate or deactivate NFC, use the <code>http://tizen.org/appcontrol/operation/setting/nfc</code> operation.</p>
+<p align="center"><strong>Figure: Showing NFC settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_nfc.png" alt="Showing NFC settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/nfc</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting/nfc</code></p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+ <td><code>APP_CONTROL_DATA_TYPE</code></td>
<td>The NFC setting menu type to be shown. This key must be passed as a string. The available values are:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">nfc</span> (default): Default setting menu is launched</li>
- <li><span style="font-family: Courier New,Courier,monospace">tap_n_pay</span>: Tap & pay setting menu is launched
+ <li><code>nfc</code> (default): Default setting menu is launched</li>
+ <li><code>tap_n_pay</code>: Tap & pay setting menu is launched
<p>The support for this value depends on the device NFC settings.</p></li>
</ul></td>
<td>This key is optional, and <strong>it is supported since Tizen 3.0</strong>.</td>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc",
- null, null, null, null, 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);
+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>
<h3>Showing Wi-Fi Settings</h3>
-<p>To launch the Wi-Fi setting application to allow the user to activate and configure (or deactivate) Wi-Fi connections, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/wifi</span> operation.</p>
-<p class="figure">Figure: Showing Wi-Fi settings</p>
+<p>To launch the Wi-Fi setting application to allow the user to activate and configure (or deactivate) Wi-Fi connections, use the <code>http://tizen.org/appcontrol/operation/setting/wifi</code> operation.</p>
+<p align="center"><strong>Figure: Showing Wi-Fi settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_wifi.png" alt="Showing Wi-Fi settings" /></p>
<h4>Operation</h4>
- <p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/setting/wifi</span></p>
+ <p><code>http://tizen.org/appcontrol/operation/setting/wifi</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/wifi",
- null, null, null, null, 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);
+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>
<h3>Recording Audio</h3>
-<p>To record audio, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span> operation with the audio MIME type. To give an option for recording audio, refer to the extras defined below.</p>
+<p>To record audio, use the <code>http://tizen.org/appcontrol/operation/create_content</code> operation with the audio MIME type. To give an option for recording audio, refer to the extras defined below.</p>
<h4>Operation</h4>
-<p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></p>
+<p><code>http://tizen.org/appcontrol/operation/create_content</code></p>
<h4>MIME Type (Mandatory)</h4>
- <p>Audio MIME type, such as <span style="font-family: Courier New,Courier,monospace">audio/m4a</span>, <span style="font-family: Courier New,Courier,monospace">audio/ogg</span>, and <span style="font-family: Courier New,Courier,monospace">audio/*</span></p>
+ <p>Audio MIME type, such as <code>audio/m4a</code>, <code>audio/ogg</code>, and <code>audio/*</code></p>
<h4>Extra Input</h4>
<table>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/total_size</span></td>
+ <td><code>http://tizen.org/appcontrol/data/total_size</code></td>
<td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
<td>This key is optional.</td>
</tr>
<th>Value Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td>
+ <td><code>http://tizen.org/appcontrol/data/selected</code></td>
<td>The path of the created audio file. This key must be passed as a string.</td>
</tr>
</tbody>
</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");
+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);
+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 class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In wearable applications, this application control is available since Tizen 2.3.2.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ In wearable applications, this application control is available since Tizen 2.3.2.
+</div>
<h3>Receiving User Input</h3>
-<p>To receive specific type of input from the user, use the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/get_input</span> operation. To give an option for the input delegator, refer to the extras defined below.</p>
+<p>To receive specific type of input from the user, use the <code>http://tizen.org/appcontrol/operation/get_input</code> operation. To give an option for the input delegator, refer to the extras defined below.</p>
-<p class="figure">Figure: Receiving user input</p>
+<p align="center"><strong>Figure: Receiving user input</strong></p>
<p align="center"><img src="../../images/common_appcontrol_inputdelegator.png" alt="Receiving user input" /> <img src="../../images/common_appcontrol_inputdelegator_voice.png" alt="Receiving user input" /></p>
<h4>Operation</h4>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/get_input</span></li>
+<li><code>http://tizen.org/appcontrol/operation/get_input</code></li>
</ul>
<h4>MIME Type (Mandatory)</h4>
<ul>
<li>
- <p><span style="font-family: Courier New,Courier,monospace">text/plain</span></p>
+ <p><code>text/plain</code></p>
</li>
</ul>
<h4>Extra Input</h4>
<th>Note</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/input_type</span></td>
+ <td><code>http://tizen.org/appcontrol/data/input_type</code></td>
<td>The input method type. This key must be passed as a string. The available values are:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">input_voice</span>: Ask for voice input</li>
- <li><span style="font-family: Courier New,Courier,monospace">input_emoticon</span>: Ask for emoticon input</li>
- <li><span style="font-family: Courier New,Courier,monospace">input_keyboard</span>: Ask for keyboard input</li>
+ <li><code>input_voice</code>: Ask for voice input</li>
+ <li><code>input_emoticon</code>: Ask for emoticon input</li>
+ <li><code>input_keyboard</code>: Ask for keyboard input</li>
</ul>
</td>
<td rowspan="4">This key is optional.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/input_default_text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/input_default_text</code></td>
<td>The preformatted text to be used as default input, such as "http://" for Web addresses. This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/input_default_text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/input_default_text</code></td>
<td>The guide text, such as "Input user name". This key must be passed as a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/input_guide_text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/input_guide_text</code></td>
<td>The text to receive an answer result from a smart reply. This key must be passed as a string.</td>
</tr>
</tbody>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/text</span></td>
+ <td><code>http://tizen.org/appcontrol/data/text</code></td>
<td>The result string from the input delegator. This key must be passed as a string.</td>
</tr>
</tbody>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData = new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/input_type", ["input_voice"]);
+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);
+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);
+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>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Data Control</title>
+ <title>Data Control</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html">Data Control API for TV Web</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Data Control</h1>
-
+ <h1>Data Control</h1>
+
<p>Data control allows you to read and modify data stored and provided by another application. The application storing and controlling the data is called a DataControl provider application. The application using the data is called a DataControl consumer application. A single DataControl provider can serve multiple DataControl consumers.</p>
<p>The Data Control API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable applications. All mandatory APIs are supported on the Tizen Emulators.</p>
<ul>
<li>Data storage as key-value pairs
- <p>You can <a href="#map">get, add, update, and remove values assigned to a key</a> using the <
span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#MappedDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#MappedDataControlConsumer">TV</a> applications).</p></li>
+ <p>You can <a href="#map">get, add, update, and remove values assigned to a key</a> using the <
code>MappedDataControlConsumer</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#MappedDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#MappedDataControlConsumer">TV</a> applications).</p></li>
<li>Complex data storage using a SQL-type database and queries
- <p>You can <a href="#sql">select, insert, update, and remove data</a> using the <
span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#SQLDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#SQLDataControlConsumer">TV</a> applications).</p></li>
+ <p>You can <a href="#sql">select, insert, update, and remove data</a> using the <
code>SQLDataControlConsumer</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#SQLDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#SQLDataControlConsumer">TV</a> applications).</p></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Data Control API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Data Control API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/datacontrol.consumer"/>
</pre>
<p>Learning how to manage map-type data allows you to use key-value pairs exposed by a DataControl provider:</p>
<ol>
- <li><p>Retrieve the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#MappedDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#MappedDataControlConsumer">TV</a> applications) using
- the <span style="font-family: Courier New,Courier,monospace">getDataControlConsumer()</span> method of
- the <span style="font-family: Courier New,Courier,monospace">DataControlManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications).
- This object allows accessing the key-value data stored by the DataControl provider.</p>
- <p>You need a running DataControl provider application, which uses the <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</span> provider ID.</p>
+ <li><p>Retrieve the <code>MappedDataControlConsumer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#MappedDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#MappedDataControlConsumer">TV</a> applications) using the <code>getDataControlConsumer()</code> method of the <code>DataControlManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications). This object allows accessing the key-value data stored by the DataControl provider.</p>
+ <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
+try
{
- var globalMappedConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "MAP");
+ 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>
+ <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 class="prettyprint">
var globalReqId = new Date().getTime() % 2e9;
</pre></li>
</pre></li>
<li>To manage key-value pairs:
<ul>
- <li><p>To add a key-value pair, use the <span style="font-family: Courier New,Courier,monospace">addValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span>:</p>
+ <li><p>To add a key-value pair, use the <code>addValue()</code> method of the <code>MappedDataControlConsumer</code>:</p>
<pre class="prettyprint">
-try
+try
{
/* Increase globalReqId for uniqueness */
globalReqId++;
- globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess, onRequestError);
+ globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess,
+ onRequestError);
}
</pre></li>
- <li><p>To retrieve values assigned to a key, use the <span style="font-family: Courier New,Courier,monospace">getValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span>:</p>
+ <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());
}
-try
+try
{
globalReqId++;
- globalMappedConsumer.getValue(globalReqId, "tizen", onGetValueSuccess, onRequestError);
+ globalMappedConsumer.getValue(globalReqId, "tizen", onGetValueSuccess,
+ onRequestError);
}
</pre></li>
- <li><p>To update a value assigned to a key, use the <span style="font-family: Courier New,Courier,monospace">updateValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> interface:</p>
+ <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
+try
{
globalReqId++;
- globalMappedConsumer.updateValue(globalReqId, "tizen", "Foo", "Bar", onRequestSuccess, onRequestError);
+ globalMappedConsumer.updateValue(globalReqId, "tizen", "Foo", "Bar",
+ onRequestSuccess, onRequestError);
}
</pre></li>
- <li><p>To remove a key-value pair, use the <span style="font-family: Courier New,Courier,monospace">removeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> interface:</p>
+ <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
+try
{
globalReqId++;
- globalMappedConsumer.removeValue(globalReqId, "tizen", "Bar", onRequestSuccess, onRequestError);
+ globalMappedConsumer.removeValue(globalReqId, "tizen", "Bar", onRequestSuccess,
+ onRequestError);
}
</pre></li></ul></li>
</ol>
<p>Learning how to manage SQL-type data allows you to use databases exposed by a DataControl provider:</p>
<ol>
- <li><p>To retrieve a <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#SQLDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#SQLDataControlConsumer">TV</a> applications), use
- the <span style="font-family: Courier New,Courier,monospace">getDataControlConsumer()</span> method of
- the <span style="font-family: Courier New,Courier,monospace">DataControlManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications).
- This object allows accessing the data stored by the DataControl provider.</p>
- <p>You need a running DataControl provider application, which uses the <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</span> provider ID.</p>
+ <li><p>To retrieve a <code>SQLDataControlConsumer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#SQLDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#SQLDataControlConsumer">TV</a> applications), use the <code>getDataControlConsumer()</code> method of the <code>DataControlManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications). This object allows accessing the data stored by the DataControl provider.</p>
+ <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
+try
{
- var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "SQL");
+ 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>
+ <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 class="prettyprint">
var globalReqId = new Date().getTime() % 2e9;
</pre></li>
{
console.log("error in request " + id + ", message: " + error.message);
}
-</pre> </li>
+</pre></li>
<li>To manage the data:
<ul>
- <li><p>To insert data, use the <span style="font-family: Courier New,Courier,monospace">insert()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+ <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);
}
-try
+try
{
- var rowData =
+ var rowData =
{
columns: ["WORD", "WORD_DESC"],
- values: ["'tizen1'", "'tizen2'"]
+ values: ["'tizen1'", "'tizen2'"]
};
/* Increases globalReqId for uniqueness */
globalReqId++;
globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
}
-</pre> </li>
- <li><p>To select data, use the <span style="font-family: Courier New,Courier,monospace">select()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+</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)
{
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]);
+ console.log("column: " + result[i].columns[j]
+ + ", value: " + result[i].values[j]);
}
}
}
-try
+try
{
var columns = ["WORD", "WORD_DESC"];
var order = "WORD ASC";
var maxNumberPerPage = null;
globalReqId++;
- globalSQLConsumer.select(globalReqId, columns, "WORD='tizen1'", onSelectSuccess,
+ globalSQLConsumer.select(globalReqId, columns, "WORD='tizen1'", onSelectSuccess,
onRequestError, page, maxNumberPerPage, order);
}
-</pre> </li>
- <li><p>To update data, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+</pre></li>
+ <li><p>To update data, use the <code>update()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
+try
{
- var rowData =
+ var rowData =
{
columns: ["WORD", "WORD_DESC"],
values: ["'tizen1'", "'Web apps platform!'"]
};
globalReqId++;
- globalSQLConsumer.update(globalReqId, rowData, "WORD='tizen1'", onRequestSuccess, onRequestError);
+ globalSQLConsumer.update(globalReqId, rowData, "WORD='tizen1'",
+ onRequestSuccess, onRequestError);
}
-</pre> </li>
- <li><p>To remove data, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+</pre></li>
+ <li><p>To remove data, use the <code>remove()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
+try
{
globalReqId++;
- globalSQLConsumer.remove(globalReqId, "WORD='tizen1'", onRequestSuccess, onRequestError);
+ globalSQLConsumer.remove(globalReqId, "WORD='tizen1'", onRequestSuccess,
+ onRequestError);
}
</pre> </li></ul></li>
</ol>
<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
- <p class="figure">Figure: Message port communication</p>
- <p align="center"><img alt="Message port communication" src="../../images/message_port.png" /></p>
-
<p>The main features of the Message Port API include:</p>
<ul>
<li>Sending messages
-<p>A Tizen Web application can <a href="#Manage_Message_Port">send messages</a> to another application using the <
span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#RemoteMessagePort">TV</a> applications).</p>
+<p>A Tizen Web application can <a href="#Manage_Message_Port">send messages</a> to another application using the <
code>sendMessage()</code> method of the <code>RemoteMessagePort</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#RemoteMessagePort">TV</a> applications).</p>
</li>
<li>Receiving messages
-<p>To <a href="#Manage_Message_Port">receive response messages</a> from another application, your application can specify a local message port when it sends a message. You can receive response messages using the callback method which is registered through the <span style="font-family: Courier New,Courier,monospace">addMessagePortListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#LocalMessagePort">TV</a> applications).</p>
-<p>You can mostly receive message from applications implemented as Tizen native or Web applications. To implement a native application, see the native <a href="../../native/app_management/message_port_n.htm">Message Port Communication</a> guide.</p></li>
+<p>To <a href="#Manage_Message_Port">receive response messages</a> from another application, your application can specify a local message port when it sends a message. You can receive response messages using the callback method which is registered through the <code>addMessagePortListener()</code> method of the <code>LocalMessagePort</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#LocalMessagePort">TV</a> applications).</p>
+<p>You can mostly receive message from applications implemented as Tizen native or Web applications. To implement a native application, see the native <a href="../../native/app_management/message_port_n.htm">Message Port Communication</a> guide.</p>
+ <p align="center"><strong>Figure: Sending and receiving messages</strong></p>
+ <p align="center"><img alt="Sending and receiving messages" src="../../images/message_port.png" /></p>
+</li>
<li>Using trusted message ports
-<p>For added security, you can restrict communication to only exchange messages with a trusted application that is signed with the same certificate as your application. Use the instances of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> and <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interfaces that are retrieved by the <span style="font-family: Courier New,Courier,monospace">requestTrustedLocalMessagePort()</span> and <span style="font-family: Courier New,Courier,monospace">requestTrustedRemoteMessagePort()</span> methods of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object.</p>
- <p class="figure">Figure: Trusted message ports</p>
+<p>For added security, you can restrict communication to only exchange messages with a trusted application that is signed with the same certificate as your application. Use the instances of the <code>LocalMessagePort</code> and <code>RemoteMessagePort</code> interfaces that are retrieved by the <code>requestTrustedLocalMessagePort()</code> and <code>requestTrustedRemoteMessagePort()</code> methods of the <code>tizen.messageport</code> object.</p>
+ <p align="center"><strong>Figure: Trusted message ports</strong></p>
<p align="center"><img alt="Trusted message ports" src="../../images/message_port_trusted.png" /></p>
</li>
</ul>
<h2 id="Manage_Message_Port" name="Manage_Message_Port">Managing Message Ports</h2>
<p>You can send and receive messages through 2 types of message ports:</p>
-<ul><li>The <
span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#LocalMessagePort">TV</a> applications) is used to register your message port and prepare to receive messages from other applications.
+<ul><li>The <
code>LocalMessagePort</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#LocalMessagePort">TV</a> applications) is used to register your message port and prepare to receive messages from other applications.
<p>To receive messages from other applications, you must register a callback to the local message port.</p></li>
-<li>The <
span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#RemoteMessagePort">TV</a> applications) is used to send messages to other applications.
+<li>The <
code>RemoteMessagePort</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html#RemoteMessagePort">TV</a> applications) is used to send messages to other applications.
<p>The local message port information can be sent to another application for bi-directional communication, to enable the other application to send response messages.</p></li></ul>
-<p>You can retrieve the instances of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> and <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interfaces with the <span style="font-family: Courier New,Courier,monospace">requestLocalMessagePort()</span> and <span style="font-family: Courier New,Courier,monospace">requestRemoteMessagePort()</span> methods of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object.</p>
-
- <p>Learning how to send messages to and receive responses from other Tizen applications through message ports is a basic data communication skill:</p>
+<p>You can retrieve the instances of the <code>LocalMessagePort</code> and <code>RemoteMessagePort</code> interfaces with the <code>requestLocalMessagePort()</code> and <code>requestRemoteMessagePort()</code> methods of the <code>tizen.messageport</code> object.</p>
+
+ <p>Learning how to send messages to and receive responses from other Tizen applications through message ports is a basic data communication skill:</p>
<ol>
-<li><p>To create a local port which receives messages, use the <span style="font-family: Courier New,Courier,monospace">requestLocalMessagePort()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface:</p>
+<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");
-</pre> </li>
-<li><p>To retrieve an instance of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface, use the <span style="font-family: Courier New,Courier,monospace">requestRemoteMessagePort()</span> method of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object. The <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface sends messages to the port identified by an <span style="font-family: Courier New,Courier,monospace">ApplicationId</span> and a port name.</p>
+</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");
-</pre> </li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">addMessagePortListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface to add a callback method that is invoked when the message arrives:</p>
+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)
+var localPortWatchId = localPort.addMessagePortListener(function(data, replyPort)
{
for (var i = 0; i < data.length; i++)
{
break;
}
}
- if (replyPort)
+ if (replyPort)
{
console.log("replyPort given: " + replyPort.messagePortName);
}
});
-</pre> </li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface to send a message:</p> <pre class="prettyprint">
+</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:"bytesData", value:[[1, 2, 3, 255], [8, 9, 3, 4, 5]]}
];
remotePort.sendMessage(messageData);
-</pre>
-<p>If you expect a response message, pass the instance of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface as a second parameter of <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method to specify the message port where the response is sent:</p>
+</pre>
+<p>If you expect a response message, pass the instance of the <code>LocalMessagePort</code> interface as a second parameter of <code>sendMessage()</code> method to specify the message port where the response is sent:</p>
<pre class="prettyprint">
remotePort.sendMessage(messageData, localPort);
-</pre> </li>
- </ol>
+</pre></li>
+ </ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Package Information</title>
- </head>
+ <title>Package Information</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html">Package API for TV Web</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Package Information</h1>
<p>Package information features include retrieving detailed information about packages, such as package name, icon path, version details, and package ID. You can receive notifications if packages are updated or removed, or new packages are installed. You can also perform package management tasks, such as installing or uninstalling packages.</p>
-
-<p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
-
- <p>The main package information features are:</p>
- <ul>
+
+<p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
+ <p>The main package information features are:</p>
+ <ul>
<li>Package management
- <p>You can <a href="#manage">install or uninstall packages</a>.</p></li>
+ <p>You can <a href="#manage">install or uninstall packages</a>.</p></li>
<li>Package information retrieval
- <p>You can display a list of installed packages on the device, and <a href="#retrieve">retrieve package information</a>, such as name, ID, icon path, and version.</p></li>
+ <p>You can display a list of installed packages on the device, and <a href="#retrieve">retrieve package information</a>, such as name, ID, icon path, and version.</p></li>
<li>Package change notifications
- <p>You can <a href="#receive">receive notifications</a> when packages are installed, updated, or uninstalled.</p></li>
- </ul>
+ <p>You can <a href="#receive">receive notifications</a> when packages are installed, updated, or uninstalled.</p></li>
+ </ul>
<h2 id="prerequisites">Prerequisites</h2>
-
-<p>To use the Package API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+
+<p>To use the Package API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/package.info"/>
<tizen:privilege name="http://tizen.org/privilege/packagemanager.install"/>
</pre>
-
<h2 id="retrieve" name="retrieve">Retrieving Package Information</h2>
-<p>You can retrieve information about packages in various ways:</p>
- <ul>
- <li>Retrieve information about installed packages using the <
span style="font-family: Courier New,Courier,monospace">getPackageInfo()</span> and <span style="font-family: Courier New,Courier,monospace">getPackagesInfo()</span> methods of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications).</li>
- <li>Use the <
span style="font-family: Courier New,Courier,monospace">PackageInformation</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformation">TV</a> applications) to retrieve information about installed packages, such as name, icon path, and version.</li>
+<p>You can retrieve information about packages in various ways:</p>
+ <ul>
+ <li>Retrieve information about installed packages using the <
code>getPackageInfo()</code> and <code>getPackagesInfo()</code> methods of the <code>PackageManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications).</li>
+ <li>Use the <
code>PackageInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformation">TV</a> applications) to retrieve information about installed packages, such as name, icon path, and version.</li>
</ul>
<p>Learning how to retrieve information about installed packages allows you to manage device packages from your application:</p>
<ol>
- <li><p>To retrieve a list of installed packages, use the <span style="font-family: Courier New,Courier,monospace">getPackagesInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface:</p> <pre class="prettyprint lang-js">function onListInstalledPackages(lists)
+ <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);
}
-tizen.package.getPackagesInfo(onListInstalledPackages);</pre> <p>The list of installed packages is returned to the <span style="font-family: Courier New,Courier,monospace">PackageInformationArraySuccessCallback()</span> methods as an array of <span style="font-family: Courier New,Courier,monospace">PackageInformation</span> objects.</p></li>
- <li><p>To retrieve basic package information, use the <span style="font-family: Courier New,Courier,monospace">getPackageInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> 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");</pre></li>
+tizen.package.getPackagesInfo(onListInstalledPackages);
+</pre>
+<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");
+</pre></li>
</ol>
-
- <h2 id="manage" name="manage">Managing Packages</h2>
-<p>You can manage the package installation using the <
span style="font-family: Courier New,Courier,monospace">install()</span> and <span style="font-family: Courier New,Courier,monospace">uninstall()</span> methods of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications). Additionally, you can receive notifications of the installation and uninstallation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageProgressCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageProgressCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageProgressCallback">TV</a> applications).</p>
+
+ <h2 id="manage" name="manage">Managing Packages</h2>
+<p>You can manage the package installation using the <
code>install()</code> and <code>uninstall()</code> methods of the <code>PackageManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications). Additionally, you can receive notifications of the installation and uninstallation progress using the <code>PackageProgressCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageProgressCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageProgressCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageProgressCallback">TV</a> applications).</p>
<p>Learning how to install and uninstall packages is a basic package management skill:</p>
<ol>
- <li><p>To install a package, use the <span style="font-family: Courier New,Courier,monospace">install()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface, specifying the local package installation path on your device. You can retrieve the installation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> interface.</p> <pre class="prettyprint lang-js">var onInstallation =
+ <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)
{
};
tizen.filesystem.resolve("downloads/test.wgt", function(packageFile)
-{
- tizen.package.install(packageFile.toURI(), onInstallation);
-});</pre></li>
- <li><p>To uninstall a package, use the <span style="font-family: Courier New,Courier,monospace">uninstall()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface, specifying the package ID. You can retrieve the uninstallation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> interface.</p> <pre class="prettyprint lang-js">var onUninstallation =
+ {
+ 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)
{
}
};
-tizen.package.uninstall("TEST_APP_ID", onUninstallation);</pre></li>
+tizen.package.uninstall("TEST_APP_ID", onUninstallation);
+</pre></li>
</ol>
-
+
<h2 id="receive" name="receive">Receiving Package Change Notifications</h2>
-<p>You can receive notifications of changes in the list of installed packages. The <
span style="font-family: Courier New,Courier,monospace">setPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications) registers an event listener for changes in the installed packages list. To unsubscribe the listener, use the <span style="font-family: Courier New,Courier,monospace">unsetPackageInfoEventListener()</span> method. You can use the <span style="font-family: Courier New,Courier,monospace">PackageInformationEventCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformationEventCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformationEventCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformationEventCallback">TV</a> applications) to define listeners for receiving notifications.</p>
+<p>You can receive notifications of changes in the list of installed packages. The <
code>setPackageInfoEventListener()</code> method of the <code>PackageManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications) registers an event listener for changes in the installed packages list. To unsubscribe the listener, use the <code>unsetPackageInfoEventListener()</code> method. You can use the <code>PackageInformationEventCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformationEventCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformationEventCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformationEventCallback">TV</a> applications) to define listeners for receiving notifications.</p>
<p>Learning to receive notifications when the list of installed packages changes allows you to manage device packages from your application:</p>
<ol>
- <li><p>Define the event handlers for different notifications using the <span style="font-family: Courier New,Courier,monospace">PackageInformationEventCallback</span> listener interface:</p> <pre class="prettyprint">var packageEventCallback =
+ <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 " + packageId + " is uninstalled");
}
-};</pre></li>
- <li><p>Register the listener to use the defined event handlers with the <span style="font-family: Courier New,Courier,monospace">setPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface:</p> <pre class="prettyprint lang-js">tizen.package.setPackageInfoEventListener(packageEventCallback);</pre></li>
- <li><p>To stop receiving notifications, use the <span style="font-family: Courier New,Courier,monospace">unsetPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface:</p> <pre class="prettyprint lang-js">tizen.package.unsetPackageInfoEventListener();</pre></li>
+};
+</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>
+<pre class="prettyprint lang-js">
+tizen.package.setPackageInfoEventListener(packageEventCallback);
+</pre></li>
+ <li><p>To stop receiving notifications, use the <code>unsetPackageInfoEventListener()</code> method of the <code>PackageManager</code> interface:</p>
+<pre class="prettyprint lang-js">
+tizen.package.unsetPackageInfoEventListener();
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
<title>Application Preferences</title>
- </head>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<p>This feature is supported in mobile and wearable applications only.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Preference API is a different feature than the <a href="../../../../org.tizen.training/html/web/process/setting_properties_w.htm#preferences"><span style="font-family: Courier New,Courier,monospace">preferences</span> attribute of the config.xml file</a>, which is used to set and retrieve name-value pairs using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">Widget Interface</a> API.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The Preference API is a different feature than the <a href="../../../../org.tizen.training/html/web/process/setting_properties_w.htm#preferences"><code>preferences</code> attribute of the <code>config.xml</code> file</a>, which is used to set and retrieve name-value pairs using the Widget Interface API (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#widget">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">wearable</a> applications).
+</div>
<p>The main preference features are:</p>
<ul>
<li>Setting up a preference
-<p>You can <a href="#set_value">set up a preference</a> with the <span style="font-family: Courier New,Courier,monospace">setValue()</span> method. If the preference exists before setting up, its value is set. If the preference does not exist, it is created.</p>
+<p>You can <a href="#set_value">set up a preference</a> with the <code>setValue()</code> method. If the preference exists before setting up, its value is set. If the preference does not exist, it is created.</p>
</li>
<li>Getting a preference value
-<p>You can <a href="#get_value">retrieve a value of a single preference or values of all preferences</a> using the <span style="font-family: Courier New,Courier,monospace">getValue()</span> or <span style="font-family: Courier New,Courier,monospace">getAll()</span> method. You can also <a href="#exists">check whether a preference exists</a> using the <span style="font-family: Courier New,Courier,monospace">exists()</span> method.</p>
+<p>You can <a href="#get_value">retrieve a value of a single preference or values of all preferences</a> using the <code>getValue()</code> or <code>getAll()</code> method. You can also <a href="#exists">check whether a preference exists</a> using the <code>exists()</code> method.</p>
</li>
<li>Removing a preference
-<p>You can <a href="#remove">remove a preference</a> with the <span style="font-family: Courier New,Courier,monospace">remove()</span> and <span style="font-family: Courier New,Courier,monospace">removeAll()</span> functions. The first removes only 1 preference while the second removes them all.</p>
+<p>You can <a href="#remove">remove a preference</a> with the <code>remove()</code> and <code>removeAll()</code> functions. The first removes only 1 preference while the second removes them all.</p>
</li>
<li>Monitoring preference value changes
-<p>You can provide a listener method which is called every time a given preference's value changes. <a href="#set_change_listener">Register the listener</a> with the <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method. The provided listener is called with a preference key and its new value. If you want to remove the listener, use the <span style="font-family: Courier New,Courier,monospace">unsetChangeListener()</span> method.</p>
+<p>You can provide a listener method which is called every time a given preference's value changes. <a href="#set_change_listener">Register the listener</a> with the <code>setChangeListener()</code> method. The provided listener is called with a preference key and its new value. If you want to remove the listener, use the <code>unsetChangeListener()</code> method.</p>
</li>
</ul>
<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 <span style="font-family: Courier New,Courier,monospace">setValue()</span> method:</p>
+ <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");
</pre>
<p>To retrieve preference values:</p>
<ul>
- <li>To get the value of a preference with a given key, use the <span style="font-family: Courier New,Courier,monospace">getValue()</span> method:
-
<pre class="prettyprint">
+ <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);
</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 <span style="font-family: Courier New,Courier,monospace">getAll()</span> 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">
+ <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);
+ console.log("The preference - key: " + preferences[i].key
+ + " value: " + preferences[i].value);
}
};
</li></ul>
<h2 id="exists" name="exists">Checking Whether a Preference Exists</h2>
- <p>To determine whether a preference with a given key exists, use the <span style="font-family: Courier New,Courier,monospace">exists()</span> method:</p>
-
<pre class="prettyprint">
+ <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");
-}</pre>
- <p>The method returns <span style="font-family: Courier New,Courier,monospace">true</span> if the preference exists and <span style="font-family: Courier New,Courier,monospace">false</span> if it does not.</p>
+ 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>
<h2 id="remove" name="remove">Removing Preferences</h2>
<p>To remove preferences:</p>
<ul>
- <li>To remove a single preference with the given key, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method:
-
<pre class="prettyprint">
+ <li>To remove a single preference with the given key, use the <code>remove()</code> method:
+<pre class="prettyprint">
tizen.preference.remove("key1");
</pre>
<p>If the preference with the given key does not exist, an exception is thrown.</p>
</li>
-<li>To remove all existing preferences, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:
-
<pre class="prettyprint">
+<li>To remove all existing preferences, use the <code>removeAll()</code> method:
+<pre class="prettyprint">
tizen.preference.removeAll();
</pre>
</li></ul>
<ul>
<li>
- <p>To start listening, use the <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method:</p>
-
<pre class="prettyprint">
+ <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);
+ console.log("Preference with the key: " + data.key
+ + " has a new value: " + data.value);
};
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 <span style="font-family: Courier New,Courier,monospace">key</span> and <span style="font-family: Courier New,Courier,monospace">value</span> fields.</p>
+ <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 <span style="font-family: Courier New,Courier,monospace">unsetChangeListener()</span> method:</p>
-
<pre class="prettyprint">
+ <p>To stop listening, use the <code>unsetChangeListener()</code> method:</p>
+<pre class="prettyprint">
var listener = function(data)
{
tizen.preference.unsetChangeListener(data.key);
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Service Application</title>
- </head>
+ <title>Service Application</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../images/wearable_s_w_optional.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Service Application</h1>
-
+ <h1>Service Application</h1>
+
<p>A service application is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the application follows the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMA-262 specification</a>). The service application is used to perform tasks which need to run periodically or continuously but do not require user interaction. For example, a service application can be used for getting data or listening to platform events in the background. As service applications do not have UI components, they run on top of a more light-weight runtime than UI applications. Therefore, you can expect them to perform better and consume less memory.</p>
-
-<p>This feature is supported in wearable applications only. The Web service application is an optional feature, which means that it may not be supported in all wearable devices.</p>
+
+<p>This feature is supported in wearable applications only. The Web service application is an optional feature, which means that it may not be supported in all wearable devices.</p>
<p>The main features of the service application include:</p>
<p>You must always <a href="#package">package a service application</a> with a UI application in a Web application package file. You can include multiple service applications in the same package with a single UI application.</p>
</li>
<li>Launching applications
-<p>You can <a href="#launch">launch service applications</a> through another application by using the <
span style="font-family: Courier New,Courier,monospace">launch()</span> and <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API by using an explicit application ID. You can also register service applications to be launched automatically at boot time.</p></li>
+<p>You can <a href="#launch">launch service applications</a> through another application by using the <
code>launch()</code> and <code>launchAppControl()</code> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API by using an explicit application ID. You can also register service applications to be launched automatically at boot time.</p></li>
<li>Terminating applications
<p>The service application can <a href="#terminate">terminate itself</a> when it receives a certain request.</p></li>
</ul>
<p>The device main menu does not contain any icons for service applications, because the applications run in the background. The task switcher does not show them either. Service applications can run simultaneously with other service and UI applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The wearable service application requires <a href="../../../../org.tizen.training/html/web/details/sec_privileges_w.htm">partner-level certification</a> in Tizen 2.3.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The wearable service application requires <a href="../../../../org.tizen.training/html/web/details/sec_privileges_w.htm">partner-level certification</a> in Tizen 2.3.
+</div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the service application functionality:</p>
<ol>
-<li>To make your application visible only for devices that support the Web Service Application, the application must specify the following feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To make your application visible only for devices that support the Web Service Application, the application must specify the following feature in the <code>config.xml</code> file:
<pre class="prettyprint">
<widget>
<tizen:feature name="http://tizen.org/feature/web.service"/>
</widget>
</pre>
</li>
-<li>To ensure that a service application is acknowledged by the platform, you must add a service application extension element (<span style="font-family: Courier New,Courier,monospace"><tizen:service></span>) to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application:
+<li>To ensure that a service application is acknowledged by the platform, you must add a service application extension element (<code><tizen:service></code>) to the <code>config.xml</code> file of the application:
<pre class="prettyprint">
<widget>
<tizen:service id="[App_ID]" auto-restart="true" on-boot="true">
</widget>
</pre>
-<p>´The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element is a child of the <span style="font-family: Courier New,Courier,monospace"><widget></span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. With the <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element attributes, you can set the traits of a service application, such as application ID, auto restart, and boot launching capability. With the <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> child elements, you can set the starting script, name, and icon for the service application.</p>
+<p>´The <code><tizen:service></code> element is a child of the <code><widget></code> element in the <code>config.xml</code> file. With the <code><tizen:service></code> element attributes, you can set the traits of a service application, such as application ID, auto restart, and boot launching capability. With the <code><tizen:service></code> child elements, you can set the starting script, name, and icon for the service application.</p>
<p>The definition of all service elements is listed and explained in the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p>
</li>
-<li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API, the application has to request permission by adding the following privilege to the <code>config.xml</code> file:
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
</pre>
</li>
</ol>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">No privileges need to be separately defined for service applications, since the service application is always packaged with a UI application, and a scope of a privilege defined for the UI application covers the entire application package.</td>
- </tr>
- </tbody>
- </table>
-<p></p>
-
+<div class="note">
+ <strong>Note</strong>
+ No privileges need to be separately defined for service applications, since the service application is always packaged with a UI application, and a scope of a privilege defined for the UI application covers the entire application package.
+</div>
<h2 id="create" name="create">Managing the Service Application Life-cycle</h2>
-<p>To run a service application, you must export a number of callbacks using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API. The callbacks need to be added to the <span style="font-family: Courier New,Courier,monospace">module.exports</span> object, which is provided by the environment. The following callbacks are called when there are life-cycle changes or application control events which are triggered by the application management framework:</p>
+<p>To run a service application, you must export a number of callbacks using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API. The callbacks need to be added to the <code>module.exports</code> object, which is provided by the environment. The following callbacks are called when there are life-cycle changes or application control events which are triggered by the application management framework:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">onStart()</span>: The entry point of the service. It is called after the service runtime finishes the set-up.</li>
-<li><span style="font-family: Courier New,Courier,monospace">onRequest()</span>: The listener for application control callbacks. It is provided to handle requests from other applications. You can understand the intention of the request and reply to it using the <span style="font-family: Courier New,Courier,monospace">tizen.application.getCurrentApplication().getRequestedAppControl()</span> method. This callback is also called when the application is first launched as an application launch is considered to be a request as well.</li>
-<li><
span style="font-family: Courier New,Courier,monospace">onExit()</span>: This is called when the <a href="#terminate">service ends</a>. You can release resources or save the context by using this callback.</li></ul>
+<li><code>onStart()</code>: The entry point of the service. It is called after the service runtime finishes the set-up.</li>
+<li><code>onRequest()</code>: The listener for application control callbacks. It is provided to handle requests from other applications. You can understand the intention of the request and reply to it using the <code>tizen.application.getCurrentApplication().getRequestedAppControl()</code> method. This callback is also called when the application is first launched as an application launch is considered to be a request as well.</li>
+<li><
code>onExit()</code>: This is called when the <a href="#terminate">service ends</a>. You can release resources or save the context by using this callback.</li></ul>
-<p class="figure">Figure: State transitions</p>
+<p align="center"><strong>Figure: State transitions</strong></p>
<p align="center"><img alt="State transitions" src="../../images/service_app.png" /></p>
<p>Learning how to manage service application callbacks is a basic application management skill:</p>
-<ol><li>Create the service entry point with the <span style="font-family: Courier New,Courier,monospace">onStart()</span> callback.
+<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()
+module.exports.onStart = function()
{
console.log("service start");
- var remoteMsgPort = tizen.messageport.requestRemoteMessagePort("websvcapp0.WebServiceApplication", "SERVICE_SAMPLE1");
+ var remoteMsgPort =
+ tizen.messageport.requestRemoteMessagePort("websvcapp0.WebServiceApplication",
+ "SERVICE_SAMPLE1");
var localMsgPort = tizen.messageport.requestLocalMessagePort("SERVICE_SAMPLE2");
- function onreceived(data, remoteMsgPort)
+ function onreceived(data, remoteMsgPort)
{
- for (var i = 0; i < data.length; i++)
+ for (var i = 0; i < data.length; i++)
{
if (data[i].value == "SERVICE_EXIT")
{
}
</pre></li>
-<li>Write the request handler with the <span style="font-family: Courier New,Courier,monospace">onRequest()</span> 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 <
span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method in the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>
+<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()
+module.exports.onRequest = function()
{
- var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
- if (reqAppControl)
+ var reqAppControl =
+ tizen.application.getCurrentApplication().getRequestedAppControl();
+ if (reqAppControl)
{
- if (reqAppControl.appControl.operation == "http://tizen.org/appcontrol/operation/service")
+ if (reqAppControl.appControl.operation
+ == "http://tizen.org/appcontrol/operation/service")
{
try
{
- tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION", onDeviceOrientationSuccess);
+ tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
+ onDeviceOrientationSuccess);
}
}
}
}
</pre></li>
-<li>Write the termination with the <span style="font-family: Courier New,Courier,monospace">onExit()</span> callback.
+<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()
+module.exports.onExit = function()
{
console.log("service terminate");
}
</pre></li></ol>
-
+
<h2 id="package" name="package">Packaging a Service Application</h2>
-<p>A Web application package can contain 1 Web UI application and several service applications. Each application in the Web application package shares the same package ID and has a unique application ID. In the following example, you can use the <span style="font-family: Courier New,Courier,monospace"><tizen:application></span> element to define information for the Web UI application. The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element is used to define information about the service application. The UI application and the service application have the same package ID and different application IDs.</p>
+<p>A Web application package can contain 1 Web UI application and several service applications. Each application in the Web application package shares the same package ID and has a unique application ID. In the following example, you can use the <code><tizen:application></code> element to define information for the Web UI application. The <code><tizen:service></code> element is used to define information about the service application. The UI application and the service application have the same package ID and different application IDs.</p>
<p>The Web application package file is installed, updated, and uninstalled as a single <a href="../../../../org.tizen.training/html/web/app_model/application_model_w.htm#package">package</a>, making the life-cycles of the service applications and the UI application synchronous.</p>
-<p>To package the service application with a UI application, define the service in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element allows you to define the characteristics of the service application. For example, you can specify the name, icon, and starting JavaScipt file of the service application.</p>
-<pre class="prettyprint lang-js">
-<?xml version="1.0"encoding="TF-8">
+<p>To package the service application with a UI application, define the service in the <code>config.xml</code> file. The <code><tizen:service></code> element allows you to define the characteristics of the service application. For example, you can specify the name, icon, and starting JavaScipt file of the service application.</p>
+<pre class="prettyprint">
+<?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" />
- <content src="index.html" />
- <feature name="http://tizen.org/feature/screen.size.all" />
- <icon src="icon.png" />
+ <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"/>
<name>WebServiceApplication</name>
<tizen:service id="websvcapp0.service1" auto-restart="true" on-boot="false">
- <tizen:content src="service/service1.js" />
+ <tizen:content src="service/service1.js"/>
<tizen:name>WebServiceApplication1</tizen:name>
- <tizen:icon src="icon1.png" />
+ <tizen:icon src="icon1.png"/>
<tizen:description>WebServiceApplication1</tizen:description>
</tizen:service>
</widget>
</pre>
-
+
<h2 id="launch" name="launch">Launching a Service Application</h2>
<p>Learning how to launch a service application is a basic application management skill:</p>
<ul>
<li>Launch by other applications
-<p>The Web application launches a service application by calling the <span style="font-family: Courier New,Courier,monospace">launch()</span> or <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method with the service application ID:</p>
+<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);});
+ function(e) {console.log("Launch Service failed: "
+ + e.message);});
</pre>
</li>
<li>Launch by the system
-<p>A service application can start automatically if the <span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span>. This requires partner-level certification.</p>
+<p>A service application can start automatically if the <code>on-boot</code> attribute is set to <code>true</code>. This requires partner-level certification.</p>
<pre class="prettyprint">
<tizen:service id="websvcapp0.service1" on-boot="true">
</pre>
</ul>
<h2 id="terminate" name="terminate">Terminating a Service Application</h2>
-
+
<p>Learning how to terminate a service application is a basic application management skill:</p>
<ol>
<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 <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method. </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");
+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 <span style="font-family: Courier New,Courier,monospace">exit()</span> method after getting a signal through the message port:
+<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)
+function onreceived(data, remoteMsgPort)
{
- for (var i = 0; i < data.length; i++)
+ for (var i = 0; i < data.length; i++)
{
if (data[i].value == "SERVICE_EXIT")
{
<p>You can use a selection of the following Tizen wearable Web Device APIs to interact with the platform or other service applications. More Device APIs for service applications are supported in the next release.</p>
+<p align="center" class="Table"><strong>Table: Supported APIs</strong></p>
<table>
-<caption>Table: Supported APIs</caption>
<tbody>
<tr>
<th>API</th>
<tr>
<td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a></td>
<td>This API provides information about the currently running and installed applications and ways to launch other applications.
-<p>Note that the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method is only valid inside the <span style="font-family: Courier New,Courier,monospace">onRequest()</span> callback.</p></td>
+<p>Note that the <code>getRequestedAppControl()</code> method is only valid inside the <code>onRequest()</code> callback.</p></td>
</tr>
<tr>
<td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">Package</a></td>
<tr>
<td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">Power</a></td>
<td>This API provides interfaces and methods for controlling power resources.
- <p>Note that the <span style="font-family: Courier New,Courier,monospace">isScreenOn()</span>, <span style="font-family: Courier New,Courier,monospace">restoreScreenBrightness()</span>, <span style="font-family: Courier New,Courier,monospace">turnScreenOn()</span>, <span style="font-family: Courier New,Courier,monospace">turnScreenOff()</span>, <span style="font-family: Courier New,Courier,monospace">setScreenBrightness()</span>, and <span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span> methods are not supported for wearable Web service applications.</p></td>
+ <p>Note that the <code>isScreenOn()</code>, <code>restoreScreenBrightness()</code>, <code>turnScreenOn()</code>, <code>turnScreenOff()</code>, <code>setScreenBrightness()</code>, and <code>getScreenBrightness()</code> methods are not supported for wearable Web service applications.</p></td>
</tr>
<tr>
<td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information</a></td>
<td>This API provides information about the device's display, network, storage, and other capabilities.</td>
</tr>
-</tbody>
+</tbody>
</table>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Widget Application</title>
+ <title>Widget Application</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
- <li>Tizen 2.3.2 and Higher for Wearable</li>
+ <li>Tizen 2.3.2 for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#debug">Debugging</a></li>
<li><a href="#performance">Performance Considerations</a></li>
<li><a href="#faq">FAQ</a></li>
- </ul>
- </div></div>
+ </ul>
+ </div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<p>Web widgets are implemented using the Web programming technologies, such as HTML, CSS, and JavaScript; but only a subset of Tizen Web APIs. Web widgets run on wearable devices and are available to users in the widget board, which can be accessed by swiping right on the home screen (watch face).</p>
-<p class="figure">Figure: Widget board</p>
+<p align="center"><strong>Figure: Widget board</strong></p>
<p align="center"><img alt="Widget board" src="../../images/webwidget_widget_board.png" /></p>
<p>Web widgets occupy the entire screen to make the most out of the limited screen size. All content in a wearable widget must fit on 1 screen.</p>
-<p class="figure">Figure: Wearable widgets</p>
+<p align="center"><strong>Figure: Wearable widgets</strong></p>
<p align="center"><img alt="Wearable widgets" src="../../images/webwidget_wearable_widgets_1.png" /> <img alt="Wearable widgets" src="../../images/webwidget_wearable_widgets_2.png" /></p>
<p>Since widgets are loaded on the widget board in the home screen layer, the only kind of interactivity available for the user is tapping. The users can tap an action button or anywhere on the widget screen to perform specified tasks or open the parent application.</p>
-<p class="figure">Figure: User actions on a widget</p>
+<p align="center"><strong>Figure: User actions on a widget</strong></p>
<p align="center"><img alt="User actions on a widget" src="../../images/webwidget_tap_tasks.png" /></p>
<h2 id="app_model">Application Model</h2>
<p>You can create a standalone Web widget, with no parent Web application. In this case, the parent Web application is generated automatically by the Tizen Studio during packaging. However, this kind of widget is used for development and testing purpose only. To be published on the Tizen Store, Web widgets must be combined with a real parent application.</p>
<p>More than 1 Web widget can be included in a parent Web application, and all widgets and the parent are bundled in 1 package by the Tizen Studio. Web widget resources are included in its Web application package. The Tizen platform installs the Web widget when its parent Web application is installed, and uninstalls the Web widget when its parent Web application is uninstalled. The Web widget resources are all removed together with its parent.</p>
-<p class="figure">Figure: Widget and Web application packaging</p>
+<p align="center"><strong>Figure: Widget and Web application packaging</strong></p>
<p align="center"><img alt="Widget and Web application packaging" src="../../images/webwidget_web_application.png" /></p>
<p>As multiple widgets are allowed in a package, each widget must be identified. The Web widget ID must be assigned with its parent Web application ID as a prefix, so the format is as follows:</p>
<package ID>.<Web application name>
</pre>
-<p>The package ID is a random sequence of characters and numbers, which is automatically generated by the Tizen Studio, while you must define the Web application and widget name when creating the applications. For example, if you name your Web application <span style="font-family: Courier New,Courier,monospace">foo</span> and its widget <span style="font-family: Courier New,Courier,monospace">bar</span>, and the Tizen Studio creates the package ID as <span style="font-family: Courier New,Courier,monospace">Zyj5WR</span>, the Web application ID is <span style="font-family: Courier New,Courier,monospace">Zyj5WR.foo</span> and the Web widget ID is <span style="font-family: Courier New,Courier,monospace">Zyj5WR.foo.bar</span>.</p>
+<p>The package ID is a random sequence of characters and numbers, which is automatically generated by the Tizen Studio, while you must define the Web application and widget name when creating the applications. For example, if you name your Web application <code>foo</code> and its widget <code>bar</code>, and the Tizen Studio creates the package ID as <code>Zyj5WR</code>, the Web application ID is <code>Zyj5WR.foo</code> and the Web widget ID is <code>Zyj5WR.foo.bar</code>.</p>
<h3 id="lifecycle">Life-cycle</h3>
<p>The Tizen framework manages the operational states and life-cycle of the Web widgets: installation, creation, termination, and uninstallation. The following figure illustrates the Web widget's operational state changes.</p>
-<p class="figure">Figure: Operational state changes</p>
+<p align="center"><strong>Figure: Operational state changes</strong></p>
<p align="center"><img alt="Operational state changes" src="../../images/webwidget_operational_state_changes.png" /></p>
<p>The Web widget life-cycle proceeds as follows:</p>
<li>The user downloads a Web application from an app store, and installs it with its Web widgets on a wearable device.</li>
<li>The users selects the widget in the <strong>Add Widget</strong> menu (by swiping right on the home screen), and the Tizen framework creates an instance of the Web widget and makes it available in the widget board.</li>
-<li>When the user launches the widget from the widget board, an <span style="font-family: Courier New,Courier,monospace">onload</span> event is generated.
-<p>A <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is also generated and the value of the <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property is set to <span style="font-family: Courier New,Courier,monospace">visible</span>. This means that the widget is in operation and its content is displayed on the screen. Whenever a widget is visible, the user can tap the UI screen to invoke specified tasks, such as launching the widget's parent application.</p></li>
+<li>When the user launches the widget from the widget board, an <code>onload</code> event is generated.
+<p>A <code>visibilityChange</code> event is also generated and the value of the <code>visibilityState</code> property is set to <code>visible</code>. This means that the widget is in operation and its content is displayed on the screen. Whenever a widget is visible, the user can tap the UI screen to invoke specified tasks, such as launching the widget's parent application.</p></li>
<li>While the widget is running:
-<ul><li>The user can suspend the widget by navigating away from the widget UI screen, for example, by rotating the Gear bezel. The <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is generated and the value of the <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property is set to <span style="font-family: Courier New,Courier,monospace">hidden</span>. The widget content is no longer visible on the UI screen, but the widget instance remains.</li>
-<li>By navigating to the widget in the widget board, the user can resume the widget operations. The <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is generated again, the value of the <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property is set to <span style="font-family: Courier New,Courier,monospace">visible</span>, and the widget content is displayed on the screen.</li>
+<ul><li>The user can suspend the widget by navigating away from the widget UI screen, for example, by rotating the Gear bezel. The <code>visibilityChange</code> event is generated and the value of the <code>visibilityState</code> property is set to <code>hidden</code>. The widget content is no longer visible on the UI screen, but the widget instance remains.</li>
+<li>By navigating to the widget in the widget board, the user can resume the widget operations. The <code>visibilityChange</code> event is generated again, the value of the <code>visibilityState</code> property is set to <code>visible</code>, and the widget content is displayed on the screen.</li>
</ul>
<p>Other examples of the actions causing widget visibility changes are switching off the screen or switching the viewport to another application.</p>
</li>
<h3>Packaging and Configuration</h3>
-<p>The Web widget application must be included in the same package with its parent Web application. The Web widgets are placed in the <span style="font-family: Courier New,Courier,monospace">widget</span> subdirectory, which is generated automatically by the Tizen Studio. The following example shows a typical structure of a Web application package with 2 Web widgets:</p>
+<p>The Web widget application must be included in the same package with its parent Web application. The Web widgets are placed in the <code>widget</code> subdirectory, which is generated automatically by the Tizen Studio. The following example shows a typical structure of a Web application package with 2 Web widgets:</p>
<pre class="prettyprint">
.wgt
locales
</pre>
-<p>The package contains a general <span style="font-family: Courier New,Courier,monospace">config.xml</span> file for the entire package, and a separate <span style="font-family: Courier New,Courier,monospace">config.xml</span> file for each widget:</p>
+<p>The package contains a general <code>config.xml</code> file for the entire package, and a separate <code>config.xml</code> file for each widget:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the package contains the information from all the widget configuration files, in addition to the details of the parent Web application. The runtime of the Tizen platform uses the general <span style="font-family: Courier New,Courier,monospace">config.xml</span> file for installing the widget applications.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of each widget has that widget's own information.</li>
+<li>The <code>config.xml</code> file of the package contains the information from all the widget configuration files, in addition to the details of the parent Web application. The runtime of the Tizen platform uses the general <code>config.xml</code> file for installing the widget applications.</li>
+<li>The <code>config.xml</code> file of each widget has that widget's own information.</li>
</ul>
-<p>The following examples show the <span style="font-family: Courier New,Courier,monospace">config.xml</span> files in a Web application package:</p>
+<p>The following examples show the <code>config.xml</code> files in a Web application package:</p>
<ul>
-<li>The general <span style="font-family: Courier New,Courier,monospace">config.xml</span> file for the Web application package:
+<li>The general <code>config.xml</code> file for the Web application package:
<pre class="prettyprint">
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
<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>
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the widget001:
+<li>The <code>config.xml</code> file of the widget001:
<pre class="prettyprint">
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true">
</tizen:app-widget>
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the widget002:
+<li>The <code>config.xml</code> file of the widget002:
<pre class="prettyprint">
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false">
<h3 id="layout">Layout</h3>
<p>The following UI layouts with code examples are common use cases in widgets on wearable devices.</p>
-<p class="figure">Figure: UI layouts</p>
+<p align="center"><strong>Figure: UI layouts</strong></p>
<p align="center"><img alt="UI layouts" src="../../images/webwidget_ui_layouts.png" /></p>
<ul>
<li>Text layout
-<p>The text layout is the most fundamental layout. You only need to place the text in proper positions by setting margins and paddings of the content element. You can also use the <span style="font-family: Courier New,Courier,monospace">text-align</span> CSS property to align the text to left, right, or center.</p>
+<p>The text layout is the most fundamental layout. You only need to place the text in proper positions by setting margins and paddings of the content element. You can also use the <code>text-align</code> CSS property to align the text to left, right, or center.</p>
-<p class="figure">Figure: Text layout</p>
+<p align="center"><strong>Figure: Text layout</strong></p>
<p align="center"><img alt="Text layout" src="../../images/webwidget_text_layout.png" /></p>
<pre class="prettyprint">
<body>
<div id="content">
Go grandmaster Lee Sedol regained a sizeable slice of human pride on Sunday night
- when he won the latest game in his historic match with
+ when he won the latest game in his historic match with
an artificially intelligent machine built by Google researchers.
</div>
</body>
</li>
<li>Paragraph layout
-<p>You can design a paragraph layout by grouping its content with <span style="font-family: Courier New,Courier,monospace"><div></span> elements and applying styles for each group.</p>
+<p>You can design a paragraph layout by grouping its content with <code><div></code> elements and applying styles for each group.</p>
-<p class="figure">Figure: Paragraph layout</p>
+<p align="center"><strong>Figure: Paragraph layout</strong></p>
<p align="center"><img alt="Paragraph layout" src="../../images/webwidget_paragraph_layout.png" /></p>
<pre class="prettyprint">
</pre>
</li>
<li>Paragraph with images layout
-<p>By adding images to a paragraph <span style="font-family: Courier New,Courier,monospace"><div></span> group, you can implement the paragraph layout with images, whose styles are inherited from a parent <span style="font-family: Courier New,Courier,monospace"><div></span> element.</p>
+<p>By adding images to a paragraph <code><div></code> group, you can implement the paragraph layout with images, whose styles are inherited from a parent <code><div></code> element.</p>
-<p class="figure">Figure: Paragraph with images layout</p>
+<p align="center"><strong>Figure: Paragraph with images layout</strong></p>
<p align="center"><img alt="Paragraph with images layout" src="../../images/webwidget_paragraph_with_image_layout.png" /></p>
<pre class="prettyprint">
</pre>
</li>
<li>Large image layout
-<p>For this layout, you have to check whether the image must be resized by setting the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> CSS properties. The image size must be smaller than the screen size.</p>
+<p>For this layout, you have to check whether the image must be resized by setting the <code>width</code> and <code>height</code> CSS properties. The image size must be smaller than the screen size.</p>
-<p class="figure">Figure: Large image layout</p>
+<p align="center"><strong>Figure: Large image layout</strong></p>
<p align="center"><img alt="Large image layout" src="../../images/webwidget_large_image_layout.png" /></p>
<pre class="prettyprint">
</pre>
</li>
<li>Vertical split layout
-<p>You can implement the vertical split layout using the <span style="font-family: Courier New,Courier,monospace">display</span> CSS property with the <span style="font-family: Courier New,Courier,monospace">inline-block</span> value. The <span style="font-family: Courier New,Courier,monospace">inline-block</span> elements are inline elements with additional <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> properties. With an <span style="font-family: Courier New,Courier,monospace">inline-block</span> element, you can easily achieve a grid-like layout.</p>
+<p>You can implement the vertical split layout using the <code>display</code> CSS property with the <code>inline-block</code> value. The <code>inline-block</code> elements are inline elements with additional <code>width</code> and <code>height</code> properties. With an <code>inline-block</code> element, you can easily achieve a grid-like layout.</p>
-<p class="figure">Figure: Vertical split layout</p>
+<p align="center"><strong>Figure: Vertical split layout</strong></p>
<p align="center"><img alt="Vertical split layout" src="../../images/webwidget_vertical_split_layout.png" /></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The widget engine only supports the <span style="font-family: Courier New,Courier,monospace">block</span>, <span style="font-family: Courier New,Courier,monospace">inline</span>, <span style="font-family: Courier New,Courier,monospace">inline-block</span>, and <span style="font-family: Courier New,Courier,monospace">none</span> values for the <span style="font-family: Courier New,Courier,monospace">display</span> property.
- <pre class="prettyprint">
+<div class="note">
+ <strong>Note</strong>
+ The widget engine only supports the <code>block</code>, <code>inline</code>, <code>inline-block</code>, and <code>none</code> values for the <code>display</code> property.
+<pre class="prettyprint">
#more
{
.display: inline-block;
}
-</pre></td>
- </tr>
- </tbody>
- </table>
+</pre>
+</div>
<pre class="prettyprint">
<head>
</pre>
</li>
<li>Icon layout
-<p>In this layout, icons are arranged to the screen shape. For this kind of content layout, you can use static or absolute values for the <span style="font-family: Courier New,Courier,monospace">position</span> CSS property. You can select a preferred one, but static is recommended for a responsive Web design.</p>
+<p>In this layout, icons are arranged to the screen shape. For this kind of content layout, you can use static or absolute values for the <code>position</code> CSS property. You can select a preferred one, but static is recommended for a responsive Web design.</p>
-<p class="figure">Figure: Icon layout</p>
+<p align="center"><strong>Figure: Icon layout</strong></p>
<p align="center"><img alt="Icon layout" src="../../images/webwidget_icons_layout.png" /></p>
<p>Absolute positioning:</p>
</pre>
<p>The following example shows a calendar widget implementation with styles.</p>
-<p class="figure">Figure: Calendar widget</p>
+<p align="center"><strong>Figure: Calendar widget</strong></p>
<p align="center"><img alt="Calendar widget" src="../../images/webwidget_calendar_widget_implementation.png" /></p>
<pre class="prettyprint">
<p>You can manage images in a widget with JavaScript code for updating the content.</p>
<p>The following example shows a news briefing widget implementation with images.</p>
-<p class="figure">Figure: News briefing widget</p>
+<p align="center"><strong>Figure: News briefing widget</strong></p>
<p align="center"><img alt="News briefing widget" src="../../images/webwidget_images_in_a_widget.png" /></p>
<pre class="prettyprint">
<!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>
/* 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) + '...';
+ document.getElementById('content1').textContent =
+ newsData.firstNewsData.substring(0,40) + '...';
+ document.getElementById('content2').textContent =
+ newsData.secondNewsData.substring(0,40) + '...';
}
</pre>
<h3 id="animation">Animation</h3>
-<p>For simple and smooth animation effect, use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> JavaScript method.</p>
+<p>For simple and smooth animation effect, use the <code>requestAnimationFrame()</code> JavaScript method.</p>
<p>The following example shows a weather widget implementation with an image animation.</p>
-<p class="figure">Figure: Weather widget</p>
+<p align="center"><strong>Figure: Weather widget</strong></p>
<p align="center"><img alt="Weather widget" src="../../images/webwidget_animation_in_a_widget.png" /></p>
<pre class="prettyprint">
}
</pre>
-<p>Similarly, you can create a text scrolling effect using the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method. This is useful, for example, when displaying a lengthy music title. (Remember that the marquee element is not supported in Web widgets.)</p>
+<p>Similarly, you can create a text scrolling effect using the <code>requestAnimationFrame()</code> method. This is useful, for example, when displaying a lengthy music title. (Remember that the marquee element is not supported in Web widgets.)</p>
-<p class="figure">Figure: Scrolling effect</p>
+<p align="center"><strong>Figure: Scrolling effect</strong></p>
<p align="center"><img alt="Scrolling effect" src="../../images/webwidget_scrolling_effect.png" /></p>
<pre class="prettyprint">
function step()
{
- document.getElementById('scheduleTitle').style.transform="translateX(" + (scrollLength--) + "px)"
+ document.getElementById('scheduleTitle').style.transform =
+ "translateX(" + (scrollLength--) + "px)"
if (scrollLength > -300) /* Max length */
{
window.requestAnimationFrame(step);
</pre>
<h2 id="event">Event Handling</h2>
-<p>The Web widget applications support the following events: <span style="font-family: Courier New,Courier,monospace">onload</span>, <span style="font-family: Courier New,Courier,monospace">onclick</span>, and <span style="font-family: Courier New,Courier,monospace">visibilityChange</span>:</p>
+<p>The Web widget applications support the following events: <code>onload</code>, <code>onclick</code>, and <code>visibilityChange</code>:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">onload</span>
+<li><code>onload</code>
<p>This event is generated when the Web widget content is loaded onto the widget board. Use it to implement Web widget initialization procedures. For example, initialize Web widget configurations by reading shared data from the parent Web application.</p>
-<p class="figure">Figure: onload event</p>
+<p align="center"><strong>Figure: onload event</strong></p>
<p align="center"><img alt="onload event" src="../../images/webwidget_onload_event.png" /></p>
<pre class="prettyprint">
}
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">onclick</span>
+<li><code>onclick</code>
<p>This event is generated when the user taps on an action button, whose function is specified by an HTML element. The following example code shows how to define the function for the <strong>ADD WATER</strong> button.</p>
-<p class="figure">Figure: onclick event</p>
+<p align="center"><strong>Figure: onclick event</strong></p>
<p align="center"><img alt="onclick event" src="../../images/webwidget_onclick_event.png" /></p>
<pre class="prettyprint">
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">visibilityChange</span>
+<li><code>visibilityChange</code>
<p>This event is generated when the Web widget content becomes visible or hidden.</p>
-<p class="figure">Figure: visibilityChange event</p>
+<p align="center"><strong>Figure: visibilityChange event</strong></p>
<p align="center"><img alt="visibilityChange event" src="../../images/webwidget_visibilitychange_event.png" /></p>
<pre class="prettyprint">
<h2 id="communication">Communication Between Web Widgets and Other Applications</h2>
<p>Web widgets can communicate with other applications in various ways. As shown in the following table, the available methods depend on the type of the application the Web widget interacts with.</p>
+<p align="center" class="Table"><strong>Table: Web widget communication methods</strong></p>
<table>
-<caption>Table: Web widget communication methods</caption>
<tbody>
<tr>
<th>Communication type</th>
<h3 id="comm_parent">Communicating with a Web Application on a Wearable Device</h3>
- <p>For data sharing between a Web widget and its parent application on the same device, use the Tizen Preference API. The Preference API allows a Web widget to communicate with its parent Web app (and vice versa) by storing key-value pairs in a hashtable-like data structure. The data stored by the Preference API has a "package" scope, which means that any widgets (or a Web app) in a package can access the data stored by the other widgets (or a Web app) in the same package. In addition, the Preference API does not need additional permissions, so no modifications in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file are required.</p>
+ <p>For data sharing between a Web widget and its parent application on the same device, use the Tizen Preference API. The Preference API allows a Web widget to communicate with its parent Web app (and vice versa) by storing key-value pairs in a hashtable-like data structure. The data stored by the Preference API has a "package" scope, which means that any widgets (or a Web app) in a package can access the data stored by the other widgets (or a Web app) in the same package. In addition, the Preference API does not need additional permissions, so no modifications in the <code>config.xml</code> file are required.</p>
<p>The following table lists the Preference API methods.</p>
+<p align="center" class="Table"><strong>Table: Preference API methods</strong></p>
<table>
-<caption>Table: Preference API methods</caption>
<tbody>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.setValue("key", "value")</span></td>
+ <td><code>tizen.preference.setValue("key", "value")</code></td>
<td>Stores a key-value pair.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.getValue("key")</span></td>
+ <td><code>tizen.preference.getValue("key")</code></td>
<td>Retrieves a value for the "key" key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.exists("key")</span></td>
- <td>Returns <span style="font-family: Courier New,Courier,monospace">true</span> if the given key exists.</td>
+ <td><code>tizen.preference.exists("key")</code></td>
+ <td>Returns <code>true</code> if the given key exists.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.remove("key")</span></td>
+ <td><code>tizen.preference.remove("key")</code></td>
<td>Removes a key-value pair for the "key" key.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.setChangeListener("key", listener)</span></td>
+ <td><code>tizen.preference.setChangeListener("key", listener)</code></td>
<td>Registers a change listener for "key".</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">tizen.preference.unsetChangeListener("key")</span></td>
+ <td><code>tizen.preference.unsetChangeListener("key")</code></td>
<td>Unregisters the change listener for "key".</td>
</tr>
</tbody></table>
-<p>The following example shows how to set a key-value pair in the <span style="font-family: Courier New,Courier,monospace">Widget_main.js</span> file:</p>
+<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()
{
tizen.preference.setValue("KEY", "Widget_HELLOWORLD1");
}
- if (tizen.preference.exists("KEY"))
+ if (tizen.preference.exists("KEY"))
{
tizen.preference.remove("KEY");
tizen.preference.setValue("KEY", "Widget_HELLOWORLD2");
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);
+ 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 <span style="font-family: Courier New,Courier,monospace">WebApp_main.js</span> file:</p>
+<p>To set the value in the <code>WebApp_main.js</code> file:</p>
<pre class="prettyprint">
-window.onload = function()
+window.onload = function()
{
- var timer = setInterval(function()
- {
- clearInterval(timer);
- try
- {
- tizen.preference.setValue("KEY", "APP_HELLOWORLD");
- tizen.application.getCurrentApplication().exit();
- }
- catch (ignore)
+ var timer = setInterval(function()
{
- }
- }, 2000);
+ clearInterval(timer);
+ try
+ {
+ tizen.preference.setValue("KEY", "APP_HELLOWORLD");
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (ignore)
+ {
+ }
+ }, 2000);
};
</pre>
<tizen:privilege name="http://tizen.org/privilege/application.info"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/appmanager.certificate"/>
-<tizen:privilege name="http://tizen.org/privilege/appmanager.kill>/>
+<tizen:privilege name="http://tizen.org/privilege/appmanager.kill"/>
</pre>
<p>In addition, to launch an application, its application ID must be used to identify the application:</p>
tizen.application.launch('ApplicationIDToLaunch', onGetAppsContextSuccess);
</pre>
-<table class="note">
-<tbody>
-<tr>
- <th class="note">Note</th>
-</tr>
-<tr>
- <td class="note">It is not recommended for a Web widget to launch other Web widgets. This feature is deprecated in Tizen 3.0.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ It is not recommended for a Web widget to launch other Web widgets. This feature is deprecated in Tizen 3.0.
+</div>
-
<h3 id="comm_host">Communicating with a Host Application on a Host Device</h3>
<p>The widget and its parent application can reside on separate devices, as when a Web widget is on a wearable device while the host (parent) application is on a mobile device. In this case, the widget and parent applications can communicate through SAP (Samsung Accessory Protocol) to share data between the widget (the consumer in SAP) and the parent application (the provider in SAP).</p>
<p>The following example shows SAP communication implementation between a Web widget on a Tizen wearable device and its parent application on an Android mobile device:</p>
-
+
<ul>
<li>Widget on a Tizen wearable device:
<pre class="prettyprint">
{
SASocket = socket;
SASocket.setSocketStatusListener(function(reason)
- {
- disconnect();
- });
+ {
+ disconnect();
+ });
SASocket.setDataReceiveListener(onreceive);
- SASocket.sendData(CHANNELID, 'request'); /* Request the provider to get weather info */
+ /* Request the provider to get weather info */
+ SASocket.sendData(CHANNELID, 'request');
},
onerror: onerror
};
/* Error handling */
}
},
- onerror : onerror
+ onerror: onerror
};
function onsuccess(agents)
try
{
webapis.sa.requestSAAgent(onsuccess, function(err)
- {
- /* Error handling */
- });
+ {
+ /* Error handling */
+ });
}
catch (err)
{
<li>Parent application on an Android mobile device:
<p>For the provider application on the host device, you need to:</p>
-
+
<ul>
<li>Declare the permissions, service, broadcast receiver, and intent-filter in the Android manifest file.</li>
- <li>Add the Accessory Service Profile in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> and <span style="font-family: Courier New,Courier,monospace">AndroidManifest.xml</span> files in order to allow the applications to communicate with each other.</li>
+ <li>Add the Accessory Service Profile in the <code>config.xml</code> and <code>AndroidManifest.xml</code> files in order to allow the applications to communicate with each other.</li>
</ul>
<pre class="prettyprint">
<!--Permissions-->
-<uses-permission android:name="android.permission.BLUETOOTH" />
-<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
-<uses-permission android:name="com.samsung.accessory.permission.ACCESSORY_FRAMEWORK" />
+<uses-permission android:name="android.permission.BLUETOOTH"/>
+<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
+<uses-permission android:name="com.samsung.accessory.permission.ACCESSORY_FRAMEWORK"/>
<uses-permission android:name="com.samsung.wmanager.APP"/>
<uses-permission android:name="com.samsung.wmanager.ENABLE_NOTIFICATION"/>
<!--Service registration-->
-<service android:name=".WeatherProviderForWidget" />
+<service android:name=".WeatherProviderForWidget"/>
<!--Broadcast receiver and intent-filter-->
-<receiver android:name="com.samsung.android.sdk.accessory.ServiceConnectionIndicationBroadcastReceiver" >
+<receiver android:name="com.samsung.android.sdk.accessory.ServiceConnectionIndicationBroadcastReceiver">
<intent-filter>
- <action android:name="android.accessory.service.action.ACCESSORY_SERVICE_CONNECTION_IND" />
+ <action android:name="android.accessory.service.action.ACCESSORY_SERVICE_CONNECTION_IND"/>
</intent-filter>
</receiver>
-<receiver android:name="com.samsung.android.sdk.accessory.RegisterUponInstallReceiver" >
+<receiver android:name="com.samsung.android.sdk.accessory.RegisterUponInstallReceiver">
<intent-filter>
- <action android:name="android.accessory.device.action.REGISTER_AFTER_INSTALL" />
+ <action android:name="android.accessory.device.action.REGISTER_AFTER_INSTALL"/>
</intent-filter>
</receiver>
<!--Service profile information-->
<meta-data android:name="AccessoryServicesLocation"
- android:value="/res/xml/accessoryservices.xml" />
+ android:value="/res/xml/accessoryservices.xml"/>
</pre>
<pre class="prettyprint">
// Activity (Main) code
try {
// To widget
- WeatherProviderForWidget.mConnectionHandler.send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
+ WeatherProviderForWidget.mConnectionHandler
+ .send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
} catch (JSONException e) {
e.printStackTrace();
}
// Service (WeatherProviderForWidget)
@Override
-protected void onServiceConnectionResponse(SAPeerAgent peerAgent, SASocket socket, int result) {
+protected void onServiceConnectionResponse(SAPeerAgent peerAgent, SASocket socket,
+ int result) {
if (result == SAAgent.CONNECTION_SUCCESS) {
if (socket != null) {
mConnectionHandler = (ServiceConnection) socket;
public class WeatherProviderForWidget extends SAAgent {
private static final String TAG = "WeatherProviderForWidget";
- private static final Class<ServiceConnection> SASOCKET_CLASS = ServiceConnection.class;
+ private static final Class<ServiceConnection> SASOCKET_CLASS =
+ ServiceConnection.class;
static ServiceConnection mConnectionHandler = null;
static final int WIDGET_CHANNEL_ID = 1000;
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());
+ 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"))) {
+ } 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"))) {
+ } 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);
<h3 id="comm_server">Communicating with a Web Server</h3>
- <p>To get data from a Web server through the Internet, use the XMLHttpRequest API. The Web widget engine, however, does not support the full XMLHttpRequest specification. It supports only the <span style="font-family: Courier New,Courier,monospace">GET</span> method, and the <span style="font-family: Courier New,Courier,monospace">TEXT</span> and <span style="font-family: Courier New,Courier,monospace">JSON</span> data types.</p>
+ <p>To get data from a Web server through the Internet, use the XMLHttpRequest API. The Web widget engine, however, does not support the full XMLHttpRequest specification. It supports only the <code>GET</code> method, and the <code>TEXT</code> and <code>JSON</code> data types.</p>
<p>The following example shows Web widget communication with a Web server:</p>
<pre class="prettyprint">
<!--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>
<h3 id="consolelog">Debugging with the Console Log</h3>
-<p>Using the <span style="font-family: Courier New,Courier,monospace">console.log()</span> method is a simple and convenient way of debugging a Web widget. The following figure shows how to debug a Web widget using the Tizen Studio.</p>
+<p>Using the <code>console.log()</code> method is a simple and convenient way of debugging a Web widget. The following figure shows how to debug a Web widget using the Tizen Studio.</p>
-<p class="figure">Figure: Debugging with the console log</p>
+<p align="center"><strong>Figure: Debugging with the console log</strong></p>
<p align="center"><img src="../../images/webwidget_debug_consolelog.png" alt="Debugging using console.log()" /></p>
-<p>In addition, you can use the following command to print the <span style="font-family: Courier New,Courier,monospace">console.log()</span> message in the terminal:</p>
+<p>In addition, you can use the following command to print the <code>console.log()</code> message in the terminal:</p>
<pre class="prettyprint">
sdb dlog | grep StarFish
</pre>
-<p>The following figure shows the <span style="font-family: Courier New,Courier,monospace">sbd dlog</span> command in action.</p>
+<p>The following figure shows the <code>sbd dlog</code> command in action.</p>
-<p class="figure">Figure: Debugging messages in the terminal</p>
+<p align="center"><strong>Figure: Debugging messages in the terminal</strong></p>
<p align="center"><img src="../../images/webwidget_debug_terminal.png" alt="Debugging messages in the terminal" /></p>
<h3 id="web_debug">Debugging with the Web Debugger</h3>
</ol>
<p>The following figure shows how to run the built-in Web debugger.</p>
-<p class="figure">Figure: Web debugger</p>
+<p align="center"><strong>Figure: Web debugger</strong></p>
<p align="center"><img src="../../images/webwidget_debug_web_debugger.png" alt="Web debugger" /></p>
-<p>In addition, you can still use the <span style="font-family: Courier New,Courier,monospace">console.log()</span> method as shown in the following figure.</p>
-<p class="figure">Figure: The <span style="font-family: Courier New,Courier,monospace">console.log()</span> method</p>
+<p>In addition, you can still use the <code>console.log()</code> method as shown in the following figure.</p>
+<p align="center"><strong>Figure: The <code>console.log()</code> method</strong></p>
<p align="center"><img src="../../images/webwidget_debug_web_consolelog.png" alt="Web debugger" /></p>
-<p>Similarly, you can also use the following command to print the <span style="font-family: Courier New,Courier,monospace">console.log()</span> messages in a terminal.</p>
+<p>Similarly, you can also use the following command to print the <code>console.log()</code> messages in a terminal.</p>
<pre class="prettyprint">
sdb dlog | grep ConsoleMessage
</pre>
-<p>The following figure shows the <span style="font-family: Courier New,Courier,monospace">sdb dlog</span> command in action.</p>
-<p class="figure">Figure: Debugging messages in the terminal</p>
+<p>The following figure shows the <code>sdb dlog</code> command in action.</p>
+<p align="center"><strong>Figure: Debugging messages in the terminal</strong></p>
<p align="center"><img src="../../images/webwidget_debug_web_terminal.png" alt="Debugging messages in the terminal" /></p>
<h3 id="validate">Validating a Web Widget</h3>
<p>You can enable or disable these validators in the application preferences. Go to <strong>Windows > Preferences > Tizen Studio > Web > WebWidget</strong>, and check the applicable boxes.</p>
-<p class="figure">Figure: Web widget validation</p>
+<p align="center"><strong>Figure: Web widget validation</strong></p>
<p align="center"><img src="../../images/webwidget_validate.png" alt="Web widget validation" /></p>
<p>The validation is performed automatically when the project or the package is built, or when the application is run.</p>
<p>When the validation is complete, its results are shown in the <strong>Problems</strong> view. If the view is not displayed, go to <strong>Window > Show view > Problems</strong>, or use the keyboard shortcut <strong>Shift + Alt + Q + X</strong>.</p>
-<p class="figure">Figure: Web widget validation result</p>
+<p align="center"><strong>Figure: Web widget validation result</strong></p>
<p align="center"><img src="../../images/webwidget_validate_result.png" alt="Web widget validation result" /></p>
<!--HTML-->
<img id="img_water" src="http://spec.example.com/image.png">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
-<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js" />
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/>
+<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"/>
<link rel="stylesheet" type="text/css" href="http://spec.example.com/theme.css">
<p>The width and the height of the image files in Web widgets are limited to 1.5 times the base image resolution. For the wearable profile, for example, the base image resolution is 360 x 360, so the maximum size of the images is 540 x 540. As long as the image size is within the limit, you can include multiple images in the widget.</p>
-<p class="figure">Figure: Width and height of the image</p>
+<p align="center"><strong>Figure: Width and height of the image</strong></p>
<p align="center"><img alt="Width and height of the image" src="../../images/webwidget_width_and_height_of_image.png" /></p>
</li>
<li>Resource size
<pre class="prettyprint">
<!--HTML-->
-<script src="lib/tau/wearable/js/tau.js" />
+<script src="lib/tau/wearable/js/tau.js"/>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css">
-<script src="libs/jquery/1.12.0/jquery.min.js" />
+<script src="libs/jquery/1.12.0/jquery.min.js"/>
</pre>
</li>
</ul>
<li><a href="#user-content-can-heading-styles-be-applied-to-text">Can I apply heading styles to text?</a></li>
<li><a href="#user-content-can-i-use-hyperlinks-in-web-widgets">Can I use hyperlinks in Web widgets?</a></li>
<li><a href="#user-content-what-font-styles-are-supported">Which font styles are supported?</a></li>
-<li><a href="#user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <span style="font-family: Courier New,Courier,monospace"><img></span> element?</a></li>
+<li><a href="#user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <code><img></code> element?</a></li>
<li><a href="#user-content-why-cant-i-use-iframes">Why can't I use iframes?</a></li>
<li><a href="#user-content-what-media-elements-are-supported">Which media elements are supported?</a></li>
<li><a href="#user-content-how-can-i-create-tables">How can I create tables?</a></li>
<li><a href="#user-content-what-kind-of-forms-can-i-use">What kind of forms can I use?</a></li>
-<li><a href="#user-content-how-can-i-mimic-select-elements-instead-of-using-queryselector">How can I mimic select elements instead of using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method?</a></li>
-<li><a href="#user-content-how-can-i-retrieve-nodes-witout-nodeiterator">How can I retrieve nodes without the <span style="font-family: Courier New,Courier,monospace">NodeIterator</span> object?</a></li>
-<li><a href="#user-content-is-innerhtml-or-innertext-supported">Is <span style="font-family: Courier New,Courier,monospace">innerHTML</span> or <span style="font-family: Courier New,Courier,monospace">innerText</span> supported?</a></li>
+<li><a href="#user-content-how-can-i-mimic-select-elements-instead-of-using-queryselector">How can I mimic select elements instead of using the <code>querySelector()</code> method?</a></li>
+<li><a href="#user-content-how-can-i-retrieve-nodes-witout-nodeiterator">How can I retrieve nodes without the <code>NodeIterator</code> object?</a></li>
+<li><a href="#user-content-is-innerhtml-or-innertext-supported">Is <code>innerHTML</code> or <code>innerText</code> supported?</a></li>
<li><a href="#user-content-how-can-logging-be-performed-in-the-emulator">How can logging be performed in the emulator?</a></li>
-<li><a href="#user-content-why-does-the-responsexml-property-return-undefined">Why does the <span style="font-family: Courier New,Courier,monospace">responseXML</span> property return <span style="font-family: Courier New,Courier,monospace">undefined</span>?</a></li>
-<li><a href="#user-content-where-can-i-find-a-guide-for-using-response-and-responsetype-attributes">How can I use the <span style="font-family: Courier New,Courier,monospace">response</span> and <span style="font-family: Courier New,Courier,monospace">responseType</span> attributes?</a></li>
+<li><a href="#user-content-why-does-the-responsexml-property-return-undefined">Why does the <code>responseXML</code> property return <code>undefined</code>?</a></li>
+<li><a href="#user-content-where-can-i-find-a-guide-for-using-response-and-responsetype-attributes">How can I use the <code>response</code> and <code>responseType</code> attributes?</a></li>
<li><a href="#user-content-how-can-i-change-web-widget-text-font">How can I change the Web widget text font?</a></li>
-<li><a href="#user-content-can-i-set-a-border-style-like-border-radius">Can I set a border style, such as <span style="font-family: Courier New,Courier,monospace">border-radius</span>?</a></li>
+<li><a href="#user-content-can-i-set-a-border-style-like-border-radius">Can I set a border style, such as <code>border-radius</code>?</a></li>
<li><a href="#user-content-can-images-be-animated-without-a-2-d-canvas">Can I animate images without a 2D canvas?</a></li>
<li><a href="#user-content-is-the-web-widget-specification-a-new-web-standard">Is the Web Widget Specification a new Web standard?</a></li>
<li><a href="#user-content-which-tags-and-properties-can-i-use">Which elements or properties can I use?</a></li>
<li><a href="#user-content-can-web-widgets-re-use-the-javascript-library-or-css-styles-of-their-parent-web-application">Can Web widgets reuse the JavaScript library or CSS styles of their parent Web application?</a></li>
<li><a href="#user-content-what-are-the-benefits-of-web-widget-apps-compared-with-native-widget-apps">What are the benefits of Web widgets compared with native widget applications?</a></li>
<li><a href="#user-content-what-type-of-content-is-best-for-web-widget-apps">What type of content is best for Web widgets?</a></li>
-<li><a href="#user-content-can-i-use-css-ellipsis">Can I use CSS <span style="font-family: Courier New,Courier,monospace">ellipsis</span>?</a></li>
+<li><a href="#user-content-can-i-use-css-ellipsis">Can I use CSS <code>ellipsis</code>?</a></li>
<li><a href="#user-content-do-my-customers-download-web-widget-apps-when-downloading-a-web-app">Do my customers download the Web widgets when downloading a Web application?</a></li>
<li><a href="#user-content-is-creation-initiated-by-the-add-widget-action-and-by-the-resume-widget-action">Is the widget creation initiated by the widget adding and resuming actions?</a></li>
<li><a href="#user-content-when-a-web-widget-is-removed-what-events-are-fired">When a Web widget is removed, which events are fired?</a></li>
<h4 id="user-content-how-are-click--touch-events-handled-in-web-widgets">How are click and touch events handled in Web widgets?</h4>
-<p>The Web widget engine supports only the <span style="font-family: Courier New,Courier,monospace">onclick</span> event handler for click and touch events. Implement and bind an event handler to the target element. For more information, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-event">onclick Event</a>.</p>
+<p>The Web widget engine supports only the <code>onclick</code> event handler for click and touch events. Implement and bind an event handler to the target element. For more information, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-event">onclick Event</a>.</p>
<h4 id="user-content-can-heading-styles-be-applied-to-text">Can I apply heading styles to text?</h4>
-<p>The Web widget engine does not support HTML heading styles (<span style="font-family: Courier New,Courier,monospace">h1</span>, <span style="font-family: Courier New,Courier,monospace">h2</span>, ..., <span style="font-family: Courier New,Courier,monospace">h6</span>). The heading styles are typically used to structure Web pages displayed in browsers. To make a heading text, apply a suitable CSS <span style="font-family: Courier New,Courier,monospace">font-style</span> property.</p>
+<p>The Web widget engine does not support HTML heading styles (<code>h1</code>, <code>h2</code>, ..., <code>h6</code>). The heading styles are typically used to structure Web pages displayed in browsers. To make a heading text, apply a suitable CSS <code>font-style</code> property.</p>
<h4 id="user-content-can-i-use-hyperlinks-in-web-widgets">Can I use hyperlinks in Web widgets?</h4>
<h4 id="user-content-what-font-styles-are-supported">Which font styles are supported?</h4>
-<p>The Web widget engine supports the <span style="font-family: Courier New,Courier,monospace"><br></span> and <span style="font-family: Courier New,Courier,monospace"><span></span> elements for text-level semantics (for more information, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-html-tag">HTML tag</a>). You can also use CSS properties to make the text display like text with text-level semantics elements applied. The following table lists examples of typical element/CSS property correlations.</p>
+<p>The Web widget engine supports the <code><br></code> and <code><span></code> elements for text-level semantics (for more information, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-html-tag">HTML tag</a>). You can also use CSS properties to make the text display like text with text-level semantics elements applied. The following table lists examples of typical element/CSS property correlations.</p>
+<p align="center" class="Table"><strong>Table: Element and CSS property correlations</strong></p>
<table>
-<caption>Table: Element and CSS property correlations</caption>
<thead>
<tr>
<th>Unsupported element</th>
</thead>
<tbody>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><strong></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">font-weight: bold</span></td>
+<td><code><strong></code></td>
+<td><code>font-weight: bold</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><small></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">font-size: smaller</span></td>
+<td><code><small></code></td>
+<td><code>font-size: smaller</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><s></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">text-decoration: line-through</span></td>
+<td><code><s></code></td>
+<td><code>text-decoration: line-through</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><sub></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">vertical-align: sub</span> and <span style="font-family: Courier New,Courier,monospace">font-size: smaller</span></td>
+<td><code><sub></code></td>
+<td><code>vertical-align: sub</code> and <code>font-size: smaller</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><sup></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">vertical-align: super</span> and <span style="font-family: Courier New,Courier,monospace">font-size: smaller</span></td>
+<td><code><sup></code></td>
+<td><code>vertical-align: super</code> and <code>font-size: smaller</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><i></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">font-style: italic</span></td>
+<td><code><i></code></td>
+<td><code>font-style: italic</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><b></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">font-weight: bold</span></td>
+<td><code><b></code></td>
+<td><code>font-weight: bold</code></td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><u></span></td>
-<td><span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span></td>
+<td><code><u></code></td>
+<td><code>text-decoration: underline</code></td>
</tr>
</tbody>
</table>
-<h4 id="user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <span style="font-family: Courier New,Courier,monospace"><img></span> element?</h4>
+<h4 id="user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <code><img></code> element?</h4>
-<p>To increase performance and reduce memory size, the Web widget engine imposes 2 limitations on the <span style="font-family: Courier New,Courier,monospace"><img></span> element:</p>
+<p>To increase performance and reduce memory size, the Web widget engine imposes 2 limitations on the <code><img></code> element:</p>
<ul>
<li>Supported image file formats: PNG, JPG, GIF</li>
<h4 id="user-content-what-media-elements-are-supported">Which media elements are supported?</h4>
-<p>The Web widget engine supports the <span style="font-family: Courier New,Courier,monospace"><img></span> element only, and does not support <span style="font-family: Courier New,Courier,monospace"><audio></span> and <span style="font-family: Courier New,Courier,monospace"><video></span> elements.</p>
+<p>The Web widget engine supports the <code><img></code> element only, and does not support <code><audio></code> and <code><video></code> elements.</p>
<h4 id="user-content-how-can-i-create-tables">How can I create tables?</h4>
-<p>The Web widget engine does not support the <span style="font-family: Courier New,Courier,monospace"><table></span> HTML element. To create a table-like layout, use the <span style="font-family: Courier New,Courier,monospace"><div></span> and <span style="font-family: Courier New,Courier,monospace"><border></span> elements, as shown in the following example:</p>
+<p>The Web widget engine does not support the <code><table></code> HTML element. To create a table-like layout, use the <code><div></code> and <code><border></code> elements, as shown in the following example:</p>
<pre class="prettyprint">
<!--CSS style-->
<style>
body
{
- position:absolute;
+ position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
<h4 id="user-content-what-kind-of-forms-can-i-use">What kind of forms can I use?</h4>
-<p>The Web widget engine does not support the <span style="font-family: Courier New,Courier,monospace"><form></span> element. However, you can create form-like elements using the <span style="font-family: Courier New,Courier,monospace"><div></span> element and CSS styles.</p>
+<p>The Web widget engine does not support the <code><form></code> element. However, you can create form-like elements using the <code><div></code> element and CSS styles.</p>
-<h4 id="user-content-how-can-i-mimic-select-elements-instead-of-using-queryselector">How can I mimic select elements instead of using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method?</h4>
+<h4 id="user-content-how-can-i-mimic-select-elements-instead-of-using-queryselector">How can I mimic select elements instead of using the <code>querySelector()</code> method?</h4>
-<p>The Web widget engine does not support the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method. However, you can create an alternative select element, as shown in the following example:</p>
+<p>The Web widget engine does not support the <code>querySelector()</code> method. However, you can create an alternative select element, as shown in the following example:</p>
<pre class="prettyprint">
var parent = document.getElementById('parentDiv');
}
</pre>
-<h4 id="user-content-how-can-i-retrieve-nodes-witout-nodeiterator">How can I retrieve nodes without the <span style="font-family: Courier New,Courier,monospace">NodeIterator</span> object?</h4>
+<h4 id="user-content-how-can-i-retrieve-nodes-witout-nodeiterator">How can I retrieve nodes without the <code>NodeIterator</code> object?</h4>
-<p>The Web widget engine does not support the <span style="font-family: Courier New,Courier,monospace">NodeIterator</span> object. Retrieve the <span style="font-family: Courier New,Courier,monospace">children</span> attribute of a node as shown in the following example:</p>
+<p>The Web widget engine does not support the <code>NodeIterator</code> object. Retrieve the <code>children</code> attribute of a node as shown in the following example:</p>
<pre class="prettyprint">
var c = document.body.children;
}
</pre>
-<h4 id="user-content-is-innerhtml-or-innertext-supported">Is <span style="font-family: Courier New,Courier,monospace">innerHTML</span> or <span style="font-family: Courier New,Courier,monospace">innerText</span> supported?</h4>
+<h4 id="user-content-is-innerhtml-or-innertext-supported">Is <code>innerHTML</code> or <code>innerText</code> supported?</h4>
-<p>The Web widget engine does not support <span style="font-family: Courier New,Courier,monospace">innerHTML</span> and <span style="font-family: Courier New,Courier,monospace">innerText</span> properties. To get the text data of an element, use the <span style="font-family: Courier New,Courier,monospace">textContent</span> attribute, as shown in the following example:</p>
+<p>The Web widget engine does not support <code>innerHTML</code> and <code>innerText</code> properties. To get the text data of an element, use the <code>textContent</code> attribute, as shown in the following example:</p>
<pre class="prettyprint">
var parent = document.getElementById('parentDiv');
<h4 id="user-content-how-can-logging-be-performed-in-the-emulator">How can logging be performed in the emulator?</h4>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">console.log()</span> method in the JavaScript code. You can see the logs in the Tizen Studio.</p>
+<p>Use the <code>console.log()</code> method in the JavaScript code. You can see the logs in the Tizen Studio.</p>
-<h4 id="user-content-why-does-the-responsexml-property-return-undefined">Why does the <span style="font-family: Courier New,Courier,monospace">responseXML</span> property return <span style="font-family: Courier New,Courier,monospace">undefined</span>?</h4>
+<h4 id="user-content-why-does-the-responsexml-property-return-undefined">Why does the <code>responseXML</code> property return <code>undefined</code>?</h4>
-<p>The <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method is supported only for the text data type. Therefore, the <span style="font-family: Courier New,Courier,monospace">responseXML</span> property is not necessary.</p>
+<p>The <code>XMLHttpRequest()</code> method is supported only for the text data type. Therefore, the <code>responseXML</code> property is not necessary.</p>
-<h4 id="user-content-where-can-i-find-a-guide-for-using-response-and-responsetype-attributes">How can I use the <span style="font-family: Courier New,Courier,monospace">response</span> and <span style="font-family: Courier New,Courier,monospace">responseType</span> attributes?</h4>
+<h4 id="user-content-where-can-i-find-a-guide-for-using-response-and-responsetype-attributes">How can I use the <code>response</code> and <code>responseType</code> attributes?</h4>
-<p>You cannot use them, because the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method is supported for the text data type only. For more information, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-xmlhttprequest">XMLHttpRequest</a>.</p>
+<p>You cannot use them, because the <code>XMLHttpRequest()</code> method is supported for the text data type only. For more information, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-xmlhttprequest">XMLHttpRequest</a>.</p>
<h4 id="user-content-how-can-i-change-web-widget-text-font">How can I change the Web widget text font?</h4>
-<p>For performance reasons, the Web widget engine does not support the <span style="font-family: Courier New,Courier,monospace">font-family</span> CSS property. However, you can use combinations of <span style="font-family: Courier New,Courier,monospace">font-size</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, and <span style="font-family: Courier New,Courier,monospace">font-style</span> properties to change your Web widget font.</p>
+<p>For performance reasons, the Web widget engine does not support the <code>font-family</code> CSS property. However, you can use combinations of <code>font-size</code>, <code>font-weight</code>, and <code>font-style</code> properties to change your Web widget font.</p>
-<h4 id="user-content-can-i-set-a-border-style-like-border-radius">Can I set a border style, such as <span style="font-family: Courier New,Courier,monospace">border-radius</span>?</h4>
+<h4 id="user-content-can-i-set-a-border-style-like-border-radius">Can I set a border style, such as <code>border-radius</code>?</h4>
-<p>The Web Widget Specification restricts some properties and values related to <span style="font-family: Courier New,Courier,monospace">border-radius</span>. For more information, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-border">Border</a>.</p>
+<p>The Web Widget Specification restricts some properties and values related to <code>border-radius</code>. For more information, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html#user-content-border">Border</a>.</p>
<h4 id="user-content-can-images-be-animated-without-a-2-d-canvas">Can I animate images without a 2D canvas?</h4>
-<p>The Web Widget Specification supports the <
span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method and CSS transform for implementing animations. For an example code, see <a href="#animation">Animation</a>.</p>
+<p>The Web Widget Specification supports the <
code>requestAnimationFrame()</code> method and CSS transform for implementing animations. For an example code, see <a href="#animation">Animation</a>.</p>
<h4 id="user-content-is-the-web-widget-specification-a-new-web-standard">Is the Web Widget Specification a new Web standard?</h4>
<h4 id="user-content-which-tags-and-properties-can-i-use">Which elements or properties can I use?</h4>
-<p>For the detailed information, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html">Tizen Wearable Web Widget Specification</a>.</p>
+<p>For the detailed information, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html">Tizen Wearable Web Widget Specification</a>.</p>
<h4 id="user-content-how-can-i-design-my-web-widget-layout-for-a-circular-shape">How can I design my Web widget layout for a circular shape?</h4>
<h4 id="user-content-what-kind-of-events-can-i-use-for-user-interaction">What kind of events can I use for user interaction?</h4>
-<p>Due to UX restrictions, Web widgets only allow the use of the <span style="font-family: Courier New,Courier,monospace">onclick</span> events for user interaction.</p>
+<p>Due to UX restrictions, Web widgets only allow the use of the <code>onclick</code> events for user interaction.</p>
<h4 id="user-content-how-can-i-access-the-internet-from-a-web-widget-and-what-restrictions-are-there">How can I access the Internet from a Web widget, and what restrictions are there?</h4>
-<p>Accessing Internet is available through the <
span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method. For an example code, see <a href="#comm_server">Communicating with a Web Server</a>.</p>
+<p>Accessing Internet is available through the <
code>XMLHttpRequest()</code> method. For an example code, see <a href="#comm_server">Communicating with a Web Server</a>.</p>
<h4 id="user-content-is-it-possible-to-implement-only-web-widget-without-web-application">Is it possible to implement Web widgets without a Web application?</h4>
<h4 id="user-content-how-can-i-determine-which-apis-are-supported-in-web-widgets">How can I determine which APIs are supported in Web widgets?</h4>
-<p>For the APIs supported by the Web Widget Specification, see <a href="../../../../org.tizen.web.apireference/html/widget_spec/web_widget.html">Tizen Wearable Web Widget Specification</a>. Additionally, the Tizen Studio provides a Web widget validator that indicates whether a typed-in API follows the Web Widget Specification.</p>
+<p>For the APIs supported by the Web Widget Specification, see <a href="https://developer.tizen.org/dev-guide/2.3.2/org.tizen.web.apireference/html/widget_spec/web_widget.html">Tizen Wearable Web Widget Specification</a>. Additionally, the Tizen Studio provides a Web widget validator that indicates whether a typed-in API follows the Web Widget Specification.</p>
<h4 id="user-content-can-web-widgets-re-use-the-javascript-library-or-css-styles-of-their-parent-web-application">Can Web widgets reuse the JavaScript library or CSS styles of their parent Web application?</h4>
<p>Typically as part of a Web application, Web widgets provide their users with important Web application functions (such as launching the parent Web application), and brief, important Web application information. Therefore, simple and lightweight services are best suited for Web widgets.</p>
-<h4 id="user-content-can-i-use-css-ellipsis">Can I use CSS <span style="font-family: Courier New,Courier,monospace">ellipsis</span>?</h4>
+<h4 id="user-content-can-i-use-css-ellipsis">Can I use CSS <code>ellipsis</code>?</h4>
-<p>Currently, CSS <
span style="font-family: Courier New,Courier,monospace">ellipsis</span> is not supported. However, the string length can be limiting by using JavaScript. For an example code, see the Scrolling Text sample in <a href="#animation">Animation</a>.</p>
+<p>Currently, CSS <
code>ellipsis</code> is not supported. However, the string length can be limiting by using JavaScript. For an example code, see the Scrolling Text sample in <a href="#animation">Animation</a>.</p>
<h4 id="user-content-do-my-customers-download-web-widget-apps-when-downloading-a-web-app">Do my customers download the Web widgets when downloading a Web application?</h4>
<p>You can manage installed widgets and widget instances in various ways, such as retrieving information about widgets, or getting the widget instances and receiving notifications when the state of the widget changes.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use "widget" as a name for any of your global variables, as it is the name of a global W3C object.
- </td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ Do not use "widget" as a name for any of your global variables, as it is the name of a global W3C object.
+</div>
<p>The main features of the Widget Service API include:</p>
<ul>
<h2 id="widget" name="widget">Widget Retrieval</h2>
-<p>Using the <
span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> 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), you can:</p>
+<p>Using 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), you can:</p>
<ul>
- <li>Retrieve a widget or widgets using the <span style="font-family: Courier New,Courier,monospace">getWidgets()</span> method.</li>
+ <li>Retrieve a widget or widgets using the <code>getWidgets()</code> method.</li>
<li>Receive information about the primary widget ID or size related to the specific size type.</li>
</ul>
<h3 id="get_widget" name="get_widget">Retrieving a Widget</h3>
<p>Learning how to retrieve the installed widget list is a basic widget management skill:</p>
<ol>
- <li><p>Define a success handler implementing the <
span style="font-family: Courier New,Courier,monospace">WidgetArraySuccessCallback</span> 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>
+ <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("Error " + error.message);
};
</pre></li>
- <li><p>To get a list of all installed widgets, use the <span style="font-family: Courier New,Courier,monospace">getWidgets()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> interface. If the optional <span style="font-family: Courier New,Courier,monospace">packageId</span> parameter is given, only the widgets belonging to the given package are returned.</p>
+ <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";
tizen.widgetservice.getWidgets(successCallback, errorCallback, packageId);
</pre>
-<p>You can also get a specific widget object by using the <span style="font-family: Courier New,Courier,monospace">getWidget()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> interface:</p>
+<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");
</pre></li>
<p>Learning how to retrieve the primary widget ID or size makes using the Widget Service API easy and convenient:</p>
<ul>
- <li><p>To get the primary widget ID of a given application or package ID, use the <span style="font-family: Courier New,Courier,monospace">getPrimaryWidgetId()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> interface:</p>
+ <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");
</pre></li>
- <li><p>To get the size of the corresponding size type, use the <span style="font-family: Courier New,Courier,monospace">getSize()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> interface, specifying the size type:</p>
+ <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");
</pre></li>
</ul>
<h2 id="management" name="management">Widget Management</h2>
-<p>Using the <
span style="font-family: Courier New,Courier,monospace">Widget</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#Widget">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#Widget">wearable</a> applications), you can:</p>
+<p>Using the <
code>Widget</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#Widget">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#Widget">wearable</a> applications), you can:</p>
<ul>
- <li>Get the name of the widget in a given language using the <span style="font-family: Courier New,Courier,monospace">getName()</span> method.</li>
- <li>Get all instances belonging to the widget using the <span style="font-family: Courier New,Courier,monospace">getInstances()</span> method.</li>
+ <li>Get the name of the widget in a given language using the <code>getName()</code> method.</li>
+ <li>Get all instances belonging to the widget using the <code>getInstances()</code> method.</li>
<li>Get variants of a specified size type.</li>
<li>Monitor state changes in an installed widget.</li>
</ul>
<pre class="prettyprint">
var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
</pre></li>
- <li><p>To get the widget name, use the <span style="font-family: Courier New,Courier,monospace">getName()</span> method of the <span style="font-family: Courier New,Courier,monospace">Widget</span> interface. If the locale parameter is omitted, the system locale is used.</p>
+ <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");
</pre></li>
<p>Learning how to retrieve information about installed widget instances makes the Widget Service API more useful:</p>
<ol>
- <li><p>Define a success handler implementing the <
span style="font-family: Courier New,Courier,monospace">WidgetInstancesCallback</span> 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>
+ <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)
{
};
</pre></li>
- <li><p>To retrieve a list of all instances belonging to the widget, use the <span style="font-family: Courier New,Courier,monospace">getInstances()</span> method of the <span style="font-family: Courier New,Courier,monospace">Widget</span> interface:</p>
+ <li><p>To retrieve a list of all instances belonging to the widget, use the <code>getInstances()</code> method of the <code>Widget</code> interface:</p>
<pre class="prettyprint">
myWidget.getInstances(successCallback, errorCallback);
</pre></li>
<p>To retrieve variants representing all of the supported widget size types:</p>
<ol>
- <li><p>Define a success handler implementing the <
span style="font-family: Courier New,Courier,monospace">WidgetVariantsCallback</span> 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>
+ <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)
{
<pre class="prettyprint">
var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
</pre></li>
- <li><p>To get a list of all variants, use the <span style="font-family: Courier New,Courier,monospace">getVariants()</span> method of the <span style="font-family: Courier New,Courier,monospace">Widget</span> interface:</p>
+ <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">
myWidget.getVariants(successCallback, errorCallback);
</pre>
-<p>You can also get a specific variant by using the <span style="font-family: Courier New,Courier,monospace">getVariant()</span> method with one of the supported size types as a parameter:</p>
+<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");
</pre></li>
<h3 id="receive" name="receive">Monitoring Widget Changes</h3>
-<p>Learning to receive notifications when the state of the widget has been changed is a useful widget management skill. There are 4 states that can be noticed: <span style="font-family: Courier New,Courier,monospace">CREATE</span>, <span style="font-family: Courier New,Courier,monospace">DESTROY</span>, <span style="font-family: Courier New,Courier,monospace">PAUSE</span>, and <span style="font-family: Courier New,Courier,monospace">RESUME</span>.</p>
+<p>Learning to receive notifications when the state of the widget has been changed is a useful widget management skill. There are 4 states that can be noticed: <code>CREATE</code>, <code>DESTROY</code>, <code>PAUSE</code>, and <code>RESUME</code>.</p>
<ol>
- <li><p>Define the event handler for state notifications using the <
span style="font-family: Courier New,Courier,monospace">WidgetChangeCallback</span> 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>
+ <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)
{
};
</pre></li>
- <li><p>Retrieve the widget object using the <
span style="font-family: Courier New,Courier,monospace">getWidget()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetServiceManager</span> 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>
+ <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");
</pre></li>
- <li><p>Add the listener to use the defined event handler with the <span style="font-family: Courier New,Courier,monospace">addStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Widget</span> interface:</p>
+ <li><p>Add the listener to use the defined event handler with the <code>addStateChangeListener()</code> method of the <code>Widget</code> interface:</p>
<pre class="prettyprint">
var watchId = myWidget.addStateChangeListener(WidgetChangeCallback);
</pre></li>
- <li><p>To stop receiving notifications for the defined listener, use the <span style="font-family: Courier New,Courier,monospace">removeStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Widget</span> interface with the previously obtained listener ID:</p>
+ <li><p>To stop receiving notifications for the defined listener, use the <code>removeStateChangeListener()</code> method of the <code>Widget</code> interface with the previously obtained listener ID:</p>
<pre class="prettyprint">
myWidget.removeStateChangeListener(watchId);
</pre></li>
</ol>
<h2 id="instance" name="instance">Widget Instance Management</h2>
-<p>Using the <
span style="font-family: Courier New,Courier,monospace">WidgetInstance</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstance">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstance">wearable</a> applications), you can:</p>
+<p>Using the <
code>WidgetInstance</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstance">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstance">wearable</a> applications), you can:</p>
<ul>
- <li>Change the update period of the instance using the <span style="font-family: Courier New,Courier,monospace">changeUpdatePeriod()</span> method.</li>
+ <li>Change the update period of the instance using the <code>changeUpdatePeriod()</code> method.</li>
<li>Send or get content to and from the widget instance.</li>
</ul>
<p>To change the update interval for the widget instance:</p>
<ol>
- <li><p>Retrieve the widget instance with the <span style="font-family: Courier New,Courier,monospace">getInstances()</span> method:</p>
+ <li><p>Retrieve the widget instance with the <code>getInstances()</code> method:</p>
<pre class="prettyprint">
var instance;
var successCallback = function(instances)
var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
myWidget.getInstances(successCallback);
</pre></li>
- <li><p>To change the update interval, use the <span style="font-family: Courier New,Courier,monospace">changeUpdatePeriod()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetInstance</span> interface with the new value (in seconds):</p>
+ <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>
<pre class="prettyprint">
instance.changeUpdatePeriod(2);
</pre></li>
<p>Learning how to send and get the widget content is a useful widget management skill:</p>
<ol>
- <li><p>Obtain the widget instance with the <span style="font-family: Courier New,Courier,monospace">getInstances()</span> method:</p>
+ <li><p>Obtain the widget instance with the <code>getInstances()</code> method:</p>
<pre class="prettyprint">
var instance;
var successCallback = function(instances)
myWidget.getInstances(successCallback);
</pre></li>
- <li><p>To send data to the widget, use the <span style="font-family: Courier New,Courier,monospace">sendContent()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetInstance</span> interface. The second parameter defines whether the instance is updated even if the provider is paused.</p>
+ <li><p>To send data to the widget, use the <code>sendContent()</code> method of the <code>WidgetInstance</code> interface. The second parameter defines whether the instance is updated even if the provider is paused.</p>
<pre class="prettyprint">
instance.sendContent(data, true);
</pre></li>
- <li><p>To retrieve widget instance content, define a success handler implementing the <
span style="font-family: Courier New,Courier,monospace">WidgetContentCallback</span> 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>
+ <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("Error " + error.message);
};
</pre>
-<p>Afterwards, use the <span style="font-family: Courier New,Courier,monospace">getContent()</span> method of the <span style="font-family: Courier New,Courier,monospace">WidgetInstance</span> interface:</p>
+<p>Afterwards, use the <code>getContent()</code> method of the <code>WidgetInstance</code> interface:</p>
<pre class="prettyprint">
instance.getContent(successCallback, errorCallback);
</pre></li>
<div id="container"><div id="contents"><div class="content">
<h1>Bluetooth</h1>
-
+
<p>You can use Bluetooth functionalities in your application, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
-
+
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the Bluetooth API include:</p>
<p>For a practical example of using the device as a Bluetooth server or client in a chat application, see the <a href="task_bluetoothchat_w.htm">Bluetooth Chat</a> mobile sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and Bluetooth (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and Bluetooth (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/bluetooth"/>
</pre>
-
+
<h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
-
- <p>You can enable or disable the local Bluetooth adapter, and set the device name using the system-provided service through the <
span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface (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).</p>
+
+ <p>You can enable or disable the local Bluetooth adapter, and set the device name using the system-provided service through the <
code>ApplicationControl</code> interface (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).</p>
<p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on. The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. Whenever Bluetooth is required, request a built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth.</p>
- <p class="figure">Figure: Bluetooth setting screen</p>
+ <p align="center"><strong>Figure: Bluetooth setting screen</strong></p>
<p align="center"><img src="../../images/bluetooth_onoff.png" alt="Bluetooth setting screen"/></p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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 adapter = tizen.bluetooth.getDefaultAdapter();</pre></li>
+ <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 adapter = tizen.bluetooth.getDefaultAdapter();
+</pre></li>
-<li> Define a callback for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:
-<pre class="prettyprint">function launchSuccess()
+<li>Define a callback for the <code>launchAppControl()</code> method:
+<pre class="prettyprint">
+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.");
-}</pre></li>
+ 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 <span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> (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 =
+<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)
{
alert("Bluetooth Settings application reported failure.");
}
-};</pre></li>
+};
+</pre></li>
-<li> If necessary, request launching the Bluetooth Settings with the prepared <span style="font-family: Courier New,Courier,monospace">bluetoothSwitchAppControl</span>:
-<pre class="prettyprint">if (adapter.powered)
+<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);
-}</pre></li>
+ tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess,
+ launchError, serviceReply);
+}
+</pre></li>
-<li><p>To display the Bluetooth visibility switch, use the <span style="font-family: Courier New,Courier,monospace">application/x-bluetooth-visibility</span> 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)
+<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.");
+ alert("An error occurred: " + error.name
+ + ". Please enable Bluetooth visibility through the Settings application.");
}
-var serviceVisibilityReply =
+var serviceVisibilityReply =
{
/* Called when the launched application reports success */
- onsuccess: function(data)
+ onsuccess: function(data)
{
- console.log("Bluetooth is " + (adapter.visible ? "now discoverable." : "still not visible."));
+ console.log("Bluetooth is "
+ + (adapter.visible ? "now discoverable." : "still not visible."));
},
/* Called when launched application reports failure */
- onfailure: function()
+ 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 <span style="font-family: Courier New,Courier,monospace">setName()</span> method.</p> <p>The name helps to recognize the device in a list of <a href="#Discovering_BT_Devices">retrieved devices</a>.</p> <pre class="prettyprint">adapter.setName(chatServerName);</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>
+<pre class="prettyprint">
+adapter.setName(chatServerName);
+</pre></li>
</ol>
-
+
<h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices">Discovering Bluetooth Devices</h2>
-<p>The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the <
span style="font-family: Courier New,Courier,monospace">BluetoothClass</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClass">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClass">wearable</a> applications) is used to define characteristics and capabilities of a Bluetooth device. The <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMajor</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMajor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMajor">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMinor</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMinor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMinor">wearable</a> applications) specify the identifiers for major and minor Class of Device (CoD).</p>
+<p>The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the <
code>BluetoothClass</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClass">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClass">wearable</a> applications) is used to define characteristics and capabilities of a Bluetooth device. The <code>BluetoothClassDeviceMajor</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMajor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMajor">wearable</a> applications) and <code>BluetoothClassDeviceMinor</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMinor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMinor">wearable</a> applications) specify the identifiers for major and minor Class of Device (CoD).</p>
<p>You can also retrieve the known devices which were bonded or found in a prior discovery process.</p>
<p>To search for remote devices and get the known devices:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:
+ <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:
<pre class="prettyprint">
var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
- <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> method.</p>
- <p>The results of the search are returned in the <
span style="font-family: Courier New,Courier,monospace">BluetoothDiscoverDevicesSuccessCallback</span> (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>
+ <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 =
{
/* Discover devices */
adapter.discoverDevices(discoverDevicesSuccessCallback, null);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>To retrieve known devices (which have been previously paired or searched for), use the <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> method.</p>
- <p>The results of the search are returned in the <span style="font-family: Courier New,Courier,monospace">BluetoothDeviceArraySuccessCallback</span> (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>
+<div class="note">
+ <strong>Note</strong>
+ To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.
+</div>
+ </li>
+ <li><p>To retrieve known devices (which have been previously paired or searched for), use the <code>getKnownDevices()</code> method.</p>
+ <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)
adapter.getKnownDevices(onGotDevices);
</pre></li>
</ol>
-
+
<h2 id="Creating_Bond" name="Creating_Bond">Creating a Bonding with a Bluetooth Device</h2>
-
+
<p>To create a bonding with other Bluetooth devices:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method: <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+ <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:
+<pre class="prettyprint">
+var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
- <li><p>To create a bonding with another device, use the <span style="font-family: Courier New,Courier,monospace">createBonding()</span> method:</p> <pre class="prettyprint">
+ <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);
adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccessCallback, onErrorCallback);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The MAC address of the Bluetooth device is a <span style="font-family: Courier New,Courier,monospace">BluetoothAddress</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span>'s <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> and <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> methods.</td>
- </tr>
- </tbody>
- </table></li>
+<div class="note">
+ <strong>Note</strong>
+ The MAC address of the Bluetooth device is a <code>BluetoothAddress</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <code>BluetoothDevice</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <code>BluetoothAdapter</code>'s <code>getKnownDevices()</code> and <code>discoverDevices()</code> methods.
+</div>
+ </li>
- <li><p>To end the bonding with a remote device, use the <span style="font-family: Courier New,Courier,monospace">destroyBonding()</span> method:</p> <pre class="prettyprint">adapter.destroyBonding("35:F4:59:D1:7A:03");</pre></li>
+ <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");
+</pre></li>
</ol>
-
+
<h2 id="Connecting_BT_device" name="Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</h2>
-<p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
-
- <p>The Radio Frequency Communication (RFCOMM) is a set of transport protocols which allows multiple simultaneous connections to a device. If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service and it is called a server device. The devices that request the service are called client devices. </p>
- <p>To connect to services provided by a server device to the client devices:</p>
- <ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:
- <pre class="prettyprint">
- var adapter = tizen.bluetooth.getDefaultAdapter();
-</pre></li>
- <li><p>To register a service and allow client devices to connect to it, use the <span style="font-family: Courier New,Courier,monospace">registerRFCOMMServiceByUUID()</span> method on the server device:</p>
- <pre class="prettyprint">adapter.registerRFCOMMServiceByUUID(serviceUUID, "My service");</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications). The object has an array of UUIDs available for the device.</td>
- </tr>
- </tbody>
- </table> <p>When the service has been successfully registered, the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceSuccessCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceSuccessCallback">wearable</a> applications) is triggered.</p> </li>
-
+<p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <code>BluetoothSocket</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
+
+ <p>The Radio Frequency Communication (RFCOMM) is a set of transport protocols which allows multiple simultaneous connections to a device. If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service and it is called a server device. The devices that request the service are called client devices. </p>
+ <p>To connect to services provided by a server device to the client devices:</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:
+<pre class="prettyprint">
+var adapter = tizen.bluetooth.getDefaultAdapter();
+</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");
+</pre>
+<div class="note">
+ <strong>Note</strong>
+ For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the <code>BluetoothDevice</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications). The object has an array of UUIDs available for the device.
+</div>
+
+ <p>When the service has been successfully registered, the <code>BluetoothServiceSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceSuccessCallback">wearable</a> applications) is triggered.</p> </li>
+
<li>Before establishing a connection, your device must be bonded with a peer device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
-
- <li><p>To connect to the server device, use the <span style="font-family: Courier New,Courier,monospace">connectToServiceByUUID()</span> method on the client device:</p>
+
+ <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)
+ }, function(error)
{
console.log("Error while connecting: " + error.message);
}
-);</pre>
+);
+</pre>
-<p>When a connection between 2 devices is established, the <span style="font-family: Courier New,Courier,monospace">BluetoothSocketSuccessCallback</span> 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 <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceHandler</span> 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><p>To send data to the peer device, use the <span style="font-family: Courier New,Courier,monospace">writeData()</span> method:</p>
+<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><p>To send data to the peer device, use the <code>writeData()</code> method:</p>
<pre class="prettyprint">
var somemsg = [3, 2, 1];
var length = socket.writeData(somemsg);
-</pre>
+</pre>
-<p>To send data between the devices, use a socket mechanism with the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface. The proper socket is received when the devices are connected.</p></li>
+<p>To send data between the devices, use a socket mechanism with the <code>BluetoothSocket</code> interface. The proper socket is received when the devices are connected.</p></li>
-<li><p>To read the data in the server device, use the <span style="font-family: Courier New,Courier,monospace">readData()</span> method:</p>
+<li><p>To read the data in the server device, use the <code>readData()</code> method:</p>
-<pre class="prettyprint">var data = socket.readData();</pre>
+<pre class="prettyprint">
+var data = socket.readData();
+</pre>
+
+<p>When an incoming message is received from the peer device, the <code>onmessage</code> event handler in the <code>BluetoothSocket</code> interface is triggered. </p></li>
+ </ol>
-<p>When an incoming message is received from the peer device, the <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface is triggered. </p></li>
- </ol>
-
<h2 id="Communicating_Health" name="Communicating_Health">Communicating with a Health Source Device</h2>
-
- <p>To increase the communication capabilities of your application, you must learn to communicate with a health source device:</p>
- <ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> 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();
+
+ <p>To increase the communication capabilities of your application, you must learn to communicate with a health source device:</p>
+ <ol>
+ <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 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)
+</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;
}
healthProfileHandler.registerSinkApplication(4100, "testSinkApp", onSinkApp);
-</pre>
-<p>When the sink application is registered successfully, the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplicationSuccessCallback</span> 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>
+</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 <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> interface:</p>
+<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)
+function onConnect(channel)
{
console.log("Success");
healthChannel = channel;
}
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 <
span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method is called. In addition, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplication</span> 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 <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannel</span> 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 <span style="font-family: Courier New,Courier,monospace">sendData()</span> method:</p>
+ {
+ 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>
<pre class="prettyprint">
var dataToSend = [0, 0, 0];
-var length = healthChannel.sendData(dataToSend);</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">wearable</a> applications) is called when the data is received, if you set a listener on the connected channel by using the <span style="font-family: Courier New,Courier,monospace">setListener()</span> method.</p></li>
-
- <li><p>Disconnect from the health source device:</p> <pre class="prettyprint">
+var length = healthChannel.sendData(dataToSend);
+</pre>
+<p>The <code>onmessage</code> event handler in the <code>BluetoothHealthChannelChangeCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">wearable</a> applications) is called when the data is received, if you set a listener on the connected channel by using the <code>setListener()</code> method.</p></li>
+
+ <li><p>Disconnect from the health source device:</p>
+<pre class="prettyprint">
healthChannel.close();
-</pre>
-<p>When the channel is disconnected, the <span style="font-family: Courier New,Courier,monospace">onclose</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface is called.</p></li>
- </ol>
-
+</pre>
+<p>When the channel is disconnected, the <code>onclose</code> event handler in the <code>BluetoothHealthChannelChangeCallback</code> interface is called.</p></li>
+ </ol>
+
<h2 id="Discovering_BT_LE_Devices" name="Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</h2>
<p>To search for remote Bluetooth devices:</p>
<ol>
- <li>Define a scan event handler by implementing the <
span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> 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).
+ <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 + "]");
};
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+<div class="note">
+ <strong>Note</strong>
+ To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.
+</div>
+ </li>
+
+ <li><p>Retrieve a <code>BluetoothLEAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <code>getLEAdapter()</code> method of the <code>BluetoothManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">
+var adapter = tizen.bluetooth.getLEAdapter();
+</pre>
</li>
- <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.startScan(successcallback);</pre>
+ <li><p>To search for remote devices, use the <code>startScan()</code> method of the <code>BluetoothLEAdapter</code> interface:</p>
+<pre class="prettyprint">
+adapter.startScan(successcallback);
+</pre>
</li>
- <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopScan();</pre>
+ <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <code>stopScan()</code> method of the <code>BluetoothLEAdapter</code> interface:</p>
+<pre class="prettyprint">
+adapter.stopScan();
+</pre>
</li>
</ol>
<p>To control what information is advertised by the device:</p>
<ol>
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ <li><p>Retrieve a <code>BluetoothLEAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <code>getLEAdapter()</code> method of the <code>BluetoothManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">
+var adapter = tizen.bluetooth.getLEAdapter();
+</pre>
</li>
- <li><p>Set up options and start advertising with the <span style="font-family: Courier New,Courier,monospace">startAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+ <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 */
+ 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);
-</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To learn how to make your mobile device visible to other Bluetooth devices, see <a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a>.</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li><p>To disable the advertising, use the <span style="font-family: Courier New,Courier,monospace">stopAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopAdvertise();</pre>
+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">
+ <strong>Note</strong>
+ To learn how to make your mobile device visible to other Bluetooth devices, see <a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a>.
+</div>
+ </li>
+ <li><p>To disable the advertising, use the <code>stopAdvertise()</code> method of the <code>BluetoothLEAdapter</code> interface:</p>
+<pre class="prettyprint">
+adapter.stopAdvertise();
+</pre>
</li>
</ol>
<p>To connect to other Bluetooth Low Energy devices:</p>
<ol>
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ <li><p>Retrieve a <code>BluetoothLEAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <code>getLEAdapter()</code> method of the <code>BluetoothManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">
+var adapter = tizen.bluetooth.getLEAdapter();
+</pre>
</li>
<li><p>Define success and error callbacks for the connect operation:</p>
<pre class="prettyprint">
-function connectFail(error)
+function connectFail(error)
{
console.log("Failed to connect to device: " + e.message);
}
-function connectSuccess()
+function connectSuccess()
{
console.log("Connected to device");
}
</li>
<li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
- <p>Within the callback request, establish a connection with the found device using the <
span style="font-family: Courier New,Courier,monospace">connect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+ <p>Within the callback request, establish a connection with the found device using the <
code>connect()</code> method of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
<pre class="prettyprint">
var remoteDevice = null;
function onDeviceFound(device)
{
- if (remoteDevice === null)
+ if (remoteDevice === null)
{
remoteDevice = device;
console.log("Found device " + device.name + ". Connecting...");
</pre>
</li>
- <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
-<pre class="prettyprint">adapter.startScan(onDeviceFound);</pre></li>
+ <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <code>startScan()</code> method of the <code>BluetoothLEAdapter</code> adapter:</p>
+<pre class="prettyprint">
+adapter.startScan(onDeviceFound);
+</pre></li>
- <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.disconnect();</pre></li>
+ <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <code>disconnect()</code> method of the <code>BluetoothLEDevice</code> interface:</p>
+<pre class="prettyprint">
+remoteDevice.disconnect();
+</pre></li>
</ol>
<p>To receive notifications whenever the device connection is established or lost:</p>
<ol>
- <li><p>Retrieve a <
span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+ <li><p>Retrieve a <
code>BluetoothLEAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <code>getLEAdapter()</code> method of the <code>BluetoothManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
<pre class="prettyprint">
-var adapter = tizen.bluetooth.getLEAdapter();</pre>
+var adapter = tizen.bluetooth.getLEAdapter();
+</pre>
</li>
- <li><p>Define a connection state change listener by implementing the <
span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> 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>
+ <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 =
+var connectionListener =
{
- onconnected: function(device)
+ onconnected: function(device)
{
- console.log("Connected to the device: " + device.name + " [" + device.address + "]");
+ console.log("Connected to the device: " + device.name
+ + " [" + device.address + "]");
},
- ondisconnected: function(device)
+ ondisconnected: function(device)
{
- console.log("Disconnected from the device " + device.name + " [" + device.address + "]");
+ console.log("Disconnected from the device " + device.name
+ + " [" + device.address + "]");
}
};
</pre>
</li>
<li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
- <p>Within the callback, register a connection state change listener using the <
span style="font-family: Courier New,Courier,monospace">addConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+ <p>Within the callback, register a connection state change listener using the <
code>addConnectStateChangeListener()</code> method of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
<pre class="prettyprint">
var remoteDevice = null;
var watchId;
function onDeviceFound(device)
{
- if (remoteDevice === null)
+ if (remoteDevice === null)
{
remoteDevice = device;
console.log("Found device " + device.name + ". Connecting...");
</li>
<li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
-<pre class="prettyprint">adapter.startScan(onDeviceFound);</pre></li>
+<pre class="prettyprint">
+adapter.startScan(onDeviceFound);
+</pre></li>
- <li><p>When the notifications about the connection are no longer required, deregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
+ <li><p>When the notifications about the connection are no longer required, deregister the listener from the device by calling the <code>removeConnectStateChangeListener()</code> method of the <code>BluetoothLEDevice</code> interface:</p>
+<pre class="prettyprint">
+remoteDevice.removeConnectStateChangeListener(watchId);
+</pre></li>
</ol>
<h2 id="Retrieving_Services" name="Retrieving_Services">Retrieving Bluetooth GATT Services</h2>
<ol>
<li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Define a connection state change listener by implementing the <
span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> (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>
+ <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)
+ if (indent === undefined)
{
indent = "";
}
- console.log(indent + "Service " + service.uuid + ". Has " + service.characteristics.length
- + " characteristics and " + service.services.length + " sub-services.");
+ 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++)
+ for (var i = 0; i < service.services.length; i++)
{
showGATTService(service.services[i], indent + " ");
}
}
</pre>
</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ <li><p>Retrieve a list of GATT service UUIDs from the <code>uuids</code> attribute of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var serviceUUIDs = remoteDevice.uuids;
+</pre>
</li>
- <li><p>Retrieve GATT service information using the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface for every service UUID:</p>
+ <li><p>Retrieve GATT service information using the <code>getService()</code> method of the <code>BluetoothLEDevice</code> interface for every service UUID:</p>
<pre class="prettyprint">
var i = 0, service = null;
-for (i; i < serviceUUIDs.length; i++)
+for (i; i < serviceUUIDs.length; i++)
{
-
service = remoteDevice.getService(serviceUUIDs[i]);
showGATTService(service);
-}</pre>
+}
+</pre>
</li>
- <li><p>Retrieve all service UUIDs using the <span style="font-family: Courier New,Courier,monospace">getServiceAllUuids()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
+ <li><p>Retrieve all service UUIDs using the <code>getServiceAllUuids()</code> method of the <code>BluetoothLEDevice</code> interface:</p>
<pre class="prettyprint">
var services = remoteDevice.getServiceAllUuids();
<ol>
<li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ <li><p>Retrieve a list of GATT service UUIDs from the <code>uuids</code> attribute of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var serviceUUIDs = remoteDevice.uuids;
+</pre>
</li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ <li><p>Select a GATT service and use the <code>getService()</code> method of the <code>BluetoothLEDevice</code> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">
+var gattService = remoteDevice.getService(serviceUUIDs[0]);
+</pre>
</li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+ <li><p>Select an interesting characteristic from the <code>characteristics</code> attribute of the <code>BluetoothGATTService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">
+var property = gattService.characteristics[0];
+</pre>
</li>
- <li><p>Define a callback implementing the <
span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> 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>
+ <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)
{
}
</pre>
</li>
- <li><p>To retrieve the GATT characteristic value, use the <
span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> 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>
+ <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)
+if (!property.isReadable)
{
console.log("Property seems not to be readable. Attempting to read...");
}
-property.readValue(readSuccess, readFail);</pre>
+property.readValue(readSuccess, readFail);
+</pre>
</li>
- <li><p>To change the characteristic value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
+ <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("writeValue() failed: " + error);
}
-if (!property.isWritable)
+if (!property.isWritable)
{
console.log("Property seems not to be writable. Attempting to write...");
}
<ol>
<li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ <li><p>Retrieve a list of GATT service UUIDs from the <code>uuids</code> attribute of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var serviceUUIDs = remoteDevice.uuids;
+</pre>
</li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ <li><p>Select a GATT service and use the <code>getService()</code> method of the <code>BluetoothLEDevice</code> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">
+var gattService = remoteDevice.getService(serviceUUIDs[0]);
+</pre>
</li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+ <li><p>Select an interesting characteristic from the <code>characteristics</code> attribute of the <code>BluetoothGATTService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">
+var property = gattService.characteristics[0];
+</pre>
</li>
- <li><p>Define a callback implementing the <
span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> 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>
+ <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)
{
</pre>
</li>
- <li><p>Register a value change listener using the <span style="font-family: Courier New,Courier,monospace">addValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> 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">var watchId = property.addValueChangeListener(onValueChange);</pre></li>
+ <li><p>Register a value change listener using the <code>addValueChangeListener()</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">
+var watchId = property.addValueChangeListener(onValueChange);
+</pre></li>
- <li><p>When the notifications about the connection are no longer required, deregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
-<pre class="prettyprint">property.removeValueChangeListener(watchId);</pre></li>
+ <li><p>When the notifications about the connection are no longer required, deregister the listener from the device by calling the <code>removeValueChangeListener()</code> method of the <code>BluetoothGATTCharacteristic</code> interface:</p>
+<pre class="prettyprint">
+property.removeValueChangeListener(watchId);
+</pre></li>
</ol>
<h2 id="Descriptor_Value" name="Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</h2>
<ol>
<li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ <li><p>Retrieve a list of GATT service UUIDs from the <code>uuids</code> attribute of the <code>BluetoothLEDevice</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var serviceUUIDs = remoteDevice.uuids;
+</pre>
</li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ <li><p>Select a GATT service and use the <code>getService()</code> method of the <code>BluetoothLEDevice</code> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">
+var gattService = remoteDevice.getService(serviceUUIDs[0]);
+</pre>
</li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var characteristic = gattService.characteristics[0];</pre></li>
- <li><p>Select an interesting descriptor from the <span style="font-family: Courier New,Courier,monospace">descriptors</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> 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). In this example, the first descriptor is used:</p>
-<pre class="prettyprint">var descriptor = characteristic.descriptors[0];</pre>
+ <li><p>Select an interesting characteristic from the <code>characteristics</code> attribute of the <code>BluetoothGATTService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">
+var characteristic = gattService.characteristics[0];
+</pre></li>
+ <li><p>Select an interesting descriptor from the <code>descriptors</code> attribute 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). In this example, the first descriptor is used:</p>
+<pre class="prettyprint">
+var descriptor = characteristic.descriptors[0];
+</pre>
</li>
- <li><p>Define a callback implementing the <
span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> 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>
+ <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)
{
}
</pre>
</li>
- <li><p>To retrieve the GATT descriptor value, use the <
span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
+ <li><p>To retrieve the GATT descriptor value, use the <
code>readValue()</code> method of the <code>BluetoothGATTDescriptor</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
<pre class="prettyprint">
-descriptor.readValue(readSuccess, readFail);</pre>
+descriptor.readValue(readSuccess, readFail);
+</pre>
</li>
- <li><p>To change the descriptor value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface:</p>
+ <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)
{
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w_optional.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
- <li>Tizen 3.0 and Higher for Mobile</li>
- <li>Tizen 3.0 and Higher for Wearable</li>
- <li>Tizen 3.0 and Higher for TV</li>
+ <li>Tizen 4.0 and Higher for Mobile</li>
+ <li>Tizen 4.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/convergence.html">Convergence API for Mobile Web</a></li>
<li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/convergence.html">Convergence API for Wearable Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/convergence.html">Convergence API for TV Web</a></li>
</ul>
</div></div>
</div>
<p>You can establish connections between different devices as well as propagate data and commands among them using a collection of device-to-device Convergence services. The Convergence services are remote functions to access and control nearby devices. If you implement an application with the Convergence API, the application can discover devices within the same network, obtain information about available device-to-device Convergence services, connect to applicable devices, and execute the services remotely, while you need no understanding of the communication details, such as connectivity type.</p>
- <p>The Convergence API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Convergence API is not supported on any Tizen Emulators.</p>
+ <p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the Convergence API include:</p>
<ul>
<ul>
<li>AppCommunicationService
<p>You can spawn 2 types of instances: server and client. Typically, the client finds available server services through a discovery, establishes a connection with one of the servers, and launches an application on the server side. The server cannot launch an application on the client side. Both the client and server can exchange text messages and binary payloads.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The AppCommunicationServerService can currently only be instantiated in TV applications.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The server for the AppCommunicationService can only be implemented in a TV device based on Tizen 3.0. You can develop a mobile or wearable client for the AppCommunicationService, if a server exists.
+</div>
</li>
<li>RemoteAppControlService
<p>The communication between RemoteAppControlService device instances does not involve servers. If the RemoteAppControlService is available on the device, remote applications can launch applications and send application control requests. The communication between devices begins after a discovery of the RemoteAppControlService.</p>
</ul>
<h2 id="Prerequisites">Prerequisites</h2>
- <p>To use the Convergence API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/convergence.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/convergence.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/convergence.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+ <p>To use the Convergence API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/convergence.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/convergence.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/bluetooth"/>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<h2 id="Discovering_Devices">Searching for Nearby Devices</h2>
<p>A discovery is a search for Convergence services in the same device-to-device network. To launch a discovery procedure and attempt to connect with the found service:</p>
<ol>
- <li>Search for nearby devices with the <span style="font-family: Courier New,Courier,monospace">startDiscovery()</span> method:
+ <li>Search for nearby devices with the <code>startDiscovery()</code> method:
<pre class="prettyprint">
var timeout = 60 * 60;
}
</pre></li>
- <li><p>Implement the <span style="font-family: Courier New,Courier,monospace">discoverySuccessCallback</span> callback defined in the first parameter of the <span style="font-family: Courier New,Courier,monospace">startDiscovery()</span> method.</p>
+ <li><p>Implement the <code>discoverySuccessCallback</code> callback defined in the first parameter of the <code>startDiscovery()</code> method.</p>
<p>The callback must contain 2 methods:</p>
<ul>
- <li>When a nearby device is detected, the <span style="font-family: Courier New,Courier,monospace">onfound</span> event is triggered. The <span style="font-family: Courier New,Courier,monospace">device</span> parameter holds the services available on the found device. In the following example, the <span style="font-family: Courier New,Courier,monospace">connect()</span> method is called on the found <span style="font-family: Courier New,Courier,monospace">RemoteAppControlService</span>.</li>
- <li>When the discovery is finished and no more devices are found, the <span style="font-family: Courier New,Courier,monospace">onfinished</span> event is triggered.</li>
+ <li>When a nearby device is detected, the <code>onfound</code> event is triggered. The <code>device</code> parameter holds the services available on the found device. In the following example, the <code>connect()</code> method is called on the found <code>RemoteAppControlService</code>.</li>
+ <li>When the discovery is finished and no more devices are found, the <code>onfinished</code> event is triggered.</li>
</ul>
<pre class="prettyprint">
console.log(err.name + ': ' + err.message);
}
</pre></li>
- <li><p>When a connection is established, the <span style="font-family: Courier New,Courier,monospace">onconnected</span> callback is invoked with the connected <span style="font-family: Courier New,Courier,monospace">service</span> as a parameter:</p>
+ <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)
{
<p>To instantiate a server service:</p>
<ol>
- <li>Create a <span style="font-family: Courier New,Courier,monospace">ChannelInfo</span> object. It identifies the server and is used by the clients to address their demands. The first parameter of the <span style="font-family: Courier New,Courier,monospace">ChannelInfo</span> constructor is the server's application ID, set in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. The second parameter is an ID set by you.
+ <li>Create a <code>ChannelInfo</code> object. It identifies the server and is used by the clients to address their demands. The first parameter of the <code>ChannelInfo</code> constructor is the server's application ID, set in its <code>config.xml</code> file. The second parameter is an ID set by you.
<pre class="prettyprint">
var requestChannel = new tizen.ChannelInfo('targetApp0.main', 'chA');
</pre>
}
</pre>
</li>
- <li>Instantiate an <span style="font-family: Courier New,Courier,monospace">AppCommunicationServerService</span> object:
+ <li>Instantiate an <code>AppCommunicationServerService</code> object:
<pre class="prettyprint">
var service = new tizen.AppCommunicationServerService();
</pre>
</li>
- <li>Start the server service. In addition to the <span style="font-family: Courier New,Courier,monospace">ChannelInfo</span> object, you must provide the success and error callbacks defined earlier.
+ <li>Start the server service. In addition to the <code>ChannelInfo</code> object, you must provide the success and error callbacks defined earlier.
<pre class="prettyprint">
service.start(requestChannel, onstarted, onerror);
</pre></li>
<p>Applications can transfer data as <strong>payload</strong> objects, consisting of a key string and a data chunk in form of a string or binary values array.</p>
<p>To wait for incoming messages on the server side:</p>
<ol>
- <li><p>The started server service handles incoming messages through the <span style="font-family: Courier New,Courier,monospace">onnotify</span> 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>
+ <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)
{
}
</pre></li>
- <li><p>To be able to receive messages, register the <span style="font-family: Courier New,Courier,monospace">onnotify</span> callback with the <span style="font-family: Courier New,Courier,monospace">setListener()</span> method:</p>
+ <li><p>To be able to receive messages, register the <code>onnotify</code> callback with the <code>setListener()</code> method:</p>
<pre class="prettyprint">
service.setListener(onnotify);
</pre>
- <p>After the callback has been registered, all incoming data is handled by the <span style="font-family: Courier New,Courier,monospace">onnotify</span> callback.</p></li>
+ <p>After the callback has been registered, all incoming data is handled by the <code>onnotify</code> callback.</p></li>
</ol>
<h3>Communicating with the Server</h3>
console.log(err.name + ': ' + err.message);
}
</pre></li>
- <li><p>Create a <span style="font-family: Courier New,Courier,monospace">ChannelInfo</span> 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>
+ <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>
<pre class="prettyprint">
var serverService;
var channel = new tizen.ChannelInfo('targetApp0.main', 'chA');
<p>To launch an application on a remote device:</p>
<ol>
- <li><p>Call the <span style="font-family: Courier New,Courier,monospace">startDiscovery()</span> method to establish connections with remote devices:</p>
+ <li><p>Call the <code>startDiscovery()</code> method to establish connections with remote devices:</p>
<pre class="prettyprint">
var discoverySuccessCallback =
{
console.log(err.name + ': ' + err.message);
}
</pre></li>
- <li><p>An application on the remote device is started from the <span style="font-family: Courier New,Courier,monospace">onconnected</span> callback. The <span style="font-family: Courier New,Courier,monospace">remoteAppControlCallback</span> method handles the data sent from the remote device.</p>
+ <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';
</ol>
<h2 id="App_Control">Sending an Application Control Remotely</h2>
- <p>The <
span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object is used to request applications to perform particular actions. This use case shows how to ask an image viewer to display a picture. For more information on application controls, see <a href="../../../../org.tizen.guides/html/web/app_management/app_controls_w.htm">Application Controls</a>.</p>
+ <p>The <
code>ApplicationControl</code> object is used to request applications to perform particular actions. This use case shows how to ask an image viewer to display a picture. For more information on application controls, see <a href="../../../../org.tizen.guides/html/web/app_management/app_controls_w.htm">Application Controls</a>.</p>
<ol>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">startDiscovery()</span> method to search for and connect to a <span style="font-family: Courier New,Courier,monospace">RemoteAppControlService</span>:</p>
+ <li><p>Use the <code>startDiscovery()</code> method to search for and connect to a <code>RemoteAppControlService</code>:</p>
<pre class="prettyprint">
var discoverySuccessCallback =
{
console.log(err.name + ': ' + err.message);
}
</pre></li>
- <li><p>Create the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object:</p>
+ <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])]);
+var requestAppControl =
+ new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', null,
+ 'image/jpeg', null,
+ [new tizen.ApplicationControlData('images',
+ [testImgData])]);
</pre></li>
- <li><p>Use the <
span style="font-family: Courier New,Courier,monospace">onconnected()</span> callback to send the application control request to the remote service. The <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method takes as parameters the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object, optionally the target application ID, and a callback defining the actions to be taken on the remote service reply.</p><pre class="prettyprint">
+ <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++)
function onconnected(service)
{
- service.launchAppControl(requestAppControl, null, remoteAppControlCallback, onerror);
+ service.launchAppControl(requestAppControl, null,
+ remoteAppControlCallback, onerror);
}
</pre></li>
</ol>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h1>Content Downloads</h1>
<p>Tizen enables you to download files from the Internet. You can also monitor the download progress and status.</p>
-
+
<p>The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. The Download API is supported on all Tizen Emulators.</p>
-
+
<p>The main features of the Download API include:</p>
<ul>
- <li>Managing downloads <p>You can <a href="#manage">start, pause, resume, and cancel a download</a> of content using the <
span style="font-family: Courier New,Courier,monospace">DownloadManager</span> 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> </li>
- <li>Checking the download state and information<p>You can <a href="#check">access the current download state and retrieve the download information</a> using the <
span style="font-family: Courier New,Courier,monospace">DownloadManager</span> interface. The states are defined in the <span style="font-family: Courier New,Courier,monospace">DownloadState</span> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications).</p> </li>
+ <li>Managing downloads <p>You can <a href="#manage">start, pause, resume, and cancel a download</a> of content using 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> </li>
+ <li>Checking the download state and information<p>You can <a href="#check">access the current download state and retrieve the download information</a> using the <
code>DownloadManager</code> interface. The states are defined in the <code>DownloadState</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications).</p> </li>
</ul>
-
+
<p>For a practical example of downloading URL content to the device storage, see the <a href="task_downloadmanager_w.htm">Download Manager</a> sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-
-<p>To use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+
+<p>To use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name=" http://tizen.org/privilege/download"/>
</pre>
-
+
<h2 id="manage" name="manage">Managing Downloads</h2>
-
- <p>To provide the user access to Internet resources, you must learn how to manage download operations:</p>
- <ol>
- <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> 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");
-</pre> <p>The final parameter (<span style="font-family: Courier New,Courier,monospace">downloads</span>) 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> (<span style="font-family: Courier New,Courier,monospace">downloads</span> 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 <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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>
+
+ <p>To provide the user access to Internet resources, you must learn how to manage download operations:</p>
+ <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");
+</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;
- }
- });</pre></li>
-
- <li>Define the event handlers for different download process notifications using the <span style="font-family: Courier New,Courier,monospace">DownloadCallback</span> 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 =
+ {
+ 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)
+ onprogress: function(id, receivedSize, totalSize)
{
console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
},
/* When the user pauses the download */
- onpaused: function(id)
+ onpaused: function(id)
{
console.log('Paused with id: ' + id);
},
/* When the user cancels the download */
- oncanceled: function(id)
+ oncanceled: function(id)
{
console.log('Canceled with id: ' + id);
},
/* When the download is completed */
- oncompleted: function(id, fullPath)
+ oncompleted: function(id, fullPath)
{
console.log('Completed with id: ' + id + ', full path: ' + fullPath);
},
/* When the download fails */
- onfailed: function(id, error)
+ 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 <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> 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> <pre class="prettyprint">
+};
+</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>
+<pre class="prettyprint">
downloadId = tizen.download.start(downloadRequest, listener);
-</pre> <p>The <span style="font-family: Courier New,Courier,monospace">start()</span> method returns a unique identifier for the download operation.</p> </li>
+</pre>
+<p>The <code>start()</code> method returns a unique identifier for the download operation.</p> </li>
<li>During the download:
<ol type="a">
- <li><p>To pause the download, use the <span style="font-family: Courier New,Courier,monospace">pause()</span> method with the download ID:</p> <pre class="prettyprint">
+ <li><p>To pause the download, use the <code>pause()</code> method with the download ID:</p>
+<pre class="prettyprint">
tizen.download.pause(downloadId);
-</pre> </li>
- <li><p>To resume the download, use the <span style="font-family: Courier New,Courier,monospace">resume()</span> method with the download ID:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To resume the download, use the <code>resume()</code> method with the download ID:</p>
+<pre class="prettyprint">
tizen.download.resume(downloadId);
-</pre> </li>
- <li><p>To cancel the download, use the <span style="font-family: Courier New,Courier,monospace">cancel()</span> method with the download ID:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To cancel the download, use the <code>cancel()</code> method with the download ID:</p>
+<pre class="prettyprint">
tizen.download.cancel(downloadId);
-</pre> </li>
- </ol></li>
- </ol>
-
+</pre></li>
+ </ol></li>
+ </ol>
+
<h2 id="check" name="check">Checking the Download State and Information</h2>
-
- <p>To provide the user access to Internet resources, you must learn how to check the state of a download operation and retrieve relevant information:</p>
- <ol>
- <li><p>To be able to monitor the download state, you need the download ID, which is the return value of the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> 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> <pre class="prettyprint">
-downloadId = tizen.download.start(downloadRequest, listener);
-</pre> </li>
- <li><p> Use the <span style="font-family: Courier New,Courier,monospace">getState()</span> method with the download ID as a parameter to get the current state:</p> <pre class="prettyprint">
+
+ <p>To provide the user access to Internet resources, you must learn how to check the state of a download operation and retrieve relevant information:</p>
+ <ol>
+ <li><p>To be able to monitor the download state, you need the download ID, which is the return value of 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>
+<pre class="prettyprint">
+downloadId = tizen.download.start(downloadRequest, listener);
+</pre></li>
+ <li><p> Use the <code>getState()</code> method with the download ID as a parameter to get the current state:</p>
+<pre class="prettyprint">
var state = tizen.download.getState(downloadId);
-</pre> <p>The method returns a <span style="font-family: Courier New,Courier,monospace">DownloadState</span> enumerator value (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications). </p> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getDownloadRequest()</span> method with the download ID as a parameter to get the download request details that the user has previously set:</p> <pre class="prettyprint">
+</pre>
+<p>The method returns a <code>DownloadState</code> enumerator value (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications). </p> </li>
+ <li><p>Use the <code>getDownloadRequest()</code> method with the download ID as a parameter to get the download request details that the user has previously set:</p>
+<pre class="prettyprint">
var downloadRequest = tizen.download.getDownloadRequest(downloadId);
-</pre><p>The method returns the <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> information (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) which is used as the parameter when starting the download.</p> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getMIMEType()</span> method with the download ID as a parameter to get the MIME type of the file that you have started downloading:</p> <pre class="prettyprint">
+</pre>
+<p>The method returns the <code>DownloadRequest</code> information (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) which is used as the parameter when starting the download.</p> </li>
+ <li><p>Use the <code>getMIMEType()</code> method with the download ID as a parameter to get the MIME type of the file that you have started downloading:</p>
+<pre class="prettyprint">
var MIMEType = tizen.download.getMIMEType(downloadId);
-</pre><p>The method returns the MIME type the target file which has started downloading.</p> </li>
- </ol>
+</pre>
+<p>The method returns the MIME type the target file which has started downloading.</p> </li>
+ </ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png" /> <img alt="Wearable Web" src="../../images/wearable_s_w_optional.png"
- /> <img alt="TV Web" src="../../images/tv_s_w.png" /></p>
+ <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png" /> <img alt="Wearable Web" src="../../images/wearable_s_w_optional.png" /> <img alt="TV Web" src="../../images/tv_s_w.png" /></p>
</div>
<div id="toc_border">
<p><a href="https://www.iotivity.org/" target="_blank">IoTivity</a> offers seamless device-to-device connectivity to address the emerging needs of the Internet of Things (IoT) through the open source reference implementation of the OIC (Open Interconnect Consortium) standard specifications. IoT connectivity (Iotcon) provides the means of using IoTivity in Tizen.</p>
<p>The Iotcon API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Iotcon API is supported on the Tizen Emulators.</p>
-
+
<p>IoT connectivity is usually handled with a server and client. The server is responsible for creating and providing resources, and the client can access those resources through requests.</p>
<p>You can <a href="#find-resources">find remote resources</a>, <a href="#find-device-infos">retrieve device and platform information</a>, and listen for server presence events.</p>
</li>
<li>Remotely managing resources
- <p>You can <a href="#remote-get">retrieve</a> and <a href="#remote-put">modify</a> the remote resource attributes with GET and PUT methods. You can also use POST and DELETE methods to modify the resources on a remote server. You can <a href="#remote-state-change">monitor the resource attribute changes and the <span style="font-family: Courier New,Courier,monospace">isAlive</span> state</a>.</p>
+ <p>You can <a href="#remote-get">retrieve</a> and <a href="#remote-put">modify</a> the remote resource attributes with GET and PUT methods. You can also use POST and DELETE methods to modify the resources on a remote server. You can <a href="#remote-state-change">monitor the resource attribute changes and the <code>isAlive</code> state</a>.</p>
<p>For more information on all available remote resource management methods, see the native <a href="../../native/connectivity/iotcon_n.htm">IoT Connectivity</a> guide.</p>
</li>
</ul>
<p>To enable your application to use the IoT functionality:</p>
<ol>
-<li>To use the Iotcon API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To use the Iotcon API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/internet"/>
</pre>
</li>
-<li>To make your application visible only for devices that support Iotcon, the application must specify the following feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To make your application visible only for devices that support Iotcon, the application must specify the following feature in the <code>config.xml</code> file:
<pre class="prettyprint">
<feature name="http://tizen.org/feature/iot.ocf"/>
</pre>
-<p>You can also check whether a device supports the API by using the <span style="font-family: Courier New,Courier,monospace">tizen.systeminfo.getCapability()</span> method and accordingly enabling or disabling the code requiring the API:</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");
+ var iotcon_feature =
+ tizen.systeminfo.getCapability("http://tizen.org/feature/iot.ocf");
console.log("Iotcon = " + iotcon_feature);
}
catch (error)
</pre>
</li>
<li>
- <p>Fill the <span style="font-family: Courier New,Courier,monospace">onget</span> handler with a code that sends a response to the client. Other handlers remain empty in this example (you can modify attributes in them).</p>
+ <p>Fill the <code>onget</code> handler with a code that sends a response to the client. Other handlers remain empty in this example (you can modify attributes in them).</p>
<p>To send a response to the client:</p>
<ol type="a">
- <li>Create a new <span style="font-family: Courier New,Courier,monospace">Response</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Response">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Response">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Response">TV</a> applications) from the <span style="font-family: Courier New,Courier,monospace">Request</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Request">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Request">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Request">TV</a> applications): <span style="font-family: Courier New,Courier,monospace">new tizen.Response(request)</span></li>
- <li>Create a new <span style="font-family: Courier New,Courier,monospace">Representation</span> 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), to be sent inside the response: <span style="font-family: Courier New,Courier,monospace">new tizen.Representation(doorResource.uriPath)</span></li>
- <li>Fill the <span style="font-family: Courier New,Courier,monospace">Representation</span> object with values from the resource object.</li>
- <li>Send the response: <span style="font-family: Courier New,Courier,monospace">response.send()</span></li>
+ <li>Create a new <code>Response</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Response">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Response">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Response">TV</a> applications) from the <code>Request</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Request">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Request">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Request">TV</a> applications): <code>new tizen.Response(request)</code></li>
+ <li>Create a new <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), to be sent inside the response: <code>new tizen.Representation(doorResource.uriPath)</code></li>
+ <li>Fill the <code>Representation</code> object with values from the resource object.</li>
+ <li>Send the response: <code>response.send()</code></li>
</ol>
<pre class="prettyprint">
isDiscoverable: true
};
-doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfaces, requestCallbacks, policy);
+doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfaces,
+ requestCallbacks, policy);
</pre>
</li>
</ol>
</pre>
</li>
</ol>
-<p>Now you can use the <span style="font-family: Courier New,Courier,monospace">iotClient</span> methods for IoT connectivity with the server.</p>
+<p>Now you can use the <code>iotClient</code> methods for IoT connectivity with the server.</p>
</li>
<li>On the client side, search for resources on servers:
<ol type="a">
</li>
<li>
<p>Set the remote server address and connectivity type.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">hostAddress</span> value must be in the Constrained Application Protocol (CoAP) format (<span style="font-family: Courier New,Courier,monospace">coap(s)://address:port</span>), for example, <span style="font-family: Courier New,Courier,monospace">coaps://[fe80::ae5a:14ff:fe24:b8fe]:12345</span> or <span style="font-family: Courier New,Courier,monospace">coaps://192.168.1.10:12345</span>. The <span style="font-family: Courier New,Courier,monospace">null</span> value indicates that the client communicates with all nodes (multicast).</p>
+ <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";
</pre>
</li>
<li>
- <p>Prepare a query. You can search for specific <span style="font-family: Courier New,Courier,monospace">resourceType</span> and <span style="font-family: Courier New,Courier,monospace">resourceInterface</span> values, and add an attribute filter:</p>
+ <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"};
</pre>
<pre class="prettyprint">
client.findResource(hostAddress, query, connectivityType, foundSuccess, onerror);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">foundSuccess</span> and <span style="font-family: Courier New,Courier,monospace">onerror</span> parameters are success and error callbacks for an async operation:</p>
+<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)
{
<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 <
span style="font-family: Courier New,Courier,monospace">PlatformInfo</span> 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>
+<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 <
span style="font-family: Courier New,Courier,monospace">DeviceInfo</span> 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>
+ <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>
</ul></li>
</ol>
<p><a href="#find-resources">Find a remote resource</a>.</p>
</li>
<li>
- <p>Once you have a <
span style="font-family: Courier New,Courier,monospace">RemoteResource</span> object, use the <span style="font-family: Courier New,Courier,monospace">methodGet()</span> 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>
+ <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"};
resource.methodGet(onresponse, query, onerror);
</pre>
- <p>As a result, the <span style="font-family: Courier New,Courier,monospace">onresponse</span> or (optional) <span style="font-family: Courier New,Courier,monospace">onerror</span> callback is called.</p>
+ <p>As a result, the <code>onresponse</code> or (optional) <code>onerror</code> callback is called.</p>
</li>
</ol>
<p><a href="#find-resources">Find a remote resource</a>.</p>
</li>
<li>
- <p>Once you have a <
span style="font-family: Courier New,Courier,monospace">RemoteResource</span> 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 <span style="font-family: Courier New,Courier,monospace">Representation</span> 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>
+ <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"];
</pre>
</li>
<li>
- <p>Call the <span style="font-family: Courier New,Courier,monospace">methodPut()</span> method on the <span style="font-family: Courier New,Courier,monospace">RemoteResource</span> object:</p>
+ <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"}
resource.methodPut(representation, onresponse, query, onerror);
</pre>
-<p>After a successful request, the <span style="font-family: Courier New,Courier,monospace">onresponse</span> callback is called with the result and updated resource representation. In case of a failure, the (optional) <span style="font-family: Courier New,Courier,monospace">onerror</span> callback is called.</p>
+<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>
</ol>
<h2 id="remote-state-change">Observing Resource Changes</h2>
-<p>On the client side, you can observe remote resource attribute changes with the <span style="font-family: Courier New,Courier,monospace">startObserving()</span> method, and the <span style="font-family: Courier New,Courier,monospace">isAlive</span> state with the <span style="font-family: Courier New,Courier,monospace">setResourceStateChangeListener()</span> method:</p>
+<p>On the client side, you can observe remote resource attribute changes with the <code>startObserving()</code> method, and the <code>isAlive</code> state with the <code>setResourceStateChangeListener()</code> method:</p>
<ol>
<li>
<p><a href="#find-resources">Find a remote resource</a>.</p>
</pre>
</li>
<li>
- <p>Register a listener on the <
span style="font-family: Courier New,Courier,monospace">RemoteResource</span> 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):</p>
+ <p>Register a listener on the <
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):</p>
<pre class="prettyprint">
resource.setResourceStateChangeListener(onchanged);
</pre>
</pre>
</li>
</ol>
-<p>You can monitor attribute changes in a remote resource similarly using the <span style="font-family: Courier New,Courier,monospace">startObserving()</span> method on the <span style="font-family: Courier New,Courier,monospace">RemoteResource</span> object.</p>
+<p>You can monitor attribute changes in a remote resource similarly using the <code>startObserving()</code> method on the <code>RemoteResource</code> object.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Near Field Communication (NFC)</h1>
-
+
<p>Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called "peers") or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to <a href="#tag">send NDEF messages to NFC tags</a> to implement a variety of activities, such as paying the grocery bill or downloading a coupon. With application controls, you can <a href="#operations">launch NFC applications</a> when NFC-related operations occur.</p>
-
+
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the NFC API include:</p>
<ul>
- <li>NFC device management
+ <li>NFC device management
<p>You can <a href="#Managing_NFC_Conn">manage NFC connectivity</a> by enabling or disabling the NFC service.</p></li>
- <li>NFC tag and peer detection
+ <li>NFC tag and peer detection
<p>You can <a href="#Detecting_NFC_Tags">receive notifications when an NFC tag or peer device has been detected</a>.</p></li>
- <li>NDEF message manipulation
+ <li>NDEF message manipulation
<p>You can <a href="#Handling_NDEF_Messages">handle NDEF messages</a> by first creating NDEF records, and then adding the records to an NDEF message.</p></li>
- <li>NDEF data exchange
+ <li>NDEF data exchange
<p>You can exchange NDEF data between <a href="#Exchanging_NDEF_Tags">tags</a> and <a href="#Exchanging_NDEF_Peers">peers</a>.</p></li>
- <li>NFC card emulation
+ <li>NFC card emulation
<p>You can <a href="#Using_NFC_Card_Emulation">enable NFC card emulation and monitor the secure element transaction</a> carried out by the device.</p></li>
<li>NFC host-based card emulation (HCE)
<p>You can <a href="#Using_NFC_Host_Based_Card_Emulation">handle HCE events and transactions</a>.</p></li>
</ul>
-
-
+
+
<p>NFC provides the following advantages over short-range communication technologies, such as Bluetooth:</p>
<ul>
<li>Faster set-up</li>
<li>No device pairing requirements</li>
<li>Reduction in unwanted interruptions</li>
</ul>
-
+
<p>For a practical example of exchanging contacts between devices over an NFC connection, see the <a href="task_contactsexchanger_w.htm">Contacts Exchanger</a> mobile sample task.</p>
-
+
<h2 id="tag">NFC Tags and NDEF Messages</h2>
- <p>An <strong>NFC tag</strong> is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <span style="font-family: Courier New,Courier,monospace">NFCTag</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications) are used to access an NFC tag for reading or writing information. NFC tag types are identified using the <span style="font-family: Courier New,Courier,monospace">type</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NFCTagType</span> type definition (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagType">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagType">wearable</a> applications).</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Tizen provides the following NFC tag types: <span style="font-family: Courier New,Courier,monospace">GENERIC_TARGET</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_A</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_4A</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_3A</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_MINI</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_1K</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_4K</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_ULTRA</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_DESFIRE</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_B</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_4B</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_BPRIME</span>, <span style="font-family: Courier New,Courier,monospace">FELICA</span>, <span style="font-family: Courier New,Courier,monospace">JEWEL</span>, <span style="font-family: Courier New,Courier,monospace">ISO15693</span>, and <span style="font-family: Courier New,Courier,monospace">UNKNOWN_TARGET</span>.</td>
- </tr>
- </tbody>
- </table>
+ <p>An <strong>NFC tag</strong> is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <code>NFCTag</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications) are used to access an NFC tag for reading or writing information. NFC tag types are identified using the <code>type</code> attribute of the <code>NFCTagType</code> type definition (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagType">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagType">wearable</a> applications).</p>
- <p>The NFC forum defines the NFC data exchange format (NDEF) for encapsulating the data exchanged between 2 NFC-enabled devices or an NFC-enabled device and an NFC tag. An <strong>NDEF message</strong> can store data in various formats, such as text, Multipurpose Internet Mail Extension (MIME) type object, or ultra-short RagTime Document (RTD). The NFC tags use NDEF for exchanging messages. Tizen provides the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications) to define an NDEF message.</p>
-
- <p>An NDEF message is composed of multiple records. An NDEF record is created using the <span style="font-family: Courier New,Courier,monospace">NDEFRecord</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications) and is identified by record type, ID, and payload. The following figure shows the conceptual structure of an NDEF message.</p>
- <p class="figure">Figure: Structure of an NDEF message</p>
+<div class="note">
+ <strong>Note</strong>
+ Tizen provides the following NFC tag types: <code>GENERIC_TARGET</code>, <code>ISO14443_A</code>, <code>ISO14443_4A</code>, <code>ISO14443_3A</code>, <code>MIFARE_MINI</code>, <code>MIFARE_1K</code>, <code>MIFARE_4K</code>, <code>MIFARE_ULTRA</code>, <code>MIFARE_DESFIRE</code>, <code>ISO14443_B</code>, <code>ISO14443_4B</code>, <code>ISO14443_BPRIME</code>, <code>FELICA</code>, <code>JEWEL</code>, <code>ISO15693</code>, and <code>UNKNOWN_TARGET</code>.
+</div>
+
+ <p>The NFC forum defines the NFC data exchange format (NDEF) for encapsulating the data exchanged between 2 NFC-enabled devices or an NFC-enabled device and an NFC tag. An <strong>NDEF message</strong> can store data in various formats, such as text, Multipurpose Internet Mail Extension (MIME) type object, or ultra-short RagTime Document (RTD). The NFC tags use NDEF for exchanging messages. Tizen provides the <code>NDEFMessage</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications) to define an NDEF message.</p>
+
+ <p>An NDEF message is composed of multiple records. An NDEF record is created using the <code>NDEFRecord</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications) and is identified by record type, ID, and payload. The following figure shows the conceptual structure of an NDEF message.</p>
+ <p align="center"><strong>Figure: Structure of an NDEF message</strong></p>
<p align="center"><img alt="Structure of an NDEF message" src="../../images/nfc_record.png" /></p>
<p>A record in an NDEF message can be created by using the following payload types:</p>
<ul>
<li>Text
<p>The NDEF record content is created using text format.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordText</span> interface (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) is used to create the text format payload using the <span style="font-family: Courier New,Courier,monospace">text</span>, <span style="font-family: Courier New,Courier,monospace">languageCode</span>, and <span style="font-family: Courier New,Courier,monospace">encoding</span> attributes.</p></li>
+ <p>The <code>NDEFRecordText</code> interface (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) is used to create the text format payload using the <code>text</code>, <code>languageCode</code>, and <code>encoding</code> attributes.</p></li>
<li>URI
<p>The NDEF record content is created using a URI.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordURI</span> interface (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) is used to create the URI type payload using the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute.</p></li>
+ <p>The <code>NDEFRecordURI</code> interface (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) is used to create the URI type payload using the <code>uri</code> attribute.</p></li>
<li>Media
<p>The NDEF record content is created using a media format.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordMedia</span> interface (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) is used to create the media format payload using the <span style="font-family: Courier New,Courier,monospace">mimeType</span> attribute.</p></li>
+ <p>The <code>NDEFRecordMedia</code> interface (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) is used to create the media format payload using the <code>mimeType</code> attribute.</p></li>
</ul>
-
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and NFC (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and NFC (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<h2 id="Managing_NFC_Conn" name="Managing_NFC_Conn">Managing NFC Connectivity</h2>
- <p>To use NFC, retrieve the default NFC adapter using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> 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 <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request the built-in Settings application to let the user enable or disable the NFC.</td>
- </tr>
- </tbody>
- </table>
-
+ <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>
+
+<div class="note">
+ <strong>Note</strong>
+ The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request the built-in Settings application to let the user enable or disable the NFC.
+</div>
+
<p>To enable or disable the NFC service:</p>
<ol>
- <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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 adapter = tizen.nfc.getDefaultAdapter();</pre></li>
- <li>Define the event listener for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:
-<pre class="prettyprint">function launchSuccess()
+ <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 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 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 <span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> 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 =
+ 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)
console.log("NFC is successfully turned on.");
}
}
- /* onfailure is called when the launched application reports failure of the requested operation */
- onfailure: function()
+ /*
+ 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 <span style="font-family: Courier New,Courier,monospace">nfcSwitchAppControl</span> as a parameter:
-<pre class="prettyprint">if (adapter.powered)
+}
+</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);
-}</pre></li>
+ tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess,
+ launchError, serviceReply);
+}
+</pre></li>
</ol>
-
+
<h2 id="Detecting_NFC_Tags" name="Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</h2>
-<p>To receive notifications when an NFC tag or peer device has been detected, register event listeners with the <
span style="font-family: Courier New,Courier,monospace">setTagListener()</span> and <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> methods of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> 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 use the <span style="font-family: Courier New,Courier,monospace">NFCTagDetectCallback</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagDetectCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">NFCPeerDetectCallback</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeerDetectCallback">wearable</a> applications) interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.</p>
+<p>To receive notifications when an NFC tag or peer device has been detected, register event listeners with the <
code>setTagListener()</code> and <code>setPeerListener()</code> methods 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 use the <code>NFCTagDetectCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagDetectCallback">wearable</a> applications) and <code>NFCPeerDetectCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeerDetectCallback">wearable</a> applications) interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.</p>
<p>To detect NFC tags and peer devices:</p>
<ol>
- <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:</p> <pre class="prettyprint">var nfcAdapter = tizen.nfc.getDefaultAdapter();</pre></li>
- <li><p>Define the event handlers for NFC tag detection using the <span style="font-family: Courier New,Courier,monospace">NFCTagDetectCallback</span> listener interface:</p>
+ <li><p>To get the default NFC adapter, use the <code>getDefaultAdapter()</code> method:</p>
+<pre class="prettyprint">
+var nfcAdapter = tizen.nfc.getDefaultAdapter();
+</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 =
{
}
}
</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 <span style="font-family: Courier New,Courier,monospace;">setTagListener()</span> method. In the following example, only MIFARE tags are detected.</p> <pre class="prettyprint">
+ <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);</pre> </li>
- <li><p>To stop the tag detection, use the <span style="font-family: Courier New,Courier,monospace;">unsetTagListener()</span> method:</p> <pre class="prettyprint">
-nfcAdapter.unsetTagListener();</pre> </li>
+nfcAdapter.setTagListener(setTagDetect, tagFilter);
+</pre></li>
+ <li><p>To stop the tag detection, use the <code>unsetTagListener()</code> method:</p>
+<pre class="prettyprint">
+nfcAdapter.unsetTagListener();
+</pre></li>
</ol>
- <p>NFC peers are detected similarly as NFC tags, except that the <span style="font-family: Courier New,Courier,monospace;">setPeerListener()</span> method is used to register the <span style="font-family: Courier New,Courier,monospace;">NFCPeerDetectCallback</span> listener interface, and the <span style="font-family: Courier New,Courier,monospace;">unsetPeerListener()</span> method is used to stop the peer detection.</p>
+ <p>NFC peers are detected similarly as NFC tags, except that the <code>setPeerListener()</code> method is used to register the <code>NFCPeerDetectCallback</code> listener interface, and the <code>unsetPeerListener()</code> method is used to stop the peer detection.</p>
<h2 id="Handling_NDEF_Messages" name="Handling_NDEF_Messages">Handling NDEF Messages</h2>
-<p>You can handle NDEF messages by first creating NDEF records using the <
span style="font-family: Courier New,Courier,monospace">NDEFRecord</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications), and then adding the records to an NDEF message using the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications).</p>
+<p>You can handle NDEF messages by first creating NDEF records using the <
code>NDEFRecord</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications), and then adding the records to an NDEF message using the <code>records</code> attribute of the <code>NDEFMessage</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications).</p>
<p>To create NDEF messages:</p>
<ol>
- <li><p>To create an NDEF URI record, create an <span style="font-family: Courier New,Courier,monospace;">NDEFRecordURI</span> 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 <span style="font-family: Courier New,Courier,monospace;">NDEFRecord</span>, <span style="font-family: Courier New,Courier,monospace;">NDEFRecordText</span> (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 <span style="font-family: Courier New,Courier,monospace;">NDEFRecordMedia</span> (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/");</pre></li>
- <li><p>Create an <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface instance:</p>
- <pre class="prettyprint">
-var newMessage = new tizen.NDEFMessage(); </pre></li>
- <li><p>To add an NDEF record to an NDEF message, use the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface:</p> <pre class="prettyprint">
-newMessage.records[0] = newRecord;</pre></li>
+ <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/");
+</pre></li>
+ <li><p>Create an <code>NDEFMessage</code> interface instance:</p>
+<pre class="prettyprint">
+var newMessage = new tizen.NDEFMessage();
+</pre></li>
+ <li><p>To add an NDEF record to an NDEF message, use the <code>records</code> attribute of the <code>NDEFMessage</code> interface:</p>
+<pre class="prettyprint">
+newMessage.records[0] = newRecord;
+</pre></li>
</ol>
-
+
<h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</h2>
-<p>To exchange data between peers, the <
span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCPeer</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.</p>
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">NDEFMessageReadCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from peer devices.</p>
+<p>To exchange data between peers, the <
code>setReceiveNDEFListener()</code> method of the <code>NFCPeer</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.</p>
+<p>You can use the <
code>NDEFMessageReadCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from peer devices.</p>
<p>To exchange NDEF messages:</p>
<ol>
- <li><p>To receive NDEF messages from a peer device, use the <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method of the <span style="font-family: Courier New,Courier,monospace;">NFCPeer</span> interface.</p>
- <p>The <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method registers the <span style="font-family: Courier New,Courier,monospace;">NDEFMessageReadCallback</span> listener interface, which is invoked when an NDEF message from a peer device is read.</p>
-
<pre class="prettyprint">
+ <li><p>To receive NDEF messages from a peer device, use the <code>setReceiveNDEFListener()</code> method of the <code>NFCPeer</code> interface.</p>
+ <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)
{
}
/* Set a listener to receive an NDEF message */
-Peer.setReceiveNDEFListener(readMessage);</pre></li>
- <li><p>To send an NDEF message to an NFC peer, use the <span style="font-family: Courier New,Courier,monospace;">sendNDEF()</span> method:</p> <pre class="prettyprint">
+Peer.setReceiveNDEFListener(readMessage);
+</pre></li>
+ <li><p>To send an NDEF message to an NFC peer, use the <code>sendNDEF()</code> method:</p>
+<pre class="prettyprint">
var newMessage = new tizen.NDEFMessage();
-Peer.sendNDEF(newMessage);</pre></li>
+Peer.sendNDEF(newMessage);
+</pre></li>
</ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If an application is on the background and uses the <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method, an error callback is launched. This method can only be used in the foreground.</td>
- </tr>
- </tbody>
- </table>
-
+
+<div class="note">
+ <strong>Note</strong>
+ If an application is on the background and uses the <code>sendNDEF()</code> method, an error callback is launched. This method can only be used in the foreground.
+</div>
+
<h2 id="Exchanging_NDEF_Tags" name="Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</h2>
-<p>To exchange data between tags, you can read from tags and write to tags using the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> and <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> methods.</p>
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">NDEFMessageReadCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from tags.</p>
+<p>To exchange data between tags, you can read from tags and write to tags using the <code>readNDEF()</code> and <code>writeNDEF()</code> methods.</p>
+<p>You can use the <
code>NDEFMessageReadCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from tags.</p>
<p>To exchange NDEF data with tags:</p>
<ol>
- <li><p>To read data from an NFC tag, use the <
span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method of the <span style="font-family: Courier New,Courier,monospace;">NFCTag</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications).</p>
- <p>The <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method registers the <span style="font-family: Courier New,Courier,monospace;">NDEFMessageReadCallback</span> listener interface, which is invoked when an NDEF message is read.</p>
+ <li><p>To read data from an NFC tag, use the <
code>readNDEF()</code> method of the <code>NFCTag</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications).</p>
+ <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)
{
/* Read NDEF data */
Tag.readNDEF(readMessage);
-}</pre></li>
-<li><p>To write data on an NFC tag, use the <span style="font-family: Courier New,Courier,monospace;">writeNDEF()</span> method:</p>
+}
+</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!");
}
-Tag.writeNDEF(newMessage, writeCallback);</pre> <p>You can use the <span style="font-family: Courier New,Courier,monospace;">transceive()</span> method to transfer raw data as a byte array to an NFC tag without knowing the underlying details of the tag.</p></li>
+Tag.writeNDEF(newMessage, writeCallback);
+</pre>
+<p>You can use the <code>transceive()</code> method to transfer raw data as a byte array to an NFC tag without knowing the underlying details of the tag.</p></li>
</ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If an application is on the background and uses the <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> or <span style="font-family: Courier New,Courier,monospace">transceive()</span> method, an error callback is launched. These methods can only be used in the foreground.</td>
- </tr>
- </tbody>
- </table>
-
+
+<div class="note">
+ <strong>Note</strong>
+ If an application is on the background and uses the <code>writeNDEF()</code> or <code>transceive()</code> method, an error callback is launched. These methods can only be used in the foreground.
+</div>
+
<h2 id="Using_NFC_Card_Emulation" name="Using_NFC_Card_Emulation">Using NFC Card Emulation</h2>
-<p>You can enable NFC card emulation and monitor the secure element transaction taking place using the <
span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> 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). The secure element transaction is carried out by the device. The Tizen application can detect the transaction, but does not take part in it. Interpreting the transaction data requires knowledge about the data protocol the transaction uses. With the required knowledge, the application can detect whether the transaction was successful.</p>
+<p>You can enable NFC card emulation and monitor the secure element transaction taking place using 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). The secure element transaction is carried out by the device. The Tizen application can detect the transaction, but does not take part in it. Interpreting the transaction data requires knowledge about the data protocol the transaction uses. With the required knowledge, the application can detect whether the transaction was successful.</p>
<p>To enable or disable the NFC card emulation and detect secure element transactions:</p>
<ol>
-<li>Declare the required variables and obtain the <
span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> object using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications):
+<li>Declare the required variables and obtain the <
code>NFCAdapter</code> object using the <code>getDefaultAdapter()</code> method of the <code>NFCManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications):
<pre class="prettyprint">
var adapter = tizen.nfc.getDefaultAdapter();
var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">addCardEmulationModeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener to monitor the current card emulation mode:
+<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");
- }
-});
+ 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 <span style="font-family: Courier New,Courier,monospace">cardEmulationMode</span> attribute:
+<li>To enable NFC card emulation, change the value of the <code>cardEmulationMode</code> attribute:
<pre class="prettyprint">
adapter.cardEmulationMode = "ALWAYS_ON";
</pre></li>
- <li>To be notified when the type of an active NFC secure element changes, use the <span style="font-family: Courier New,Courier,monospace">addActiveSecureElementChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+ <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);
-});
+ {
+ console.log("Active secure element is " + seType);
+ });
</pre></li>
-<li>To be notified when a NFC secure element transaction data is exchanged, use the <span style="font-family: Courier New,Courier,monospace">addTransactionEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+<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);
+ console.log("NFC secure element transaction detected. Application: "
+ + appletId + ". Protocol data: " + data);
});
transListenerId = adapter.addTransactionEventListener("UICC", onDetected);
</pre></li>
adapter.cardEmulationMode = "OFF";
</pre></li>
</ol>
-
+
<h2 id="Using_NFC_Host_Based_Card_Emulation" name="Using_NFC_Host_Based_Card_Emulation">Using NFC Host-based Card Emulation</h2>
-<p>You can handle HCE (host-based card emulation) events and transactions taking place using the <
span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> 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). HCE is an on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element. The transaction data is routed to the host application directly, instead of routing to a secure element. The Tizen application can detect the transaction and can take part in it.</p>
+<p>You can handle HCE (host-based card emulation) events and transactions taking place using 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). HCE is an on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element. The transaction data is routed to the host application directly, instead of routing to a secure element. The Tizen application can detect the transaction and can take part in it.</p>
<p>To detect NFC HCE events and manage AID (Application ID):</p>
<ol>
-<li><p>Specify an <span style="font-family: Courier New,Courier,monospace;">AID</span> value for receiving HCE transaction events:</p>
+<li><p>Specify an <code>AID</code> value for receiving HCE transaction events:</p>
<ol type="a">
<li>
-<p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file:</p>
+<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/wdigets" xmlns="http://www.w3.org/ns/widgets"
+<widget xmlns:tizen="http://tizen.org/ns/widgets"
+ 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"/>
value="/res/wgt/wallet.xml"/>
</widget>
</pre>
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">tizen:app-control</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">tizen:src</span> and <span style="font-family: Courier New,Courier,monospace;">tizen:operation</span> and <span style="font-family: Courier New,Courier,monospace;">tizen:uri</span> elements:
+<ul><li>The <code>tizen:app-control</code> element must contain the <code>tizen:src</code> and <code>tizen:operation</code> and <code>tizen:uri</code> elements:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace;">tizen:src</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">name</span> attribute that defines the page to be handled. The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is optional.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">tizen:operation</span> element must be <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span>.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">tizen:uri</span> element must be <span style="font-family: Courier New,Courier,monospace;">nfc://secure/HCE/aid/<specific AID></span>.</li>
+<li>The <code>tizen:src</code> element must contain the <code>name</code> attribute that defines the page to be handled. The <code>reload</code> attribute is optional.</li>
+<li>The <code>tizen:operation</code> element must be <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</code>.</li>
+<li>The <code>tizen:uri</code> element must be <code>nfc://secure/HCE/aid/<specific AID></code>.</li>
</ul></li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">tizen:metadata</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">key</span> and <span style="font-family: Courier New,Courier,monospace;">value</span> attributes:
+<li>The <code>tizen:metadata</code> element must contain the <code>key</code> and <code>value</code> attributes:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace;">key</span> attribute must be <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/metadata/nfc_cardemulation</span>.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute must contain the AID XML file path.
-<p>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute is a relative path starting from the application root path.</p></li>
+<li>The <code>key</code> attribute must be <code>http://tizen.org/metadata/nfc_cardemulation</code>.</li>
+<li>The <code>value</code> attribute must contain the AID XML file path.
+<p>The <code>value</code> attribute is a relative path starting from the application root path.</p></li>
</ul>
</li>
</ul>
</wallet>
</application>
</pre>
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain a <span style="font-family: Courier New,Courier,monospace;">name</span> attribute with an application name.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">wallet</span> element, each of which must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element. </li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element is required to contain a <span style="font-family: Courier New,Courier,monospace;">category</span> attribute with the <span style="font-family: Courier New,Courier,monospace;">payment</span> or <span style="font-family: Courier New,Courier,monospace;">other</span> value.</li>
-<li>Each <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid</span> element, each of which contains a single AID. The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> can have as many <span style="font-family: Courier New,Courier,monospace;">aid</span> elements as you want.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">aid</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">aid</span>, <span style="font-family: Courier New,Courier,monospace;">se_type</span>, <span style="font-family: Courier New,Courier,monospace;">unlock</span>, and <span style="font-family: Courier New,Courier,monospace;">power</span> attributes.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">se_type</span> attribute must contain <span style="font-family: Courier New,Courier,monospace;">hce</span>, <span style="font-family: Courier New,Courier,monospace;">ese</span>, or <span style="font-family: Courier New,Courier,monospace;">uicc</span>. The <span style="font-family: Courier New,Courier,monospace;">se_type</span> value can be added later.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">unlock</span> attribute must contain one of the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">true</span>: The card cannot work when the device is locked.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">false</span>: The card can work when the device is locked.</li></ul></li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">power</span> must contain one of the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">on</span>: The card can work when the device is on.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">off</span>: The card can work when the device is off.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">sleep</span>: The card can work when the device is in the sleep mode.</li></ul></li>
+<ul><li>The <code>application</code> element must contain a <code>name</code> attribute with an application name.</li>
+<li>The <code>application</code> element must contain one or more <code>wallet</code> element, each of which must contain one or more <code>aid-group</code> element. </li>
+<li>The <code>aid-group</code> element is required to contain a <code>category</code> attribute with the <code>payment</code> or <code>other</code> value.</li>
+<li>Each <code>aid-group</code> element must contain one or more <code>aid</code> element, each of which contains a single AID. The <code>aid-group</code> can have as many <code>aid</code> elements as you want.</li>
+<li>The <code>aid</code> element must contain the <code>aid</code>, <code>se_type</code>, <code>unlock</code>, and <code>power</code> attributes.</li>
+<li>The <code>se_type</code> attribute must contain <code>hce</code>, <code>ese</code>, or <code>uicc</code>. The <code>se_type</code> value can be added later.</li>
+<li>The <code>unlock</code> attribute must contain one of the following:
+<ul><li><code>true</code>: The card cannot work when the device is locked.</li>
+<li><code>false</code>: The card can work when the device is locked.</li></ul></li>
+<li>The <code>power</code> must contain one of the following:
+<ul><li><code>on</code>: The card can work when the device is on.</li>
+<li><code>off</code>: The card can work when the device is off.</li>
+<li><code>sleep</code>: The card can work when the device is in the sleep mode.</li></ul></li>
</ul></li></ol></li>
-<li><p>Declare the required variables and obtain the <
span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> object using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications).</p>
-<p>To enable NFC card emulation, change the value of the <span style="font-family: Courier New,Courier,monospace">cardEmulationMode</span> attribute.</p>
+<li><p>Declare the required variables and obtain the <
code>NFCAdapter</code> object using the <code>getDefaultAdapter()</code> method of the <code>NFCManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications).</p>
+<p>To enable NFC card emulation, change the value of the <code>cardEmulationMode</code> attribute.</p>
<pre class="prettyprint">
var hceListenerId = 0;
var adapter = tizen.nfc.getDefaultAdapter();
adapter.cardEmulationMode = "ALWAYS_ON";
</pre></li>
<li>
-<p>To detect the HCE event, use the <span style="font-family: Courier New,Courier,monospace">addHCEEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">sendHostAPDUResponse()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> 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>
+<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()
{
};
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 <span style="font-family: Courier New,Courier,monospace">registerAID()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+ 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
+try
{
var aid = "ABC0012345";
adapter.registerAID("HCE", aid, "PAYMENT")
-}
-catch (err)
+}
+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 <span style="font-family: Courier New,Courier,monospace">getAIDsForCategory()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+ <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
+try
{
- var successCallback = function(aid_datas)
+ var successCallback = function(aid_datas)
{
for (var i = 0; i < aid_datas.length; i++)
{
}
};
- var errorCallback = function(error)
+ var errorCallback = function(error)
{
console.log("getAIDsForCategory failed.");
};
adapter.getAIDsForCategory("HCE", "PAYMENT", successCallback, errorCallback);
-}
-catch (err)
+}
+catch (err)
{
console.log(err.name + ":" + err.message);
}
<p>You can launch NFC applications based on the NDEF message content using the <a href="../app_management/app_controls_w.htm">application control</a> functionalities:</p>
<ul>
<li>NFC application can be launched by the receipt of an NDEF message or by the reading of an NFC tag.
- <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an NFC-enabled device reads an NFC tag or receives an NDEF message whose first NDEF record has a record type (<span style="font-family: Courier New,Courier,monospace">tnf</span> value) set as <span style="font-family: Courier New,Courier,monospace">NFC_RECORD_TNF_WELL_KNOWN</span>, the NFC application is launched.</p></li>
- <li>NFC applications can be launched by the transaction of the card emulation functionality. NFC devices can communicate with point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.
- <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span> or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/off_host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and a secure element transaction occurs, the NFC application is launched.</p></li>
- <li>NFC applications can be launched by the transaction of the HCE functionality. The NFC application can communicate with point of sales (POS) terminals using the HCE functionality to, for example, make a payment.
- <p>If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/host_apdu_service</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an HCE transaction occurs, the NFC application is launched.</p></li>
- <li>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span> application control event when the default wallet is changed. For example, in <strong>Setting > NFC > Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</li>
+ <p>If the application control with the <code>http://tizen.org/appcontrol/operation/nfc/wellknown</code> operation is defined in the <code>config.xml</code> file and an NFC-enabled device reads an NFC tag or receives an NDEF message whose first NDEF record has a record type (<code>tnf</code> value) set as <code>NFC_RECORD_TNF_WELL_KNOWN</code>, the NFC application is launched.</p></li>
+ <li>NFC applications can be launched by the transaction of the card emulation functionality. NFC devices can communicate with point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.
+ <p>If the application control with the <code>http://tizen.org/appcontrol/operation/nfc/transaction</code> or <code>http://tizen.org/appcontrol/operation/nfc/off_host_apdu_service</code> operation is defined in the <code>config.xml</code> file and a secure element transaction occurs, the NFC application is launched.</p></li>
+ <li>NFC applications can be launched by the transaction of the HCE functionality. The NFC application can communicate with point of sales (POS) terminals using the HCE functionality to, for example, make a payment.
+ <p>If the application control with the <code>http://tizen.org/appcontrol/operation/nfc/host_apdu_service</code> operation is defined in the <code>config.xml</code> file and an HCE transaction occurs, the NFC application is launched.</p></li>
+ <li>The system sends the <code>http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</code> application control event when the default wallet is changed. For example, in <strong>Setting > NFC > Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</li>
</ul>
<p>The following table lists the NFC operations, URI scheme and mime.</p>
- <table border="1">
- <caption>
- Table: NFC operations
- </caption>
- <tbody>
+<p align="center" class="Table"><strong>Table: NFC operations</strong></p>
+<table border="1">
+ <tbody>
<tr>
<th>Operation</th>
<th>URI scheme</th>
<th>MIME</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/empty</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/empty</code></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span></td>
- <td><
span style="font-family: Courier New,Courier,monospace"><scheme>:<host>/<path></span> <p>URL, for example:</p>
+ <td rowspan="2"><code>http://tizen.org/appcontrol/operation/nfc/wellknown</code></td>
+ <td><
code><scheme>:<host>/<path></code> <p>URL, for example:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/devices</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/*</span></li>
+ <li><code>http</code></li>
+ <li><code>http://tizen.org/</code></li>
+ <li><code>http://tizen.org/about/devices</code></li>
+ <li><code>http://tizen.org/about/*</code></li>
</ul> <p>URN, for example:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">tel</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mailto</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">mailto:tommy@tizen.org</span></li>
+ <li><code>tel</code></li>
+ <li><code>mailto</code></li>
+ <li><code>mailto:tommy@tizen.org</code></li>
</ul> </td>
- <td><span style="font-family: Courier New,Courier,monospace">U/<protocol_code></span> <p>For example: <span style="font-family: Courier New,Courier,monospace">U/0x03, U/0x05, U/*</span></p> </td>
+ <td><code>U/<protocol_code></code> <p>For example: <code>U/0x03, U/0x05, U/*</code></p> </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><type_string>/*</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">T/*, sp/*, */*</span></p> </td>
+ <td><code>NULL</code></td>
+ <td><code><type_string>/*</code> <p>For example: <code>T/*, sp/*, */*</code></p> </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/mime</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><type_string>/<subtype_string></span> (case-insensitive) <p>For example: <span style="font-family: Courier New,Courier,monospace">text/x-vard, text/*, */*</span></p> </td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/mime</code></td>
+ <td><code>NULL</code></td>
+ <td><code><type_string>/<subtype_string></code> (case-insensitive) <p>For example: <code>text/x-vard, text/*, */*</code></p> </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/uri</span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><uri></span> <p>For example: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/devices</span></p> </td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/uri</code></td>
+ <td><code><uri></code> <p>For example: <code>http://tizen.org/about/devices</code></p> </td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/external</span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><scheme>:<string></span> (case-insensitive) <p>For example: <span style="font-family: Courier New,Courier,monospace">nfc:ext.tizen.org.ABC</span></p> </td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/external</code></td>
+ <td><code><scheme>:<string></code> (case-insensitive) <p>For example: <code>nfc:ext.tizen.org.ABC</code></p> </td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span></td>
- <td><
span style="font-family: Courier New,Courier,monospace">nfc://secure/<SE name>/aid/<aid></span><p>For example:</p>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/transaction</code></td>
+ <td><
code>nfc://secure/<SE name>/aid/<aid></code><p>For example:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/123456789</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/1234*</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/*</span></li>
+ <li><code>nfc://secure/SIM1/aid/123456789</code></li>
+ <li><code>nfc://secure/SIM1/aid/1234*</code></li>
+ <li><code>nfc://secure/SIM1/aid/*</code></li>
</ul> </td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</code></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</code></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+ <td><code>http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</code></td>
+ <td><code>NULL</code></td>
+ <td><code>NULL</code></td>
</tr>
</tbody>
</table>
- <p>* The <
span style="font-family: Courier New,Courier,monospace"><protocol_code></span> and <span style="font-family: Courier New,Courier,monospace"><scheme></span> must be in sync. See <a href="http://members.nfc-forum.org/apps/group_public/document.php?document_id=5078" target="_blank">NFCForum-TS-RTD_URI_1.0</a> and NFC RTD (Record Type Definition) documentation on the NFC forum.</p>
-
+ <p>* The <
code><protocol_code></code> and <code><scheme></code> must be in sync. See <a href="http://members.nfc-forum.org/apps/group_public/document.php?document_id=5078" target="_blank">NFCForum-TS-RTD_URI_1.0</a> and NFC RTD (Record Type Definition) documentation on the NFC forum.</p>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>The main features of the Secure Element API include:</p>
<ul>
<li>Managing secure elements
- <p>You can <a href="#Managing_Secure_Element">manage secure elements</a> by retrieving all the available secure element readers and receiving notifications of reader changes using the <
span style="font-family: Courier New,Courier,monospace">SEService</span> 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). You can also shut down secure elements.</p> </li>
+ <p>You can <a href="#Managing_Secure_Element">manage secure elements</a> by retrieving all the available secure element readers and receiving notifications of reader changes using 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). You can also shut down secure elements.</p> </li>
<li>Opening sessions and channels
<p>You can <a href="#Opening_Sessions">open a session</a> to connect to a secure element reader. Within a session, you can open basic or logical channels.</p> </li>
<li>Transmitting APDUs to the applet
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Secure Element API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Secure Element API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/secureelement"/>
</pre>
<p>To use secure elements in your application, you must learn to retrieve them and track changes in them:</p>
<ol>
- <li><p>To retrieve all the available secure element readers, use the <span style="font-family: Courier New,Courier,monospace">getReaders()</span> method of the <span style="font-family: Courier New,Courier,monospace">SEService</span> 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 <span style="font-family: Courier New,Courier,monospace">ReaderArraySuccessCallback</span> 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">
+ <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++)
}
}
tizen.seService.getReaders(success, function(err) {/* Error handling */});
-</pre> </li>
+</pre></li>
- <li> <p>To receive reader change notifications, use the <span style="font-family: Courier New,Courier,monospace">registerSEListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SEService</span> interface:</p>
+ <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 <span style="font-family: Courier New,Courier,monospace">SEChangeListener</span> 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">
+ <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 not ready.");
},
}
-</pre> </li>
- <li><p>Register the listener:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Register the listener:</p>
+<pre class="prettyprint">
var seListener = tizen.seService.registerSEListener(setSEChange);
-</pre> </li>
- </ol>
- </li>
- <li><p>To stop listening to the reader changes, use the <span style="font-family: Courier New,Courier,monospace">unregisterSEListener()</span> method:</p> <pre class="prettyprint">
+</pre></li>
+ </ol>
+ </li>
+ <li><p>To stop listening to the reader changes, use the <code>unregisterSEListener()</code> method:</p>
+<pre class="prettyprint">
tizen.seService.unregisterSEListener(seListener);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="Opening_Sessions" name="Opening_Sessions">Opening Sessions and Channels</h2>
<p>To use secure elements in your application, you must learn to open sessions and channels:</p>
<ol>
- <li><p>To open a session, use the <span style="font-family: Courier New,Courier,monospace">openSession()</span> method of the <span style="font-family: Courier New,Courier,monospace">Reader</span> 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 <span style="font-family: Courier New,Courier,monospace">SessionSuccessCallback</span> 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">
+ <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");
/* Error handling */
}
reader.openSession(successCB, errorCB);
-</pre> </li>
+</pre></li>
<li><p>To open a channel within a session:</p>
<ol type="a">
- <li><p>Open a basic channel with the <span style="font-family: Courier New,Courier,monospace">openBasicChannel()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> 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 <span style="font-family: Courier New,Courier,monospace">ChannelSuccessCallback</span> 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">
+ <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)
}
/* 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);
-</pre> </li>
- <li><p>Open a logical channel with the <span style="font-family: Courier New,Courier,monospace">openLogicalChannel()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> interface. As with a basic channel, the method registers the <span style="font-family: Courier New,Courier,monospace">ChannelSuccessCallback</span> interface.</p> <pre class="prettyprint">
-session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successCB, errorCB);
-</pre> </li>
+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);
+</pre></li>
</ol>
</li>
</ol>
<p>To use secure elements in your application, you must learn to transmit application protocol data units (APDU) to secure elements:</p>
<ol>
- <li><p>To transmit an APDU command to a secure element, use the <span style="font-family: Courier New,Courier,monospace">transmit()</span> method of the <span style="font-family: Courier New,Courier,monospace">Channel</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications).</p> <pre class="prettyprint">
-/* APDU command is defined in ISO7816-4 */
+ <li><p>To transmit an APDU command to a secure element, use the <code>transmit()</code> method of the <code>Channel</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications).</p>
+<pre class="prettyprint">
+/* APDU command is defined in ISO7816-4 */
channel.transmit(command, successCB, errorCB);
-</pre> </li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">transmit()</span> method registers the <span style="font-family: Courier New,Courier,monospace">TransmitSuccessCallback</span> 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">
+</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);
{
/* Error handling */
}
-</pre> </li>
+</pre></li>
</ol>
<h2 id="Closing_Sessions" name="Closing_Sessions">Closing Sessions and Channels</h2>
<p>To use secure elements in your application, you must learn to close sessions and channels:</p>
<ol>
- <li><p>To close a specific channel, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">Channel</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications):</p> <pre class="prettyprint">
+ <li><p>To close a specific channel, use the <code>close()</code> method of the <code>Channel</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications):</p>
+<pre class="prettyprint">
channel.close();
-</pre> </li>
- <li><p>To close all channels within a specific session, use the <span style="font-family: Courier New,Courier,monospace">closeChannels()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> 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):</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To close all channels within a specific session, use the <code>closeChannels()</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):</p>
+<pre class="prettyprint">
session.closeChannels();
-</pre> </li>
- <li><p>To close a specific session, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> 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):</p>
-
<pre class="prettyprint">
+</pre></li>
+ <li><p>To close a specific session, use the <code>close()</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):</p>
+<pre class="prettyprint">
session.close();
-</pre> </li>
- <li><p>To close all session for a specific reader, use the <span style="font-family: Courier New,Courier,monospace">closeSessions()</span> method of the <span style="font-family: Courier New,Courier,monospace">Reader</span> 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):</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To close all session for a specific reader, use the <code>closeSessions()</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):</p>
+<pre class="prettyprint">
reader.closeSessions();
-</pre> </li>
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Task: Bluetooth Chat</title>
+ <title>Task: Bluetooth Chat</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<ul class="toc">
<li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
<li><a href="#Initializing_App">Initializing the Application</a></li>
- <li><a href="#Creating_Connection">Creating the Connection</a></li>
+ <li><a href="#Creating_Connection">Creating the Connection</a></li>
<li><a href="#Exchanging_Data">Sending a Message</a></li>
</ul>
<p class="toc-title">Related Info</p>
<li><a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="_blank">Bluetooth Chat Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Task: Bluetooth Chat</h1>
+ <h1>Task: Bluetooth Chat</h1>
<p>This task, based on the BluetoothChat sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a> API to create a chat between 2 devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="blank">Bluetooth Chat</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
+ <p>This task consists of the following parts:</p>
+ <ul>
<li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
<li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
<li><a href="#Creating_Connection">Creating the Connection</a> defines how to set up a bluetooth adapter, register a chat server, and connect devices to the server.</li>
<li><a href="#Exchanging_Data">Sending a Message</a> defines how to send messages between Bluetooth devices.</li>
</ul>
- <p>This sample is a fully functional application for creating a chat application.</p>
-
- <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
- <p>The BluetoothChat sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays buttons for creating or joining a chat, the Choose your server screen displays a list of available servers, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send messages.</p>
+ <p>This sample is a fully functional application for creating a chat application.</p>
- <p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: BluetoothChat screens</p>
+ <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
+ <p>The BluetoothChat sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays buttons for creating or joining a chat, the Choose your server screen displays a list of available servers, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send messages.</p>
+
+ <p>The following figure shows the main screens of the application.</p>
+ <p align="center"><strong>Figure: BluetoothChat screens</strong></p>
<p align="center"><img alt="BluetoothChat screens" src="../../images/bluetoothchat.png" /></p>
-
+
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<ol type="a"><li>
- <p>The main screen displays option buttons. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
-
-
<pre class="prettyprint lang-html">
+ <p>The main screen displays option buttons. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
+
+<pre class="prettyprint lang-html">
<!--Main screen layout-->
<div id="start" data-role="page">
<!--Header section-->
<div id="start-header" data-role="header" data-position="fixed">
<h1>Bluetooth chat</h1>
- </div></pre></li>
- <li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. It contains <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a> for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
- <pre class="prettyprint lang-html"> <!--Content section-->
+ </div>
+</pre></li>
+ <li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. It contains <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a> for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
+<pre class="prettyprint lang-html">
+ <!--Content section-->
<div id="start-content" data-role="content" data-scroll="none">
<div class="box">
<div data-role="button" class="ui-btn-start" id="turnOnButton"
style="display: none;">Turn bluetooth on</div>
- <div data-role="button" class="ui-btn-start" id="serverButton"
+ <div data-role="button" class="ui-btn-start" id="serverButton"
style="display: none;">Create server</div>
- <div data-role="button" class="ui-btn-start" id="clientButton"
+ <div data-role="button" class="ui-btn-start" id="clientButton"
style="display: none;">Join server</div>
<div id="start-monit" style="display: none;">
<p>Waiting for Bluetooth...</p>
</li>
</ol>
</li>
- <li>app.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">checkPowerState()</span> method is used to check the Bluetooth connection status. If the Bluetooth connection is not on, the main screen only displays the <strong>Turn bluetooth on</strong> button.</p>
+ <li><strong>app.js Source File</strong>
+<p>The <code>checkPowerState()</code> method is used to check the Bluetooth connection status. If the Bluetooth connection is not on, the main screen only displays the <strong>Turn bluetooth on</strong> button.</p>
<pre class="prettyprint">
-checkPowerState: function App_checkPowerState()
+checkPowerState: function App_checkPowerState()
{
this.ui.setContentStartAttributes(this.model.checkPowerState.bind(this.model,
this.ui.showPowerOnButton,
},
</pre>
</li>
-<li>app.ui.events.js Source File
-<p>The <strong>Create server</strong> and <strong>Join server</strong> button events are defined in the <span style="font-family: Courier New,Courier,monospace">app.ui.events.js</span> file. All the application events are based on jQuery selectors.</p>
+<li><strong>app.ui.events.js Source File</strong>
+<p>The <strong>Create server</strong> and <strong>Join server</strong> button events are defined in the <code>app.ui.events.js</code> file. All the application events are based on jQuery selectors.</p>
<pre class="prettyprint">
-$('#serverButton').on('click', function(event)
-{
- app.resetApplicationMode();
- app.startServer();
-});
+$('#serverButton').on('click', function(event)
+ {
+ app.resetApplicationMode();
+ app.startServer();
+ });
-$('#clientButton').on('click', function(event)
-{
- app.resetApplicationMode();
- app.startClient();
-});
+$('#clientButton').on('click', function(event)
+ {
+ app.resetApplicationMode();
+ app.startClient();
+ });
</pre>
</li>
-<li>templates/keyboard_page.tpl Source File
+<li><strong>templates/keyboard_page.tpl Source File</strong>
<ol type="a">
<li>
<p>When the user taps the <strong>Create server</strong> or <strong>Join server</strong> button, a keyboard is displayed and the user can enter the server or client name.</p>
</div>
</pre>
</li>
-<li><p>When the user enters the server or client name and taps <strong>OK</strong>, the <span style="font-family: Courier New,Courier,monospace">getApplicationMode()</span> method analyzes the input and displays the server selection or chat screen, respectively.</p>
+<li><p>When the user enters the server or client name and taps <strong>OK</strong>, the <code>getApplicationMode()</code> method analyzes the input and displays the server selection or chat screen, respectively.</p>
<pre class="prettyprint">
-$('#keyboard-ok-button').on('click', function(event)
-{
- event.preventDefault();
- var value = $('#keyboard-text').val(), mode;
- if (value.length !== 0)
+$('#keyboard-ok-button').on('click', function(event)
{
- app.setUserName(value);
- mode = app.getApplicationMode();
- if (mode === 'server')
- {
- app.setAdapterName();
- }
- else if (mode === 'client')
+ event.preventDefault();
+ var value = $('#keyboard-text').val(), mode;
+ if (value.length !== 0)
{
- $.mobile.changePage('#choose');
+ app.setUserName(value);
+ mode = app.getApplicationMode();
+ if (mode === 'server')
+ {
+ app.setAdapterName();
+ }
+ else if (mode === 'client')
+ {
+ $.mobile.changePage('#choose');
+ }
}
- }
-});
+ });
</pre>
</li>
</ol>
<h3 id="server" name="server">Defining the Choose Your Server Screen</h3>
-<ol class="tutorstep">
-<li>templates/choose_page.tpl Source File
+<ol>
+<li><strong>templates/choose_page.tpl Source File</strong>
<ol type="a"><li><p>The content section of the Choose your server screen displays a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> of available servers.</p>
<pre class="prettyprint">
<div data-role="page" id="choose">
<li>
<p>When the user taps a server name, the system starts searching for the server and attempts to connect to it. After connecting, the system displays confirmation <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">pop-ups</a>.</p>
<pre class="prettyprint">
-$('#choose-content').on('tap', 'ul.ui-listview li', function()
-{
- app.client.stopServerSearching($(this).attr('address'));
-});
+$('#choose-content').on('tap', 'ul.ui-listview li', function()
+ {
+ app.client.stopServerSearching($(this).attr('address'));
+ });
</pre>
</li>
</ol>
</li>
</ol>
-<h3 id="chat" name="chat">Defining the Chat Screen</h3>
-<ol class="tutorstep">
-<li>templates/chat_page.tpl Source File
+<h3 id="chat" name="chat">Defining the Chat Screen</h3>
+<ol>
+<li><strong>templates/chat_page.tpl Source File</strong>
<p>The structure of this template is similar to the main screen. The header displays the current role of the device (server or client) and its name.</p>
-<p>The content area displays a list view with message bubbles. The layout of the bubbles is defined in the <span style="font-family: Courier New,Courier,monospace">left_bubble.tpl</span> and <span style="font-family: Courier New,Courier,monospace">right_bubble.tpl</span> template files.</p>
- <p>The footer section contains a <span style="font-family: Courier New,Courier,monospace">textArea</span> for writing a message and a button for sending it.</p>
+<p>The content area displays a list view with message bubbles. The layout of the bubbles is defined in the <code>left_bubble.tpl</code> and <code>right_bubble.tpl</code> template files.</p>
+ <p>The footer section contains a <code>textArea</code> for writing a message and a button for sending it.</p>
<pre class="prettyprint">
<div id="chat" data-role="page" data-footer-exist="true">
<!--Header section-->
</pre>
</li>
-<li>app.ui.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">checkSendButtonState()</span> method is used to check whether there is text in the <span style="font-family: Courier New,Courier,monospace">textArea</span>. If the <span style="font-family: Courier New,Courier,monospace">textArea</span> field is empty, the <strong>Send</strong> button is disabled.</p>
+<li><strong>app.ui.js Source File</strong>
+<p>The <code>checkSendButtonState()</code> method is used to check whether there is text in the <code>textArea</code>. If the <code>textArea</code> field is empty, the <strong>Send</strong> button is disabled.</p>
<pre class="prettyprint">
-checkSendButtonState: function Ui_checkSendButtonState()
+checkSendButtonState: function Ui_checkSendButtonState()
{
- if (app.helpers.checkStringLength($('#text').val().trim()) && app.isConnection())
+ if (app.helpers.checkStringLength($('#text').val().trim()) && app.isConnection())
{
this.enableSendButton();
- }
- else
+ }
+ else
{
this.disableSendButton();
}
</ol>
<h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File
- <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
- <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file.</p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/bluetooth.gap"/>
<tizen:privilege name="http://tizen.org/privilege/bluetooth.spp"/>
<!--Other configuration details-->
-</widget></pre>
+</widget>
+</pre>
</li>
</ol>
- <h2 id="Creating_Connection" name="Creating_Connection">Creating the Connection</h2>
- <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Discovering_BT_Devices">Discovering Bluetooth Devices</a> and <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
+ <h2 id="Creating_Connection" name="Creating_Connection">Creating the Connection</h2>
+ <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Discovering_BT_Devices">Discovering Bluetooth Devices</a> and <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
<h3 id="check" name="check">Checking the Bluetooth Status</h3>
-
- <ol class="tutorstep">
- <li>app.server.js Source File
- <ol type="a"><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method.</p>
+
+ <ol>
+ <li><strong>app.server.js Source File</strong>
+ <ol type="a"><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <code>getDefaultAdapter()</code> method.</p>
<pre class="prettyprint">
this.adapter = tizen.bluetooth.getDefaultAdapter();
</pre>
</li>
<li>
- <p>The power status of the adapter can be checked using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p>
+ <p>The power status of the adapter can be checked using the <code>setPowered()</code> method.</p>
<pre class="prettyprint">
-powerOn: function Model_powerOn(callback)
+powerOn: function Model_powerOn(callback)
{
- if (!this.adapter.powered)
+ if (!this.adapter.powered)
{
- try
+ try
{
- this.adapter.setPowered(true, function()
- {
- setTimeout(function() {callback();}, 500);
- });
+ this.adapter.setPowered(true, function()
+ {
+ setTimeout(function() {callback();}, 500);
+ });
app.ui.showPowerOnButton();
}
- }
- else
+ }
+ else
{
callback();
}
</ol>
</li>
</ol>
- <h3 id="register" name="register">Registering the Server</h3>
- <ol class="tutorstep">
- <li>app.server.js Source File
- <p>One of the devices must be defined to be used as the server. This is done using the <span style="font-family: Courier New,Courier,monospace">registerServer()</span> method.</p>
-
<pre class="prettyprint">
-registerServer: function Server_registerServer()
+ <h3 id="register" name="register">Registering the Server</h3>
+ <ol>
+ <li><strong>app.server.js Source File</strong>
+ <p>One of the devices must be defined to be used as the server. This is done using the <code>registerServer()</code> method.</p>
+<pre class="prettyprint">
+registerServer: function Server_registerServer()
{
- this.model.registerServer(this.adapter, this.serviceUUID, this.registerServerSuccess.bind(this));
+ this.model.registerServer(this.adapter, this.serviceUUID,
+ this.registerServerSuccess.bind(this));
},
</pre>
</li>
</ol>
- <h3 id="connect" name="connect">Connecting Devices</h3>
- <ol class="tutorstep">
- <li>app.client.model.js Source File
+ <h3 id="connect" name="connect">Connecting Devices</h3>
+ <ol>
+ <li><strong>app.client.model.js Source File</strong>
<ol type="a">
<li>
- <p>After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the <span style="font-family: Courier New,Courier,monospace">connectToService()</span> method.</p>
- <pre class="prettyprint">
-connectToService: function ClientModel_connectToService(device, serviceUUID,
- successCallback, errorCallback)
+ <p>After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the <code>connectToService()</code> method.</p>
+<pre class="prettyprint">
+connectToService: function ClientModel_connectToService(device, serviceUUID,
+ successCallback,
+ errorCallback)
{
this.client.chatServerDevice = device;
- try
+ try
{
- device.connectToServiceByUUID(serviceUUID, successCallback, errorCallback, 'RFCOMM');
+ device.connectToServiceByUUID(serviceUUID, successCallback,
+ errorCallback, 'RFCOMM');
}
},
</pre>
</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">connectToService()</span> method sends a ping to ensure that the server is responding.
+<li>The <code>connectToService()</code> method sends a ping to ensure that the server is responding.
<pre class="prettyprint">
sendPing: function ClientModel_sendPing(name, socket)
</pre>
</li>
</ol>
-
+
<h2 id="Exchanging_Data" name="Exchanging_Data">Sending a Message</h2>
- <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
- <ol class="tutorstep">
-<li>app.client.model.js Source File
-<p>Before sending a message, the message data must be stringified to the JSON format. The data is then written to the selected socket using the <span style="font-family: Courier New,Courier,monospace">writeData()</span> method.</p>
+ <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
+ <ol>
+<li><strong>app.client.model.js Source File</strong>
+<p>Before sending a message, the message data must be stringified to the JSON format. The data is then written to the selected socket using the <code>writeData()</code> method.</p>
<pre class="prettyprint">
-sendMessage: function ClientModel_sendMessage(name, socket, message, callback)
+sendMessage: function ClientModel_sendMessage(name, socket, message, callback)
{
var sendTextMsg = [], messageObj, messageObjToString, i, len;
name = encodeURIComponent(name);
messageObj = {name: name, text: message, ping: false, bye: false};
messageObjToString = JSON.stringify(messageObj);
len = messageObjToString.length;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
sendTextMsg[i] = messageObjToString.charCodeAt(i);
}
- try
+ try
{
- if (socket !== null && socket.state === "OPEN")
+ if (socket !== null && socket.state === "OPEN")
{
socket.writeData(sendTextMsg);
callback(message);
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Task: Contacts Exchanger</title>
+ <title>Task: Contacts Exchanger</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="https://developer.tizen.org/development/sample/web/Communication/Contacts_Exchanger" target="_blank">Contacts Exchanger Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Task: Contacts Exchanger</h1>
<p>This task, based on the ContactsExchanger sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a> API to exchange contacts between devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Contacts_Exchanger" target="blank">Contacts Exchanger</a>.</p>
-
- <p>This task consists of the following parts:</p>
+
+ <p>This task consists of the following parts:</p>
<ul>
<li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
<li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
<li><a href="#Setting_NFC_Conn">Setting up the NFC Connection</a> defines how to set up and manage the NFC connection.</li>
<li><a href="#Exchanging_Contact_Tags">Exchanging Contact Information with Tags</a> defines how to receive a contact as an NDEF message, prepare the message, and save the contact on the SIM card using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API.</li>
<li><a href="#Exchanging_Contact_Peers">Exchanging Contact Information with Peers</a> defines how to exchange messages between devices.</li>
- </ul>
- <p>This sample is a fully functional application for exchanging between devices contact information based on contacts on a SIM card.</p>
-
+ </ul>
+ <p>This sample is a fully functional application for exchanging between devices contact information based on contacts on a SIM card.</p>
+
<h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
<p>The ContactsExchanger sample application layout consists of 4 screens: the main screen displays the default contact and the operation buttons, the Contacts list screen displays a list of contacts, the Add contact screen allows the user to add a new contact, and the transfer screen is displayed when the user clicks an operation button on the main screen.</p>
-
-
- <p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: ContactsExchanger screens</p>
- <p align="center"><img alt="ContactsExchangerscreens" src="../../images/contactsexchanger.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+
+
+ <p>The following figure shows the main screens of the application.</p>
+ <p align="center"><strong>Figure: ContactsExchanger screens</strong></p>
+ <p align="center"><img alt="ContactsExchangerscreens" src="../../images/contactsexchanger.png" /></p>
+
+<h3 id="main" name="main">Defining the Main Screen</h3>
+ <ol>
+ <li><strong>index.html Source File</strong>
<ol type="a"><li>
-<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+<p>The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
-<!--Main screen layout-->
+<!--Main screen layout-->
<div data-role="page" id="main">
<!--Header section-->
<div data-role="header" id="header-start">
<h1>Contacts exchanger</h1>
- </div></pre></li>
+ </div>
+</pre></li>
<li>
<p>The main screen content is dynamic and created during the runtime.</p>
<pre class="prettyprint lang-html">
- <!--Content section-->
+ <!--Content section-->
<div data-role="content" id="content-start">
<!--Dynamic content-->
</div>
</pre>
</li>
</ol>
-</li>
- <li>app.ui.js Source File
- <ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace">loadStartPage()</span> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <span style="font-family: Courier New,Courier,monospace">loadStartContent()</span> method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.</p>
+</li>
+ <li><strong>app.ui.js Source File</strong>
+ <ol type="a"><li><p>The <code>loadStartPage()</code> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <code>loadStartContent()</code> method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.</p>
<pre class="prettyprint">
-loadStartPage: function ui_loadStartPage()
+loadStartPage: function ui_loadStartPage()
{
- if (localStorage.started === undefined)
+ if (localStorage.started === undefined)
{
this.loadTemporaryContent();
- }
- else
+ }
+ else
{
this.loadStartContent();
}
<p>If the default contact card is not defined, the content section of the screen displays a message and a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> allowing user to create the default card.</p>
<pre class="prettyprint">
<div class="box" id="temporaryBox">
- <p class="defaultText">Default card is not defined yet!<br/>Do you want to define it now?</p>
+ <p class="defaultText">
+ Default card is not defined yet!<br/> Do you want to define it now?
+ </p>
<div data-role="button" class="ui-btn-create">Create default card</div>
</div>
</pre>
</li>
</ol>
<h3 id="selection" name="selection">Defining the Contacts List Screen</h3>
- <ol class="tutorstep"><li>index.html Source File
+ <ol><li><strong>index.html Source File</strong>
<p>The Contacts list screen displays an aggregated contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> sorted by name. The contacts are loaded from the device default address book using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API methods.</p>
<pre class="prettyprint">
<ul data-role="listview" id="list-choose">
<h3 id="transfer" name="transfer">Defining the Transfer Screen</h3>
<p>The transfer screen is simply a countdown screen to give the user 10 seconds to communicate with another device or a tag.</p>
- <ol class="tutorstep"><li>app.ui.js Source File
+ <ol><li><strong>app.ui.js Source File</strong>
<ol type="a"><li>
<p>The transfer page is displayed shortly when the user taps the <strong>Read from card</strong>, <strong>Write to card</strong>, or <strong>Communicate with another device</strong> button on the main screen.</p>
<pre class="prettyprint">
</pre>
</li>
<li>
-<p>After the <span style="font-family: Courier New,Courier,monospace">pageshow</span> event, the screen is prepared according to the selected button. The <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method is used to check the NFC connection status.</p>
+<p>After the <code>pageshow</code> event, the screen is prepared according to the selected button. The <code>getDefaultAdapter()</code> method is used to check the NFC connection status.</p>
<pre class="prettyprint">
-$('#transfer').on('pageshow', function()
- {
- if (tizen.nfc.getDefaultAdapter().powered)
+$('#transfer').on('pageshow', function()
{
- try
+ if (tizen.nfc.getDefaultAdapter().powered)
{
- var option = $(this).data('option');
- if (option === 'read')
- {
- self.prepareWaitingPage('Card to device',
- 'PUT WIRELESS TAG<br/>CLOSE TO<br/>YOUR DEVICE');
- self.app.nfc.card.setTagDetectRead();
- }
- else if (option === 'write')
- {
- self.prepareWaitingPage('Device to card',
- 'PUT WIRELESS TAG<br/>CLOSE TO<br/>YOUR DEVICE');
- self.app.nfc.card.setTagDetectWrite();
- }
- else
+ try
{
- self.prepareWaitingPage('Device to device',
- 'PUT YOUR DEVICE<br/>CLOSE TO<br/>OTHER DEVICE');
- self.app.nfc.peer.setTargetDetect();
+ var option = $(this).data('option');
+ if (option === 'read')
+ {
+ self.prepareWaitingPage('Card to device',
+ 'PUT WIRELESS TAG<br/>
+ CLOSE TO<br/>
+ YOUR DEVICE');
+ self.app.nfc.card.setTagDetectRead();
+ }
+ else if (option === 'write')
+ {
+ self.prepareWaitingPage('Device to card',
+ 'PUT WIRELESS TAG<br/>
+ CLOSE TO<br/>
+ YOUR DEVICE');
+ self.app.nfc.card.setTagDetectWrite();
+ }
+ else
+ {
+ self.prepareWaitingPage('Device to device',
+ 'PUT YOUR DEVICE<br/>
+ CLOSE TO<br/>
+ OTHER DEVICE');
+ self.app.nfc.peer.setTargetDetect();
+ }
}
}
- }
- else
- {
- $.mobile.changePage('#start');
- alert('Please turn on NFC adapter');
- }
-});
+ else
+ {
+ $.mobile.changePage('#start');
+ alert('Please turn on NFC adapter');
+ }
+ });
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">prepareWaitingPage()</span> method defines the transfer page UI.</p>
+<p>The <code>prepareWaitingPage()</code> method defines the transfer page UI.</p>
<pre class="prettyprint">
-prepareWaitingPage: function ui_prepareWaitingPage(title, text)
+prepareWaitingPage: function ui_prepareWaitingPage(title, text)
{
var waitingBox, waitingContent, contentTransfer = $('#content-transfer');
waitingBox = $('<div class="box" id="waitingBox"></div>');
</li>
<li>
-<p>Finally, the screen displays a countdown from 10 to 0 using the <span style="font-family: Courier New,Courier,monospace">countDown()</span> method:</p>
+<p>Finally, the screen displays a countdown from 10 to 0 using the <code>countDown()</code> method:</p>
<pre class="prettyprint">
-countDown: function countDown(time, obj)
+countDown: function countDown(time, obj)
{
- if (!this.counterState)
+ if (!this.counterState)
{
- setTimeout(function()
- {
- this.countDown(time, obj);
- }.bind(this), 500);
+ setTimeout(function()
+ {
+ this.countDown(time, obj);
+ }.bind(this), 500);
return;
}
obj.text(time);
- if (time > 0)
+ if (time > 0)
{
- if (this.nfc.isPowered())
+ if (this.nfc.isPowered())
{
time -= 1;
- this.timeOutHandler = setTimeout(function()
- {
- this.countDown(time, obj);
- }.bind(this), 1000);
- }
- else
+ this.timeOutHandler = setTimeout(function()
+ {
+ this.countDown(time, obj);
+ }.bind(this), 1000);
+ }
+ else
{
this.nfc.timeExpired();
}
- }
- else
+ }
+ else
{
this.nfc.timeExpired();
}
</ol>
<h3 id="add" name="add">Defining the Add Contact Screen</h3>
-<ol class="tutorstep"><li>app.ui.js Source File
+<ol><li><strong>app.ui.js Source File</strong>
<p>The Add contact screen displays the contact information received from another device. The user can save the contact information in the device default address book by tapping the <strong>Save</strong> button.</p>
<pre class="prettyprint lang-html">
</li></ol>
<h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File
- <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
- <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file.</p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/nfc.admin"/>
<tizen:privilege name="http://tizen.org/privilege/nfc.p2p"/>
<tizen:privilege name="http://tizen.org/privilege/nfc.tag"/>
<!--Other configuration details-->
-</widget></pre>
+</widget>
+</pre>
</li>
</ol>
-<h2 id="Setting_NFC_Conn" name="Setting_NFC_Conn">Setting up the NFC Connection</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Managing_NFC_Conn">Managing NFC Connectivity</a>.</p>
- <ol class="tutorstep">
- <li>app.nfc.js Source File
- <p>To create an NFC connection, get the default NFC adapter using the <
span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method, and launch the NFC service using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface, which takes the NFC status as a parameter.</p>
+<h2 id="Setting_NFC_Conn" name="Setting_NFC_Conn">Setting up the NFC Connection</h2>
+ <p>This section builds upon the elements described in <a href="nfc_w.htm#Managing_NFC_Conn">Managing NFC Connectivity</a>.</p>
+ <ol>
+ <li><strong>app.nfc.js Source File</strong>
+ <p>To create an NFC connection, get the default NFC adapter using the <
code>getDefaultAdapter()</code> method, and launch the NFC service using the <code>setPowered()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface, which takes the NFC status as a parameter.</p>
<pre class="prettyprint">
-startNFC: function nfc_startNFC()
+startNFC: function nfc_startNFC()
{
- try
+ try
{
this.nfcAdapter = tizen.nfc.getDefaultAdapter();
- if (this.nfcAdapter.powered)
+ if (this.nfcAdapter.powered)
{
this.nfcStateMemory = true;
this.onPowerOn();
}
this.nfcStateMemory = false;
- this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this), this.onPowerOnFails.bind(this));
+ this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this),
+ this.onPowerOnFails.bind(this));
},
}
</pre>
</li>
</ol>
-
-<h2 id="Exchanging_Contact_Tags" name="Exchanging_Contact_Tags">Exchanging Contact Information with Tags</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Handling_NDEF_Messages">Handling NDEF Messages</a>.</p>
-
-
+
+<h2 id="Exchanging_Contact_Tags" name="Exchanging_Contact_Tags">Exchanging Contact Information with Tags</h2>
+ <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Handling_NDEF_Messages">Handling NDEF Messages</a>.</p>
+
+
<h3 id="read" name="read">Reading an NDEF Message from an NFC Tag</h3>
- <ol class="tutorstep">
- <li>app.nfc.card.js Source File
+ <ol>
+ <li><strong>app.nfc.card.js Source File</strong>
<ol type="a"><li>
-<p>When the user taps the <strong>Read from card</strong> button on the main screen, the transfer page is displayed. The <
span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the tag is properly attached and the NDEF message valid.</p>
+<p>When the user taps the <strong>Read from card</strong> button on the main screen, the transfer page is displayed. The <
code>setTagListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the tag is properly attached and the NDEF message valid.</p>
<pre class="prettyprint">
-setTagDetectRead: function nfc_card_setTagDetectRead()
+setTagDetectRead: function nfc_card_setTagDetectRead()
{
this.nfc.nfcAdapter.setTagListener(
{
}
</pre>
</li>
-<li><p>When the tag is attached, the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> event is fired to retrieve the sent NDEF message information.</p>
+<li><p>When the tag is attached, the <code>readNDEF()</code> event is fired to retrieve the sent NDEF message information.</p>
<pre class="prettyprint">
-sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
+sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
{
- try
+ try
{
- if (!tag.isSupportedNDEF)
+ if (!tag.isSupportedNDEF)
{
throw {message: "This tag doesn't support NDEF"};
}
}
</pre>
</li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">readMessage()</span> method is used to get the sent information record, retrieve the contact, and display the Add contact screen.</p>
+<li><p>The <code>readMessage()</code> method is used to get the sent information record, retrieve the contact, and display the Add contact screen.</p>
<pre class="prettyprint">
-readMessage: function nfc_readMessage(message)
+readMessage: function nfc_readMessage(message)
{
- try
+ try
{
this.fillRecordInfo(message.records[0]);
}
},
-fillRecordInfo: function nfc_fillRecordInfo(record)
+fillRecordInfo: function nfc_fillRecordInfo(record)
{
- try
+ try
{
- var contactsData = this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
+ var contactsData =
+ this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
this.app.nfc.displayContact(contactsData);
}
}
</ol>
</li>
</ol>
-
-<h3 id="write" name="write">Writing an NDEF Message to the NFC Tag</h3>
- <ol class="tutorstep">
- <li>app.nfc.card.js Source File
+
+<h3 id="write" name="write">Writing an NDEF Message to the NFC Tag</h3>
+ <ol>
+ <li><strong>app.nfc.card.js Source File</strong>
<ol type="a"><li>
- <p>When the user taps the <strong>Write to card</strong> button on the main screen, the transfer page is displayed, and the <span style="font-family: Courier New,Courier,monospace">setTagDetectWrite()</span> method is called. The <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method adds an event listener to detect whether the tag is successfully attached.</p>
+ <p>When the user taps the <strong>Write to card</strong> button on the main screen, the transfer page is displayed, and the <code>setTagDetectWrite()</code> method is called. The <code>setTagListener()</code> method adds an event listener to detect whether the tag is successfully attached.</p>
<pre class="prettyprint">
-setTagDetectWrite: function nfc_card_setTagDetectWrite()
+setTagDetectWrite: function nfc_card_setTagDetectWrite()
{
- var suc =
+ var suc =
{
onattach: this.sucTagWriteAttach.bind(this),
ondetach: this.nfc.sucDetach.bind(this.nfc)
this.nfc.nfcAdapter.setTagListener(suc);
}
</pre></li>
-<li><p>When the tag is attached, the contact is prepared for sending it over the NFC connection. The <
span style="font-family: Courier New,Courier,monospace">prepareForNFC()</span> and <span style="font-family: Courier New,Courier,monospace">phoneNumber2NDEF()</span> methods convert the contact object to VCARD_30 format, create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> object, and attach it to the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> record with the VCARD_30 data. The NDEF message is saved to the tag and the main screen of the application is displayed.</p>
+<li><p>When the tag is attached, the contact is prepared for sending it over the NFC connection. The <
code>prepareForNFC()</code> and <code>phoneNumber2NDEF()</code> methods convert the contact object to VCARD_30 format, create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> object, and attach it to the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> record with the VCARD_30 data. The NDEF message is saved to the tag and the main screen of the application is displayed.</p>
<pre class="prettyprint">
-sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
+sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
{
var newMessage = null, fullContact = '';
- try
+ try
{
/* Local storage contains the contact object */
fullContact = this.nfc.prepareForNFC(localStorage);
newMessage = this.nfc.phoneNumber2NDEF(fullContact);
- if (!tag.isSupportedNDEF)
+ if (!tag.isSupportedNDEF)
{
throw {message: "This tag doesn't support NDEF"};
}
</li>
</ol>
</li>
-</ol>
+</ol>
-<h2 id="Exchanging_Contact_Peers" name="Exchanging_Contact_Peers">Exchanging Contact Information with Peers</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a>.</p>
+<h2 id="Exchanging_Contact_Peers" name="Exchanging_Contact_Peers">Exchanging Contact Information with Peers</h2>
+ <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a>.</p>
-<p>The data exchange functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.nfc.peer.js</span> file.</p>
- <ol class="tutorstep">
- <li>Sending Information
-<ol type="a"><li><p>When the user taps the <strong>Communicate with another device</strong> button on the main screen, the transfer page is displayed. The <
span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the peer is properly attached.</p>
+<p>The data exchange functionality is implemented in the <code>app.nfc.peer.js</code> file.</p>
+ <ol>
+ <li><strong>Sending Information</strong>
+<ol type="a"><li><p>When the user taps the <strong>Communicate with another device</strong> button on the main screen, the transfer page is displayed. The <
code>setPeerListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the peer is properly attached.</p>
<pre class="prettyprint">
-setTargetDetect: function nfc_peer_setTargetDetect()
+setTargetDetect: function nfc_peer_setTargetDetect()
{
- var successCallbacks =
+ var successCallbacks =
{
onattach: this.sucTargetAttach.bind(this),
ondetach: this.nfc.sucDetach.bind(this.nfc)
};
- try
+ try
{
this.nfc.nfcAdapter.setPeerListener(successCallbacks);
}
</pre>
</li>
<li>
-<p>When the peer is attached, the contact data is converted to an NDEF message format and sent to the peer device using the <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method.</p>
+<p>When the peer is attached, the contact data is converted to an NDEF message format and sent to the peer device using the <code>sendNDEF()</code> method.</p>
<pre class="prettyprint">
-sucTargetAttach: function nfc_peer_sucTargetAttach(target)
- {
+sucTargetAttach: function nfc_peer_sucTargetAttach(target)
+{
var newMessage = null, fullContact = this.nfc.prepareForNFC(localStorage);
this.nfc.nfcTarget = target;
this.setReceiveFromTarget();
- try
+ try
{
newMessage = this.nfc.phoneNumber2NDEF(fullContact);
target.sendNDEF(newMessage,
</li>
</ol>
</li>
-<li>Receiving Information
-<p> The <span style="font-family: Courier New,Courier,monospace">setReceiveFromTarget()</span> method is used to attach listeners to detect incoming NDEF messages.</p>
+<li><strong>Receiving Information</strong>
+<p> The <code>setReceiveFromTarget()</code> method is used to attach listeners to detect incoming NDEF messages.</p>
<pre class="prettyprint">
-setReceiveFromTarget: function nfc_peer_setReceiveFromTarget()
+setReceiveFromTarget: function nfc_peer_setReceiveFromTarget()
{
this.nfc.nfcTarget.setReceiveNDEFListener(this.nfc.readMessage.bind(this.nfc));
}
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Task: Download Manager</title>
+ <title>Task: Download Manager</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li><a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="_blank">Download Manager Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Task: Download Manager</h1>
-
- <p>This task, based on the DownloadManager sample delivered with the Tizen Studio, demonstrates how you can use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications) to asynchronously download URL content to the device storage. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="blank">Download Manager</a>.</p>
+
+ <p>This task, based on the DownloadManager sample delivered with the Tizen Studio, demonstrates how you can use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications) to asynchronously download URL content to the device storage. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="blank">Download Manager</a>.</p>
<p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#manage">Managing Downloads</a> defines how to start, pause, resume, or cancel a content download.</li>
+ <ul>
+ <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
+ <li><a href="#manage">Managing Downloads</a> defines how to start, pause, resume, or cancel a content download.</li>
</ul>
- <p>This sample is a fully functional application which allows the user to download any content by providing its URL. The user can control the download process.</p>
+ <p>This sample is a fully functional application which allows the user to download any content by providing its URL. The user can control the download process.</p>
+
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
+<h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The DownloadManager sample application layout contains only 1 screen: the main screen that displays the download items and progress. The application also has a template for displaying the download items.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: DownloadManager screens</p>
- <p align="center"><img alt="DownloadManager screens" src="../../images/downloadmanager.png" /></p>
- <h3 id="main" name="main">Defining the Main Screen</h3>
+ <p>The DownloadManager sample application layout contains only 1 screen: the main screen that displays the download items and progress. The application also has a template for displaying the download items.</p>
- <ol class="tutorstep">
- <li>index.html Source File
-<p>The main screen of the application displays the URL input field, whose value is by default set to <strong>http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv</strong>, and the <strong>OK</strong> button.</p>
- <pre class="prettyprint lang-html">
+ <p>The following figure shows the main screens of the application.</p>
+ <p align="center"><strong>Figure: DownloadManager screens</strong></p>
+ <p align="center"><img alt="DownloadManager screens" src="../../images/downloadmanager.png" /></p>
+ <h3 id="main" name="main">Defining the Main Screen</h3>
+
+ <ol>
+ <li><strong>index.html Source File</strong>
+<p>The main screen of the application displays the URL input field, whose value is by default set to <strong>http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv</strong>, and the <strong>OK</strong> button.</p>
+<pre class="prettyprint lang-html">
<div id="main-header" data-role="header" data-position="fixed">
<h1>Download manager</h1>
<div id="main-url-div">
<div id="main-input-div">
- <input type="text" id="main-url-text" placeholder="type URL"
- value="http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv" />
+ <input type="text" id="main-url-text" placeholder="type URL"
+ value="http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv"/>
</div>
<div id="main-button-div"><a data-role="button" id="main-url-ok">OK</a></div>
</div>
</div>
</pre></li>
-<li>js/app.ui.events.js Source File
+<li><strong>js/app.ui.events.js Source File</strong>
<p>Clicking the <strong>OK</strong> button starts the download.</p>
-
<pre class="prettyprint">
-$('#main-header').on('tap', '#main-url-ok', function onUrlOkTap()
-{
- app.startDownloading($('#main-url-text').val());
-});
+<pre class="prettyprint">
+$('#main-header').on('tap', '#main-url-ok', function onUrlOkTap()
+ {
+ app.startDownloading($('#main-url-text').val());
+ });
</pre></li>
-<li>index.html Source File
+<li><strong>index.html Source File</strong>
<p>The download items are displayed on the main screen as a list, and the footer has the <strong>Refresh</strong> button.</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<div id="main-content" data-role="content">
<ul data-role="listview"></ul>
</div>
<div id="main-footer" data-role="footer" data-position="fixed">
- <div data-role="button" data-inline="true" data-style="round" id="refresh-button">Refresh</div>
+ <div data-role="button" data-inline="true" data-style="round"
+ id="refresh-button">Refresh</div>
</div>
</pre></li>
-<li>js/app.ui.events.js Source File
+<li><strong>js/app.ui.events.js Source File</strong>
<p>Clicking the <strong>Refresh</strong> button refreshes the download item list.</p>
-
<pre class="prettyprint">
-$('#refresh-button').on('tap', function onRefreshBtnTap(event)
-{
- event.preventDefault();
- event.stopPropagation();
- app.refreshDownloadsList();
-});
+<pre class="prettyprint">
+$('#refresh-button').on('tap', function onRefreshBtnTap(event)
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ app.refreshDownloadsList();
+ });
</pre></li></ol>
- <h3 id="template" name="template">Defining the Template Mechanism</h3>
-
-<p>The Template Manager is used to follow the MVC (Model View Controller) architecture while generating a view item for the downloaded content. The whole process of generating the output HTML is divided into 3 parts:</p>
-
- <ol class="tutorstep">
- <li>js/app.ui.templateManager.js Source File
+ <h3 id="template" name="template">Defining the Template Mechanism</h3>
+
+<p>The Template Manager is used to follow the MVC (Model View Controller) architecture while generating a view item for the downloaded content. The whole process of generating the output HTML is divided into 3 parts:</p>
+
+ <ol>
+ <li><strong>js/app.ui.templateManager.js Source File</strong>
<ol type="a"><li>
<p>The Template Manager loads the template files to the cache.</p>
-
<pre class="prettyprint">
-loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
+<pre class="prettyprint">
+loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
{
var self = this,
cachedTemplates = 0,
tplName,
tplPath;
- if ($.isArray(tplNames))
+ if ($.isArray(tplNames))
{
/* For each template */
- $.each(tplNames, function onTplIterate(index, fileName)
- {
- /* Cache template html */
- if (self.cache[fileName] === undefined)
+ $.each(tplNames, function onTplIterate(index, fileName)
{
- tplName =
- [
- fileName,
- app.config.get('templateExtension')
- ].join('');
- tplPath =
- [
- app.config.get('templateDir'),
- tplName
- ].join('/');
-
- $.ajax(
+ /* Cache template html */
+ if (self.cache[fileName] === undefined)
{
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function onTplLoadSuccess(data)
+ tplName =
+ [
+ fileName,
+ app.config.get('templateExtension')
+ ].join('');
+ tplPath =
+ [
+ app.config.get('templateDir'),
+ tplName
+ ].join('/');
+
+ $.ajax(
{
- /* Increase counter */
- cachedTemplates += 1;
+ url: tplPath,
+ cache: true,
+ dataType: 'html',
+ async: true,
+ success: function onTplLoadSuccess(data)
+ {
+ /* Increase counter */
+ cachedTemplates += 1;
- /* Save to cache */
- self.cache[fileName] = data;
+ /* Save to cache */
+ self.cache[fileName] = data;
- /* If all templates are cached, launch callback */
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
+ /* If all templates are cached, launch callback */
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
+ },
+ error: function onTplLoadError(jqXHR, textStatus, errorThrown)
{
- onSuccess();
+ /* Error handling */
}
- },
- error: function onTplLoadError(jqXHR, textStatus, errorThrown)
+ });
+ }
+ else
+ {
+ /* Template is already cached */
+ cachedTemplates += 1;
+ /* If all templates are cached, launch callback */
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
{
- /* Error handling */
+ onSuccess();
}
- });
- }
- else
- {
- /* Template is already cached */
- cachedTemplates += 1;
- /* If all templates are cached, launch callback */
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
- {
- onSuccess();
}
- }
});
}
};
-</pre> </li>
+</pre></li>
<li>
<p>The Template Manager returns the template HTML from the cache.</p>
-
<pre class="prettyprint">
-get: function TemplateManager_get(tplName, tplParams)
+<pre class="prettyprint">
+get: function TemplateManager_get(tplName, tplParams)
{
- if (this.cache[tplName] !== undefined)
+ if (this.cache[tplName] !== undefined)
{
return this.getCompleted(this.cache[tplName], tplParams);
}
</pre></li>
<li>
<p>The Template Manager returns the completed template where specified parameters have been inserted.</p>
-
<pre class="prettyprint">
-getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
+<pre class="prettyprint">
+getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
{
var tplParam;
- for (tplParam in tplParams)
+ for (tplParam in tplParams)
{
- if (tplParams.hasOwnProperty(tplParam))
+ if (tplParams.hasOwnProperty(tplParam))
{
tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
}
}
</pre></li>
</ol> </li></ol>
-
-<h3 id="item" name="item">Defining the Download Items</h3>
-
-<ol class="tutorstep">
- <li>templates/download-row.tpl Source File
+
+<h3 id="item" name="item">Defining the Download Items</h3>
+
+<ol>
+ <li><strong>templates/download-row.tpl Source File</strong>
<p>The download items are displayed in a list, where each item is its own row. The rows are placed in the list using the Template Manager.</p>
<p>Every list element contains an icon suitable for the content type, the file name, some control buttons proper for the current download state, and a progress bar representing the download progress. The elements also have additional attributes used to recognize the download element recognition from the JavaScript code, for example while updating the progress bar value.</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<li class="downloadListElement" id="%downloadId%">
<div class="download-item">
<div class="download-desc" style="position: relative;">
<div class="download-control">
<div data-role="progressbar" id="progressbar%downloadId%"></div>
<div class="download-buttons">
- <div data-role="button" class="download-button download-navigation-button"
- state="play" for-download="%downloadId%" for-url="%url%"
+ <div data-role="button" class="download-button download-navigation-button"
+ state="play" for-download="%downloadId%" for-url="%url%"
id="button%downloadId%" listener-flag="1">
- <img src="images/pause.png" class="download-navigation-button-image"
- id="buttonimg%downloadId%" />
+ <img src="images/pause.png" class="download-navigation-button-image"
+ id="buttonimg%downloadId%"/>
</div>
- <div data-role="button" class="download-button download-delete-button"
- state="play" for-download="%downloadId%"
+ <div data-role="button" class="download-button download-delete-button"
+ state="play" for-download="%downloadId%"
id="delete%downloadId%">
- <img src="images/stop.png" class="download-navigation-button-image"
- id="deleteimg%downloadId%" />
+ <img src="images/stop.png" class="download-navigation-button-image"
+ id="deleteimg%downloadId%"/>
</div>
</div>
</div>
<div>
</li>
</pre></li>
-</ol>
+</ol>
- <h2 id="manage" name="manage">Managing Downloads</h2>
+ <h2 id="manage" name="manage">Managing Downloads</h2>
- <p>This section builds upon the elements described in <a href="download_w.htm#manage">Managing Downloads</a>.</p>
-
-
-<p>The core functionalities regarding the control of the download request are implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p>
-
-<h3 id="start" name="start">Starting the Download</h3>
- <ol class="tutorstep">
- <li>js/app.model.js Source File
-
-<p>The download process starts when user clicks <strong>OK</strong> next to the URL input field on the main screen. The button click indirectly invokes the <span style="font-family: Courier New,Courier,monospace">startDownloading()</span> method, which is responsible for starting the download process. A new <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> object is created and the download process is started through the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> object.</p>
+ <p>This section builds upon the elements described in <a href="download_w.htm#manage">Managing Downloads</a>.</p>
+
+
+<p>The core functionalities regarding the control of the download request are implemented in the <code>js/app.model.js</code> file.</p>
+
+<h3 id="start" name="start">Starting the Download</h3>
+ <ol>
+ <li><strong>js/app.model.js Source File</strong>
+
+<p>The download process starts when user clicks <strong>OK</strong> next to the URL input field on the main screen. The button click indirectly invokes the <code>startDownloading()</code> method, which is responsible for starting the download process. A new <code>DownloadRequest</code> object is created and the download process is started through the <code>DownloadManager</code> object.</p>
<pre class="prettyprint">
-startDownloading: function Model_startDownloading(url, eventHandlers, onSuccess)
+startDownloading: function Model_startDownloading(url, eventHandlers, onSuccess)
{
console.log('Model_startDownloading: ' + url);
var downloadRequest, downloadId;
- try
+ try
{
downloadRequest = new tizen.DownloadRequest(url, 'downloads');
downloadId = tizen.download.start(downloadRequest, eventHandlers);
onSuccess(downloadId, url);
- }
+ }
}
-</pre></li>
- <li>js/app.js Source File
-
+</pre></li>
+ <li><strong>js/app.js Source File</strong>
+
<p>After the download process is started successfully, the download item information is added to the local storage and the application user interface is updated.</p>
<pre class="prettyprint">
-onDownloadStarted: function App_onDownloadStarted(id, url)
+onDownloadStarted: function App_onDownloadStarted(id, url)
{
console.log('App_onDownloadStarted: ', id);
var fileName = this.helpers.getSourceName(url);
- this.ui.onDownloadStarted(id, url, fileName,
- this.model.updateRecord.bind(this, id,
- {
- 'fileName': fileName,
- 'url': url,
- 'state': 0
- }));
+ this.ui.onDownloadStarted(id, url, fileName, this.model.updateRecord.bind(this, id,
+ {
+ 'fileName': fileName,
+ 'url': url,
+ 'state': 0
+ }));
}
-</pre></li>
- <li>js/app.ui.js Source File
-
-<p>The user interface is updated using the download row template obtained through the <span style="font-family: Courier New,Courier,monospace">templateManager</span> object.</p>
+</pre></li>
+ <li><strong>js/app.ui.js Source File</strong>
+
+<p>The user interface is updated using the download row template obtained through the <code>templateManager</code> object.</p>
<pre class="prettyprint">
-addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName, updateStorageCallback)
+addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName,
+ updateStorageCallback)
{
var ul = $('#main-content ul.ui-listview'),
fileIcon = app.helpers.resolveFileIcon(app.helpers.getFileExtension(fileName)),
- listElement = this.templateManager.get('download-row',
+ listElement = this.templateManager.get('download-row',
{
downloadId: id,
fileName: fileName,
fileIcon: fileIcon
});
- ul.append(listElement).listview('refresh');
- ul.find('#progressbar' + id).progressbar({value: 0});
- ul.find('#delete' + id).button();
- ul.find('#button' + id).button();
- updateStorageCallback($('#progressbar' + id).progressbar('option', 'value'));
+ ul.append(listElement).listview('refresh');
+ ul.find('#progressbar' + id).progressbar({value: 0});
+ ul.find('#delete' + id).button();
+ ul.find('#button' + id).button();
+ updateStorageCallback($('#progressbar' + id).progressbar('option', 'value'));
}
-</pre></li>
- </ol>
+</pre></li>
+ </ol>
<h3 id="pause" name="pause">Pausing and Resuming the Download</h3>
-
- <ol class="tutorstep">
- <li>js/app.ui.events.js
-<p>After the download item is created, the user can pause or resume operations through the applicable buttons in the download list element. To display the correct buttons, you must identify the current state of the download request.</p>
+
+ <ol>
+ <li><strong>js/app.ui.events.js Source File</strong>
+<p>After the download item is created, the user can pause or resume operations through the applicable buttons in the download list element. To display the correct buttons, you must identify the current state of the download request.</p>
<pre class="prettyprint">
-$('#main').on('tap', '.download-navigation-button', function onNavigationBtnTap(event)
-{
- event.preventDefault();
- event.stopPropagation();
- var obj = $(this);
- if (obj.attr('state') === 'play')
+$('#main').on('tap', '.download-navigation-button', function onNavigationBtnTap(event)
{
- app.pauseDownloading(obj.attr('for-download'));
- }
- else if (obj.attr('state') === 'pause')
- {
- app.resumeDownloading(obj.attr('for-url'),
- obj.attr('for-download'),
- obj.attr('listener-flag'));
- }
- else if (obj.attr('state') === 'finished')
- {
- app.launchFile($('#name' + obj.attr('for-download')).text());
- }
- else if (obj.attr('state') === 'canceled')
- {
- app.startDownloading(obj.attr('for-url'),
- obj.attr('for-download'));
- }
-});
-</pre> </li>
- <li>js/app.model.js Source File
-<ol type="a"><li>
- <p>If the request is in the play state, and the user clicks the button, the download process is paused. The user interface is notified about the pause by the callback, provided while starting the download process.</p>
+ event.preventDefault();
+ event.stopPropagation();
+ var obj = $(this);
+ if (obj.attr('state') === 'play')
+ {
+ app.pauseDownloading(obj.attr('for-download'));
+ }
+ else if (obj.attr('state') === 'pause')
+ {
+ app.resumeDownloading(obj.attr('for-url'),
+ obj.attr('for-download'),
+ obj.attr('listener-flag'));
+ }
+ else if (obj.attr('state') === 'finished')
+ {
+ app.launchFile($('#name' + obj.attr('for-download')).text());
+ }
+ else if (obj.attr('state') === 'canceled')
+ {
+ app.startDownloading(obj.attr('for-url'),
+ obj.attr('for-download'));
+ }
+ });
+</pre></li>
+ <li><strong>js/app.model.js Source File</strong>
+<ol type="a"><li>
+ <p>If the request is in the play state, and the user clicks the button, the download process is paused. The user interface is notified about the pause by the callback, provided while starting the download process.</p>
<pre class="prettyprint">
-pauseDownloading: function Model_pauseDownloading(downloadId)
+pauseDownloading: function Model_pauseDownloading(downloadId)
{
console.log('Model_pauseDownloading', downloadId);
- try
+ try
{
tizen.download.pause(downloadId);
- }
+ }
}
-</pre></li>
-<li>
- <p>If the request in the paused state, the download process is resumed.</p>
+</pre></li>
+<li>
+ <p>If the request in the paused state, the download process is resumed.</p>
<pre class="prettyprint">
-resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers, listenerCallback)
+resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers,
+ listenerCallback)
{
console.log('Model_resumeDownloading: ', downloadId);
tizen.download.resume(downloadId);
- if (eventHandlers !== null)
+ if (eventHandlers !== null)
{
tizen.download.setListener(downloadId, eventHandlers);
listenerCallback(downloadId);
}
}
-</pre></li>
- </ol> </li>
- </ol>
- <h3 id="stop" name="stop">Stopping the Download</h3>
- <ol class="tutorstep">
- <li>js/app.ui.events.js Source File
-<p>To stop the download process, you must first determine the download request status.</p>
+</pre></li>
+ </ol> </li>
+ </ol>
+ <h3 id="stop" name="stop">Stopping the Download</h3>
+ <ol>
+ <li><strong>js/app.ui.events.js Source File</strong>
+<p>To stop the download process, you must first determine the download request status.</p>
<pre class="prettyprint">
-$('#main').on('tap', '.download-delete-button', function onDeleteBtnTap(event)
-{
- event.preventDefault();
- event.stopPropagation();
- var obj = $(this);
- if (obj.attr('state') === 'play')
- {
- app.cancelDownloading(obj.attr('for-download'));
- }
- else if (obj.attr('state') === 'pause' ||
- obj.attr('state') === 'finished' ||
- obj.attr('state') === 'canceled' ||
- obj.attr('state') === 'failed')
+$('#main').on('tap', '.download-delete-button', function onDeleteBtnTap(event)
{
- app.deleteDownloading(obj.attr('for-download'));
- }
-});</pre></li>
- <li>js/app.model.js
- <p>If the download status is play, you can invoke the download cancellation function.</p>
+ event.preventDefault();
+ event.stopPropagation();
+ var obj = $(this);
+ if (obj.attr('state') === 'play')
+ {
+ app.cancelDownloading(obj.attr('for-download'));
+ }
+ else if (obj.attr('state') === 'pause' ||
+ obj.attr('state') === 'finished' ||
+ obj.attr('state') === 'canceled' ||
+ obj.attr('state') === 'failed')
+ {
+ app.deleteDownloading(obj.attr('for-download'));
+ }
+ });
+</pre></li>
+ <li><strong>js/app.model.js Source File</strong>
+ <p>If the download status is play, you can invoke the download cancellation function.</p>
<pre class="prettyprint">
-cancelDownloading: function Model_cancelDownloading(downloadId)
+cancelDownloading: function Model_cancelDownloading(downloadId)
{
console.log('Model_cancelDownloading: ' + downloadId);
- try
+ try
{
tizen.download.cancel(downloadId);
- }
+ }
}
-</pre></li>
- <li>js/app.ui.js
- <p>If the download request is not in the play state, the download is removed from the main screen list and local storage.</p>
+</pre></li>
+ <li><strong>js/app.ui.js Source File</strong>
+ <p>If the download request is not in the play state, the download is removed from the main screen list and local storage.</p>
<pre class="prettyprint">
-deleteDownloading: function Ui_deleteDownloading(id)
+deleteDownloading: function Ui_deleteDownloading(id)
{
$('#' + id).remove();
}
-</pre></li>
- </ol>
-
+</pre></li>
+ </ol>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#loganderror">Writing Log Messages and Errors</a></li>
<li><a href="#dirobject">Formatting Objects</a></li>
- <li><a href="#logtiming">Measuring Timing</a></li>
+ <li><a href="#logtiming">Measuring Timing</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>You can <a href="#logtiming">measure the time elapsed during an operation</a>.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To see the results of the message writing, use the system console available in your Tizen Studio or use the <span style="font-family: Courier New,Courier,monospace">sdb dlog</span> command.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ To see the results of the message writing, use the system console available in your Tizen Studio or use the <code>sdb dlog</code> command.
+</div>
-<p>The global <span style="font-family: Courier New,Courier,monospace">console</span> object contains some additional features defined by Cordova.</p>
+<p>The global <code>console</code> object contains some additional features defined by Cordova.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
console.log("Connection type: " + navigator.connection.type);
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">console</span> global object is available earlier, but it points to a default system console.</p>
-
+<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 <span style="font-family: Courier New,Courier,monospace">log()</span> and <span style="font-family: Courier New,Courier,monospace">error()</span> methods:</p>
+<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");
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To see the writing results, use the system console available in your Tizen Studio or use the <span style="font-family: Courier New,Courier,monospace">sdb dlog</span> command.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ To see the writing results, use the system console available in your Tizen Studio or use the <code>sdb dlog</code> command.
+</div>
<h2 id="dirobject" name="dirobject">Formatting Objects</h2>
var john = {name: "John", surname: "Doe"};
console.dir(john.name);
</pre></li>
-<li>To print with formatting, use <span style="font-family: Courier New,Courier,monospace">%o</span>:
+<li>To print with formatting, use <code>%o</code>:
<pre class="prettyprint">
var john = {name: "John", surname: "Doe"};
console.dir("my object %o", john);
array[i] = new Object();
};
</pre></li>
-<li>Stop the timer by passing the same label to the <span style="font-family: Courier New,Courier,monospace">timeEnd()</span> method:
+<li>Stop the timer by passing the same label to the <code>timeEnd()</code> method:
<pre class="prettyprint">
console.timeEnd("Big array initialization");
</pre>
<p>The following output is shown in the system console:</p>
-<pre>Big array initialization: 176ms</pre></li>
+<pre class="prettyprint">
+Big array initialization: 176ms
+</pre></li>
</ol>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Cordova</title>
- </head>
+ <title>Cordova</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc-navigation">
<li>Tizen 3.0 and Higher for TV</li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Cordova</h1>
<p>The Cordova API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
-<p>The Cordova API defines a global interface, containing only 1 empty member: <span style="font-family: Courier New,Courier,monospace">cordova</span>. The <span style="font-family: Courier New,Courier,monospace">window</span> element implements the interface.</p>
+<p>The Cordova API defines a global interface, containing only 1 empty member: <code>cordova</code>. The <code>window</code> element implements the interface.</p>
<p>Cordova defines a common interface for success and error callbacks:</p>
<ul><li>The success callbacks have no parameters, and return no value.</li>
<p>The error callback parameter has the following properties:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">code</span>: Number representing the type of the error</li>
-<li><span style="font-family: Courier New,Courier,monospace">name</span>: Short text representing the type of the error</li>
-<li><span style="font-family: Courier New,Courier,monospace">message</span>: Text containing information about the error</li>
+<ul><li><code>code</code>: Number representing the type of the error</li>
+<li><code>name</code>: Short text representing the type of the error</li>
+<li><code>message</code>: Text containing information about the error</li>
</ul>
</li></ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):
- <pre class="prettyprint">
+<div class="note">
+ <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);
function onDeviceReady()
console.log("Cordova features now available");
console.log("Connection type: " + navigator.connection.type);
}
-</pre></td>
- </tr>
- </tbody>
- </table>
-
+</pre>
+</div>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<h1>Device Information</h1>
-<p>You can use a <span style="font-family: Courier New,Courier,monospace">device</span> global dictionary to access the device information, such as hardware UUID (unique ID) and software version.</p>
+<p>You can use a <code>device</code> global dictionary to access the device information, such as hardware UUID (unique ID) and software version.</p>
<p>The Device API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
-<p>The following table lists the properties available in the global <
span style="font-family: Courier New,Courier,monospace">Device</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device.html#Device">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device.html#Device">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device.html#Device">TV</a> applications), and which allow you to <a href="#loginfo">access specific device information</a>.</p>
+<p>The following table lists the properties available in the global <
code>Device</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device.html#Device">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device.html#Device">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device.html#Device">TV</a> applications), and which allow you to <a href="#loginfo">access specific device information</a>.</p>
+<p align="center" class="Table"><strong>Table: Device properties</strong></p>
<table id="interface">
-<caption>Table: Device properties</caption>
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">cordova</span></td><td>Version of Cordova running on the device (as a string). For example: <span style="font-family: Courier New,Courier,monospace">5.1.1</span></td>
+ <td><code>cordova</code></td><td>Version of Cordova running on the device (as a string). For example: <code>5.1.1</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">model</span></td><td>Name of the device model. The value can be a production code name.</td>
+ <td><code>model</code></td><td>Name of the device model. The value can be a production code name.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">platform</span></td><td>Operating system name. For example: <span style="font-family: Courier New,Courier,monospace">Tizen</span></td>
+ <td><code>platform</code></td><td>Operating system name. For example: <code>Tizen</code></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">uuid</span></td><td>Device's Universally Unique Identifier (UUID). The value can be the device IMEI (International Mobile Equipment Identity) or other unique value for the device. The value is converted to a string.</td>
+ <td><code>uuid</code></td><td>Device's Universally Unique Identifier (UUID). The value can be the device IMEI (International Mobile Equipment Identity) or other unique value for the device. The value is converted to a string.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">version</span></td><td>Operating system version (as a string). For example: <span style="font-family: Courier New,Courier,monospace">3.0</span></td>
+ <td><code>version</code></td><td>Operating system version (as a string). For example: <code>3.0</code></td>
</tr>
</tbody>
</table>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
console.log("Cordova features now available");
}
</pre>
-
+
<h2 id="loginfo" name="loginfo">Accessing Device Properties</h2>
<p>To retrieve information on the device, Cordova, and operating system, and output it in the system log:</p>
<ol>
-<li><p>Prepare a handler for the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event:</p>
+<li><p>Prepare a handler for the <code>deviceready</code> event:</p>
<pre class="prettyprint">
function onDeviceReady()
{
</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 <span style="font-family: Courier New,Courier,monospace">deviceready</span> event:
+<li>Wait for the <code>deviceready</code> event:
<pre class="prettyprint">
document.addEventListener("deviceready", onDeviceReady);
</pre></li>
<li><a href="#values">Acceleration Values</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#getCurrentAcceleration">Getting the Current Acceleration</a></li>
- <li><a href="#monitorAcceleration">Monitoring the Acceleration Values</a></li>
+ <li><a href="#monitorAcceleration">Monitoring the Acceleration Values</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
</ul>
<h2 id="values">Acceleration Values</h2>
-<p>The acceleration data is captured into the <
span style="font-family: Courier New,Courier,monospace">Acceleration</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device-motion.html#Acceleration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device-motion.html#Acceleration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html#Acceleration">TV</a> applications). The acceleration values include the effect of gravity (9.81 m/s^2), so that when a device lies flat and facing up, the x, y, and z values returned must be 0, 0, and 9.81.</p>
+<p>The acceleration data is captured into the <
code>Acceleration</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device-motion.html#Acceleration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device-motion.html#Acceleration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html#Acceleration">TV</a> applications). The acceleration values include the effect of gravity (9.81 m/s^2), so that when a device lies flat and facing up, the x, y, and z values returned must be 0, 0, and 9.81.</p>
+<p align="center" class="Table"><strong>Table: Acceleration values</strong></p>
<table>
-<caption>Table: Acceleration values</caption>
<tbody>
<tr>
<th>Property</th>
</tbody>
</table>
-<p>This guide demonstrates how you can get access to the device accelerometer through the <span style="font-family: Courier New,Courier,monospace">navigator.accelerometer</span> object.</p>
+<p>This guide demonstrates how you can get access to the device accelerometer through the <code>navigator.accelerometer</code> object.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
console.log('onError!');
}
</pre></li>
-<li><p>Call the <span style="font-family: Courier New,Courier,monospace">getCurrentAcceleration()</span> method and pass the callbacks:</p>
+<li><p>Call the <code>getCurrentAcceleration()</code> method and pass the callbacks:</p>
<pre class="prettyprint">
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
</pre></li>
}
</pre></li>
<li>
- <p>Specify the interval of calling the <span style="font-family: Courier New,Courier,monospace">onSuccess()</span> callback in milliseconds:</p>
+ <p>Specify the interval of calling the <code>onSuccess()</code> callback in milliseconds:</p>
<pre class="prettyprint">
var options = {frequency: 3000}; /* Update every 3 seconds */
</pre>
</li>
-<li><p>Call the <span style="font-family: Courier New,Courier,monospace">watchAcceleration()</span> method with options:</p>
+<li><p>Call the <code>watchAcceleration()</code> method with options:</p>
<pre class="prettyprint">
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
</pre>
<p>Acceleration is now measured regularly, and each time a callback is called.</p></li>
-<li><p>When finished, stop monitoring the acceleration value by calling the <span style="font-family: Courier New,Courier,monospace">clearWatch()</span> method with the <span style="font-family: Courier New,Courier,monospace">watchID</span> as a parameter:</p>
+<li><p>When finished, stop monitoring the acceleration value by calling the <code>clearWatch()</code> method with the <code>watchID</code> as a parameter:</p>
<pre class="prettyprint">
navigator.accelerometer.clearWatch(watchID);
</pre>
</li>
</ol>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<li><a href="#alert">Creating Alerts</a></li>
<li><a href="#confirm">Creating Confirmations</a></li>
<li><a href="#prompt">Creating Prompts</a></li>
- <li><a href="#beep">Making Beep Sounds</a></li>
+ <li><a href="#beep">Making Beep Sounds</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<h1>Notification Dialogs</h1>
-<p>You can make different types of notifications to the user, so that each time a notification dialog box is closed, the result is provided in a callback function. The <span style="font-family: Courier New,Courier,monospace">navigator.notification</span> object allows access to the Dialogs API.</p>
+<p>You can make different types of notifications to the user, so that each time a notification dialog box is closed, the result is provided in a callback function. The <code>navigator.notification</code> object allows access to the Dialogs API.</p>
<p>The Dialogs API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
<pre class="prettyprint">
navigator.notification.alert('Please click OK button.', alertDismissed);
</pre>
-<p>Alternatively, you can open the alert dialog box with an optional title (default is <span style="font-family: Courier New,Courier,monospace">Dialog</span>), and an optional button name (default is <span style="font-family: Courier New,Courier,monospace">OK</span>):</p>
+<p>Alternatively, you can open the alert dialog box with an optional title (default is <code>Dialog</code>), and an optional button name (default is <code>OK</code>):</p>
<pre class="prettyprint">
navigator.notification.alert('Please click Close button.', alertDismissed,
'Alert title', 'Close');
};
</pre>
</li>
-<li><p>Open the confirmation dialog box with a set of buttons as the last parameter. The default value is <span style="font-family: Courier New,Courier,monospace">['OK', 'Cancel']</span>.</p>
+<li><p>Open the confirmation dialog box with a set of buttons as the last parameter. The default value is <code>['OK', 'Cancel']</code>.</p>
<pre class="prettyprint">
navigator.notification.confirm('Choose one option:', confirmCallback,
'Options title', ['Option1', 'Option2']);
<ol>
<li><p>Define a callback method to be invoked when the user clicks a button.</p>
-<p>The callback has 1 parameter: the <
span style="font-family: Courier New,Courier,monospace">PromptData</span> 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>
+<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);
+ console.log('User entered a value ' + results.input1
+ + ', and selected option ' + results.buttonIndex);
};
</pre>
</li>
-<li><p>Open a prompt dialog box with a set of buttons and default text to be shown in the text input field. The default values are <span style="font-family: Courier New,Courier,monospace">['OK', 'Cancel']</span> and an empty string.</p>
+<li><p>Open a prompt dialog box with a set of buttons and default text to be shown in the text input field. The default values are <code>['OK', 'Cancel']</code> and an empty string.</p>
<pre class="prettyprint">
navigator.notification.prompt('Please enter text:', promptCallback, 'Prompt dialog box',
['OK', 'Exit'], 'default text');
</pre>
</li>
</ol>
-<p>The callback provides the <span style="font-family: Courier New,Courier,monospace">PromptData</span> object, holding all the data provided by the user.</p>
+<p>The callback provides the <code>PromptData</code> object, holding all the data provided by the user.</p>
+<p align="center" class="Table"><strong>Table: PromptData object properties</strong></p>
<table id="#PromptData">
-<caption>Table: PromptData object properties</caption>
<tbody>
<tr>
<th>Property</th>
</li>
</ul>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#add">Adding Event Listeners</a></li>
<li><a href="#pauseresume">Handling Pause and Resume Events</a></li>
- <li><a href="#buttons">Handling Button Press Events</a></li>
+ <li><a href="#buttons">Handling Button Press Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>The Events API provides the following events:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">deviceready</span>
- <p>The <
span style="font-family: Courier New,Courier,monospace">deviceready</span> event is a prerequisite for all Cordova operations. You can use the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event to receive a signal when Cordova's device APIs have loaded and are ready to access. You can also use this event to <a href="#add">register event listeners</a> for other events you are interested in.</p>
+ <li><code>deviceready</code>
+ <p>The <
code>deviceready</code> event is a prerequisite for all Cordova operations. You can use the <code>deviceready</code> event to receive a signal when Cordova's device APIs have loaded and are ready to access. You can also use this event to <a href="#add">register event listeners</a> for other events you are interested in.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">pause</span>
- <p>You can <a href="#pauseresume">use the <span style="font-family: Courier New,Courier,monospace">pause</span> event</a> to receive a signal when the application is put to the background. This happens typically when the screen is being locked or when the user switches to a different application.</p>
+ <li><code>pause</code>
+ <p>You can <a href="#pauseresume">use the <code>pause</code> event</a> to receive a signal when the application is put to the background. This happens typically when the screen is being locked or when the user switches to a different application.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">resume</span>
- <p>You can <a href="#pauseresume">use the <span style="font-family: Courier New,Courier,monospace">resume</span> event</a> to receive a signal when the application is retrieved from the background.</p>
+ <li><code>resume</code>
+ <p>You can <a href="#pauseresume">use the <code>resume</code> event</a> to receive a signal when the application is retrieved from the background.</p>
</li>
<li>Button press events
<p>You can <a href="#buttons">add event listeners for specific button press events</a>.</p></li>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
console.log("Cordova features now available");
}
</pre>
-<p>Alternatively, you can add the event listener in the <span style="font-family: Courier New,Courier,monospace"><body></span> element onload handler:</p>
+<p>Alternatively, you can add the event listener in the <code><body></code> element onload handler:</p>
<pre class="prettyprint">
window.onload = function()
{
</pre>
<h2 id="add">Adding Event Listeners</h2>
-<p>The applications typically use the <span style="font-family: Courier New,Courier,monospace">document.addEventListener()</span> method to attach an event listener once the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event fires. This means that event listeners for other events (such as <span style="font-family: Courier New,Courier,monospace">pause</span>, <span style="font-family: Courier New,Courier,monospace">resume</span>, and <span style="font-family: Courier New,Courier,monospace">backbutton</span>) are added during or after the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event handler:</p>
+<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);
<p>The pause signals that the application is put into the background. This happens typically when the screen is being locked or when the user switches to a different application. The resume signals that the application returns from the background to the foreground.</p>
-<p>To handle the <span style="font-family: Courier New,Courier,monospace">pause</span> and <span style="font-family: Courier New,Courier,monospace">resume</span> events:</p>
+<p>To handle the <code>pause</code> and <code>resume</code> events:</p>
<ol>
-<li><p>Define the event handlers for the <span style="font-family: Courier New,Courier,monospace">pause</span> and <span style="font-family: Courier New,Courier,monospace">resume</span> events:</p>
+<li><p>Define the event handlers for the <code>pause</code> and <code>resume</code> events:</p>
<pre class="prettyprint">
function onPause()
{
}
</pre>
</li>
-<li><p>In the <
span style="font-family: Courier New,Courier,monospace">deviceready</span> event handler, <a href="#add">add the listeners</a>:</p>
+<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);
<h2 id="buttons">Handling Button Press Events</h2>
<p>You can add event listeners for specific button press events, as defined in the following table.</p>
+<p align="center" class="Table"><strong>Table: Button press events</strong></p>
<table id="button-press-events">
-<caption>Table: Button press events</caption>
<tbody>
<tr>
<th>Event</th>
<th>Button name</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">backbutton</span></td><td>Back button</td>
+ <td><code>backbutton</code></td><td>Back button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">menubutton</span></td><td>Menu button</td>
+ <td><code>menubutton</code></td><td>Menu button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">searchbutton</span></td><td>Search button</td>
+ <td><code>searchbutton</code></td><td>Search button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">startcallbutton</span></td><td>Start call button</td>
+ <td><code>startcallbutton</code></td><td>Start call button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">endcallbutton</span></td><td>End call button</td>
+ <td><code>endcallbutton</code></td><td>End call button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">volumedownbutton</span></td><td>Volume down button</td>
+ <td><code>volumedownbutton</code></td><td>Volume down button</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">volumeupbutton</span></td><td>Volume up button</td>
+ <td><code>volumeupbutton</code></td><td>Volume up button</td>
</tr>
</tbody>
</table>
<p>To add event listeners for the menu, volume up, and volume down buttons:</p>
<ol>
-<li><p>Define the event handlers for the <span style="font-family: Courier New,Courier,monospace">menubutton</span>, <span style="font-family: Courier New,Courier,monospace">volumeupbutton</span>, and <span style="font-family: Courier New,Courier,monospace">volumeupbutton</span> events:</p>
+<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()
{
}
</pre>
</li>
-<li><p>In the <
span style="font-family: Courier New,Courier,monospace">deviceready</span> event handler, <a href="#add">add the listeners</a>.</p>
+<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);
</li>
</ol>
<p>When you press the buttons, the result is shown in the system console.</p>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<li><a href="#directories">Operating on Directories</a></li>
<li><a href="#entries">Operating on Entries</a></li>
<li><a href="#files">Operating on Files</a></li>
- <li><a href="#readwrite">Reading and Writing File Content</a></li>
+ <li><a href="#readwrite">Reading and Writing File Content</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<ul>
<li>Resolving the filesystem
-<p>A basic step necessary to perform other file actions is to <a href="#filesystemresolve">resolve a filesystem</a>, which results in a <span style="font-family: Courier New,Courier,monospace">FileSystem</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileSystem">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#FileSystem">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileSystem">TV</a> applications) being retrieved. You can use the <span style="font-family: Courier New,Courier,monospace">root</span> member to perform other actions on this filesystem.</p>
+<p>A basic step necessary to perform other file actions is to <a href="#filesystemresolve">resolve a filesystem</a>, which results in a <code>FileSystem</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileSystem">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#FileSystem">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileSystem">TV</a> applications) being retrieved. You can use the <code>root</code> member to perform other actions on this filesystem.</p>
</li>
<li>Operating on directories
<p>You can <a href="#directories">create or remove a directory or file, or read all entries from a specific directory</a>.</p>
<p>You can <a href="#readwrite">read file content, and create and write data to a file</a>. Using the file readers and writers, you can read Blob objects in a specific format (data URL, test, binary string, and array buffer).</p>
</li>
</ul>
-
+
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the file functionality:</p>
<ol>
<li>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
</pre>
</li>
<li>
-<p>To use the File API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the File API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<!--To read from files-->
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<p>To resolve the initial root for other filesystem operations can be performed in 2 ways:</p>
<ul>
- <li><p>By using the <span style="font-family: Courier New,Courier,monospace">requestFileSystem()</span> global async method:</p>
+ <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)
File system name temporary
</pre>
</li>
- <li><p>By using the <span style="font-family: Courier New,Courier,monospace">resolveLocalFileSystemURL()</span> global async method.</p>
- <p>This method is used to retrieve a <
span style="font-family: Courier New,Courier,monospace">DirectoryEntry</span> 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 <span style="font-family: Courier New,Courier,monospace">FileEntry</span> 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>
+ <li><p>By using the <code>resolveLocalFileSystemURL()</code> global async method.</p>
+ <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)
<p>To create directories and files, delete directories, and read entries within directories:</p>
<ul>
-<li>To create a directory, you can use the <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> method:
+<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);
- })
-});
+ fs.root.getDirectory("ert", {create:true}, function(dir)
+ {
+ console.log('Created dir: ' + dir.name);
+ })
+ });
</pre>
-<p>If the third parameter is <span style="font-family: Courier New,Courier,monospace">{create:false}</span> or <span style="font-family: Courier New,Courier,monospace">NULL</span>, the entry of the existing directory is returned in the success callback.</p>
+<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>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
</li>
-<li>To create a file, use the <span style="font-family: Courier New,Courier,monospace">getFile()</span> method:
+<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);
+ 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 <span style="font-family: Courier New,Courier,monospace">{create:false}</span> or <span style="font-family: Courier New,Courier,monospace">NULL</span>, the entry of the existing file is returned in the success callback.</p>
+<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>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
</pre>
</li>
-<li>To delete a directory and all of its content, you can use the <span style="font-family: Courier New,Courier,monospace">removeRecursively()</span> method:
+<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");
- });
+ 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>
</pre>
</li>
-<li>To read entries, first create a reader with the <span style="font-family: Courier New,Courier,monospace">createReader()</span> method:
+<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();
+ 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 <span style="font-family: Courier New,Courier,monospace">readEntries()</span> method:</p>
+<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");
+ 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>
<p>To move, copy, and delete entries, or access entry metadata, parent information, and URL:</p>
<ul>
-<li>To look up metadata about an entry, you can use the <span style="font-family: Courier New,Courier,monospace">getMetadata()</span> method:
+<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)
{
- console.log("Last modification time: " + metadata.modificationTime); /* Get metadata successfully */
+ 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>
</pre>
</li>
-<li>To move an entry to a different location in the file system, you can use the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method:
+<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)};
+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);
- });
- });
+ 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>
</pre>
</li>
-<li>To copy an entry to a different location on the file system, you can use the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> method:
+<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);};
+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);
- });
+ 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>
</pre>
</li>
-<li>To look up the parent directory entry containing the current entry, you can use the <span style="font-family: Courier New,Courier,monospace">getParent()</span> method:
+<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");
+ fs.root.getParent(function(entry)
+ {
+ console.log("success");
+ });
});
-});
</pre>
<p>If the entry is the root of its filesystem, its parent is itself.</p>
</pre>
</li>
-<li>To delete a file or directory, you can use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method:
+<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");
- });
+ fs.root.getFile('test.txt', {create: true}, function(fileEntry)
+ {
+ fileEntry.remove(function()
+ {
+ console.log("success");
+ });
+ });
});
-});
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">It is an error to attempt to delete a non-empty directory, or the root directory of a filesystem.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ It is an error to attempt to delete a non-empty directory, or the root directory of a filesystem.
+</div>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
</pre>
</li>
-<li>To return a URL that can be used to identify the entry, you can use the <span style="font-family: Courier New,Courier,monospace">toURL()</span> method:
+<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);
+ 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>
<p>To create files, see <a href="#filesystemresolve">Resolving Filesystem Entries</a>. To create a writer for a file and access file details:
</p>
<ul>
- <li>To create a <span style="font-family: Courier New,Courier,monospace">FileWriter</span> 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 <span style="font-family: Courier New,Courier,monospace">createWriter()</span> method:
+ <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);
-});
+ {
+ console.log('created fileWriter object for ' + fileWriter.fileName);
+ });
</pre>
<p>The following output is shown in the system log:</p>
created fileWriter object for testFile.txt
</pre>
</li>
- <li>To access a <span style="font-family: Courier New,Courier,monospace">File</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#File">TV</a> applications), use the <span style="font-family: Courier New,Courier,monospace">file()</span> method. The object represents the current state of the file.
+ <li>To access a <code>File</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#File">TV</a> applications), use the <code>file()</code> method. The object represents the current state of the file.
<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);
-});
+ {
+ console.log('created file object for ' + file.name);
+ });
</pre>
<p>The following output is shown in the system log:</p>
<p>To read and write file content:</p>
<ul>
-<li>To read a file and return the data as a base64-encoded data URL, you can use the <span style="font-family: Courier New,Courier,monospace">readAsDataURL()</span> method:
+<li>To read a file and return the data as a base64-encoded data URL, you can use the <code>readAsDataURL()</code> method:
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
</pre>
</li>
-<li>To read a file and return the data as a text, you can use the <span style="font-family: Courier New,Courier,monospace">readAsText()</span> method:
+<li>To read a file and return the data as a text, you can use the <code>readAsText()</code> method:
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
</pre>
</li>
-<li>To read a file and return the data as a binary string, you can use the <span style="font-family: Courier New,Courier,monospace">readAsBinaryString()</span> method:
+<li>To read a file and return the data as a binary string, you can use the <code>readAsBinaryString()</code> method:
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
</pre>
</li>
-<li>To read a file and return the data as an array buffer (<span style="font-family: Courier New,Courier,monospace">byte[]</span>), you can use the <span style="font-family: Courier New,Courier,monospace">readAsArrayBuffer()</span> method:
+<li>To read a file and return the data as an array buffer (<code>byte[]</code>), you can use the <code>readAsArrayBuffer()</code> method:
<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);
+ console.log("Result: " + resultValue.toString() + ' '
+ + 'ByteLength: ' + resultValue.byteLength);
};
fileReader.readAsArrayBuffer(blob);
</pre>
</pre>
</li>
-<li>To abort the current operation of reading a file, you can use the <span style="font-family: Courier New,Courier,monospace">abort()</span> method:
+<li>To abort the current operation of reading a file, you can use the <code>abort()</code> method:
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
</pre>
</li>
-<li>To write data to a file, you can use the <span style="font-family: Courier New,Courier,monospace">write()</span> method:
+<li>To write data to a file, you can use the <code>write()</code> method:
<pre class="prettyprint">
successCallback = function(writer)
{
};
writer.write('some sample text');
};
-errorCallback = function(err)
+errorCallback = function(err)
{
console.log(err.code);
};
</pre>
</li>
-<li>To move the file pointer to a specified byte, you can use the <span style="font-family: Courier New,Courier,monospace">seek()</span> method:
+<li>To move the file pointer to a specified byte, you can use the <code>seek()</code> method:
<pre class="prettyprint">
successCallback = function(writer)
{
</pre>
</li>
-<li>To shorten the file to the specified length, you can use the <span style="font-family: Courier New,Courier,monospace">truncate()</span> method:
+<li>To shorten the file to the specified length, you can use the <code>truncate()</code> method:
<pre class="prettyprint">
successCallback = function(writer)
{
</pre>
</li>
-<li>To abort writing a file, you can use the <span style="font-family: Courier New,Courier,monospace">abort()</span> method:
+<li>To abort writing a file, you can use the <code>abort()</code> method:
<pre class="prettyprint">
successCallback = function(writer)
{
</pre>
</li>
</ul>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<h1>File Transfers</h1>
-<p>You can transfer files using HTTP requests, and download and upload files. You can also track a transfer's progress and abort it as needed. The default HTTP method is <span style="font-family: Courier New,Courier,monospace">POST</span>, but <span style="font-family: Courier New,Courier,monospace">PUT</span> is also supported.</p>
+<p>You can transfer files using HTTP requests, and download and upload files. You can also track a transfer's progress and abort it as needed. The default HTTP method is <code>POST</code>, but <code>PUT</code> is also supported.</p>
<p>The File Transfer API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<p>The main features of the File Transfer API include:</p>
<p>You can <a href="#tracking_progress">track the progress</a> of a file transfer.</p></li>
</ul>
-<p>All file operations are accessible by the <
span style="font-family: Courier New,Courier,monospace">FileTransfer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications).</p>
+<p>All file operations are accessible by the <
code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications).</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To enable your application to use the file transfer functionality:</p>
<ol>
<li>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
</pre>
</li>
<li>
-<p>To use the File Transfer API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the File Transfer API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<!--To download files-->
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
</pre>
</li>
</ol>
-
+
<h2 id="download">Downloading Files</h2>
-<p>To download a file from a server, you must create a <span style="font-family: Courier New,Courier,monospace">FileTransfer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) and call its <span style="font-family: Courier New,Courier,monospace">download()</span> method with callbacks:</p>
+<p>To download a file from a server, you must create a <code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) and call its <code>download()</code> method with callbacks:</p>
<ul>
-<li>The method is asynchronous, so you must provide a callback function which is invoked when the operation is successful.
-<p>The callback parameter contains the downloaded <
span style="font-family: Courier New,Courier,monospace">FileEntry</span> object (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>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileEntry">TV</a> applications).</p></li>
-<li>If you need to track errors, you can provide an optional error callback as a parameter of the <span style="font-family: Courier New,Courier,monospace">download()</span> method.</li>
+<li>The method is asynchronous, so you must provide a callback function which is invoked when the operation is successful.
+<p>The callback parameter contains the downloaded <
code>FileEntry</code> object (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>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileEntry">TV</a> applications).</p></li>
+<li>If you need to track errors, you can provide an optional error callback as a parameter of the <code>download()</code> method.</li>
</ul>
<p>To download a file from a remote server:
<pre class="prettyprint">
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
/* File does not need to exist before the operation */
-var destinationURL;
+var destinationURL;
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=='
- }
-});
+ 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">
<h2 id="upload">Uploading Files</h2>
-<p>The upload operation is very similar to download. To upload a file to a server, you must create a <span style="font-family: Courier New,Courier,monospace">FileTransfer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) and call its <span style="font-family: Courier New,Courier,monospace">upload()</span> method providing as parameters the URL of the uploaded file, server location, and a success callback function, which is invoked when the upload is finished successfully. You can also provide an optional error callback.</p>
+<p>The upload operation is very similar to download. To upload a file to a server, you must create a <code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) and call its <code>upload()</code> method providing as parameters the URL of the uploaded file, server location, and a success callback function, which is invoked when the upload is finished successfully. You can also provide an optional error callback.</p>
<p>To upload a file to a remote server:</p>
<pre class="prettyprint">
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
<h2 id="abort">Aborting Transfers</h2>
-<p>To abort an in-progress transfer, you must create the <span style="font-family: Courier New,Courier,monospace">FileTransfer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications), start the download or upload transfer operation (as described above), and call the <span style="font-family: Courier New,Courier,monospace">abort()</span> method. The method stops the transfer and sends the <span style="font-family: Courier New,Courier,monospace">FileTransferError.ABORT_ERR</span> error to the error callback (if provided).</p>
+<p>To abort an in-progress transfer, you must create the <code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications), start the download or upload transfer operation (as described above), and call the <code>abort()</code> method. The method stops the transfer and sends the <code>FileTransferError.ABORT_ERR</code> error to the error callback (if provided).</p>
<p>To terminate a transfer:</p>
<pre class="prettyprint">
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
<h2 id="tracking_progress">Tracking Transfer Progress</h2>
-<p>To track the progress of a file transfer, the <
span style="font-family: Courier New,Courier,monospace">FileTransfer</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) has the <span style="font-family: Courier New,Courier,monospace">onprogress</span> property, which is used to set up a function invoked each time a chunk of data is transferred. As a parameter, the function gets a <span style="font-family: Courier New,Courier,monospace">ProgressEvent</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#ProgressEvent">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#ProgressEvent">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#ProgressEvent">TV</a> applications).</p>
+<p>To track the progress of a file transfer, the <
code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications) has the <code>onprogress</code> property, which is used to set up a function invoked each time a chunk of data is transferred. As a parameter, the function gets a <code>ProgressEvent</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#ProgressEvent">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#ProgressEvent">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#ProgressEvent">TV</a> applications).</p>
<p>To track the progress of a transfer:</p>
<pre class="prettyprint">
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
uploaded: 1024
Success. File uploaded.
</pre>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<p>You can <a href="#conversions">convert strings, numbers, and dates</a> according to the user locale.</p></li>
</ul>
-<p>All Globalization functions are accessible by the <
span style="font-family: Courier New,Courier,monospace">navigator.globalization</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/globalization.html#GlobalizationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/globalization.html#GlobalizationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/globalization.html#GlobalizationManager">TV</a> applications).</p>
+<p>All Globalization functions are accessible by the <
code>navigator.globalization</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/globalization.html#GlobalizationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/globalization.html#GlobalizationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/globalization.html#GlobalizationManager">TV</a> applications).</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
- <pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+<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);
function onDeviceReady()
{
<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.');});</pre>
+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>
<pre class="prettyprint">
<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.');});</pre>
+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>
<pre class="prettyprint">
</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>
<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'});
+ 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 <span style="font-family: Courier New,Courier,monospace">{type: 'wide', item: 'months'}</span>, and the names of months are obtained. To obtain the names of weekdays, pass <span style="font-family: Courier New,Courier,monospace">{type: 'wide', item: 'days'}</span> as the third parameter.</p>
+<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>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
<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'});
+ 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>
<ul>
<li>Number pattern that follows Unicode Technical Standard #35</li>
<li>Symbol to use when formatting and parsing, such as percent or currency symbol
- <p>It depends on the third parameter of the <span style="font-family: Courier New,Courier,monospace">getNumberPattern()</span> method, which can be <span style="font-family: Courier New,Courier,monospace">'decimal'</span>, <span style="font-family: Courier New,Courier,monospace">'percent'</span>, or <span style="font-family: Courier New,Courier,monospace">'currency'</span>.</p></li>
+ <p>It depends on the third parameter of the <code>getNumberPattern()</code> method, which can be <code>'decimal'</code>, <code>'percent'</code>, or <code>'currency'</code>.</p></li>
<li>Number of fractional digits</li>
<li>Rounding increment</li>
<li>Symbol to use for positive numbers</li>
<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>
<p>To convert a date to a string according to the user's locale and time zone:</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>
<li>String to date
<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'});
+<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'});
</pre>
<p>The following output is shown in the system log:</p>
</li>
<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'});</pre>
+<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'});
+</pre>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
</li>
<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'});
+<pre class="prettyprint">
+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>
</pre>
</li>
</ul>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<p>To enable your application to use the media functionality:</p>
<ol>
<li>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
</pre>
</li>
<li>
-<p>To use the Media API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Media API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<!--To record audio-->
<tizen:privilege name="http://tizen.org/privilege/mediacapture"/>
</pre>
</li>
</ol>
-
+
<h2 id="play">Playing Audio Files</h2>
<p>To implement simple audio file playback, where the audio is played from the beginning to the end:</p>
<ol>
- <li><p>Place the audio file in a directory on a device. In this example, it is in the owner home directory: <span style="font-family: Courier New,Courier,monospace">/home/owner/content/Music/play.mp3</span>.</p></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");
</pre>
</li>
- <li><p>Call the <span style="font-family: Courier New,Courier,monospace">play()</span> method:</p>
+ <li><p>Call the <code>play()</code> method:</p>
<pre class="prettyprint">
myMedia.play();
</pre>
</pre>
</li>
<li><p>After 5 seconds, seek the position of 10 seconds.</p>
-<p>A timer is registered using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> global function.</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);
+ {
+ 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);
+ {
+ myMedia.release();
+ }, 10000);
</pre>
</li>
</ol>
<li><p>Mute the volume after 2 seconds:</p>
<pre class="prettyprint">
setTimeout(function()
-{
- myMedia.setVolume(0.0);
-}, 2000);
+ {
+ 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);
+ {
+ myMedia.setVolume(1.0);
+ }, 5000);
</pre>
</li>
</ol>
<h2 id="callbacks">Using Playback Callbacks</h2>
-<p>You can monitor the playback status changes by defining a status callback for the <
span style="font-family: Courier New,Courier,monospace">Media</span> constructor (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html#Media">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html#Media">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html#Media">TV</a> applications). Each time the status changes, the defined callback is called with a status constant as a parameter. The following table lists the available status constants.</p>
+<p>You can monitor the playback status changes by defining a status callback for the <
code>Media</code> constructor (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html#Media">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html#Media">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html#Media">TV</a> applications). Each time the status changes, the defined callback is called with a status constant as a parameter. The following table lists the available status constants.</p>
+<p align="center" class="Table"><strong>Table: Playback status changes</strong></p>
<table id="status-changes">
-<caption>Table: Playback status changes</caption>
<tbody>
<tr>
<th>Constant</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media.MEDIA_NONE</span></td><td>File has no status.</td>
+ <td><code>Media.MEDIA_NONE</code></td><td>File has no status.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media.MEDIA_STARTING</span></td><td>Playback is starting.</td>
+ <td><code>Media.MEDIA_STARTING</code></td><td>Playback is starting.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media.MEDIA_RUNNING</span></td><td>Playback is running.</td>
+ <td><code>Media.MEDIA_RUNNING</code></td><td>Playback is running.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media.MEDIA_PAUSED</span></td><td>Playback is paused.</td>
+ <td><code>Media.MEDIA_PAUSED</code></td><td>Playback is paused.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Media.MEDIA_STOPPED</span></td><td>Playback is stopped.</td>
+ <td><code>Media.MEDIA_STOPPED</code></td><td>Playback is stopped.</td>
</tr>
</tbody>
</table>
</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 <
span style="font-family: Courier New,Courier,monospace">MediaError</span> 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>
+ <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);
-}</pre>
+}
+</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>
<p>Test the callbacks by pausing and resuming playback after 3 and 5 seconds:</p>
<pre class="prettyprint">
setTimeout(function()
-{
- myMedia.pause();
-}, 3000);
+ {
+ myMedia.pause();
+ }, 3000);
setTimeout(function()
-{
- myMedia.play();
-}, 5000);
+ {
+ myMedia.play();
+ }, 5000);
</pre>
</li>
</ol>
</pre>
</li>
<li>
- <p>Define the optional callback for errors in retrieving the position. For the specific error codes, see the <
span style="font-family: Courier New,Courier,monospace">MediaError</span> 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>
+ <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)
{
<p>You can set a timer to get the position 5 seconds later:</p>
<pre class="prettyprint">
setTimeout(function()
-{
- myMedia.getCurrentPosition(positionCallback, errorCallback);
-}, 5000);
+ {
+ myMedia.getCurrentPosition(positionCallback, errorCallback);
+ }, 5000);
</pre>
<p>Something similar to the following example is shown in the system log:</p>
<pre class="prettyprint">
<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);
+ {
+ 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>
</ol>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<ul class="toc">
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#connectionStatus">Checking the Connection Status</a></li>
- <li><a href="#events">Handling Network-related Events</a></li>
+ <li><a href="#events">Handling Network-related Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<h1>Network Information</h1>
-<p>You can access information about the connection (such as cellular, Wi-Fi, or Ethernet) by reading the <span style="font-family: Courier New,Courier,monospace">navigator.connection.type</span> property. It is a textual representation of the current network status. Each time a connection is established or closed, the type changes.</p>
+<p>You can access information about the connection (such as cellular, Wi-Fi, or Ethernet) by reading the <code>navigator.connection.type</code> property. It is a textual representation of the current network status. Each time a connection is established or closed, the type changes.</p>
<p>The Network Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<p>The main features of the Network Information API include:</p>
<ul>
<li>Getting the connection status
- <p>You can compare the <
span style="font-family: Courier New,Courier,monospace">navigator.connection.type</span> value with one of the values in the <span style="font-family: Courier New,Courier,monospace">Connection</span> global dictionary to <a href="#connectionStatus">check the current connection status</a>.</p>
+ <p>You can compare the <
code>navigator.connection.type</code> value with one of the values in the <code>Connection</code> global dictionary to <a href="#connectionStatus">check the current connection status</a>.</p>
</li>
<li>Monitoring network status changes
- <p>To <a href="#events">monitor the changes in the network status</a>, you can use the <span style="font-family: Courier New,Courier,monospace">document.addEventListener()</span> method to register the required callbacks.</p>
+ <p>To <a href="#events">monitor the changes in the network status</a>, you can use the <code>document.addEventListener()</code> method to register the required callbacks.</p>
</li>
</ul>
<p>To enable your application to use the network information functionality:</p>
<ol>
<li>
-<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event occurs):</p>
-
<pre class="prettyprint">
+<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);
function onDeviceReady()
</pre>
</li>
<li>
-<p>To use the Network Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/networkInformation.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/networkInformation.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/networkInformation.html">TV</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Network Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/networkInformation.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/networkInformation.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/networkInformation.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/telephony"/>
</pre>
<h2 id="connectionStatus">Checking the Connection Status</h2>
-<p>The following table lists the available connection types in the <span style="font-family: Courier New,Courier,monospace">Connection</span> global dictionary, which you can use to determine the current connection status.</p>
+<p>The following table lists the available connection types in the <code>Connection</code> global dictionary, which you can use to determine the current connection status.</p>
+<p align="center" class="Table"><strong>Table: Connection types</strong></p>
<table id="connection-types">
-<caption>Table: Connection types</caption>
<tbody>
<tr>
<th>Property</th>
<th>Value description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.UNKNOWN</span></td><td>Connected, unknown connection</td>
+ <td><code>Connection.UNKNOWN</code></td><td>Connected, unknown connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.ETHERNET</span></td><td>Ethernet connection</td>
+ <td><code>Connection.ETHERNET</code></td><td>Ethernet connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.WIFI</span></td><td>Wi-Fi connection</td>
+ <td><code>Connection.WIFI</code></td><td>Wi-Fi connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.CELL_2G</span></td><td>Cellular 2G connection</td>
+ <td><code>Connection.CELL_2G</code></td><td>Cellular 2G connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.CELL_3G</span></td><td>Cellular 3G connection</td>
+ <td><code>Connection.CELL_3G</code></td><td>Cellular 3G connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.CELL_4G</span></td><td>Cellular 4G connection</td>
+ <td><code>Connection.CELL_4G</code></td><td>Cellular 4G connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.CELL</span></td><td>Cellular generic connection</td>
+ <td><code>Connection.CELL</code></td><td>Cellular generic connection</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Connection.NONE</span></td><td>Not connected</td>
+ <td><code>Connection.NONE</code></td><td>Not connected</td>
</tr>
</tbody>
</table>
<p>To determine whether the device is connected to a Wi-Fi network:</p>
<ol>
-<li>Place a <span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">id="wifi-indicator"</span> attribute somewhere in the application HTML for text output:
+<li>Place a <code>div</code> element with the <code>id="wifi-indicator"</code> attribute somewhere in the application HTML for text output:
<pre class="prettyprint">
<div id="wifi-indicator">
</div>
</pre>
</li>
<li>Get the connection type.
-<p>It is a case-sensitive string in the <span style="font-family: Courier New,Courier,monospace">navigator.connection</span> object.</p>
+<p>It is a case-sensitive string in the <code>navigator.connection</code> object.</p>
<pre class="prettyprint">
var state = navigator.connection.type;
</pre>
</li>
-<li>Compare the connection type to one of the defined values in the <span style="font-family: Courier New,Courier,monospace">Connection</span> global dictionary:
+<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)
{
else
{
document.querySelector('#wifi-indicator').textContent = "Not connected to WiFi";
-}</pre>
+}
+</pre>
-<p>The above code fills the <span style="font-family: Courier New,Courier,monospace">div</span> element with text, based on whether the device is connected to a Wi-Fi network.</p>
+<p>The above code fills the <code>div</code> element with text, based on whether the device is connected to a Wi-Fi network.</p>
</li>
</ol>
<h2 id="events">Handling Network-related Events</h2>
<p>Manage the situations where the device connects to and disconnects from a network:</p>
<ol>
- <li>Register event handlers after Cordova is set up. The most convenient way is to use the <span style="font-family: Courier New,Courier,monospace">deviceready</span> event callback.
+ <li>Register event handlers after Cordova is set up. The most convenient way is to use the <code>deviceready</code> event callback.
<pre class="prettyprint">
document.addEventListener('deviceready', register);
</pre>
</li>
<li>Define the handlers:
-
- <pre class="prettyprint">
+<pre class="prettyprint">
function went_online()
{
console.log("Went online");
console.log("Went offline");
}
</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">online</span> event fires when <span style="font-family: Courier New,Courier,monospace">connection.type</span> changes from <span style="font-family: Courier New,Courier,monospace">Connection.NONE</span> to any other value. Similarly, the <span style="font-family: Courier New,Courier,monospace">offline</span> event fires when <span style="font-family: Courier New,Courier,monospace">connection.type</span> becomes <span style="font-family: Courier New,Courier,monospace">Connection.NONE</span>.</p>
+ <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>
</li>
</ol>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<p>The main data handling features of the Tizen API include:</p>
<ul>
- <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <
span style="font-family: Courier New,Courier,monospace">AbstractFilter</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AbstractFilter">TV</a> applications):</p>
+ <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <
code>AbstractFilter</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AbstractFilter">TV</a> applications):</p>
<ul>
- <li><
span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeFilter">TV</a> applications)
- <p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> type definition.</p></li>
- <li><
span style="font-family: Courier New,Courier,monospace">AttributeRangeFilter</span>(in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeRangeFilter">TV</a> applications)
+ <li><
code>AttributeFilter</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeFilter">TV</a> applications)
+ <p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <code>FilterMatchFlag</code> type definition.</p></li>
+ <li><
code>AttributeRangeFilter</code>(in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeRangeFilter">TV</a> applications)
<p>Matches objects containing an attribute whose values are within a particular range.</p> </li>
- <li><
span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#CompositeFilter">TV</a> applications)
+ <li><
code>CompositeFilter</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#CompositeFilter">TV</a> applications)
<p>Combines several filters into a set.</p></li>
</ul>
<p>You can create <a href="#filter">attribute filters</a>, <a href="#range">attribute range filters</a>, and <a href="#composite">composite filters</a> to search for specific data and <a href="#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, query methods related to the <a href="#calendar">calendar</a>, <a href="#call">call history</a>, <a href="#contact">contact</a>, <a href="#content_filter">content</a>, and <a href="#messaging">messaging</a> data each have their own sets of supported filter attributes.</p> </li>
<li>Sorting
- <p>You can <a href="#use_modes">sort the results of queried data</a> using the <
span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SortMode">TV</a> applications).</p></li> </ul>
+ <p>You can <a href="#use_modes">sort the results of queried data</a> using the <
code>SortMode</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SortMode">TV</a> applications).</p></li> </ul>
<h2 id="filter" name="filter">Creating Attribute Filters</h2>
<p> Learning how to create attribute filters allows you effectively incorporate query methods in your application:</p>
<ol>
- <li><p>The <
span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeFilter">TV</a> applications) is used to filter the search results based on an attribute value. In this example, the filter finds contacts, with the first name Chris, from the default address book.</p>
+ <li><p>The <
code>AttributeFilter</code> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeFilter">TV</a> applications) is used to filter the search results based on an attribute value. In this example, the filter finds contacts, with the first name Chris, from the default address book.</p>
- <p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> constructor. You can specify attribute options, such as the attribute name, match flag, and match value.</p> <pre class="prettyprint">/* Use the firstName attribute with the EXACTLY match flag and the Chris value */
-var firstNameFilter = new tizen.AttributeFilter('name.firstName', 'EXACTLY', 'Chris');</pre> </li>
- <li><p>Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find contacts. The filter (<span style="font-family: Courier New,Courier,monospace">firstNameFilter</span>) you created is included as a parameter.</p> <pre class="prettyprint">
-tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);</pre> </li>
+ <p>Create the filter with the <code>AttributeFilter</code> constructor. You can specify attribute options, such as the attribute name, match flag, and match value.</p>
+<pre class="prettyprint">
+/* Use the firstName attribute with the EXACTLY match flag and the Chris value */
+var firstNameFilter = new tizen.AttributeFilter('name.firstName', 'EXACTLY', 'Chris');
+</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 contacts. The filter (<code>firstNameFilter</code>) you created is included as a parameter.</p>
+<pre class="prettyprint">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);
+</pre></li>
</ol>
<p> Learning how to use attribute range filters allows you effectively incorporate query methods in your application:</p>
<ol>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeRangeFilter</span> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeRangeFilter">TV</a> applications)is used to search for results based on a range of attribute values. In this example, the filter finds all events starting on a defined day from the calendar.</p>
-<p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">AttributeRangeFilter</span> constructor. Specify the attribute, and the start and end points of the value range.</p> <pre class="prettyprint">/* Use the startDate attribute with a range that starts today and ends in 1 day */
+ <li><p>The <code>AttributeRangeFilter</code> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeRangeFilter">TV</a> applications)is used to search for results based on a range of attribute values. In this example, the filter finds all events starting on a defined day from the calendar.</p>
+<p>Create the filter with the <code>AttributeRangeFilter</code> constructor. Specify the attribute, and the start and end points of the value range.</p>
+<pre class="prettyprint">
+/* Use the startDate attribute with a range that starts today and ends in 1 day */
/* (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);</pre> </li>
- <li> <p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 (<span style="font-family: Courier New,Courier,monospace">dateRangeFilter</span>) you created is included as a parameter. </p> <pre class="prettyprint">
-tizen.calendar.getDefaultCalendar("EVENT").find(successCB, errorCB, dateRangeFilter);</pre> </li>
+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);
+</pre></li>
</ol>
<h2 id="composite" name="composite">Creating Composite Filters</h2>
<p> Learning how to use composite filters allows you effectively incorporate query methods in your application:</p>
<ol>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#CompositeFilter">TV</a> applications) is used to search for results based on a set of filters. In this example, the filter finds contacts, whose first name contains Chris and last name is Smith, from the default address book.</p>
-<p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> constructor. You can specify multiple sub-filters for the filter set.</p> <pre class="prettyprint">/* Create an attribute filter based on the firstName attribute */
+ <li><p>The <code>CompositeFilter</code> filter (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#CompositeFilter">TV</a> applications) is used to search for results based on a set of filters. In this example, the filter finds contacts, whose first name contains Chris and last name is Smith, from the default address book.</p>
+<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");
/* Create an attribute filter based on the lastName attribute */
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]);</pre> </li>
- <li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 (<span style="font-family: Courier New,Courier,monospace">nameCompositeFilter</span>) you created is included as a parameter.</p> <pre class="prettyprint">
-tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);</pre> </li>
+/*
+ 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]);
+</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">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);
+</pre></li>
</ol>
<h2 id="use_modes" name="use_modes">Using Sorting Modes</h2>
<p>The following sorting modes are supported:</p>
<ul>
- <li> <p><span style="font-family: Courier New,Courier,monospace">"ASC"</span>: Ascending sorting order</p> </li>
- <li> <p><span style="font-family: Courier New,Courier,monospace">"DESC"</span>: 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>
<ol>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SortMode">TV</a> applications) is created to sort the search results. In this example, it is used to sort contacts in the device address book in ascending order, based on their first name.</p>
-<p>Create the sort order with the <span style="font-family: Courier New,Courier,monospace">SortMode()</span> method. Specify an attribute name to sort by and an order option.</p> <pre class="prettyprint">
+ <li><p>The <code>SortMode</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SortMode">TV</a> applications) is created to sort the search results. In this example, it is used to sort contacts in the device address book in ascending order, based on their first name.</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");</pre> </li>
- <li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method is defined as <span style="font-family: Courier New,Courier,monospace">null</span>, which means that the method retrieves all contacts in the address book.</p> <pre class="prettyprint">
-tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);</pre> </li>
+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">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);
+</pre></li>
</ol>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.
- <p>For example, if the <span style="font-family: Courier New,Courier,monospace">ContentType</span> enum (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <span style="font-family: Courier New,Courier,monospace">"DESC"</span>, the sorting result is ordered according to the listed enum order:</p>
- <ul>
- <li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul></td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.
+<p>For example, if the <code>ContentType</code> enum (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <code>"DESC"</code>, the sorting result is ordered according to the listed enum order:</p>
+<ul>
+<li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul>
+</div>
<h2 id="make" name="make">Making Complex Queries Using Filters</h2>
<p>Learning how to use filters allows you effectively incorporate complex query methods in your application. You can create queries using AND and OR conditions, like in SQL queries. The following example shows how to make the following query:</p>
- <p><span style="font-family: Courier New,Courier,monospace">"where ((type='VIDEO' OR type='IMAGE') AND title like '%special%')"</span></p>
+ <p><code>"where ((type='VIDEO' OR type='IMAGE') AND title like '%special%')"</code></p>
<p>Basically, you search in the content of the device for media items where the media type is video or image, and the title contains the word "special".</p>
<ol>
- <li> <p>Create attribute filters to include all content whose media type is either video or image:</p> <pre class="prettyprint">function makeQueryAndFire()
+ <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");
/* 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]);</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");</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]);</pre> </li>
- <li> <p>Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the Content API's <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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);
-}</pre> <p>The <span style="font-family: Courier New,Courier,monospace;">findMediaContentsCallback()</span> event handler returns the query result.</p> </li>
+ 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]);
+</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");
+</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]);
+</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);
+}
+</pre>
+<p>The <code>findMediaContentsCallback()</code> event handler returns the query result.</p> </li>
</ol>
<h2 id="calendar" name="calendar">Calendar Filter Attributes</h2>
<p>The following table lists the filter types you can use with specific calendar item attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface.</p>
- <table>
- <caption>
- Table: Calendar filter attributes
- </caption>
-
+<p align="center" class="Table"><strong>Table: Calendar filter attributes</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id.uid</span></td>
+ <td><code>id.uid</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">description</span></td>
+ <td><code>description</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td> <span style="font-family: Courier New,Courier,monospace;">summary</span></td>
+ <td> <code>summary</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isAllDay</span></td>
+ <td><code>isAllDay</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isDetached</span></td>
+ <td><code>isDetached</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">startDate</span></td>
+ <td><code>startDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">location</span></td>
+ <td><code>location</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span></td>
+ <td><code>geolocation.latitude</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span></td>
+ <td><code>geolocation.longitude</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizer</span></td>
+ <td><code>organizer</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">visibility</span></td>
+ <td><code>visibility</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">status</span></td>
+ <td><code>status</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">priority</span></td>
+ <td><code>priority</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">categories</span></td>
+ <td><code>categories</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">dueDate</span></td>
+ <td><code>dueDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">completedDate</span></td>
+ <td><code>completedDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">progress</span></td>
+ <td><code>progress</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">endDate</span></td>
+ <td><code>endDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">availability</span></td>
+ <td><code>availability</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lastModificationDate</span></td>
+ <td><code>lastModificationDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">alarms</span></td>
+ <td><code>alarms</code></td>
<td>No*</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">attendees</span></td>
+ <td><code>attendees</code></td>
<td>No*</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">recurrenceRule</span></td>
+ <td><code>recurrenceRule</code></td>
<td>No*</td>
<td>No</td>
</tr>
</tbody>
</table>
- <p>* The attribute filter is only supported with the <span style="font-family: Courier New,Courier,monospace">EXISTS</span> flag. </p>
+ <p>* The attribute filter is only supported with the <code>EXISTS</code> flag. </p>
<h2 id="call" name="call">Call History Filter Attributes</h2>
<p>The following table lists the filter types you can use with specific call history attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.</p>
- <table>
- <caption>
- Table: Call History filter attributes
- </caption>
- <tbody>
+
+<p align="center" class="Table"><strong>Table: Call History filter attributes</strong></p>
+<table>
+ <tbody>
<tr>
<th>Attribute</th>
<th>Attribute filter supported</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">uid</span></td>
+ <td><code>uid</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">features</span></td>
+ <td><code>features</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">remoteParties.remoteParty</span></td>
+ <td><code>remoteParties.remoteParty</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">remoteParties.personId</span></td>
+ <td><code>remoteParties.personId</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">startTime</span></td>
+ <td><code>startTime</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">duration</span></td>
+ <td><code>duration</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">direction</span></td>
+ <td><code>direction</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<h2 id="contact" name="contact">Contact Filter Attributes</h2>
<p>The following table lists the filter types you can use with specific contact attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
- <table>
- <caption>
- Table: Contact filter attributes
- </caption>
-
+
+<p align="center" class="Table"><strong>Table: Contact filter attributes</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">personId</span></td>
+ <td><code>personId</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lastUpdated</span></td>
+ <td><code>lastUpdated</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isFavorite</span></td>
+ <td><code>isFavorite</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">birthday</span></td>
+ <td><code>birthday</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">photoURI</span></td>
+ <td><code>photoURI</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span></td>
+ <td><code>ringtoneURI</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.prefix</span></td>
+ <td><code>name.prefix</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.suffix</span></td>
+ <td><code>name.suffix</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.firstName</span></td>
+ <td><code>name.firstName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.middleName</span></td>
+ <td><code>name.middleName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.lastName</span></td>
+ <td><code>name.lastName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.nicknames</span></td>
+ <td><code>name.nicknames</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.phoneticFirstName</span></td>
+ <td><code>name.phoneticFirstName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.phoneticLastName</span></td>
+ <td><code>name.phoneticLastName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name.displayName</span></td>
+ <td><code>name.displayName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.country</span></td>
+ <td><code>addresses.country</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.region</span></td>
+ <td><code>addresses.region</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.city</span></td>
+ <td><code>addresses.city</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.streetAddress</span></td>
+ <td><code>addresses.streetAddress</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.additionalInformation</span></td>
+ <td><code>addresses.additionalInformation</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.postalCode</span></td>
+ <td><code>addresses.postalCode</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.isDefault</span></td>
+ <td><code>addresses.isDefault</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">addresses.types</span></td>
+ <td><code>addresses.types</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">phoneNumbers.number</span></td>
+ <td><code>phoneNumbers.number</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">phoneNumbers.isDefault</span></td>
+ <td><code>phoneNumbers.isDefault</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">phoneNumbers.types</span></td>
+ <td><code>phoneNumbers.types</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">emails.email</span></td>
+ <td><code>emails.email</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">emails.isDefault</span></td>
+ <td><code>emails.isDefault</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">emails.types</span></td>
+ <td><code>emails.types</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">anniversaries.date</span></td>
+ <td><code>anniversaries.date</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">anniversaries.label</span></td>
+ <td><code>anniversaries.label</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizations.name</span></td>
+ <td><code>organizations.name</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizations.department</span></td>
+ <td><code>organizations.department</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizations.title</span></td>
+ <td><code>organizations.title</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizations.role</span></td>
+ <td><code>organizations.role</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">organizations.logoUri</span></td>
+ <td><code>organizations.logoUri</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">urls.url</span></td>
+ <td><code>urls.url</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">urls.type</span></td>
+ <td><code>urls.type</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">groupIds</span></td>
+ <td><code>groupIds</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<p>The following table lists the filter types you can use with specific person attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p>
- <table>
- <caption>
- Table: Person filter attributes
- </caption>
+<p align="center" class="Table"><strong>Table: Person filter attributes</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">displayName</span></td>
+ <td><code>displayName</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">contactCount</span></td>
+ <td><code>contactCount</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">hasPhoneNumber</span></td>
+ <td><code>hasPhoneNumber</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">hasEmail</span></td>
+ <td><code>hasEmail</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isFavorite</span></td>
+ <td><code>isFavorite</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">photoURI</span></td>
+ <td><code>photoURI</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span></td>
+ <td><code>ringtoneURI</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">displayContactId</span></td>
+ <td><code>displayContactId</code></td>
<td>Yes</td>
<td>No</td>
</tr>
</table>
<h2 id="content_filter" name="content_filter">Content Filter Attributes</h2>
- <p>The following table lists the filter types you can use with specific content attributes in the methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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>
- <table>
- <caption>
- Table: Content filter attributes
- </caption>
+ <p>The following table lists the filter types you can use with specific content attributes in the methods 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>
+<p align="center" class="Table"><strong>Table: Content filter attributes</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">mimeType</span></td>
+ <td><code>mimeType</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name</span></td>
+ <td><code>name</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">title</span></td>
+ <td><code>title</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">contentURI</span></td>
+ <td><code>contentURI</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">thumbnailURIs</span></td>
+ <td><code>thumbnailURIs</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">releaseDate</span></td>
+ <td><code>releaseDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">modifedDate</span></td>
+ <td><code>modifedDate</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">size</span></td>
+ <td><code>size</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">description</span></td>
+ <td><code>description</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">rating</span></td>
+ <td><code>rating</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span></td>
+ <td><code>geolocation.latitude</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span></td>
+ <td><code>geolocation.longitude</code></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">album</span></td>
+ <td><code>album</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">genres</span></td>
+ <td><code>genres</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">artists</span></td>
+ <td><code>artists</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">composers</span></td>
+ <td><code>composers</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lyrics</span></td>
+ <td><code>lyrics</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">copyright</span></td>
+ <td><code>copyright</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bitrate</span></td>
+ <td><code>bitrate</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">trackNumber</span></td>
+ <td><code>trackNumber</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">duration</span></td>
+ <td><code>duration</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">orientation</span></td>
+ <td><code>orientation</code></td>
<td>No</td>
<td>No</td>
</tr>
<h2 id="messaging" name="messaging">Messaging Filter Attributes</h2>
<p>The following tables list the filter types you can use with specific message attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p>
- <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findMessage()</span> method.</p>
- <table>
- <caption>
- Table: Filter attributes for finding messages
- </caption>
- <tbody>
+ <p>The following table lists the filter attributes related to the <code>findMessage()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding messages</strong></p>
+<table>
+ <tbody>
<tr>
<th>Attribute</th>
<th>Attribute filter supported</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">serviceId</span></td>
+ <td><code>serviceId</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">conversationId</span></td>
+ <td><code>conversationId</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">folderId</span></td>
+ <td><code>folderId</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">timestamp</span></td>
+ <td><code>timestamp</code></td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">from</span></td>
+ <td><code>from</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">to</span></td>
+ <td><code>to</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">cc</span></td>
+ <td><code>cc</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bcc</span></td>
+ <td><code>bcc</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">body.plainBody</span></td>
+ <td><code>body.plainBody</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isRead</span></td>
+ <td><code>isRead</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">hasAttachment</span></td>
+ <td><code>hasAttachment</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isHighPriority</span></td>
+ <td><code>isHighPriority</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">subject</span></td>
+ <td><code>subject</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isResponseTo</span></td>
+ <td><code>isResponseTo</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">messageStatus</span></td>
+ <td><code>messageStatus</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">attachments</span></td>
+ <td><code>attachments</code></td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
</table>
- <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findConversations()</span> method.</p>
- <table>
- <caption>
- Table: Filter attributes for finding conversations
- </caption>
-
+ <p>The following table lists the filter attributes related to the <code>findConversations()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding conversations</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">timestamp</span></td>
+ <td><code>timestamp</code></td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">messageCount</span></td>
+ <td><code>messageCount</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">unreadMessages</span></td>
+ <td><code>unreadMessages</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">preview</span></td>
+ <td><code>preview</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">subject</span></td>
+ <td><code>subject</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">isRead</span></td>
+ <td><code>isRead</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">from</span></td>
+ <td><code>from</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">to</span></td>
+ <td><code>to</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">cc</span></td>
+ <td><code>cc</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bcc</span></td>
+ <td><code>bcc</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">lastMessageId</span></td>
+ <td><code>lastMessageId</code></td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
</table>
- <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findFolders()</span> method.</p>
- <table>
- <caption>
- Table: Filter attributes for finding message folders
- </caption>
+ <p>The following table lists the filter attributes related to the <code>findFolders()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding message folders</strong></p>
+<table>
<tbody>
<tr>
<th>Attribute</th>
<th>Attribute range filter supported</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">id</span></td>
+ <td><code>id</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">parentId</span></td>
+ <td><code>parentId</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">serviceId</span></td>
+ <td><code>serviceId</code></td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">contentType</span></td>
+ <td><code>contentType</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">name</span></td>
+ <td><code>name</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">path</span></td>
+ <td><code>path</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">synchronizable</span></td>
+ <td><code>synchronizable</code></td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace;">FULLSTRING</span> value of the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#FilterMatchFlag">TV</a> applications) is not supported and returns an error callback.</td>
- </tr>
- </tbody>
- </table>
-
-
+<div class="note">
+ <strong>Note</strong>
+ The <code>FULLSTRING</code> value of the <code>FilterMatchFlag</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#FilterMatchFlag">TV</a> applications) is not supported and returns an error callback.
+</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>You can <a href="#abort">abort an on-going archive operation</a>.</p></li>
</ul>
-<p>To start any kind of zip operation (packing or unpacking), you must first call the <
span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> 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 first parameter is a <span style="font-family: Courier New,Courier,monospace">FileReference</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#FileReference">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#FileReference">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#FileReference">TV</a> applications), which can be a <span style="font-family: Courier New,Courier,monospace">File</span> 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) or the virtual path. The second parameter is a <span style="font-family: Courier New,Courier,monospace">FileMode</span> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileMode">TV</a> applications), whose values are described in the following table.</p>
+<p>To start any kind of zip operation (packing or unpacking), you must first call 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 first parameter is a <code>FileReference</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#FileReference">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#FileReference">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#FileReference">TV</a> applications), which can be a <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) or the virtual path. The second parameter is a <code>FileMode</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileMode">TV</a> applications), whose values are described in the following table.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: File modes
- </caption>
+<p align="center" class="Table"><strong>Table: File modes</strong></p>
+<table border="1" style="width: 100%">
<tbody>
<tr>
<th>Mode</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">r</span></td>
+ <td><code>r</code></td>
<td>Use this mode to extract or get information about the archive file content.
- <p>The file must exist, or the <span style="font-family: Courier New,Courier,monospace">NotFoundError</span> exception occurs.</p>
- <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">add()</span> method is not available.</p></td>
+ <p>The file must exist, or the <code>NotFoundError</code> exception occurs.</p>
+ <p>When the archive file is opened in this mode, the <code>add()</code> method is not available.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">w</span></td>
+ <td><code>w</code></td>
<td>Use this mode to create an archive file and add files to it.
- <p>If the file does not exist, it is created. If it exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">true</span>, the existing file is overwritten with an empty archive. If the file exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">false</span>, the error callback is invoked.</p>
- <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extractAll()</span> methods are not available.</p></td>
+ <p>If the file does not exist, it is created. If it exists and the <code>overwrite</code> option is <code>true</code>, the existing file is overwritten with an empty archive. If the file exists and the <code>overwrite</code> option is <code>false</code>, the error callback is invoked.</p>
+ <p>When the archive file is opened in this mode, the <code>getEntries()</code>, <code>getEntryByName()</code>, and <code>extractAll()</code> methods are not available.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">rw</span></td>
+ <td><code>rw</code></td>
<td>Use this mode to zip or unzip an archive file.
- <p>If the file does not exist, it is created. If it exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">true</span>, the existing file is overwritten with an empty archive. If the file exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">false</span>, the existing content is preserved, and both adding and extracting are available.</p></td>
+ <p>If the file does not exist, it is created. If it exists and the <code>overwrite</code> option is <code>true</code>, the existing file is overwritten with an empty archive. If the file exists and the <code>overwrite</code> option is <code>false</code>, the existing content is preserved, and both adding and extracting are available.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">a</span></td>
+ <td><code>a</code></td>
<td>Use this mode to add new files to an archive file.
<p>If the file does not exist, it is created. If it exists, the previous content of the archive file is preserved and new files can be added.</p>
- <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extractAll()</span> methods are not available.</p></td>
+ <p>When the archive file is opened in this mode, the <code>getEntries()</code>, <code>getEntryByName()</code>, and <code>extractAll()</code> methods are not available.</p></td>
</tr>
</tbody>
</table>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Archive API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Archive API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
<p>Opening an archive and accessing a list of its members is a basic archive management skill:</p>
<ol>
-<li><p>To access the archive file, use the <
span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> 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 provided callback receives an <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> object (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>
+<li><p>To access 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). The provided callback receives an <code>ArchiveFile</code> object (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">var myArchive = null;
+<pre class="prettyprint">
+var myArchive = null;
function openSuccess(arch)
{
console.log("ArchiveFile mode: " + arch.mode);
myArchive = arch;
}
-tizen.archive.open("downloads/archive.zip", "r", openSuccess); </pre> </li>
+tizen.archive.open("downloads/archive.zip", "r", openSuccess);
+</pre></li>
-<li> <p>Get the list of all files contained inside the archive using the <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+<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)
console.log(members[i].name);
}
}
-myArchive.getEntries(listSuccess);</pre>
+myArchive.getEntries(listSuccess);
+</pre>
</li>
-<li><p>After the work with the archive is finished, close the archive using the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+<li><p>After the work with the archive is finished, close the archive using the <code>close()</code> method of the <code>ArchiveFile</code> interface.</p>
<pre class="prettyprint">
-archive.close();</pre>
+archive.close();
+</pre>
</li>
</ol>
<p>Creating an archive and adding files to it is a basic archive management skill:</p>
<ol>
-<li><p>To create the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> 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 <span style="font-family: Courier New,Courier,monospace">w</span>:</p>
+<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);</pre>
+tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);
+</pre>
</li>
-<li>Add a file to the archive using the <span style="font-family: Courier New,Courier,monospace">add()</span> method. The file can be specified using a virtual path:
+<li>Add a file to the archive using the <code>add()</code> method. The file can be specified using a virtual path:
<pre class="prettyprint">
<ol>
<li>
-<p>To access an archive file, use the <
span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> 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>
+<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);</pre>
+tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, openError);
+</pre>
</li>
<li>To extract files:
<ul>
<li>
-<p>To extract all files from the archive, use the <
span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> 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>
+<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) + "%)");
+ console.log("extracting operation (: " + opId + ") is in progress ("
+ + (val * 100).toFixed(1) + "%)");
}
function openSuccess(archive)
{
archive.extractAll("music", null, null, progressCallback);
-}</pre>
+}
+</pre>
</li>
<li>
-<p>To extract only a selected file from the archive, use the <
span style="font-family: Courier New,Courier,monospace">extract()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFileEntry</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFileEntry">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveFileEntry">TV</a> applications).</p>
-<p>First, get the <span style="font-family: Courier New,Courier,monospace">archiveFileEntry</span> object using the <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span> or <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+<p>To extract only a selected file from the archive, use the <
code>extract()</code> method of the <code>ArchiveFileEntry</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFileEntry">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveFileEntry">TV</a> applications).</p>
+<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()
function openSuccess(archive)
{
archive.getEntryByName("my_file.txt", getEntrySuccess);
-}</pre>
+}
+</pre>
</li>
</ul>
</li>
<h2 id="abort">Aborting File Operations</h2>
-<p>You can abort an on-going file archive operation for the <span style="font-family: Courier New,Courier,monospace">open()</span>, <span style="font-family: Courier New,Courier,monospace">add()</span>, <span style="font-family: Courier New,Courier,monospace">extractAll()</span>, <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extract()</span> methods.</p>
+<p>You can abort an on-going file archive operation for the <code>open()</code>, <code>add()</code>, <code>extractAll()</code>, <code>getEntries()</code>, <code>getEntryByName()</code>, and <code>extract()</code> methods.</p>
-<p>To abort the file archive operation, use the operation ID and the <
span style="font-family: Courier New,Courier,monospace">abort()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> 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>
+<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)
<p>You can <a href="#manage">manage different storages</a> on the device and retrieve additional information about the storages, including listing available storages and receiving storage change notifications.</p>
</li>
<li>Files and directory management
- <p>You can <a href="#file_dir">perform basic file and directory management tasks</a> using the <span style="font-family: Courier New,Courier,monospace">File</span> interface: </p>
+ <p>You can <a href="#file_dir">perform basic file and directory management tasks</a> using the <code>File</code> interface: </p>
<ul>
<li>You can <a href="#create">create files and directories</a> in the file system.</li>
- <li>You can <a href="#retrieve">retrieve a list of files in a directory</a>, the URI of a file, or the file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span>.</li>
+ <li>You can <a href="#retrieve">retrieve a list of files in a directory</a>, the URI of a file, or the file content as a <code>DOMString</code>.</li>
<li>You can <a href="#file_dir">read or write to a file</a>.</li>
<li>You can <a href="#file_dir">copy and move files and directories</a> within the virtual file system.</li>
<li>You can <a href="#create">delete files and directories</a> from the virtual file system.</li>
<p>For a practical example of managing files in your application, see the <a href="task_filemanager_w.htm">File Manager</a> sample task.</p>
<h2 id="access">File and Directory Access</h2>
-<p>You can access the virtual file system using the <
span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
+<p>You can access the virtual file system using the <
code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
<ul>
-<li>To access a file or directory within the virtual file system, you must use the fully qualified path, <span style="font-family: Courier New,Courier,monospace"><root name>/<path></span>, where <span style="font-family: Courier New,Courier,monospace"><rootname></span> is the name of the virtual root and <span style="font-family: Courier New,Courier,monospace"><path></span> is the relative path to the file or directory within the root.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When you use a path to access the device file system, make sure that the file path encoding uses the default encoding of the platform.</td>
- </tr>
- </tbody>
- </table>
+<li>To access a file or directory within the virtual file system, you must use the fully qualified path, <code><root name>/<path></code>, where <code><rootname></code> is the name of the virtual root and <code><path></code> is the relative path to the file or directory within the root.
+
+<div class="note">
+ <strong>Note</strong>
+ When you use a path to access the device file system, make sure that the file path encoding uses the default encoding of the platform.
+</div>
</li>
-<li>To access a file or directory, you must also retrieve a file handle using the <span style="font-family: Courier New,Courier,monospace">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface.
+<li>To access a file or directory, you must also retrieve a file handle using the <code>resolve()</code> method of the <code>FileSystemManager</code> interface.
<p>A file handle is a reference object that points to and represents a file or directory.</p></li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">isFile</span> and <span style="font-family: Courier New,Courier,monospace">isDirectory</span> attributes of the <span style="font-family: Courier New,Courier,monospace">File</span> 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) identify the type of the object: for example, for a file, the <span style="font-family: Courier New,Courier,monospace">isFile</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span> and the <span style="font-family: Courier New,Courier,monospace">isDirectory</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+<p>The <code>isFile</code> and <code>isDirectory</code> attributes 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) identify the type of the object: for example, for a file, the <code>isFile</code> attribute is set to <code>true</code> and the <code>isDirectory</code> attribute to <code>false</code>.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use 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 application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use 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 application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
</pre>
<h2 id="manage" name="manage">Managing File Storages</h2>
-<p>You can manage different storages on the device with the <
span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications).</p>
-<p>You can retrieve additional information about the storages, including listing available storages and receiving storage change notifications with the <span style="font-family: Courier New,Courier,monospace">listStorages()</span> and <span style="font-family: Courier New,Courier,monospace">addStorageStateChangeListener()</span> methods provided by the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface.</p>
+<p>You can manage different storages on the device with the <
code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications).</p>
+<p>You can retrieve additional information about the storages, including listing available storages and receiving storage change notifications with the <code>listStorages()</code> and <code>addStorageStateChangeListener()</code> methods provided by the <code>FileSystemManager</code> interface.</p>
<p>To manage file storages:</p>
<ol>
- <li><p>To list available storages, use the <span style="font-family: Courier New,Courier,monospace">listStorages()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface to search for the storages available on the device.</p> <p>If the search is successful, a list of found <span style="font-family: Courier New,Courier,monospace">FileSystemStorage</span> 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">
+ <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++)
- {
+function checkCorruptedRemovableDrives(storages)
+{
+ for (var i = 0; i < storages.length; i++)
+ {
if (storages[i].type != "EXTERNAL")
- continue;
- if (storages[i].state == "UNMOUNTABLE")
+ continue;
+ if (storages[i].state == "UNMOUNTABLE")
console.log("External drive " + storages[i].label + " is corrupted.");
}
}
/* Search for the storages */
-tizen.filesystem.listStorages(checkCorruptedRemovableDrives);</pre> </li>
- <li> <p>To get storage details based on the storage name (the <span style="font-family: Courier New,Courier,monospace">label</span> attribute), use the <span style="font-family: Courier New,Courier,monospace">getStorage()</span> method.</p> <p>The success callback receives the <span style="font-family: Courier New,Courier,monospace">FileSystemStorage</span> object containing the storage details as an input parameter.</p> <pre class="prettyprint">
+tizen.filesystem.listStorages(checkCorruptedRemovableDrives);
+</pre></li>
+ <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)
-{
+function onStorage(storage)
+{
console.log("Storage found:" + storage.label);
}
/* Retrieve a storage */
-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 <span style="font-family: Courier New,Courier,monospace">addStorageStateChangeListener()</span> method.</p> <p>An event is generated each time the storage state changes.</p> <pre class="prettyprint">
+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)
+/* Define the event handler */
+function onStorageStateChanged(storage)
{
if (storage.state == "MOUNTED")
console.log("Storage " + storage.label + " was added!");
}
/* Register the event handler */
- watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);</pre> </li>
- <li><p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeStorageStateChangeListener()</span> method:</p> <pre class="prettyprint">
-tizen.filesystem.removeStorageStateChangeListener(watchID);</pre> </li>
+watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+</pre></li>
+ <li><p>To stop receiving the notifications, use the <code>removeStorageStateChangeListener()</code> method:</p>
+<pre class="prettyprint">
+tizen.filesystem.removeStorageStateChangeListener(watchID);
+</pre></li>
</ol>
<h2 id="create" name="create">Creating and Deleting Files and Directories</h2>
-<p>You can create files and directories using the <span style="font-family: Courier New,Courier,monospace">createFile()</span> and <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> methods. The file or directory is created relative to the current directory that the operation is performed on.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use "." or ".." characters in the directory or file path components.</td>
- </tr>
- </tbody>
- </table>
+<p>You can create files and directories using the <code>createFile()</code> and <code>createDirectory()</code> methods. The file or directory is created relative to the current directory that the operation is performed on.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Do not use "." or ".." characters in the directory or file path components.
+</div>
+
<p>To create and delete files and directories:</p>
<ol>
- <li><p>To create a file in the current directory, use the <span style="font-family: Courier New,Courier,monospace">createFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> 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">
+ <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");
- });</pre> </li>
+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 <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> 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">
+ <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");</pre> </li>
+var anotherNewDir = documentsDir.createDirectory("newDir1/subNewDir1");
+</pre></li>
- <li><p>To delete a file, use the <span style="font-family: Courier New,Courier,monospace">deleteFile()</span> method:</p> <pre class="prettyprint">
+ <li><p>To delete a file, use the <code>deleteFile()</code> method:</p>
+<pre class="prettyprint">
function onDelete()
{
console.log("deletedFile() is successfully done.");
}
-documentsDir.deleteFile(newFile.fullPath, onDelete);</pre> </li>
- <li><p>To delete a directory, use the <span style="font-family: Courier New,Courier,monospace">deleteDirectory()</span> method.</p> <p>The second parameter defines whether the deletion is performed recursively for the sub-directories as well. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">false</span>, the directory is deleted only if it is empty.</p> <pre class="prettyprint">
+documentsDir.deleteFile(newFile.fullPath, onDelete);
+</pre></li>
+ <li><p>To delete a directory, use the <code>deleteDirectory()</code> method.</p> <p>The second parameter defines whether the deletion is performed recursively for the sub-directories as well. If the parameter is set to <code>false</code>, the directory is deleted only if it is empty.</p>
+<pre class="prettyprint">
documentsDir.deleteDirectory(newDir.fullPath, false, onDelete);
-anotherNewDir.parent.deleteDirectory(anotherNewDir.fullPath, false, onDelete);</pre> </li>
+anotherNewDir.parent.deleteDirectory(anotherNewDir.fullPath, false, onDelete);
+</pre></li>
</ol>
<h2 id="retrieve" name="retrieve">Retrieving Files and File Details</h2>
-<p>You can retrieve a list of files or file URIs using the <span style="font-family: Courier New,Courier,monospace">listFiles()</span> and <span style="font-family: Courier New,Courier,monospace">toURI()</span> methods. The URI can be used to identify the file, for example, by using it as the <span style="font-family: Courier New,Courier,monospace">src</span> attribute on an HTML <span style="font-family: Courier New,Courier,monospace">img</span> element. </p>
-<p>You can retrieve file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span> with the <span style="font-family: Courier New,Courier,monospace">readAsText()</span> method. The encoding input parameter of the method defines the format in which the file content is returned.</p>
+<p>You can retrieve a list of files or file URIs using the <code>listFiles()</code> and <code>toURI()</code> methods. The URI can be used to identify the file, for example, by using it as the <code>src</code> attribute on an HTML <code>img</code> element. </p>
+<p>You can retrieve file content as a <code>DOMString</code> with the <code>readAsText()</code> method. The encoding input parameter of the method defines the format in which the file content is returned.</p>
<p>To get files and file details from the file system:</p>
<ol>
- <li><p>To access a specific file or directory within the file system, retrieve a file handle using the <span style="font-family: Courier New,Courier,monospace">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p> <pre class="prettyprint">
-tizen.filesystem.resolve('documents', onResolveSuccess, null, 'r');</pre> <p>The <span style="font-family: Courier New,Courier,monospace">File</span> 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 <span style="font-family: Courier New,Courier,monospace">listFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> object: <pre class="prettyprint">
+ <li><p>To access a specific file or directory within the file system, retrieve a file handle using the <code>resolve()</code> method of the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
+<pre class="prettyprint">
+tizen.filesystem.resolve('documents', onResolveSuccess, null, 'r');
+</pre>
+<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);
-}</pre> <p>The method returns an array of <span style="font-family: Courier New,Courier,monospace">File</span> objects.</p> </li>
- <li><p>To retrieve the file URI, use the <span style="font-family: Courier New,Courier,monospace">toURI()</span> method:</p> <pre class="prettyprint">
-function onsuccess(files)
-{
- for (var i = 0; i < files.length; i++)
+}
+</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());</pre> </li>
- <li><p>To retrieve the file content as a DOMString, use the <span style="font-family: Courier New,Courier,monospace">readAsText()</span> 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");
+ 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");
+ }
}
-}</pre> </li>
+}
+</pre></li>
</ol>
<h2 id="file_dir" name="file_dir">Managing Files and Directories</h2>
<p>YTou can manage files and directories in many ways:</p>
<ul>
-<li>You can read and write to a file by first using the <span style="font-family: Courier New,Courier,monospace">openStream()</span> method to open the file. You can specify the file mode and encoding.
-<p>The <span style="font-family: Courier New,Courier,monospace">openStream()</span> method returns a <span style="font-family: Courier New,Courier,monospace">FileStream</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileStream">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileStream">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileStream">TV</a> applications), which is a handle to the opened file. All actual operations, such as read, write, or close, on the file are performed through the <span style="font-family: Courier New,Courier,monospace">FileStream</span> object based on a position attribute, which represents the current position in the file.</p>
+<li>You can read and write to a file by first using the <code>openStream()</code> method to open the file. You can specify the file mode and encoding.
+<p>The <code>openStream()</code> method returns a <code>FileStream</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileStream">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileStream">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileStream">TV</a> applications), which is a handle to the opened file. All actual operations, such as read, write, or close, on the file are performed through the <code>FileStream</code> object based on a position attribute, which represents the current position in the file.</p>
</li>
-<li>You can copy and move files and directories within the virtual file system with the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> and <span style="font-family: Courier New,Courier,monospace">moveTo()</span> methods.
+<li>You can copy and move files and directories within the virtual file system with the <code>copyTo()</code> and <code>moveTo()</code> methods.
<p>If a file or directory of the same name already exists in the target location, the overwrite input parameter of the method defines whether the existing file is overwritten.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The file or directory to be copied or moved must be located under the current directory.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The file or directory to be copied or moved must be located under the current directory.
+</div>
</li>
</ul>
<p>To read and write to files, and move and copy files and directories:</p>
<ol>
- <li><p>To open a file, use the <span style="font-family: Courier New,Courier,monospace">openStream()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> 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> <p>The method returns a <span style="font-family: Courier New,Courier,monospace">FileStream</span> object, which is a handle to the opened file. </p> <pre class="prettyprint">
+ <li><p>To open a file, use the <code>openStream()</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> <p>The method returns a <code>FileStream</code> object, which is a handle to the opened file. </p>
+<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)
+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 <span style="font-family: Courier New,Courier,monospace">FileStream</span> object based on a position attribute, which represents the current position in the file: <pre class="prettyprint">
+}
+</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 */
/* Close the file */
fs.close();
}
-</pre> </li>
- <li><p>To copy a file or directory, use the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> method. The following example copies the files to the <span style="font-family: Courier New,Courier,monospace">images/backup/</span> directory. Since the third parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, any existing files with the same name in the target directory are overwritten.</p> <pre class="prettyprint">
+</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");
}
-for (var i = 0; i < files.length; i++)
+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 <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. The following example moves the files to the <span style="font-family: Courier New,Courier,monospace">images/newFolder/</span> directory. Since the third parameter is set to <span style="font-family: Courier New,Courier,monospace">false</span>, no existing files with the same name in the target directory are overwritten.</p> <pre class="prettyprint">
+</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++)
+for (var i = 0; i < files.length; i++)
{
documentsDir.moveTo(files[i].fullPath, "images/newFolder/"+files[i].name,
false, onSuccess);
}
-</pre> </li>
+</pre></li>
</ol>
<h2 id="roots">Supported Virtual Roots</h2>
<p>The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Filesystem virtual roots
- </caption>
+
+<p align="center" class="Table"><strong>Table: Filesystem virtual roots</strong></p>
+<table border="1" style="width: 100%">
<tbody>
<tr>
<th>Virtual root</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">documents</span></td>
+ <td><code>documents</code></td>
<td>Location for storing documents.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td>
+ <td><code>downloads</code></td>
<td>Location for storing downloaded items.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">images</span></td>
+ <td><code>images</code></td>
<td>Location for storing images.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">music</span></td>
+ <td><code>music</code></td>
<td>Location for storing audio files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">removable</span></td>
+ <td><code>removable</code></td>
<td>Location for the removable storage.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td>
+ <td><code>ringtones</code></td>
<td>Location for ringtones (read-only location).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">videos</span></td>
+ <td><code>videos</code></td>
<td>Location for storing videos.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wgt-package</span></td>
+ <td><code>wgt-package</code></td>
<td>Location for storing Web application packages (read-only location).</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wgt-private</span></td>
+ <td><code>wgt-private</code></td>
<td>Location for the Web application private storage.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">wgt-private-tmp</span></td>
+ <td><code>wgt-private-tmp</code></td>
<td>Location for the Web application private temporary storage.</td>
</tr>
</tbody>
<li>Content change notifications
<p>You can keep the content in your application synchronized with an external content manager by <a href="#receive">receiving notifications</a> in your application when the content changes.</p></li>
<li>Playlist management
- <p>Using the <
span style="font-family: Courier New,Courier,monospace">Playlist</span> 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), you can:</p>
+ <p>Using 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), you can:</p>
<ul>
<li>Create playlists
<p>You can <a href="#create">create a new playlist</a> and add items to it. You can also create a new playlist by copying the content of an existing playlist.</p></li>
</li>
</ul>
-<p>The Content API uses the same <
span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance (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) for all content-related functionalities. The instance provides higher efficiency by performing batch operations on content items.</p>
+<p>The Content API uses the same <
code>ContentManager</code> interface instance (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) for all content-related functionalities. The instance provides higher efficiency by performing batch operations on content items.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.
+</div>
<p>For a practical example of browsing and managing the media directories in your application, see the <a href="task_mediacontent_w.htm">Media Content</a> sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/content.read"/>
<tizen:privilege name="http://tizen.org/privilege/content.write"/>
<h2 id="browse" name="browse">Browsing Content</h2>
- <p>You can browse and search for content directories and content using the <
span style="font-family: Courier New,Courier,monospace">getDirectories()</span> and <span style="font-family: Courier New,Courier,monospace">find()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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). When searching for content items, you can create <a href="data_filter_w.htm#filter">attribute filters</a>, <a href="data_filter_w.htm#range">attribute range filters</a>, and <a href="data_filter_w.htm#composite">composite filters</a> based on <a href="data_filter_w.htm#content_filter">specific filter attributes</a> of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. You can also <a href="data_filter_w.htm#use_modes">sort the search results</a>.</p>
+ <p>You can browse and search for content directories and content using the <
code>getDirectories()</code> and <code>find()</code> methods 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). When searching for content items, you can create <a href="data_filter_w.htm#filter">attribute filters</a>, <a href="data_filter_w.htm#range">attribute range filters</a>, and <a href="data_filter_w.htm#composite">composite filters</a> based on <a href="data_filter_w.htm#content_filter">specific filter attributes</a> of the <code>ContentManager</code> interface. You can also <a href="data_filter_w.htm#use_modes">sort the search results</a>.</p>
<p>To browse and search for content directories and content items in directories:</p>
<ol>
- <li><p>Retrieve the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object:</p> <pre class="prettyprint">var manager = tizen.content;</pre></li>
- <li> <p>To search for the content directories in the local device, use the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. The method returns an array of <span style="font-family: Courier New,Courier,monospace">ContentDirectory</span> 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)
+ <li><p>Retrieve the <code>ContentManager</code> interface instance using the <code>tizen</code> global object:</p>
+<pre class="prettyprint">
+var manager = tizen.content;
+</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++)
{
}
}
-manager.getDirectories(onDirectoryArraySuccess);</pre></li>
- <li>To search for the content items in all directories, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. The method returns an array of <span style="font-family: Courier New,Courier,monospace">Content</span> 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)
+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);
+ console.log(i + ":" + contents[i].type + ":" + contents[i].title
+ + ":" + contents[i].mimeType);
}
}
manager.find(onContentItemArraySuccess, null, null, filter);
</pre>
-<p>In the <span style="font-family: Courier New,Courier,monospace">find()</span> method in the above example, the directory ID parameter is set to <span style="font-family: Courier New,Courier,monospace">null</span> (which means that all directories are searched), the filter retrieves all content items whose type is <span style="font-family: Courier New,Courier,monospace">VIDEO</span>, and no sorting order is defined (which means that the default sorting order is used).</p></li>
+<p>In the <code>find()</code> method in the above example, the directory ID parameter is set to <code>null</code> (which means that all directories are searched), the filter retrieves all content items whose type is <code>VIDEO</code>, and no sorting order is defined (which means that the default sorting order is used).</p></li>
</ol>
<h2 id="manage" name="manage">Managing Content</h2>
<p>You can manage content in many ways:</p>
<ul>
-<li>You can view content item details with the <span style="font-family: Courier New,Courier,monospace">find()</span> method.</li>
-<li>You can update some attributes of a content item, for example its rating, with the <
span style="font-family: Courier New,Courier,monospace">update()</span> method. <p>For more information on the content attributes, see the Content Full WebIDL Reference (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#full-webidl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#full-webidl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#full-webidl">TV</a> applications).</p></li>
-<li>If a content item is copied or moved, you cannot find it because a scan is not performed automatically. You can retrieve a copied or moved item with the <span style="font-family: Courier New,Courier,monospace">find()</span> method after calling the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method.</li>
-<li>You can create a thumbnail for a content item using the <span style="font-family: Courier New,Courier,monospace">createThumbnail()</span> method.</li>
+<li>You can view content item details with the <code>find()</code> method.</li>
+<li>You can update some attributes of a content item, for example its rating, with the <
code>update()</code> method. <p>For more information on the content attributes, see the Content Full WebIDL Reference (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#full-webidl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#full-webidl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#full-webidl">TV</a> applications).</p></li>
+<li>If a content item is copied or moved, you cannot find it because a scan is not performed automatically. You can retrieve a copied or moved item with the <code>find()</code> method after calling the <code>scanFile()</code> method.</li>
+<li>You can create a thumbnail for a content item using the <code>createThumbnail()</code> method.</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can only view (and not update) the read-only attributes.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ You can only view (and not update) the read-only attributes.
+</div>
+
<p>To view and update content details:</p>
<ol>
- <li><p>Retrieve the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance (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) using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object, and search for the item whose details you want to update.</p> <p>In the following example, the item whose title is <span style="font-family: Courier New,Courier,monospace">image7.jpg</span> is retrieved.</p>
-<pre class="prettyprint">var manager = tizen.content;
+ <li><p>Retrieve the <code>ContentManager</code> interface instance (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) using the <code>tizen</code> global object, and search for the item whose details you want to update.</p> <p>In the following example, the item whose title is <code>image7.jpg</code> is retrieved.</p>
+<pre class="prettyprint">
+var manager = tizen.content;
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 <span style="font-family: Courier New,Courier,monospace">find()</span> method, view the content item details by displaying them in the console log: <pre class="prettyprint">function onMediaItemArraySuccess(item)
+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)
+ if (items.length > 0)
{
console.log(items[0].type + ": " + items[0].title + ": " + items[0].mimeType);
- console.log("geolocation-latitude :" + items[0].geolocation.latitude +
+ 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method. In the example below, the rating of the content item is increased.</p> <pre class="prettyprint">
+}
+</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 */
/* Updates the item */
manager.update(item);
}
-}</pre></li>
- <li><p>To scan for the content item file, use the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method. Because scanning is not performed automatically when the content file is copied or moved, call the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method to find the file.</p> <pre class="prettyprint">
+}
+</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)
{
};
tizen.filesystem.resolve("images/photo.jpg", function(file)
- {
- tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
- });
+ {
+ tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
+ });
</pre></li>
-<li><p>To create a thumbnail for a content item, use the <span style="font-family: Courier New,Courier,monospace">createThumbnail()</span> method:</p>
+<li><p>To create a thumbnail for a content item, use the <code>createThumbnail()</code> method:</p>
<pre class="prettyprint">
function createCB(path)
{
</ol>
<h2 id="receive" name="receive">Receiving Notifications on Content Changes</h2>
-<p>You can receive notifications when a content item is added, updated, or deleted. The <
span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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) registers a change listener. You can use the <span style="font-family: Courier New,Courier,monospace">ContentChangeCallback</span> interface (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) to define listener event handlers for receiving the notifications.</p>
+<p>You can receive notifications when a content item is added, updated, or deleted. The <
code>setChangeListener()</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) registers a change listener. You can use the <code>ContentChangeCallback</code> interface (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) to define listener event handlers for receiving the notifications.</p>
<p>To receive notifications when content items are added, updated, or removed:</p>
<ol>
- <li><p>Define the event handlers for different notifications using the <span style="font-family: Courier New,Courier,monospace">ContentChangeCallback</span> 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">
+ <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 */
console.log(id + " was removed");
}
};
-</pre> </li>
- <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Register the listener to use the defined event handlers:</p>
+<pre class="prettyprint">
var listenerId = tizen.content.addChangeListener(listener);
-</pre> </li>
- <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method: </p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To stop the notifications, use the <code>removeChangeListener()</code> method: </p>
+<pre class="prettyprint">
tizen.content.removeChangeListener(listenerId);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="create" name="create">Creating a Playlist</h2>
<p>Learning how to create a new playlist enables adding a playlist from your application:</p>
<ul>
-<li><p>To create a new empty playlist, use the <
span style="font-family: Courier New,Courier,monospace">createPlaylist()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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>
+<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)
+<pre class="prettyprint">
+function createSuccess(playlist)
{
console.log("create SUCCESS");
}
-tizen.content.createPlaylist("My new playlist", createSuccess); </pre></li>
+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 <span style="font-family: Courier New,Courier,monospace">createPlaylist()</span> method, passing the source playlist as a parameter:
+<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)
+<pre class="prettyprint">
+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);
-});</pre>
+ tizen.content.createPlaylist("My new playlist", createSuccess,
+ null, existingPlaylist);
+});
+</pre>
</li>
</ul>
<p>Learning how to retrieve and remove playlists is a basic playlist management skill:</p>
<ul>
-<li><p>To retrieve a list of all playlists, use the <
span style="font-family: Courier New,Courier,monospace">getPlaylists()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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>
+<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)
+<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);
+ console.log("[" + i + "] name:" + cur.name
+ + " number of tracks:" + cur.numberOfTracks);
}
}
-tizen.content.getPlaylists(getPlaylistsSuccess);</pre></li>
+tizen.content.getPlaylists(getPlaylistsSuccess);
+</pre></li>
-<li>To remove a playlist, use the <span style="font-family: Courier New,Courier,monospace">removePlaylist()</span> method providing the ID of the playlist:
+<li>To remove a playlist, use the <code>removePlaylist()</code> method providing the ID of the playlist:
-<pre class="prettyprint">function removePlaylistSuccess()
+<pre class="prettyprint">
+function removePlaylistSuccess()
{
console.log("removePlaylist() is successfully done.");
}
{
var myPlaylist = playlists[0];
tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
-});</pre></li>
+});
+</pre></li>
</ul>
<li>To add items to a playlist:
<ol>
-<li><p>Retrieve the multimedia content using the <
span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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>
+<li><p>Retrieve the multimedia content using the <
code>find()</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">var myPlaylist;
+<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.find(findSuccess, null, null,
+ new tizen.AttributeFilter("type", "EXACTLY", "AUDIO"));
});
</pre></li>
-<li>To add multiple items to the retrieved playlist, use the <
span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> 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):
+<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)
+<pre class="prettyprint">
+function findSuccess(contents)
{
if (contents.length >= 3)
{
{
console.log("Not enough items. Need at least 3");
}
-}</pre></li>
+}
+</pre></li>
-<li>To add a single item to the retrieved playlist, use the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface:
+<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)
+<pre class="prettyprint">
+function findSuccess(contents)
{
if (contents.length > 0)
{
myPlaylist.add(contents[0]);
}
-}</pre>
+}
+</pre>
</li>
</ol></li>
-<li>To retrieve items from a playlist, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface:
+<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)
+<pre class="prettyprint">
+function getSuccess(items)
{
console.log("Playlist items:");
for (var i = 0; i < items.length; ++i)
{
var myPlaylist = playlists[0];
myPlaylist.get(getSuccess);
-});</pre>
+});
+</pre>
</li>
-<li>To change the position of a single playlist item (track), use the <span style="font-family: Courier New,Courier,monospace">move()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface. The second parameter indicates how much and in which direction the item is moved.
-<p>Note that before moving the item, first you must retrieve it using the <span style="font-family: Courier New,Courier,monospace">get()</span> method.</p>
+<li>To change the position of a single playlist item (track), use the <code>move()</code> method of the <code>Playlist</code> interface. The second parameter indicates how much and in which direction the item is moved.
+<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()
{
var myPlaylist = playlists[0];
myPlaylist.move(myItem, -2, moveSuccess);
-});</pre>
+});
+</pre>
-<p>The example above moves the track 2 positions up on the playlist. The second parameter of the <span style="font-family: Courier New,Courier,monospace">move()</span> method can be a negative value, which means moving the track up, or a positive value, which means moving the track down. If the value is greater than number of tracks above or below, the item is accordingly moved to the beginning or end of the playlist.</p>
+<p>The example above moves the track 2 positions up on the playlist. The second parameter of the <code>move()</code> method can be a negative value, which means moving the track up, or a positive value, which means moving the track down. If the value is greater than number of tracks above or below, the item is accordingly moved to the beginning or end of the playlist.</p>
</li>
-<li>To change the order of all items in the playlist, use the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method. This feature is useful when sorting the playlist.
+<li>To change the order of all items in the playlist, use the <code>setOrder()</code> method. This feature is useful when sorting the playlist.
-<p>Following example reverses the order of the playlist items. For the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method to work, you must pass all items from the playlist. If an item is missing or an item from a different playlist is included, the <span style="font-family: Courier New,Courier,monospace">InvalidValuesError</span> exception is returned in the error callback. </p>
+<p>Following example reverses the order of the playlist items. For the <code>setOrder()</code> method to work, you must pass all items from the playlist. If an item is missing or an item from a different playlist is included, the <code>InvalidValuesError</code> exception is returned in the error callback. </p>
-<ol><li>Get all tracks using the <span style="font-family: Courier New,Courier,monospace">get()</span> method.</li>
-<li>Within the success callback of the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method, create an array with the new order:
+<ol><li>Get all tracks using the <code>get()</code> method.</li>
+<li>Within the success callback of the <code>setOrder()</code> method, create an array with the new order:
<pre class="prettyprint">
var items; /* Assume that it was retrieved using the get() method */
var newOrder = items.slice(0);
-newOrder.reverse();</pre></li>
-<li>Execute the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method:
+newOrder.reverse();
+</pre></li>
+<li>Execute the <code>setOrder()</code> method:
-<pre class="prettyprint">function setOrderSuccess()
+<pre class="prettyprint">
+function setOrderSuccess()
{
console.log("Set items order SUCCESS");
}
-myPlaylist.setOrder(newOrder, setOrderSuccess); </pre>
+myPlaylist.setOrder(newOrder, setOrderSuccess);
+</pre>
</li></ol>
</li>
</ul>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>Additionally, the sample application layout consists of 2 UI elements: the clipboard footer controls enable you to delete, move, or copy selected folders and files, and the More pop-up window enables you to create a new folder and to paste content to a folder.</p>
<p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: FileManager screen</p>
+ <p align="center"><strong>Figure: FileManager screen</strong></p>
<p align="center"><img alt="FileManager screen" src="../../images/filemanager.png" /></p>
<h3 id="temp" name="temp">Using the Template Manager</h3>
<p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol class="tutorstep">
- <li>app.ui.templateManager.js Source File
+ <ol>
+ <li><strong>app.ui.templateManager.js Source File</strong>
<ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
if ($.isArray(tplNames))
{
$.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
{
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
+ if (self.cache[fileName] === undefined)
{
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
+ tplName = [fileName, app.config.get('templateExtension')].join('');
+ tplPath = [app.config.get('templateDir'), tplName].join('/');
+ $.ajax(
{
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
+ url: tplPath,
+ cache: true,
+ dataType: 'html',
+ async: true,
+ success: function(data)
{
- onSuccess();
- }
- },
-
- /* Error handling */
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
+ cachedTemplates += 1;
+ self.cache[fileName] = data;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
+ },
+
+ /* Error handling */
+ });
+ }
+ else
{
- onSuccess();
+ cachedTemplates += 1;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
}
- }
- });
+ });
}
}
-</pre> </li>
+</pre></li>
<li> <p>Next, the template manager returns the template HTML content from the cache.</p>
- <pre class="prettyprint">get: function TemplateManager_get(tplName, tplParams)
+<pre class="prettyprint">
+get: function TemplateManager_get(tplName, tplParams)
{
if (this.cache[tplName] !== undefined)
{
return '';
}
-</pre> </li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">getCompleted()</span> method returns the completed template using the specified parameters, prepared by the <span style="font-family: Courier New,Courier,monospace">passThruModifiers()</span> method.</p>
- <pre class="prettyprint">getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
+</pre></li>
+ <li><p>The <code>getCompleted()</code> method returns the completed template using the specified parameters, prepared by the <code>passThruModifiers()</code> method.</p>
+<pre class="prettyprint">
+getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
{
var tplParam, replaceRegExp;
}
tplHtml = tplHtml.replace(regModOn, content);
- }
+ }
else
{
tplHtml = tplHtml.replace(regModOff, content);
}
return tplHtml;
-}</pre> </li>
+}
+</pre></li>
</ol> </li>
</ol>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <p>The main screen elements initialization and display functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> file.</p>
- <ol class="tutorstep">
- <li>main.tpl Source File
-<p>The main screen of the application displays the device storage folder and file structure. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+ <p>The main screen elements initialization and display functionality is implemented in the <code>app.ui.js</code> file.</p>
+ <ol>
+ <li><strong>main.tpl Source File</strong>
+<p>The main screen of the application displays the device storage folder and file structure. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
<p>If the user navigates to another child directory, the header section displays navigation buttons - <strong>Up</strong> and <strong>Home</strong> - to move 1 directory up in the file system and to move to the root directory, respectively. In a child directory, the breadcrumb navigation from the root directory to the current directory is displayed as well.</p>
- <pre class="prettyprint lang-html"><!--Header section-->
+<pre class="prettyprint lang-html">
+<!--Header section-->
<div data-role="header" data-position="fixed">
<h1 id="mainTitle"></h1>
<!--Other application code-->
</div>
-</pre></li>
-
- <li>folderRow.tpl Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">folderRow.tpl</span> template file defines the actual content of the main screen, which is initialized in the <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> source file.</p>
- <pre class="prettyprint lang-html"><!--Content section-->
-<li class="node folder ui-li-1line-bigicon1" id="row%id%" label="%name%" uri="%uri|escapeEncies%"
- fullUri="%fullUri|escapeEncies%">
- <form class="my-ui-checkbox hidden"><input type="checkbox" /></form>
- <img src="images/folder.png" class="ui-li-bigicon" />
+</pre></li>
+
+ <li><strong>folderRow.tpl Source File</strong>
+<p>The <code>folderRow.tpl</code> template file defines the actual content of the main screen, which is initialized in the <code>app.ui.js</code> source file.</p>
+<pre class="prettyprint lang-html">
+<!--Content section-->
+<li class="node folder ui-li-1line-bigicon1" id="row%id%" label="%name%"
+ uri="%uri|escapeEncies%" fullUri="%fullUri|escapeEncies%">
+ <form class="my-ui-checkbox hidden"><input type="checkbox"/></form>
+ <img src="images/folder.png" class="ui-li-bigicon"/>
<span class="ui-li-text-main nodename">%name|escape%</span>
</li>
-</pre> </li>
+</pre></li>
</ol>
<h3 id="foot" name="foot">Defining the Footer Controls</h3>
- <ol class="tutorstep">
- <li>main.tpl Source File
-<p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">footer</span>. The footer section contains a tab bar with a button for enabling the clipboard functionality in the application.</p>
+ <ol>
+ <li><strong>main.tpl Source File</strong>
+<p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with a button for enabling the clipboard functionality in the application.</p>
<p>The clipboard consists of buttons for deleting, moving, and copying folders and files, and also canceling the clipboard operation. In the clipboard mode, check boxes appear next to the folders and files list in the current directory on the main screen.</p>
- <pre class="prettyprint lang-html"><div data-role="footer" data-position="fixed">
+<pre class="prettyprint lang-html">
+<div data-role="footer" data-position="fixed">
<div class="ui-myToolBar">
<div data-role="tabbar" class="standardTabbar">
<ul>
</div>
</div>
-</pre></li> </ol>
+</pre></li></ol>
<h3 id="popup" name="popup">Defining the Pop-up Window</h3>
- <ol class="tutorstep">
- <li>main.tpl Source File
+ <ol>
+ <li><strong>main.tpl Source File</strong>
<p>The pop-up window consists of a jQuery pop-up menu with options for creating a new folder at the current directory location or for pasting already copied content to the current directory location.</p>
- <pre class="prettyprint lang-html"><div data-role="footer" data-position="fixed">
+<pre class="prettyprint lang-html">
+<div data-role="footer" data-position="fixed">
<div class="ui-myToolBar">
<div data-role="tabbar" class="standardTabbar">
<ul>
</div>
</div>
</div>
-</pre></li> </ol>
+</pre></li></ol>
<h2 id="clipboard" name="clipboard">Managing Clipboard</h2>
<p>This section builds upon the elements described in <a href="file_system_w.htm#file_dir">Managing Files and Directories</a>.</p>
<h3 id="initialize" name="initialize">Initializing the Clipboard</h3>
-<p>The clipboard features definition functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.clipboard.js</span> file.</p>
- <ol class="tutorstep">
- <li>Retrieving Clipboard Content <p>The <span style="font-family: Courier New,Courier,monospace;">get()</span> method is defined to retrieve all the filesystem paths saved currently in the clipboard.</p> <pre class="prettyprint">get: function Clipboard_get()
+<p>The clipboard features definition functionality is implemented in the <code>app.clipboard.js</code> file.</p>
+ <ol>
+ <li><strong>Retrieving Clipboard Content</strong>
+ <p>The <code>get()</code> method is defined to retrieve all the filesystem paths saved currently in the clipboard.</p>
+<pre class="prettyprint">
+get: function Clipboard_get()
{
return this.data;
-}</pre> </li>
- <li>Adding New Content to the Clipboard <p>The <span style="font-family: Courier New,Courier,monospace;">add()</span> method is defined to add filesystem paths to the clipboard.</p> <pre class="prettyprint">add: function Clipboard_add(paths)
+}
+</pre></li>
+ <li><strong>Adding New Content to the Clipboard</strong>
+ <p>The <code>add()</code> method is defined to add filesystem paths to the clipboard.</p>
+<pre class="prettyprint">
+add: function Clipboard_add(paths)
{
var len = paths.length, i;
}
return this.data.length;
-}</pre> </li>
- <li>Checking if a Path is Present in the Clipboard <p>The <span style="font-family: Courier New,Courier,monospace;">has()</span> method is defined to check whether the currently copied filesystem path is already present in the clipboard.</p> <pre class="prettyprint">has: function Clipboard_has(path)
+}
+</pre></li>
+ <li><strong>Checking if a Path is Present in the Clipboard</strong>
+ <p>The <code>has()</code> method is defined to check whether the currently copied filesystem path is already present in the clipboard.</p>
+<pre class="prettyprint">
+has: function Clipboard_has(path)
{
return $.inArray(path, this.data) === -1 ? false : true;
}
-</pre> </li>
- <li>Setting the Clipboard Mode<p>The <span style="font-family: Courier New,Courier,monospace;">setMode()</span> method is defined to set the clipboard in 3 available modes - copy, move, and inactive (default).</p> <pre class="prettyprint">setMode: function Clipboard_setMode(mode)
+</pre></li>
+ <li><strong>Setting the Clipboard Mode</strong>
+ <p>The <code>setMode()</code> method is defined to set the clipboard in 3 available modes - copy, move, and inactive (default).</p>
+<pre class="prettyprint">
+setMode: function Clipboard_setMode(mode)
{
if ($.inArray(mode, [this.MOVE_MODE_ID, this.COPY_MODE_ID]) === false)
{
this.mode = mode;
return true;
-}</pre> </li>
- <li>Clearing the Clipboard<p>The <span style="font-family: Courier New,Courier,monospace;">clear()</span> method is defined to clear all the clipboard content and reset it to the default mode.</p> <pre class="prettyprint">clear: function Clipboard_clear()
+}
+</pre></li>
+ <li><strong>Clearing the Clipboard</strong>
+ <p>The <code>clear()</code> method is defined to clear all the clipboard content and reset it to the default mode.</p>
+<pre class="prettyprint">
+clear: function Clipboard_clear()
{
this.data = [];
this.mode = this.INACTIVE_MODE;
-}</pre> </li>
+}
+</pre></li>
</ol>
<h3 id="perform" name="perform">Performing Clipboard Operations</h3>
- <p>The clipboard operation functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file.</p>
- <ol class="tutorstep">
- <li>Copying Content to the Clipboard
-<p>The <span style="font-family: Courier New,Courier,monospace;">saveToClipboard()</span> method is used to add filesystem paths to the clipboard and set the appropriate clipboard mode.</p>
-<pre class="prettyprint">saveToClipboard: function App_saveToClipboard(paths, mode)
+ <p>The clipboard operation functionality is implemented in the <code>app.js</code> file.</p>
+ <ol>
+ <li><strong>Copying Content to the Clipboard</strong>
+<p>The <code>saveToClipboard()</code> method is used to add filesystem paths to the clipboard and set the appropriate clipboard mode.</p>
+<pre class="prettyprint">
+saveToClipboard: function App_saveToClipboard(paths, mode)
{
var clipboardLength = this.clipboard.add(paths);
}
this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
-}</pre></li>
+}
+</pre></li>
-<li>Pasting Content from the Clipboard
- <ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">pasteClipboard()</span> method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.</p>
-<pre class="prettyprint">pasteClipboard: function App_pasteClipboard()
+<li><strong>Pasting Content from the Clipboard</strong>
+ <ol type="a"><li><p>The <code>pasteClipboard()</code> method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.</p>
+<pre class="prettyprint">
+pasteClipboard: function App_pasteClipboard()
{
var clipboardData = this.clipboard.get();
if (this.clipboard.getMode() === this.clipboard.COPY_MODE_ID)
{
- this.model.copyNodes(this.currentDirHandle, clipboardData,
- this.currentPath, this.onPasteClipboardSuccess.bind(this));
+ this.model.copyNodes(this.currentDirHandle, clipboardData, this.currentPath,
+ this.onPasteClipboardSuccess.bind(this));
}
else
{
- this.model.moveNodes(this.currentDirHandle, clipboardData,
- this.currentPath, this.onPasteClipboardSuccess.bind(this));
+ this.model.moveNodes(this.currentDirHandle, clipboardData, this.currentPath,
+ this.onPasteClipboardSuccess.bind(this));
}
this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
return true;
-}</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace;">onPasteClipboardSuccess()</span> event handler responds to the success event of pasting content from the clipboard by clearing the clipboard.</p>
-<pre class="prettyprint">onPasteClipboardSuccess: function App_onPasteClipboardSuccess()
+}
+</pre></li>
+ <li><p>The <code>onPasteClipboardSuccess()</code> event handler responds to the success event of pasting content from the clipboard by clearing the clipboard.</p>
+<pre class="prettyprint">
+onPasteClipboardSuccess: function App_onPasteClipboardSuccess()
{
this.clipboard.clear();
this.refreshCurrentPage();
-}</pre></li></ol>
+}
+</pre></li></ol>
</li>
</ol>
<p>This section builds upon the elements described in <a href="file_system_w.htm#manage">Managing File Storages</a>, <a href="file_system_w.htm#create">Creating and Deleting Files and Directories</a>, and <a href="file_system_w.htm#retrieve">Retrieving Files and File Details</a>.</p>
<h3 id="configure" name="configure">Initializing the Device Storage</h3>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file.</p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/content.read"/>
<tizen:privilege name="http://tizen.org/privilege/content.write"/>
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+ <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
- <!--Other configuration details-->
-</widget></pre> </li>
+ <!--Other configuration details-->
+</widget>
+</pre></li>
</ol>
<h3 id="retrieve" name="retrieve">Retrieving Storages</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File<p>The <span style="font-family: Courier New,Courier,monospace;">loadInternalStorages()</span> method calls the <span style="font-family: Courier New,Courier,monospace;">getStorages()</span> method to get the storages of a specific storage type.</p>
- <pre class="prettyprint">loadInternalStorages: function Model_loadInternalStorages(onSuccess)
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <p>The <code>loadInternalStorages()</code> method calls the <code>getStorages()</code> method to get the storages of a specific storage type.</p>
+<pre class="prettyprint">
+loadInternalStorages: function Model_loadInternalStorages(onSuccess)
{
var self = this;
this.systemIO.getStorages('INTERNAL', function(storages)
- {
- self.storages = storages;
- if (typeof onSuccess === 'function')
{
- onSuccess();
- }
- }, 'internal0');
-}</pre> </li>
- <li>app.systemIO.js Source File
- <p>The <span style="font-family: Courier New,Courier,monospace;">listStorages()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a> applications) is used to retrieve all the available storages.</p>
- <pre class="prettyprint">getStorages: function SystemIO_getStorages(type, onSuccess, excluded)
+ self.storages = storages;
+ if (typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
+ }, 'internal0');
+}
+</pre></li>
+ <li><strong>app.systemIO.js Source File</strong>
+ <p>The <code>listStorages()</code> method of the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a> applications) is used to retrieve all the available storages.</p>
+<pre class="prettyprint">
+getStorages: function SystemIO_getStorages(type, onSuccess, excluded)
{
try
{
tizen.filesystem.listStorages(function(storages)
- {
- var tmp = [],
- len = storages.length,
- i;
-
- if (type !== undefined)
{
- for (i = 0; i < len; i += 1)
+ var tmp = [],
+ len = storages.length,
+ i;
+
+ if (type !== undefined)
{
- if (storages[i].label !== excluded)
+ for (i = 0; i < len; i += 1)
{
- if (storages[i].type === 0 || storages[i].type === type)
- tmp.push(storages[i]);
+ if (storages[i].label !== excluded)
+ {
+ if (storages[i].type === 0 || storages[i].type === type)
+ tmp.push(storages[i]);
+ }
}
}
- }
- else
- {
- tmp = storages;
- }
+ else
+ {
+ tmp = storages;
+ }
- if (typeof onSuccess === 'function')
- onSuccess(tmp);
- });
+ if (typeof onSuccess === 'function')
+ onSuccess(tmp);
+ });
}
-}</pre> </li>
+}
+</pre></li>
</ol>
<h3 id="manage" name="manage">Managing Files and Directories</h3>
- <p>The directory creation functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file. The file creation, file deletion, and directory deletion functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.systemIO.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating a File <p>The <span style="font-family: Courier New,Courier,monospace;">createFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a> applications) is used to create a new file in the current directory.</p>
-<pre class="prettyprint">createFile: function SystemIO_createFile(directoryHandle, fileName)
+ <p>The directory creation functionality is implemented in the <code>app.js</code> file. The file creation, file deletion, and directory deletion functionality is implemented in the <code>app.systemIO.js</code> file.</p>
+ <ol>
+ <li><strong>Creating a File</strong>
+ <p>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> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a> applications) is used to create a new file in the current directory.</p>
+<pre class="prettyprint">
+createFile: function SystemIO_createFile(directoryHandle, fileName)
{
try
{
return directoryHandle.createFile(fileName);
}
-}</pre><p>Similarly, the <span style="font-family: Courier New,Courier,monospace;">createDirectory()</span> method is used to create a directory at the current storage location in the application.</p></li>
- <li>Deleting a File <p>The <span style="font-family: Courier New,Courier,monospace;">deleteFile()</span> method of the <span style="font-family: Courier New,Courier,monospace;">File</span> interface is used to delete a file by specifying the filesystem path of the file.</p>
-<pre class="prettyprint">deleteFile: function SystemIO_deleteFile(dir, filePath, onDeleteSuccess, onDeleteError)
+}
+</pre>
+<p>Similarly, the <code>createDirectory()</code> method is used to create a directory at the current storage location in the application.</p></li>
+ <li><strong>Deleting a File</strong>
+ <p>The <code>deleteFile()</code> method of the <code>File</code> interface is used to delete a file by specifying the filesystem path of the file.</p>
+<pre class="prettyprint">
+deleteFile: function SystemIO_deleteFile(dir, filePath, onDeleteSuccess, onDeleteError)
{
try
{
dir.deleteFile(filePath, onDeleteSuccess, onDeleteError);
}
-}</pre><p>Similarly, the <span style="font-family: Courier New,Courier,monospace;">deleteDirectory()</span> method is used to delete a selected directory. You can specify if the deletion is to be performed recursively for the sub-directories as well.</p></li>
+}
+</pre>
+<p>Similarly, the <code>deleteDirectory()</code> method is used to delete a selected directory. You can specify if the deletion is to be performed recursively for the sub-directories as well.</p></li>
</ol>
<h3 id="file" name="file">Retrieving File Details</h3>
- <p>The file and file list retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.systemIO.js</span> file. The file URI retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> file.</p>
- <ol class="tutorstep">
- <li>Retrieving a File <p>The <span style="font-family: Courier New,Courier,monospace;">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> interface is used to retrieve a file handle by specifying the location of the file.</p>
- <pre class="prettyprint">openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
+ <p>The file and file list retrieval functionality is implemented in the <code>app.systemIO.js</code> file. The file URI retrieval functionality is implemented in the <code>app.ui.js</code> file.</p>
+ <ol>
+ <li><strong>Retrieving a File</strong>
+ <p>The <code>resolve()</code> method of the <code>FileSystemManager</code> interface is used to retrieve a file handle by specifying the location of the file.</p>
+<pre class="prettyprint">
+openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
{
openMode = openMode || 'rw';
onSuccess = onSuccess || function() {};
{
tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
}
-}</pre> </li>
- <li>Retrieving a List of Files <p>The <span style="font-family: Courier New,Courier,monospace;">listFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> interface is used to list all the files and directories present in the current storage location in the application.</p>
- <pre class="prettyprint">getFilesList: function SystemIO_getFilesList(dir, onSuccess)
+}
+</pre></li>
+ <li><strong>Retrieving a List of Files</strong>
+ <p>The <code>listFiles()</code> method of the <code>FileSystemManager</code> interface is used to list all the files and directories present in the current storage location in the application.</p>
+<pre class="prettyprint">
+getFilesList: function SystemIO_getFilesList(dir, onSuccess)
{
try
{
dir.listFiles(function(files)
- {
- var tmp = [],
- len = files.length,
- i;
-
- for (i = 0; i < len; i += 1)
{
- tmp.push(files[i].name);
- }
+ var tmp = [],
+ len = files.length,
+ i;
- if (typeof onSuccess === 'function')
+ for (i = 0; i < len; i += 1)
+ {
+ tmp.push(files[i].name);
+ }
+
+ if (typeof onSuccess === 'function')
+ {
+ onSuccess(tmp);
+ }
+ }, function(e)
{
- onSuccess(tmp);
- }
- }, function(e)
- {
- console.error('SystemIO_getFilesList dir.listFiles() error:', e);
- });
+ console.error('SystemIO_getFilesList dir.listFiles() error:', e);
+ });
}
-}</pre> </li>
- <li>Retrieving a Folder or File URI<p>The <span style="font-family: Courier New,Courier,monospace;">toURI()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> interface is used to retrieve the folder or file URI.</p>
- <pre class="prettyprint">displayFolder: function Ui_displayFolder(folderName, nodes, refresh)
+}
+</pre></li>
+ <li><strong>Retrieving a Folder or File URI</strong>
+ <p>The <code>toURI()</code> method of the <code>FileSystemManager</code> interface is used to retrieve the folder or file URI.</p>
+<pre class="prettyprint">
+displayFolder: function Ui_displayFolder(folderName, nodes, refresh)
{
var len = nodes.length,
- listElements = [this.templateManager.get('levelUpRow')], nodeName, checkedRows = [], i;
+ listElements =
+ [this.templateManager.get('levelUpRow')], nodeName, checkedRows = [], i;
/* Other application code */
}
}
}
-}</pre> </li>
+}
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details.</p>
<p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: MediaContent screens</p>
+ <p align="center"><strong>Figure: MediaContent screens</strong></p>
<p align="center"><img alt="MediaContent screens" src="../../images/content_sd.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<ol type="a">
- <li> <p>The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
-
<pre class="prettyprint lang-html">
-<!--Main screen layout-->
+ <li> <p>The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
+<pre class="prettyprint lang-html">
+<!--Main screen layout-->
<div data-role="page" id="main">
<!--Header section-->
<div data-role="header" data-position="fixed">
<h1>Media content</h1>
</div>
-</pre></li>
- <li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>.</p>
-<p>The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).</p>
-
<pre class="prettyprint lang-html">
- <!--Content section-->
+</pre></li>
+ <li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>.</p>
+<p>The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the <code>main.js</code> file).</p>
+<pre class="prettyprint lang-html">
+ <!--Content section-->
<div data-role="content">
<ul data-role="listview" id="folder-list">
<li data-role="list-divider">Storage type</li>
<li data-role="list-divider" id="folder-text">Folders</li>
</ul>
</div>
-</div></pre></li></ol></li></ol>
+</div>
+</pre></li></ol></li></ol>
<h3 id="folder_screen" name="folder_screen">Defining the Folder Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
-<p>Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <span style="font-family: Courier New,Courier,monospace;"><input></span> element whose <span style="font-family: Courier New,Courier,monospace;">type</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">radio</span>) for the content types and a list divider for the item list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).
+ <ol>
+ <li><strong>index.html Source File</strong>
+<p>Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <code><input></code> element whose <code>type</code> attribute is set to <code>radio</code>) for the content types and a list divider for the item list (whose list items are defined in the <code>main.js</code> file).
</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<!--Folder screen layout-->
<div data-role="page" id="items">
<div data-role="header" data-position="fixed">
<li data-role="list-divider">Item type</li>
<li class="ui-li-has-radio">
ALL
- <input type="radio" name="item-type" id="item-type-all" value="ALL" checked="checked"/>
+ <input type="radio" name="item-type" id="item-type-all"
+ value="ALL" checked="checked"/>
</li>
<li class="ui-li-has-radio">
IMAGE
<li data-role="list-divider">Items</li>
</ul>
</div>
-</div></pre> </li>
+</div>
+</pre></li>
</ol>
- <p>The Details screen content section contains a list component, and every list item is defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
+ <p>The Details screen content section contains a list component, and every list item is defined in the <code>main.js</code> file.</p>
<h2 id="initialize" name="initialize">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file.</p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/content.read"/>
- <tizen:privilege name="http://tizen.org/privilege/content.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/content.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/content.write"/>
<!--Other configuration details-->
-</widget></pre></li>
+</widget>
+</pre></li>
</ol>
<h2 id="browse" name="browse">Browsing Content</h2>
<h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
- <li><p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications) for all content-related functionalities. Retrieve the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object.</p> <pre class="prettyprint">gMediaSource = tizen.content;</pre></li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getFolders()</span> method to retrieve the list of directories present in all storage types. The <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> method is called to perform the actual operation of retrieving the directories, based on the selection made in the <strong>Storage type</strong> list.</p> <p>In the example below, all the directories in the device containing media items are retrieved.</p> <pre class="prettyprint">function getFolders(storageType)
+ <li><p>The Content API uses the same <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications) for all content-related functionalities. Retrieve the <code>ContentManager</code> interface instance using the <code>tizen</code> global object.</p>
+<pre class="prettyprint">
+gMediaSource = tizen.content;
+</pre></li>
+ <li><p>Use the <code>getFolders()</code> method to retrieve the list of directories present in all storage types. The <code>showFolderList()</code> method is called to perform the actual operation of retrieving the directories, based on the selection made in the <strong>Storage type</strong> list.</p> <p>In the example below, all the directories in the device containing media items are retrieved.</p>
+<pre class="prettyprint">
+function getFolders(storageType)
{
try
{
function onGetFoldersSuccess(folders)
{
$("#folder-list").delegate("li", "vclick", function()
- {
- var id = $(this).data("id");
- if (id != null)
{
- getFolderItems(Number(id), gMediaType);
- }
+ var id = $(this).data("id");
+ if (id != null)
+ {
+ getFolderItems(Number(id), gMediaType);
+ }
- return false;
- });
+ return false;
+ });
gMediaFolders = folders;
showFolderList(storageType);
}
}
flagInit = true;
-}</pre> </li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> method calls the <span style="font-family: Courier New,Courier,monospace">makeListItem()</span> method, which creates a list of directories and displays it on the screen.</p> <p>Although all the directories are retrieved in the previous step, the <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> method only displays the directories that match with the storage type the user has selected (<strong>INTERNAL</strong> or <strong>EXTERNAL</strong>).</p> <pre class="prettyprint">function showFolderList(storageType)
+}
+</pre></li>
+ <li><p>The <code>showFolderList()</code> method calls the <code>makeListItem()</code> method, which creates a list of directories and displays it on the screen.</p> <p>Although all the directories are retrieved in the previous step, the <code>showFolderList()</code> method only displays the directories that match with the storage type the user has selected (<strong>INTERNAL</strong> or <strong>EXTERNAL</strong>).</p>
+<pre class="prettyprint">
+function showFolderList(storageType)
{
setLastStorage(storageType);
if (flagInit == false)
for (var i = 0; i < gMediaFolders.length; i++)
{
if (storageType == "ALL" || storageType == gMediaFolders[i].storageType)
- str += makeListItem(i, gMediaFolders[i].title, gMediaFolders[i].directoryURI);
+ str += makeListItem(i, gMediaFolders[i].title,
+ gMediaFolders[i].directoryURI);
}
$("#folder-list>li[data-id]").remove();
$("#folder-list").append(str).trigger("create").listview("refresh");
}
-}</pre></li>
+}
+</pre></li>
</ol> </li>
</ol>
<h3 id="get_item" name="get_item">Retrieving Media Items</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
- <li><p>To get the media item list, use the <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> method. The method takes 2 attributes: <span style="font-family: Courier New,Courier,monospace">folderId</span>, which takes the folder ID whose media item list is to be displayed and <span style="font-family: Courier New,Courier,monospace">mediaType</span>, which specifies the media type (all, image, audio, or video).</p> <p>The <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.</p> <pre class="prettyprint">function getFolderItems(folderId, mediaType)
-{</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">find()</span> method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the <span style="font-family: Courier New,Courier,monospace">showItemList()</span> method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).</p> <pre class="prettyprint">
+ <li><p>To get the media item list, use the <code>getFolderItems()</code> method. The method takes 2 attributes: <code>folderId</code>, which takes the folder ID whose media item list is to be displayed and <code>mediaType</code>, which specifies the media type (all, image, audio, or video).</p> <p>The <code>getFolderItems()</code> method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.</p>
+<pre class="prettyprint">
+function getFolderItems(folderId, mediaType)
+{
+</pre></li>
+ <li><p>The <code>find()</code> method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the <code>showItemList()</code> method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).</p>
+<pre class="prettyprint">
function onFindItemSuccess(items)
{
gMediaItems = items;
{
showItemList();
}
- else
+ else
{
$.mobile.changePage("#items");
}
{
gMediaSource.find(onFindItemSuccess, onFindItemError,
folderId == null ? null : gMediaFolders[folderId].id,
- mediaType == "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY", mediaType),
+ mediaType ==
+ "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY",
+ mediaType),
new tizen.SortMode("title", "ASC"));
}
}
-</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">showItemList()</span> method creates a list of media items and displays it on the screen.</p> <pre class="prettyprint">function showItemList()
+</pre></li>
+ <li><p>The <code>showItemList()</code> method creates a list of media items and displays it on the screen.</p>
+<pre class="prettyprint">
+function showItemList()
{
var str = '';
var title = gMediaFolders[gFolderId].title;
for (var i = 0; i < gMediaItems.length; i++)
{
- str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type
+ str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type
+ " Rating: " + gMediaItems[i].rating);
}
$("#items-list>li[data-id]").remove();
$("#items-list").append(str).trigger("create").listview("refresh");
-}</pre></li>
+}
+</pre></li>
</ol> </li>
</ol>
<h2 id="manage" name="manage">Viewing Media File Details</h2>
<p>This section builds upon the elements described in <a href="stored_content_w.htm#manage">Managing Content</a>.</p>
- <ol class="tutorstep">
- <li>main.js Source File <p>To view the details of a media file, use the <span style="font-family: Courier New,Courier,monospace">showMediaDetail()</span> method, which displays the properties of the selected media file depending on the type of the file. The <span style="font-family: Courier New,Courier,monospace">makeCommonPropertiesListItems()</span> method defines a list of properties common to all the types of media files.</p> <p>The <span style="font-family: Courier New,Courier,monospace">showMediaDetail()</span> method is called when the user clicks a media file on the item screen and the Details screen is displayed.</p> <pre class="prettyprint">function showMediaDetail()
+ <ol>
+ <li><strong>main.js Source File</strong>
+ <p>To view the details of a media file, use the <code>showMediaDetail()</code> method, which displays the properties of the selected media file depending on the type of the file. The <code>makeCommonPropertiesListItems()</code> method defines a list of properties common to all the types of media files.</p> <p>The <code>showMediaDetail()</code> method is called when the user clicks a media file on the item screen and the Details screen is displayed.</p>
+<pre class="prettyprint">
+function showMediaDetail()
{
var str, item = gMediaItems[gItemId];
/* Details for image items */
/* Details for video and audio items */
$("#media-details").html(str).trigger("create").listview("refresh");
-}</pre> </li>
+}
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<h2 id="check" name="check">Checking the Pattern</h2>
-<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 <
span style="font-family: Courier New,Courier,monospace">isPatternSupported()</span> method of the <span style="font-family: Courier New,Courier,monospace">FeedbackManager</span> 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>
+<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";
{
isSupportedStr = " not";
}
-console.log("pattern " + pattern + " is" + isSupportedStr + " supported" + );
+console.log("pattern " + pattern + " is" + isSupportedStr + " supported");
</pre>
<h2 id="set" name="set">Setting the Media Pattern</h2>
-<p>The available predefined system patterns are defined in the <
span style="font-family: Courier New,Courier,monospace">FeedbackPattern</span> enumeration (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/feedback.html#FeedbackPattern">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/feedback.html#FeedbackPattern">wearable</a> applications).</p>
+<p>The available predefined system patterns are defined in the <
code>FeedbackPattern</code> enumeration (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/feedback.html#FeedbackPattern">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/feedback.html#FeedbackPattern">wearable</a> applications).</p>
<p>To start and stop playing various types of predefined reactions:</p>
<ol>
-<li><p>To set a specified type of reaction for an event, use the <
span style="font-family: Courier New,Courier,monospace">play()</span> method of the <span style="font-family: Courier New,Courier,monospace">FeedbackManager</span> 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>
+<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);
}
</pre>
</li>
-<li><p>To stop reacting to predefined actions, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">FeedbackManager</span> interface:</p>
+<li><p>To stop reacting to predefined actions, use the <code>stop()</code> method of the <code>FeedbackManager</code> interface:</p>
<pre class="prettyprint">
tizen.feedback.stop();
</pre>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Power API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Power API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/power"/>
</pre>
<h2 id="manage" name="manage">Managing the Power Resource</h2>
-<p>You can request and release a minimum power state for the screen and CPU. The request locks the screen to a minimum state and keeps the device bright and awake. For example, if you set the minimum power state to <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span>, the device display always remains in the <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> level and never goes down to the <span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> level.</p>
+<p>You can request and release a minimum power state for the screen and CPU. The request locks the screen to a minimum state and keeps the device bright and awake. For example, if you set the minimum power state to <code>SCREEN_NORMAL</code>, the device display always remains in the <code>SCREEN_NORMAL</code> level and never goes down to the <code>SCREEN_DIM</code> level.</p>
<p>The following table lists the levels you can request.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Power state levels
- </caption>
+
+<p align="center" class="Table"><strong>Table: Power state levels</strong></p>
+<table border="1" style="width: 100%">
<tbody>
<tr>
<th>Level</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SCREEN_OFF</span></td>
+ <td><code>SCREEN_OFF</code></td>
<td>In this state, the screen is off. You cannot request this state, but it can be used in event handlers.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span></td>
- <td>In this state, the screen is dimmed. When this state is requested, the device does not go to the <span style="font-family: Courier New,Courier,monospace">SCREEN_OFF</span> state automatically.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span></td>
- <td>In this state, the screen uses the default brightness the user has configured for the device. When this state is requested, the device does not go to the <span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> state automatically.</td>
+ <td><code>SCREEN_DIM</code></td>
+ <td>In this state, the screen is dimmed. When this state is requested, the device does not go to the <code>SCREEN_OFF</code> state automatically.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">CPU_AWAKE</span></td>
- <td>In this state, the CPU is awake. When this state is requested, the device does not go to <span style="font-family: Courier New,Courier,monospace">SLEEP</span> state automatically.</td>
- </tr>
- </tbody>
- </table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
+ <td><code>SCREEN_NORMAL</code></td>
+ <td>In this state, the screen uses the default brightness the user has configured for the device. When this state is requested, the device does not go to the <code>SCREEN_DIM</code> state automatically.</td>
</tr>
<tr>
- <td class="note">If you request a new power state without releasing the previous state, the Tizen platform follows the highest minimum state requested.</td>
+ <td><code>CPU_AWAKE</code></td>
+ <td>In this state, the CPU is awake. When this state is requested, the device does not go to <code>SLEEP</code> state automatically.</td>
</tr>
</tbody>
</table>
+<div class="note">
+ <strong>Note</strong>
+ If you request a new power state without releasing the previous state, the Tizen platform follows the highest minimum state requested.
+</div>
+
<p>To request and release the power state:</p>
<ol>
- <li><p>To set the power state, call the <span style="font-family: Courier New,Courier,monospace">request()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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 <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> state is requested for the screen resource:</p> <pre class="prettyprint">
-tizen.power.request("SCREEN", "SCREEN_NORMAL");</pre> </li>
- <li><p>To release a power state, call the <span style="font-family: Courier New,Courier,monospace">release()</span> method with the intended resource:</p> <pre class="prettyprint">
+ <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");
+</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");
-</pre> </li>
- <li><p>To listen to the screen state changes, use the <span style="font-family: Courier New,Courier,monospace">setScreenStateChangeListener()</span> method:</p> <pre class="prettyprint">
-function onScreenStateChanged(previousState, changedState)
+</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);
}
-tizen.power.setScreenStateChangeListener(onScreenStateChanged);</pre> </li>
+tizen.power.setScreenStateChangeListener(onScreenStateChanged);
+</pre></li>
-<li><p>To unset the screen state change callback and stop monitoring it, use the <span style="font-family: Courier New,Courier,monospace">unsetScreenStateChangeListener()</span> method:</p>
- <pre class="prettyprint">tizen.power.unsetScreenStateChangeListener();</pre> </li>
+<li><p>To unset the screen state change callback and stop monitoring it, use the <code>unsetScreenStateChangeListener()</code> method:</p>
+<pre class="prettyprint">
+tizen.power.unsetScreenStateChangeListener();
+</pre></li>
</ol>
<h2 id="brightness" name="brightness">Managing the Screen Brightness</h2>
<p>To get, set, and restore the screen brightness:</p>
<ul>
-<li><p>To get the screen brightness, call the <
span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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):</p>
+<li><p>To get the screen brightness, call the <
code>getScreenBrightness()</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):</p>
<pre class="prettyprint">
var screenBrightness = tizen.power.getScreenBrightness();
-</pre> </li>
- <li><p>To set the screen brightness, call the <span style="font-family: Courier New,Courier,monospace"> setScreenBrightness()</span> method of
- the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface with the value from 0 to 1.</p>
-<p>In this example, the screen brightness is set to <span style="font-family: Courier New,Courier,monospace">1</span> (the brightest setting).</p>
+</pre></li>
+ <li><p>To set the screen brightness, call the <code> setScreenBrightness()</code> method of
+ the <code>PowerManager</code> interface with the value from 0 to 1.</p>
+<p>In this example, the screen brightness is set to <code>1</code> (the brightest setting).</p>
<pre class="prettyprint">
-tizen.power.setScreenBrightness(1);</pre> </li>
- <li><p>To restore the default screen brightness, use the <span style="font-family: Courier New,Courier,monospace">restoreScreenBrightness()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+tizen.power.setScreenBrightness(1);
+</pre></li>
+ <li><p>To restore the default screen brightness, use the <code>restoreScreenBrightness()</code> method of the <code>PowerManager</code> interface:</p>
<pre class="prettyprint">
tizen.power.restoreScreenBrightness();
-</pre> </li>
+</pre></li>
</ul>
<h2 id="screen" name="screen">Managing the Screen State</h2>
<p>To switch the screen on and off, and check whether the screen is on:</p>
<ul>
-<li><p>To check whether the screen is on, call the <
span style="font-family: Courier New,Courier,monospace">isScreenOn()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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):</p>
+<li><p>To check whether the screen is on, call the <
code>isScreenOn()</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):</p>
<pre class="prettyprint">
var isScreenOn = tizen.power.isScreenOn();
-</pre> </li>
- <li><p>To switch on the screen, call the <span style="font-family: Courier New,Courier,monospace">turnScreenOn()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+</pre></li>
+ <li><p>To switch on the screen, call the <code>turnScreenOn()</code> method of the <code>PowerManager</code> interface:</p>
<pre class="prettyprint">
tizen.power.turnScreenOn();
-</pre> </li>
- <li><p>To switch off the screen, call the <span style="font-family: Courier New,Courier,monospace">turnScreenOff()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+</pre></li>
+ <li><p>To switch off the screen, call the <code>turnScreenOff()</code> method of the <code>PowerManager</code> interface:</p>
<pre class="prettyprint">
tizen.power.turnScreenOff();
-</pre> </li>
+</pre></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/system"/>
<tizen:privilege name="http://tizen.org/privilege/telephony"/>
<h2 id="retrieve" name="retrieve">Retrieving a Device Capability</h2>
-<p>Retrieve a device capability using the <
span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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>
+<p>Retrieve a device capability 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>, <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>
<ol>
<li>
- <p>To get a specific capability of the device, use the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method:</p>
- <pre class="prettyprint">var barometer = tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer");
-console.log(" Barometer = " + barometer);</pre>
+ <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);
+</pre>
</li>
</ol>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">getCapabilities()</span> method has been deprecated since Tizen 2.3. Use the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method instead.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The <code>getCapabilities()</code> method has been deprecated since Tizen 2.3. Use the <code>getCapability()</code> method instead.
+</div>
<p>For a list of available keys and their meaning, see the device capability keys (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html">wearable</a> applications).</p>
<h2 id="state" name="state">Retrieving the Current State of a Property</h2>
<p>The property state can determine whether your application has enough resources to complete a particular task or service successfully. For example, if you are creating a file, you need to check the storage property to know whether a writable storage is available on the device.</p>
-<p>Retrieve information about the property states using the applicable methods of the <
span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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>
+<p>Retrieve information about the property states using the applicable methods 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>
<ol>
- <li> <p>To check the current state of the property, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method. </p> <p>The first method parameter must be of the <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertyId</span> 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">
+ <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);
/* Retrieve the cellular network property */
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">
+</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 */
/* 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 <span style="font-family: Courier New,Courier,monospace">getPropertyValueArray()</span> method. For example, you can check the state of SIM cards, which are mounted in the Tizen device.</p>
+</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">
+<pre class="prettyprint">
function successCallback(properties)
{
console.log("The number of the returned system properties is " + properties.length);
}
tizen.systeminfo.getPropertyValueArray("SIM", successCallback);
-</pre> </li>
+</pre></li>
-<li> <p>Retrieve the number of system property information using the <span style="font-family: Courier New,Courier,monospace">getCount()</span> method. For example, you can check the number of SIM cards, which are installed in the Tizen device.</p>
+<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"));</pre> </li>
+<pre class="prettyprint">
+console.log("The number of SIM cards in the device is "
+ + tizen.systeminfo.getCount("SIM"));
+</pre></li>
</ol>
<h2 id="memory" name="memory">Retrieving the Memory State</h2>
-<p>Check the total or available amount of system memory using the applicable method of the <
span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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>
+<p>Check the total or available amount of system memory using the applicable 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>
<ul>
- <li><p>To get the total amount of system memory, use the <span style="font-family: Courier New,Courier,monospace">getTotalMemory()</span> method:</p>
+ <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.");</pre></li>
+<pre class="prettyprint">
+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 <span style="font-family: Courier New,Courier,monospace">getAvailableMemory()</span> method:</p>
+ <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.");</pre></li>
+<pre class="prettyprint">
+console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory()
+ + " bytes.");
+</pre></li>
</ul>
<h2 id="orientation" name="orientation">Retrieving and Monitoring the Device Orientation</h2>
- <p>The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the Web application has the <span style="font-family: Courier New,Courier,monospace">screen-orientation</span> option (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) set to "landscape" or "portrait", the screen is not rotated and the <span style="font-family: Courier New,Courier,monospace">window.screen.orientation</span> property does not change; however, the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> device orientation changes.</p>
- <p>When a device is in its natural position, it is considered to be in the <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> orientation (if the screen height is greater than its width) or the <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span>, from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span>, from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span>, and from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span> back to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span>.</p>
- <table style="text-align: center">
- <caption>
- Table: Device orientations
- </caption>
+ <p>The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the Web application has the <code>screen-orientation</code> option (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) set to "landscape" or "portrait", the screen is not rotated and the <code>window.screen.orientation</code> property does not change; however, the <code>SystemInfo</code> device orientation changes.</p>
+ <p>When a device is in its natural position, it is considered to be in the <code>PORTRAIT_PRIMARY</code> orientation (if the screen height is greater than its width) or the <code>LANDSCAPE_PRIMARY</code> orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from <code>LANDSCAPE_PRIMARY</code> to <code>PORTRAIT_PRIMARY</code>, from <code>PORTRAIT_PRIMARY</code> to <code>LANDSCAPE_SECONDARY</code>, from <code>LANDSCAPE_SECONDARY</code> to <code>PORTRAIT_SECONDARY</code>, and from <code>PORTRAIT_SECONDARY</code> back to <code>LANDSCAPE_PRIMARY</code>.</p>
+
+<p align="center" class="Table"><strong>Table: Device orientations</strong></p>
+<table style="text-align: center">
<tbody><tr>
<th>LANDSCAPE_PRIMARY</th>
<th>PORTRAIT_PRIMARY</th>
<p>To retrieve information about the device orientation:</p>
<ol>
- <li> <p>To retrieve the current orientation of the device, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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 <span style="font-family: Courier New,Courier,monospace">DEVICE_ORIENTATION</span> property:</p>
+ <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);
}
tizen.systeminfo.getPropertyValue("DEVICE_ORIENTATION", onDeviceOrientation);
-</pre> </li>
+</pre></li>
- <li>The user can rotate the device and change its orientation. To receive notifications about the orientation changes, use the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:
+ <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);
-</pre> </li>
+orientationListenerId =
+ tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
+ onDeviceOrientation);
+</pre></li>
- <li> <p>To stop receiving change notifications, use the <span style="font-family: Courier New,Courier,monospace">removePropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:</p>
+ <li> <p>To stop receiving change notifications, use the <code>removePropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:</p>
<pre class="prettyprint">
tizen.systeminfo.removePropertyValueChangeListener(orientationListenerId);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="receive" name="receive">Receiving Notifications on Property Value Changes</h2>
-<p>You can receive state updates when a change occurs in a specific property. The <
span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method registers an event listener for a specific property, and returns the subscription identifier for the listener. You can use the <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertySuccessCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">TV</a> applications) to define the event handler for receiving the change notification.</p>
+<p>You can receive state updates when a change occurs in a specific property. The <
code>addPropertyValueChangeListener()</code> method registers an event listener for a specific property, and returns the subscription identifier for the listener. You can use the <code>SystemInfoPropertySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">TV</a> applications) to define the event handler for receiving the change notification.</p>
<p>To receive notifications on property value changes:</p>
<ol>
- <li> <p>Register a <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertySuccessCallback</span> event handler for the property value changes using the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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">
+ <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);
}
-tizen.systeminfo.addPropertyValueChangeListener("MEMORY", successCallback);</pre>
+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 <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> 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">
+ <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)
{
}
tizen.systeminfo.addPropertyValueChangeListener("BATTERY", onSuccessCallback);
-</pre> </li>
- <li> <p>To deregister the event handler, use <span style="font-family: Courier New,Courier,monospace">removePropertyValueChangeListener()</span> method with the watch identifier returned from the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> 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">
+</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++)
}
var id = tizen.systeminfo.addPropertyValueArrayChangeListener("SIM", successCallback);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="properties">System Information Properties</h2>
- <p>The system properties are defined as subtypes of the <span style="font-family: Courier New,Courier,monospace">SystemInfoProperty</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoProperty">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoProperty">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoProperty">TV</a> applications). The following table lists the available subtypes, and the related <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertyId</span> type values.</p>
- <table border="1" style="width: 100%" id="property">
- <caption>
- Table: Available properties
- </caption>
+ <p>The system properties are defined as subtypes of the <code>SystemInfoProperty</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoProperty">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoProperty">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoProperty">TV</a> applications). The following table lists the available subtypes, and the related <code>SystemInfoPropertyId</code> type values.</p>
+
+<p align="center" class="Table"><strong>Table: Available properties</strong></p>
+<table border="1" style="width: 100%" id="property">
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoBattery</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBattery">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBattery">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoBattery">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">BATTERY</span></td>
+ <td><
code>SystemInfoBattery</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBattery">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBattery">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoBattery">TV</a> applications)</td>
+ <td><code>BATTERY</code></td>
<td>Provides information about the battery level and charging status. With this property, you can, for example, determine whether the application can be launched or whether the user needs to be warned about the level of power available for the device.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoCpu</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCpu">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCpu">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoCpu">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">CPU</span></td>
+ <td><
code>SystemInfoCpu</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCpu">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCpu">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoCpu">TV</a> applications)</td>
+ <td><code>CPU</code></td>
<td>Provides information about the CPU load, allowing you to determine the efficiency of an application.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoStorage</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoStorage">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoStorage">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoStorage">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">STORAGE</span></td>
+ <td><
code>SystemInfoStorage</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoStorage">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoStorage">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoStorage">TV</a> applications)</td>
+ <td><code>STORAGE</code></td>
<td>Provides information about the currently connected data storage devices and their details, such as available capacity. With this property, you can, for example, allow the user to select which available storage they want to use, and determine whether the storage in question has enough free space for the actions the user wants to perform.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoDisplay</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDisplay">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDisplay">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoDisplay">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">DISPLAY</span></td>
+ <td><
code>SystemInfoDisplay</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDisplay">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDisplay">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoDisplay">TV</a> applications)</td>
+ <td><code>DISPLAY</code></td>
<td>Provides information about the device display, allowing you, for example, to determine the resolution of the device to layout your application optimally on runtime.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoNetwork</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoNetwork">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">NETWORK</span></td>
+ <td><
code>SystemInfoNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoNetwork">TV</a> applications)</td>
+ <td><code>NETWORK</code></td>
<td>Provides information about the data network. With this property, you can, for example, determine whether the network type provides adequate connection speeds for the actions the user wants to perform.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoWifiNetwork</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoWifiNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoWifiNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoWifiNetwork">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">WIFI_NETWORK</span></td>
+ <td><
code>SystemInfoWifiNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoWifiNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoWifiNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoWifiNetwork">TV</a> applications)</td>
+ <td><code>WIFI_NETWORK</code></td>
<td>Provides information about the Wi-Fi network. With this property, you can, for example, determine whether a Wi-Fi network is available and what its signal strength or SSID is.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The SSID of a Wi-Fi network represents the public name of the network that is specified by the manufacturer. The SSID identifies a network by using a 32-character long alphanumeric key. The key ensures that only devices using the SSID can communicate with each other.</td>
- </tr>
- </tbody>
- </table> </td>
+
+<div class="note">
+ <strong>Note</strong>
+ The SSID of a Wi-Fi network represents the public name of the network that is specified by the manufacturer. The SSID identifies a network by using a 32-character long alphanumeric key. The key ensures that only devices using the SSID can communicate with each other.
+</div>
+ </td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoCellularNetwork</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCellularNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCellularNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoCellularNetwork">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">CELLULAR_NETWORK</span></td>
+ <td><
code>SystemInfoCellularNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCellularNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCellularNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoCellularNetwork">TV</a> applications)</td>
+ <td><code>CELLULAR_NETWORK</code></td>
<td>Provides information about the cellular network. With this property, you can, for example, retrieve the network details that allow your application to access the network.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoEthernetNetwork</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoEthernetNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoEthernetNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoEthernetNetwork">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">ETHERNET_NETWORK</span></td>
+ <td><
code>SystemInfoEthernetNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoEthernetNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoEthernetNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoEthernetNetwork">TV</a> applications)</td>
+ <td><code>ETHERNET_NETWORK</code></td>
<td>Provides information about the Ethernet network. With this property, you can, for example, retrieve the network details that allow your application to access the network.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoNetProxyNetwork</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetProxyNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetProxyNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoNetProxyNetwork">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">NET_PROXY_NETWORK</span></td>
+ <td><
code>SystemInfoNetProxyNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetProxyNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetProxyNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoNetProxyNetwork">TV</a> applications)</td>
+ <td><code>NET_PROXY_NETWORK</code></td>
<td>Provides information about the proxy type network. With this property, you can, for example, retrieve the network details that allow your application to access the network.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoSIM</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoSIM">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoSIM">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoSIM">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">SIM</span></td>
+ <td><
code>SystemInfoSIM</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoSIM">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoSIM">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoSIM">TV</a> applications)</td>
+ <td><code>SIM</code></td>
<td>Provides information about the device SIM card, such as the operator name and the mobile country code (MCC).</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoDeviceOrientation</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDeviceOrientation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDeviceOrientation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoDeviceOrientation">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">DEVICE_ORIENTATION</span></td>
+ <td><
code>SystemInfoDeviceOrientation</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDeviceOrientation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDeviceOrientation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoDeviceOrientation">TV</a> applications)</td>
+ <td><code>DEVICE_ORIENTATION</code></td>
<td>Provides information about the current device display orientation allowing you, for example, to determine when the orientation changes to layout your application optimally on runtime.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoBuild</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBuild">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBuild">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoBuild">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">BUILD</span></td>
+ <td><
code>SystemInfoBuild</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBuild">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBuild">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoBuild">TV</a> applications)</td>
+ <td><code>BUILD</code></td>
<td>Provides information about the build, such as the model name and manufacturer.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoLocale</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoLocale">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoLocale">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoLocale">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">LOCALE</span></td>
+ <td><
code>SystemInfoLocale</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoLocale">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoLocale">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoLocale">TV</a> applications)</td>
+ <td><code>LOCALE</code></td>
<td>Provides information about the locale, such as the currently set language. </td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoPeripheral</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPeripheral">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPeripheral">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPeripheral">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">PERIPHERAL</span></td>
+ <td><
code>SystemInfoPeripheral</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPeripheral">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPeripheral">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPeripheral">TV</a> applications)</td>
+ <td><code>PERIPHERAL</code></td>
<td>Provides information about the video output status.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoMemory</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoMemory">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoMemory">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoMemory">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">MEMORY</span></td>
+ <td><
code>SystemInfoMemory</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoMemory">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoMemory">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoMemory">TV</a> applications)</td>
+ <td><code>MEMORY</code></td>
<td>Provides information about the memory state of the device.</td>
</tr>
<tr>
- <td><
span style="font-family: Courier New,Courier,monospace">SystemInfoADS</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoADS">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoADS">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoADS">TV</a> applications)</td>
- <td><span style="font-family: Courier New,Courier,monospace">ADS</span></td>
+ <td><
code>SystemInfoADS</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoADS">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoADS">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoADS">TV</a> applications)</td>
+ <td><code>ADS</code></td>
<td>Provides information about the advertisement service.</td>
</tr>
</tbody>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the System Setting API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the System Setting API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/setting"/>
</pre>
<h2 id="wall" name="wall">Managing the Device Wallpapers</h2>
-<p>You can change the home and lock screen images by using the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemSettingManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method.</p>
+<p>You can change the home and lock screen images by using the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <code>getProperty()</code> method.</p>
<p>To set the device wallpaper and get information about it:</p>
<ul>
- <li><p>To set the specified image as the lock screen wallpaper, use the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method:</p> <pre class="prettyprint">
-function setLockscreenWallpaper()
+ <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://", ""),
- successCB, errorCB);
- }
- catch (error)
+ tizen.filesystem.resolve("images/Background.jpg", function(imageFile)
{
- console.log("Error: " + error);
- }
+ try
+ {
+ tizen.systemsetting.setProperty("LOCK_SCREEN",
+ imageFile.toURI().replace("file://", ""),
+ successCB, errorCB);
+ }
+ catch (error)
+ {
+ console.log("Error: " + error);
+ }
});
}
-</pre> </li>
- <li><p>To get the current system setting information for the home screen wallpaper, use the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method:</p> <pre class="prettyprint">
-function getHomescreenWallpaper()
+</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
+ try
{
tizen.systemsetting.getProperty("HOME_SCREEN", successCB, errorCB);
}
console.log("Error: " + error);
}
}
-</pre> </li>
+</pre></li>
</ul>
<h2 id="tone" name="tone">Managing Ringtones and Notification Tones</h2>
-<p>You can modify the incoming call ringtone and notification email tone sound by using the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemSettingManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method.</p>
+<p>You can modify the incoming call ringtone and notification email tone sound by using the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <code>getProperty()</code> method.</p>
<p>To set ringtones and notification tones:</p>
<ul>
- <li><p>To set the specified audio file as the notification tone for emails, use the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemSettingManager</span> interface:</p>
+ <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");
}
-tizen.filesystem.resolve("music/Favorite track.mp3", function(musicFile)
-{
- try
- {
- tizen.systemsetting.setProperty("NOTIFICATION_EMAIL",
- musicFile.toURI().replace("file://", ""),
- onSet);
- }
- catch (error)
+tizen.filesystem.resolve("music/Favorite track.mp3", function(musicFile)
{
- console.log("Error: " + error);
- }
-});
-</pre> </li>
- <li><p>To get the current system setting information for the incoming call ringtone, use the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method:</p>
+ 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);
}
-try
+try
{
tizen.systemsetting.getProperty("INCOMING_CALL", onGet);
}
{
console.log("Error: " + error);
}
-</pre> </li>
+</pre></li>
</ul>
<h2 id="properties">System Settings Properties</h2>
<p>The following table lists the supported system settings properties.</p>
- <table border="1" style="width: 100%" id="property2">
- <caption>
- Table: Available properties
- </caption>
+
+<p align="center" class="Table"><strong>Table: Available properties</strong></p>
+<table border="1" style="width: 100%" id="property2">
<tbody>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">HOME_SCREEN</span></td>
+ <td><code>HOME_SCREEN</code></td>
<td>Provides information about the home screen image of the device.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">LOCK_SCREEN</span></td>
+ <td><code>LOCK_SCREEN</code></td>
<td>Provides information about the lock screen image of the device.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">INCOMING_CALL</span></td>
+ <td><code>INCOMING_CALL</code></td>
<td>Provides information about the incoming call ringtone sound of the device.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EMAIL</span></td>
+ <td><code>NOTIFICATION_EMAIL</code></td>
<td>Provides information about the notification email tone sound of the device.</td>
</tr>
</tbody>
<p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: Systeminfo screens</p>
+ <p align="center"><strong>Figure: Systeminfo screens</strong></p>
<p align="center"><img alt="Systeminfo screens" src="../../images/systeminfo_sd.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<ol type="a">
- <li> <p>The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p> <pre class="prettyprint lang-html"><!--Main screen layout-->
+ <li> <p>The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
+<pre class="prettyprint lang-html">
+<!--Main screen layout-->
<div data-role="page" id="main">
<!--Header section-->
<div data-role="header" data-position="fixed">
<h1>System information</h1>
</div>
-</pre> </li>
- <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a list component (in <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the system properties.</p> <pre class="prettyprint lang-html"> <!--Content section-->
+</pre></li>
+ <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a list component (in <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the system properties.</p>
+<pre class="prettyprint lang-html">
+ <!--Content section-->
<div data-role="content">
<ul data-role="listview">
<li id="storage-info">Storage</li>
<li id="orientation-info">Device orientation</li>
</ul>
</div>
-</pre> </li>
+</div>
+</pre></li>
</ol> </li>
</ol>
<h3 id="information" name="information">Defining the Information Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<ol type="a">
- <li> <p>The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.</p> <pre class="prettyprint lang-html"><!--Information screen layout-->
+ <li> <p>The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.</p>
+<pre class="prettyprint lang-html">
+<!--Information screen layout-->
<div data-role="page" id="info">
<!--Header section-->
<div data-role="header" data-position="fixed">
<h1 id="info-title"></h1>
</div>
-</pre> </li>
- <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the information screen contains a list component displaying the details of the selected system property.</p> <pre class="prettyprint lang-html"> <!--Content section-->
+</pre></li>
+ <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the information screen contains a list component displaying the details of the selected system property.</p>
+<pre class="prettyprint lang-html">
+ <!--Content section-->
<div data-role="content">
<ul data-role="listview" id="info-list">
</ul>
</div>
</div>
-</pre> </li>
+</pre></li>
</ol> </li>
</ol>
<h3 id="list" name="list">Defining the List Item Types</h3>
- <ol class="tutorstep">
- <li>main.js Source File <p>When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.</p> <p>Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:</p>
+ <ol>
+ <li><strong>main.js Source File</strong>
+ <p>When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.</p> <p>Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:</p>
<ul>
- <li>List item with 1 line (contains the property value) <pre class="prettyprint">function make1lineListItem(value)
+ <li>List item with 1 line (contains the property value)
+<pre class="prettyprint">
+function make1lineListItem(value)
{
return '<li>' + value + '</li>';
-}</pre> </li>
- <li>List item with 2 lines (contains both the property title and value) <pre class="prettyprint">function make2lineListItem(title, value)
+}
+</pre></li>
+ <li>List item with 2 lines (contains both the property title and value)
+<pre class="prettyprint">
+function make2lineListItem(title, value)
{
return '<li class="ui-li-has-multiline ui-li-text-ellipsis">'
+ title
+ '<span class="ui-li-text-sub">'
+ value
+ '</span></li>';
-}</pre> </li>
- <li>Divider list item (contains a list divider title) <pre class="prettyprint">function makeDividerListItem(value)
+}
+</pre></li>
+ <li>Divider list item (contains a list divider title)
+<pre class="prettyprint">
+function makeDividerListItem(value)
{
return '<li data-role="list-divider">' + value + '</li>';
-}</pre> </li>
+}
+</pre></li>
</ul> </li>
</ol>
<h3 id="display" name="display">Displaying System Property Details</h3>
- <p>The system property retrieval is implemented in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
- <p>If the user clicks a system property on the main screen, the <span style="font-family: Courier New,Courier,monospace;">getSystemProperty()</span> method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.</p>
- <ol class="tutorstep">
- <li>Displaying the Battery Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onBatterySuccess()</span> event handler determines the screen title for the BATTERY property information screen, and defines a list containing the battery level of the device, and information about whether the device is charging (both using list items with a 2-line format). </p> <p>The <span style="font-family: Courier New,Courier,monospace;">changePage()</span> method moves the application from the main screen to the information screen containing the defined list.</p> <pre class="prettyprint">function onBatterySuccess(battery)
+ <p>The system property retrieval is implemented in the <code>main.js</code> file.</p>
+ <p>If the user clicks a system property on the main screen, the <code>getSystemProperty()</code> method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.</p>
+ <ol>
+ <li><strong>Displaying the Battery Property Values</strong>
+ <p>The <code>onBatterySuccess()</code> event handler determines the screen title for the BATTERY property information screen, and defines a list containing the battery level of the device, and information about whether the device is charging (both using list items with a 2-line format). </p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
+<pre class="prettyprint">
+function onBatterySuccess(battery)
{
/* Screen title */
gInfoTitle = "BATTERY";
/* Screen change */
$.mobile.changePage("#info");
-}</pre> </li>
- <li>Displaying the Storage Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onStorageSuccess()</span> event handler determines the screen title for the storage property information screen, and defines a list. The list contains the total, available, and removable storage space, and the storage type (all using list items with a 2-line format) for each storage found in the device, and a divider list item to identify each storage.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">changePage()</span> method moves the application from the main screen to the information screen containing the defined list.</p> <pre class="prettyprint">
-function onStorageSuccess(storages)
+}
+</pre></li>
+ <li><strong>Displaying the Storage Property Values</strong>
+ <p>The <code>onStorageSuccess()</code> event handler determines the screen title for the storage property information screen, and defines a list. The list contains the total, available, and removable storage space, and the storage type (all using list items with a 2-line format) for each storage found in the device, and a divider list item to identify each storage.</p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
+<pre class="prettyprint">
+function onStorageSuccess(storages)
{
gInfoTitle = "STORAGE(" + storages.length + ")";
gInfo = "";
- for (var i = 0; i < storages.length; i++)
+ for (var i = 0; i < storages.length; i++)
{
gInfo += makeDividerListItem("Storage " + (i + 1))
+ make2lineListItem("Type", storages.units[i].type)
- + make2lineListItem("Capacity", Math.floor(storages[i].capacity / 1000000) + " MB")
- + make2lineListItem("Available capacity", Math.floor(storages[i].availableCapacity / 1000000) + " MB")
- + make2lineListItem("Removable", (storages[i].isRemoveable == true ? "Yes" : "No"));
+ + make2lineListItem("Capacity",
+ Math.floor(storages[i].capacity / 1000000) + " MB")
+ + make2lineListItem("Available capacity",
+ Math.floor(storages[i].availableCapacity / 1000000)
+ + " MB")
+ + make2lineListItem("Removable",
+ (storages[i].isRemoveable == true ? "Yes" : "No"));
}
$.mobile.changePage("#info");
-}</pre> </li>
- <li>Displaying the Display Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onDisplaySuccess()</span> event handler determines the screen title for the display property information screen, and defines a list containing the display details (using list items with 1- and 2-line formats). In addition, the details are divided into 4 sections by adding divider list items to the list.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">changePage()</span> method moves the application from the main screen to the information screen containing the defined list.</p> <pre class="prettyprint">function onDisplaySuccess(display)
+}
+</pre></li>
+ <li><strong>Displaying the Display Property Values</strong>
+ <p>The <code>onDisplaySuccess()</code> event handler determines the screen title for the display property information screen, and defines a list containing the display details (using list items with 1- and 2-line formats). In addition, the details are divided into 4 sections by adding divider list items to the list.</p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
+<pre class="prettyprint">
+function onDisplaySuccess(display)
{
gInfoTitle = "DISPLAY";
gInfo = makeDividerListItem("Resolution")
+ make1lineListItem(display.brightness);
$.mobile.changePage("#info");
-}</pre> </li>
+}
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<h1>Time and Date Management</h1>
- <p>Tizen enables you to use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <span style="font-family: Courier New,Courier,monospace">Date</span> object.</p>
+ <p>Tizen enables you to use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <code>Date</code> object.</p>
<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
</ul>
<h2 id="Retrieving_Date" name="Retrieving_Date">Retrieving Date and Time</h2>
-<p>With the <
span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications), you can retrieve the current date, time, and time zone, and the number of available time zones, and determine whether a year is a leap year.</p>
+<p>With the <
code>TimeUtil</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications), you can retrieve the current date, time, and time zone, and the number of available time zones, and determine whether a year is a leap year.</p>
<p>You can also perform other date-and time-related tasks, such as getting the date of the next and previous daylight saving time transition, converting current time to UTC standard time, and getting the time zone abbreviation.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"> UTC is the primary time standard used by the world to track time. Time zones are created for the world as a positive or negative offset of UTC. For example, the time zone for Iceland is UTC+00:00, and the time zone for India is UTC+05:30. <p>DST (or summer time) is the practice of clocks being advanced temporarily by a fixed time during the summer to take advantage of more daylight. Typically, this temporary adjustment is one hour. For example, one hour shift ahead in time will cause the last moment of 20:59 to jump to 22:00 instead of 21:00. In this case, the day will have 23 hours. In another scenario, one hour shift back in time will cause the day to have 25 hours.</p></td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ UTC is the primary time standard used by the world to track time. Time zones are created for the world as a positive or negative offset of UTC. For example, the time zone for Iceland is UTC+00:00, and the time zone for India is UTC+05:30.
+ <p>DST (or summer time) is the practice of clocks being advanced temporarily by a fixed time during the summer to take advantage of more daylight. Typically, this temporary adjustment is one hour. For example, one hour shift ahead in time will cause the last moment of 20:59 to jump to 22:00 instead of 21:00. In this case, the day will have 23 hours. In another scenario, one hour shift back in time will cause the day to have 25 hours.</p>
+</div>
+
<p>To handle date and time in your application:</p>
<ol>
- <li> <p>To get the current date and time, use the <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> method, which returns a <span style="font-family: Courier New,Courier,monospace">TZDate</span> object:</p> <pre class="prettyprint">
+ <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());
-</pre>
+</pre>
</li>
<li>To handle time zone information:
<ol type="a">
- <li> <p>To retrieve the current time zone, use the <span style="font-family: Courier New,Courier,monospace">getLocalTimezone()</span> method:</p> <pre class="prettyprint">
+ <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());
-</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 <span style="font-family: Courier New,Courier,monospace">getAvailableTimezones()</span> method:</p> <pre class="prettyprint">
+</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.");
-</pre> </li>
+</pre></li>
</ol>
</li>
- <li><p>If you are creating a calendar-based application or accepting a date on an application form, you must validate user input for leap year date value. For example, 29/02/2011 is an invalid user input.</p> <p>To determine if the year is a leap year, use the <span style="font-family: Courier New,Courier,monospace">isLeapYear()</span> method:</p> <pre class="prettyprint">
+ <li><p>If you are creating a calendar-based application or accepting a date on an application form, you must validate user input for leap year date value. For example, 29/02/2011 is an invalid user input.</p> <p>To determine if the year is a leap year, use the <code>isLeapYear()</code> method:</p>
+<pre class="prettyprint">
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.");
-</pre>
- <p> The <span style="font-family: Courier New,Courier,monospace">getFullYear()</span> method returns the year (4 digits) of the <span style="font-family: Courier New,Courier,monospace">TZDate</span> object. </p>
+</pre>
+ <p> The <code>getFullYear()</code> method returns the year (4 digits) of the <code>TZDate</code> object. </p>
</li>
</ol>
<p>The date and time can be expressed, for example, in a numerical format YYYY-MM-DD hh:mm:ss (for example, "1996-10-23 16:08:27") or in hybrid format (for example, "Wednesday, October 23, 1996, 04:08:27 PM").</p>
<p>To handle date and time formats in your application:</p>
<ol>
- <li> <p>To check the date format, use the <span style="font-family: Courier New,Courier,monospace">getDateFormat()</span> method:</p> <pre class="prettyprint">
+ <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);
-</pre> </li>
- <li> <p>To check the time format, use the <span style="font-family: Courier New,Courier,monospace">getTimeFormat()</span> method:</p> <pre class="prettyprint">
+</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);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="Calculating_Date" name="Calculating_Date">Calculating Date and Time Information</h2>
-<p>Calculate and compare time and date information using the applicable methods of the <
span style="font-family: Courier New,Courier,monospace">TimeDuration</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeDuration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeDuration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeDuration">TV</a> applications):</p>
+<p>Calculate and compare time and date information using the applicable methods of the <
code>TimeDuration</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeDuration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeDuration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeDuration">TV</a> applications):</p>
<ol>
- <li> <p>To calculate the duration difference between 2 date or time events, use the <span style="font-family: Courier New,Courier,monospace">difference()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object:</p>
+ <li> <p>To calculate the duration difference between 2 date or time events, use the <code>difference()</code> method of the <code>TimeDuration</code> object:</p>
<pre class="prettyprint">
var event1, event2; /* Assume that those are correct tizen.CalendarEvent objects */
/* Calculate event1.duration - event2.duration */
else
console.log("Event1 is shorter than Event2.");
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The unit of the returned <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object is equivalent to the largest possible unit amongst the source parameter units while making sure that precision is not lost in the result. This implies that if, for example, a comparison is done between "1 hour" and "20 minutes", the result is displayed as 40 minutes, not 0.67 hour. Although the hour is a bigger unit than the minute, the result is more precise if presented in minutes.</td>
- </tr>
- </tbody>
- </table> </li>
- <li> <p> To compare 2 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> objects for equality, use the <span style="font-family: Courier New,Courier,monospace">equalsTo()</span> method: </p> <pre class="prettyprint">
+
+<div class="note">
+ <strong>Note</strong>
+ The unit of the returned <code>TimeDuration</code> object is equivalent to the largest possible unit amongst the source parameter units while making sure that precision is not lost in the result. This implies that if, for example, a comparison is done between "1 hour" and "20 minutes", the result is displayed as 40 minutes, not 0.67 hour. Although the hour is a bigger unit than the minute, the result is more precise if presented in minutes.
+</div>
+ </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 ret = d1.equalsTo(d2); /* Returns true */
-</pre> </li>
- <li> <p> To check whether 1 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object is shorter than another, use the <span style="font-family: Courier New,Courier,monospace">lessThan()</span> method: </p> <pre class="prettyprint">
+</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 ret = d1.lessThan(d2); /* Returns true */
-</pre> </li>
- <li> <p> To check whether 1 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object is longer than another, use the <span style="font-family: Courier New,Courier,monospace">greaterThan()</span> method: </p> <pre class="prettyprint">
+</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 ret = d1.greaterThan(d2); /* Returns true */
-</pre> </li>
- <li> <p>To add a predefined time to the current date, use the <span style="font-family: Courier New,Courier,monospace">addDuration()</span> method:</p> <pre class="prettyprint">
+</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");
-</pre> <p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li>
+</pre>
+<p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li>
</ol>
<h2 id="Monitoring_Changes" name="Monitoring_Changes">Retrieving Time Change Notifications</h2>
<pre class="prettyprint">
function timeChangedCallback()
{
- try
+ try
{
var current_dt = tizen.time.getCurrentDateTime();
- console.log("Clock has been set. Current date/time is " + current_dt.toLocaleString());
+ 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()
+function timezoneChangedCallback()
{
- try
+ try
{
- /* New time zone can be retrieved through tizen.time.getLocalTimezone() */
+ /*
+ 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>
+</pre></li>
</ul> </li>
<li><p>When the event handlers are defined, register them as listeners:</p>
<ul>
- <li> <p>Register the time change listener using the <
span style="font-family: Courier New,Courier,monospace">setDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications):</p>
+ <li> <p>Register the time change listener using the <
code>setDateTimeChangeListener()</code> method of the <code>TimeUtil</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications):</p>
<pre class="prettyprint">
tizen.time.setDateTimeChangeListener(timeChangedCallback);
</pre></li>
- <li> <p>Register the time zone change listener using the <span style="font-family: Courier New,Courier,monospace">setTimezoneChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+ <li> <p>Register the time zone change listener using the <code>setTimezoneChangeListener()</code> method of the <code>TimeUtil</code> interface:</p>
<pre class="prettyprint">
tizen.time.setTimezoneChangeListener(timezoneChangedCallback);
-</pre> </li>
+</pre></li>
</ul>
</li>
<li><p>To stop receiving the notifications, deregister the listeners:</p>
<ul>
- <li> <p>To deregister the time change listener, use the <span style="font-family: Courier New,Courier,monospace">unsetDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+ <li> <p>To deregister the time change listener, use the <code>unsetDateTimeChangeListener()</code> method of the <code>TimeUtil</code> interface:</p>
<pre class="prettyprint">
tizen.time.unsetDateTimeChangeListener();
</pre></li>
- <li> <p>To deregister the time zone change listener, use the <span style="font-family: Courier New,Courier,monospace">unsetTimezoneChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+ <li> <p>To deregister the time zone change listener, use the <code>unsetTimezoneChangeListener()</code> method of the <code>TimeUtil</code> interface:</p>
<pre class="prettyprint">
tizen.time.unsetTimezoneChangeListener();
-</pre> </li>
+</pre></li>
</ul>
</li>
<h2 id="set" name="set">Setting a User Agent for a Running Application</h2>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">setUserAgentString()</span> method to set a Web view user agent string:</p>
- <pre class="prettyprint">function successCallback()
+<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);
+ 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";
tizen.websetting.setUserAgentString(userAgent, successCallback);
-</pre>
+</pre>
<h2 id="delete" name="delete">Deleting Web View Cookies</h2>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">removeAllCookies()</span> method to delete all the Web view cookies:</p>
-<pre class="prettyprint">function CookiesRemovedSuccessCallback()
+<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.");
}
tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
-</pre>
+</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">Tizen API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>
<li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html">Tizen API for TV Web</a></li>
</ul>
</div></div>
<p>The main error handling features of the Tizen API include:</p>
<ul>
<li>Exception handling
-<p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#WebAPIException">TV</a> applications), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#WebAPIError">TV</a> applications).</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace">code</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface to distinguish errors, because the code of the exception object is set to <span style="font-family: Courier New,Courier,monospace">0</span> in case of new error types that are not defined in <a href="http://www.w3.org/TR/dom/#domexception" target="_blank">DOMException</a>.</td>
- </tr>
- </tbody>
- </table>
+<p>You can enable the Tizen APIs to throw errors synchronously with the <code>WebAPIException</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#WebAPIException">TV</a> applications), or return errors in the error event handlers of asynchronous methods with the <code>WebAPIError</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#WebAPIError">TV</a> applications).</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Do not use the <code>code</code> attribute of the <code>WebAPIException</code> interface to distinguish errors, because the code of the exception object is set to <code>0</code> in case of new error types that are not defined in <a href="http://www.w3.org/TR/dom/#domexception" target="_blank">DOMException</a>.
+</div>
</li>
<li>Generic event handling
- <p>You can <a href="#use_handlers">handle the results of asynchronous operations</a> with generic events. The operations can implemented using the <
span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (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) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (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) event handlers of the Tizen API.</p></li>
+ <p>You can <a href="#use_handlers">handle the results of asynchronous operations</a> with generic events. The operations can implemented using the <
code>SuccessCallback</code> (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) and <code>ErrorCallback</code> (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) event handlers of the Tizen API.</p></li>
</ul>
<h2 id="use_handlers" name="use_handlers">Using the Generic Event Handlers</h2>
<p>Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently:</p>
<ol>
- <li> <p>The generic <span style="font-family: Courier New,Courier,monospace;">onSuccess()</span> event handler of the <span style="font-family: Courier New,Courier,monospace">SuccessCallBack</span> 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 <span style="font-family: Courier New,Courier,monospace;">kill()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> 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()
+ <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");
}
-tizen.application.kill(ctxIDToKill, onSuccess);</pre> </li>
- <li> <p> The generic <span style="font-family: Courier New,Courier,monospace;">onError()</span> event handler of the <span style="font-family: Courier New,Courier,monospace">ErrorCallBack</span> 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 <span style="font-family: Courier New,Courier,monospace;">getCalendars()</span> 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)
+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);
}
tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
-</pre> </li>
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>Tizen Web guides introduce various features for Web applications. The features are supported in the Web APIs, and you can use them in creating Tizen applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The feature support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a>.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The feature support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a>.
+</div>
<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
<p>The W3C, HTML5, and supplementary features cover various functionalities you can use in your application. You can use graphics, media, storage, and location features, as well as manage communication and security. These features also enable you to create an application UI using HTML and CSS.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
+<div class="note">
+ <strong>Note</strong>
+ In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the System Information API (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).</p>
-<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></td>
- </tr>
- </tbody>
- </table>
+<p>To determine the availability of optional APIs, use the <code>tizen.systeminfo.getCapability()</code> method of the System Information API (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).</p>
+<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p>
+</div>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Localization</title>
+ <title>Localization</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li>Tizen 2.3.1 and Higher for Wearable</li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>Localization</h1>
<p>To internationalize a Tizen Web application:</p>
<ol>
<li>Create a directory for each locale.
-<p>Create a directory for each locale that has localized content under the <
span style="font-family: Courier New,Courier,monospace">locales</span> directory in package root. The locale names are defined in the W3C IANA <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">language subtag registry</a>.</p>
+<p>Create a directory for each locale that has localized content under the <
code>locales</code> directory in package root. The locale names are defined in the W3C IANA <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">language subtag registry</a>.</p>
<p>The Web Runtime loads the proper resource for the current locale according to the W3C widget using the following mark-up:</p>
<pre class="prettyprint">
└language.js
</pre></li>
<li>Create a common JS object for language strings.
-<p>Define a global JS object in the resource file. In the following example, the JS object is <span style="font-family: Courier New,Courier,monospace">LANG_JSON_DATA</span>. This object defines the key-value pairs for localized strings.</p>
+<p>Define a global JS object in the resource file. In the following example, the JS object is <code>LANG_JSON_DATA</code>. This object defines the key-value pairs for localized strings.</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">en/language.js</span>:
-
<pre class="prettyprint lang-javascript">
+<li><code>en/language.js</code>:
+<pre class="prettyprint lang-javascript">
LANG_JSON_DATA=
{
"hello": "hello"
-}</pre></li>
+}
+</pre></li>
-<li><span style="font-family: Courier New,Courier,monospace">ko/language.js</span>:
-
<pre class="prettyprint lang-javascript">
+<li><code>ko/language.js</code>:
+<pre class="prettyprint lang-javascript">
LANG_JSON_DATA=
{
"hello": "안녕"
-}</pre></li>
+}
+</pre></li>
</ul>
<p>"hello" is the key for the localized string, to be replaced by the value from the appropriate language.</p>
</li>
<li>Load language resources.
- <p>To load language resources, add the <span style="font-family: Courier New,Courier,monospace"><script></span> element containing the language resource file in your <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
- <pre class="prettyprint lang-html"><script src="language.js"></script></pre>
+ <p>To load language resources, add the <code><script></code> element containing the language resource file in your <code>index.html</code> file:</p>
+<pre class="prettyprint lang-html">
+<script src="language.js"></script>
+</pre>
<p>
- The Web Runtime loads the <span style="font-family: Courier New,Courier,monospace">language.js</span> 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"]);</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When the Web Runtime fails to find a file in a local folder, it searches for the file according to the procedure in the <a href="https://www.w3.org/TR/widgets/#folder-based-localization-0" target="_blank">W3C specification</a>.
- <p>If the Web Runtime still fails to find a file in a local folder, it retrieves the folders that match the parent subtag, and prioritizes the files in the subfolders over the files in the local folders closer to the root of the widget package. If after all this, the Web Runtime still cannot find the file, an unexpected problem can occur.</p>
- <p>To avoid problems, leave a default file in the root folder.</p>
- </td>
- </tr>
- </tbody>
- </table>
+ 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"]);
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ When the Web Runtime fails to find a file in a local folder, it searches for the file according to the procedure in the <a href="https://www.w3.org/TR/widgets/#folder-based-localization-0" target="_blank">W3C specification</a>.
+<p>If the Web Runtime still fails to find a file in a local folder, it retrieves the folders that match the parent subtag, and prioritizes the files in the subfolders over the files in the local folders closer to the root of the widget package. If after all this, the Web Runtime still cannot find the file, an unexpected problem can occur.</p>
+<p>To avoid problems, leave a default file in the root folder.</p>
+</div>
+
<p>The following table lists the acceptable locale folder names.</p>
- <table>
- <caption>Table: Locale folder names</caption>
- <tr><th align="left">Language</th><th align="left">Folder name</th></tr>
- <tr><td>Albanian</td><td><span style="font-family: Courier New,Courier,monospace">sq-al</span></td></tr>
- <tr><td>Arabic</td><td><span style="font-family: Courier New,Courier,monospace">ar-ae</span></td></tr>
- <tr><td>Armenian</td><td><span style="font-family: Courier New,Courier,monospace">hy-am</span></td></tr>
- <tr><td>Assamese</td><td><span style="font-family: Courier New,Courier,monospace">as-in</span></td></tr>
- <tr><td>Azerbaijani</td><td><span style="font-family: Courier New,Courier,monospace">az-az</span></td></tr>
- <tr><td>Basque</td><td><span style="font-family: Courier New,Courier,monospace">eu-es</span></td></tr>
- <tr><td>Bengali</td><td><span style="font-family: Courier New,Courier,monospace">bn-in</span></td></tr>
- <tr><td>Bulgarian</td><td><span style="font-family: Courier New,Courier,monospace">bg-bg</span></td></tr>
- <tr><td>Catalan</td><td><span style="font-family: Courier New,Courier,monospace">ca-es</span></td></tr>
- <tr><td>Chinese Simplified (中文 简体)</td><td><span style="font-family: Courier New,Courier,monospace">zh-cn</span></td></tr>
- <tr><td>Chinese Traditional (Hong Kong)</td><td><span style="font-family: Courier New,Courier,monospace">zh-hk</span></td></tr>
- <tr><td>Chinese Traditional (Taiwan)</td><td><span style="font-family: Courier New,Courier,monospace">zh-tw</span></td></tr>
- <tr><td>Croatian</td><td><span style="font-family: Courier New,Courier,monospace">hr-hr</span></td></tr>
- <tr><td>Czech</td><td><span style="font-family: Courier New,Courier,monospace">cs-cz</span></td></tr>
- <tr><td>Danish</td><td><span style="font-family: Courier New,Courier,monospace">da-dk</span></td></tr>
- <tr><td>Dutch</td><td><span style="font-family: Courier New,Courier,monospace">nl-nl</span></td></tr>
- <tr><td>Dutch (Belgium)</td><td><span style="font-family: Courier New,Courier,monospace">nl-be</span></td></tr>
- <tr><td>English (UK)</td><td><span style="font-family: Courier New,Courier,monospace">en-gb</span></td></tr>
- <tr><td>English (US)</td><td><span style="font-family: Courier New,Courier,monospace">en-us</span></td></tr>
- <tr><td>English (Australia)</td><td><span style="font-family: Courier New,Courier,monospace">en-au</span></td></tr>
- <tr><td>English (Canada)</td><td><span style="font-family: Courier New,Courier,monospace">en-ca</span></td></tr>
- <tr><td>English (Ireland)</td><td><span style="font-family: Courier New,Courier,monospace">en-ie</span></td></tr>
- <tr><td>English (New Zealand)</td><td><span style="font-family: Courier New,Courier,monospace">en-nz</span></td></tr>
- <tr><td>English (Philippines)</td><td><span style="font-family: Courier New,Courier,monospace">en-ph</span></td></tr>
- <tr><td>English (South Africa)</td><td><span style="font-family: Courier New,Courier,monospace">en-za</span></td></tr>
- <tr><td>Estonian</td><td><span style="font-family: Courier New,Courier,monospace">et-ee</span></td></tr>
- <tr><td>Farsi</td><td><span style="font-family: Courier New,Courier,monospace">fa-ir</span></td></tr>
- <tr><td>Filipino</td><td><span style="font-family: Courier New,Courier,monospace">tl-ph</span></td></tr>
- <tr><td>Finnish</td><td><span style="font-family: Courier New,Courier,monospace">fi-fi</span></td></tr>
- <tr><td>French (Canada)</td><td><span style="font-family: Courier New,Courier,monospace">fr-ca</span></td></tr>
- <tr><td>French (France)</td><td><span style="font-family: Courier New,Courier,monospace">fr-fr</span></td></tr>
- <tr><td>French (Belgium)</td><td><span style="font-family: Courier New,Courier,monospace">fr-be</span></td></tr>
- <tr><td>French (Switzerland)</td><td><span style="font-family: Courier New,Courier,monospace">fr-ch</span></td></tr>
- <tr><td>Galician</td><td><span style="font-family: Courier New,Courier,monospace">gl-es</span></td></tr>
- <tr><td>Georgian</td><td><span style="font-family: Courier New,Courier,monospace">ka-ge</span></td></tr>
- <tr><td>German</td><td><span style="font-family: Courier New,Courier,monospace">de-de</span></td></tr>
- <tr><td>German (Switzerland)</td><td><span style="font-family: Courier New,Courier,monospace">de-ch</span></td></tr>
- <tr><td>German (Austria)</td><td><span style="font-family: Courier New,Courier,monospace">de-at</span></td></tr>
- <tr><td>Greek</td><td><span style="font-family: Courier New,Courier,monospace">el-gr</span></td></tr>
- <tr><td>Gujarati</td><td><span style="font-family: Courier New,Courier,monospace">gu-in</span></td></tr>
- <tr><td>Hebrew</td><td><span style="font-family: Courier New,Courier,monospace">he-il</span></td></tr>
- <tr><td>Hindi</td><td><span style="font-family: Courier New,Courier,monospace">hi-in</span></td></tr>
- <tr><td>Hungarian</td><td><span style="font-family: Courier New,Courier,monospace">hu-hu</span></td></tr>
- <tr><td>Icelandic</td><td><span style="font-family: Courier New,Courier,monospace">is-is</span></td></tr>
- <tr><td>Indonesian</td><td><span style="font-family: Courier New,Courier,monospace">id-id</span></td></tr>
- <tr><td>Irish</td><td><span style="font-family: Courier New,Courier,monospace">ga-ie</span></td></tr>
- <tr><td>Italian</td><td><span style="font-family: Courier New,Courier,monospace">it-it</span></td></tr>
- <tr><td>Japanese</td><td><span style="font-family: Courier New,Courier,monospace">ja-jp</span></td></tr>
- <tr><td>Kannada</td><td><span style="font-family: Courier New,Courier,monospace">kn-ca</span></td></tr>
- <tr><td>Kazakh</td><td><span style="font-family: Courier New,Courier,monospace">kk-kz</span></td></tr>
- <tr><td>Khmer</td><td><span style="font-family: Courier New,Courier,monospace">km-kh</span></td></tr>
- <tr><td>Korean</td><td><span style="font-family: Courier New,Courier,monospace">ko-kr</span></td></tr>
- <tr><td>Lao</td><td><span style="font-family: Courier New,Courier,monospace">lo-la</span></td></tr>
- <tr><td>Latvian</td><td><span style="font-family: Courier New,Courier,monospace">lv-lv</span></td></tr>
- <tr><td>Lithuanian</td><td><span style="font-family: Courier New,Courier,monospace">lt-lt</span></td></tr>
- <tr><td>Macedonian</td><td><span style="font-family: Courier New,Courier,monospace">mk-mk</span></td></tr>
- <tr><td>Malay</td><td><span style="font-family: Courier New,Courier,monospace">ms-mw</span></td></tr>
- <tr><td>Malayalam</td><td><span style="font-family: Courier New,Courier,monospace">ml-my</span></td></tr>
- <tr><td>Marathi</td><td><span style="font-family: Courier New,Courier,monospace">mr-in</span></td></tr>
- <tr><td>Myanmar</td><td><span style="font-family: Courier New,Courier,monospace">my-mm</span></td></tr>
- <tr><td>Nepali</td><td><span style="font-family: Courier New,Courier,monospace">ne-np</span></td></tr>
- <tr><td>Norwegian</td><td><span style="font-family: Courier New,Courier,monospace">nb-no</span></td></tr>
- <tr><td>Odia</td><td><span style="font-family: Courier New,Courier,monospace">or-in</span></td></tr>
- <tr><td>Polish</td><td><span style="font-family: Courier New,Courier,monospace">pl-pl</span></td></tr>
- <tr><td>Portuguese (Brazil)</td><td><span style="font-family: Courier New,Courier,monospace">pt-br</span></td></tr>
- <tr><td>Portuguese (Portugal)</td><td><span style="font-family: Courier New,Courier,monospace">pt-pt</span></td></tr>
- <tr><td>Punjabi</td><td><span style="font-family: Courier New,Courier,monospace">pa-pk</span></td></tr>
- <tr><td>Romanian</td><td><span style="font-family: Courier New,Courier,monospace">ro-ro</span></td></tr>
- <tr><td>Russian</td><td><span style="font-family: Courier New,Courier,monospace">ru-ru</span></td></tr>
- <tr><td>Serbian</td><td><span style="font-family: Courier New,Courier,monospace">sr-rs</span></td></tr>
- <tr><td>Sinhala</td><td><span style="font-family: Courier New,Courier,monospace">si-lk</span></td></tr>
- <tr><td>Slovakian</td><td><span style="font-family: Courier New,Courier,monospace">sk-sk</span></td></tr>
- <tr><td>Slovenian</td><td><span style="font-family: Courier New,Courier,monospace">sl-si</span></td></tr>
- <tr><td>Spanish (Spain)</td><td><span style="font-family: Courier New,Courier,monospace">es-es</span></td></tr>
- <tr><td>Spanish (Latin)</td><td><span style="font-family: Courier New,Courier,monospace">es-us</span></td></tr>
- <tr><td>Swedish</td><td><span style="font-family: Courier New,Courier,monospace">sv-se</span></td></tr>
- <tr><td>Tamil</td><td><span style="font-family: Courier New,Courier,monospace">ta-in</span></td></tr>
- <tr><td>Telugu</td><td><span style="font-family: Courier New,Courier,monospace">te-in</span></td></tr>
- <tr><td>Thai</td><td><span style="font-family: Courier New,Courier,monospace">th-th</span></td></tr>
- <tr><td>Turkish</td><td><span style="font-family: Courier New,Courier,monospace">tr-tr</span></td></tr>
- <tr><td>Ukrainian</td><td><span style="font-family: Courier New,Courier,monospace">uk-ua</span></td></tr>
- <tr><td>Urdu</td><td><span style="font-family: Courier New,Courier,monospace">ur-pk</span></td></tr>
- <tr><td>Uzbekistan</td><td><span style="font-family: Courier New,Courier,monospace">uz-uz</span></td></tr>
- <tr><td>Vietnamese</td><td><span style="font-family: Courier New,Courier,monospace">vi-vn</span></td></tr>
- </table></li>
+ <p align="center" class="Table"><strong>Table: Locale folder names</strong></p>
+ <table>
+ <tbody>
+ <tr><th align="left">Language</th><th align="left">Folder name</th></tr>
+ <tr><td>Albanian</td><td><code>sq-al</code></td></tr>
+ <tr><td>Arabic</td><td><code>ar-ae</code></td></tr>
+ <tr><td>Armenian</td><td><code>hy-am</code></td></tr>
+ <tr><td>Assamese</td><td><code>as-in</code></td></tr>
+ <tr><td>Azerbaijani</td><td><code>az-az</code></td></tr>
+ <tr><td>Basque</td><td><code>eu-es</code></td></tr>
+ <tr><td>Bengali</td><td><code>bn-in</code></td></tr>
+ <tr><td>Bulgarian</td><td><code>bg-bg</code></td></tr>
+ <tr><td>Catalan</td><td><code>ca-es</code></td></tr>
+ <tr><td>Chinese Simplified (中文 简体)</td><td><code>zh-cn</code></td></tr>
+ <tr><td>Chinese Traditional (Hong Kong)</td><td><code>zh-hk</code></td></tr>
+ <tr><td>Chinese Traditional (Taiwan)</td><td><code>zh-tw</code></td></tr>
+ <tr><td>Croatian</td><td><code>hr-hr</code></td></tr>
+ <tr><td>Czech</td><td><code>cs-cz</code></td></tr>
+ <tr><td>Danish</td><td><code>da-dk</code></td></tr>
+ <tr><td>Dutch</td><td><code>nl-nl</code></td></tr>
+ <tr><td>Dutch (Belgium)</td><td><code>nl-be</code></td></tr>
+ <tr><td>English (UK)</td><td><code>en-gb</code></td></tr>
+ <tr><td>English (US)</td><td><code>en-us</code></td></tr>
+ <tr><td>English (Australia)</td><td><code>en-au</code></td></tr>
+ <tr><td>English (Canada)</td><td><code>en-ca</code></td></tr>
+ <tr><td>English (Ireland)</td><td><code>en-ie</code></td></tr>
+ <tr><td>English (New Zealand)</td><td><code>en-nz</code></td></tr>
+ <tr><td>English (Philippines)</td><td><code>en-ph</code></td></tr>
+ <tr><td>English (South Africa)</td><td><code>en-za</code></td></tr>
+ <tr><td>Estonian</td><td><code>et-ee</code></td></tr>
+ <tr><td>Farsi</td><td><code>fa-ir</code></td></tr>
+ <tr><td>Filipino</td><td><code>tl-ph</code></td></tr>
+ <tr><td>Finnish</td><td><code>fi-fi</code></td></tr>
+ <tr><td>French (Canada)</td><td><code>fr-ca</code></td></tr>
+ <tr><td>French (France)</td><td><code>fr-fr</code></td></tr>
+ <tr><td>French (Belgium)</td><td><code>fr-be</code></td></tr>
+ <tr><td>French (Switzerland)</td><td><code>fr-ch</code></td></tr>
+ <tr><td>Galician</td><td><code>gl-es</code></td></tr>
+ <tr><td>Georgian</td><td><code>ka-ge</code></td></tr>
+ <tr><td>German</td><td><code>de-de</code></td></tr>
+ <tr><td>German (Switzerland)</td><td><code>de-ch</code></td></tr>
+ <tr><td>German (Austria)</td><td><code>de-at</code></td></tr>
+ <tr><td>Greek</td><td><code>el-gr</code></td></tr>
+ <tr><td>Gujarati</td><td><code>gu-in</code></td></tr>
+ <tr><td>Hebrew</td><td><code>he-il</code></td></tr>
+ <tr><td>Hindi</td><td><code>hi-in</code></td></tr>
+ <tr><td>Hungarian</td><td><code>hu-hu</code></td></tr>
+ <tr><td>Icelandic</td><td><code>is-is</code></td></tr>
+ <tr><td>Indonesian</td><td><code>id-id</code></td></tr>
+ <tr><td>Irish</td><td><code>ga-ie</code></td></tr>
+ <tr><td>Italian</td><td><code>it-it</code></td></tr>
+ <tr><td>Japanese</td><td><code>ja-jp</code></td></tr>
+ <tr><td>Kannada</td><td><code>kn-ca</code></td></tr>
+ <tr><td>Kazakh</td><td><code>kk-kz</code></td></tr>
+ <tr><td>Khmer</td><td><code>km-kh</code></td></tr>
+ <tr><td>Korean</td><td><code>ko-kr</code></td></tr>
+ <tr><td>Lao</td><td><code>lo-la</code></td></tr>
+ <tr><td>Latvian</td><td><code>lv-lv</code></td></tr>
+ <tr><td>Lithuanian</td><td><code>lt-lt</code></td></tr>
+ <tr><td>Macedonian</td><td><code>mk-mk</code></td></tr>
+ <tr><td>Malay</td><td><code>ms-mw</code></td></tr>
+ <tr><td>Malayalam</td><td><code>ml-my</code></td></tr>
+ <tr><td>Marathi</td><td><code>mr-in</code></td></tr>
+ <tr><td>Myanmar</td><td><code>my-mm</code></td></tr>
+ <tr><td>Nepali</td><td><code>ne-np</code></td></tr>
+ <tr><td>Norwegian</td><td><code>nb-no</code></td></tr>
+ <tr><td>Odia</td><td><code>or-in</code></td></tr>
+ <tr><td>Polish</td><td><code>pl-pl</code></td></tr>
+ <tr><td>Portuguese (Brazil)</td><td><code>pt-br</code></td></tr>
+ <tr><td>Portuguese (Portugal)</td><td><code>pt-pt</code></td></tr>
+ <tr><td>Punjabi</td><td><code>pa-pk</code></td></tr>
+ <tr><td>Romanian</td><td><code>ro-ro</code></td></tr>
+ <tr><td>Russian</td><td><code>ru-ru</code></td></tr>
+ <tr><td>Serbian</td><td><code>sr-rs</code></td></tr>
+ <tr><td>Sinhala</td><td><code>si-lk</code></td></tr>
+ <tr><td>Slovakian</td><td><code>sk-sk</code></td></tr>
+ <tr><td>Slovenian</td><td><code>sl-si</code></td></tr>
+ <tr><td>Spanish (Spain)</td><td><code>es-es</code></td></tr>
+ <tr><td>Spanish (Latin)</td><td><code>es-us</code></td></tr>
+ <tr><td>Swedish</td><td><code>sv-se</code></td></tr>
+ <tr><td>Tamil</td><td><code>ta-in</code></td></tr>
+ <tr><td>Telugu</td><td><code>te-in</code></td></tr>
+ <tr><td>Thai</td><td><code>th-th</code></td></tr>
+ <tr><td>Turkish</td><td><code>tr-tr</code></td></tr>
+ <tr><td>Ukrainian</td><td><code>uk-ua</code></td></tr>
+ <tr><td>Urdu</td><td><code>ur-pk</code></td></tr>
+ <tr><td>Uzbekistan</td><td><code>uz-uz</code></td></tr>
+ <tr><td>Vietnamese</td><td><code>vi-vn</code></td></tr>
+ </tbody> </table></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Audio Management</h1>
-
+
<p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the Sound API include:</p>
<ul>
- <li>Managing the volume level and sound mode <p>You can <a href="#manage">set the volume level of a specific sound type</a> with the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method. You can also <a href="#manage">retrieve the current sound mode</a> with the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method.</p></li>
- <li>Getting a list of the current sound devices in a specified state<p>You can <a href="#manage_sound_device">retrieve a list of the current sound devices which are in a specified state</a> by using the <span style="font-family: Courier New,Courier,monospace">getConnectedDeviceList()</span> or <span style="font-family: Courier New,Courier,monospace">getActivatedDeviceList()</span> methods.</p></li>
+ <li>Managing the volume level and sound mode <p>You can <a href="#manage">set the volume level of a specific sound type</a> with the <code>setVolume()</code> method. You can also <a href="#manage">retrieve the current sound mode</a> with the <code>getSoundMode()</code> method.</p></li>
+ <li>Getting a list of the current sound devices in a specified state<p>You can <a href="#manage_sound_device">retrieve a list of the current sound devices which are in a specified state</a> by using the <code>getConnectedDeviceList()</code> or <code>getActivatedDeviceList()</code> methods.</p></li>
<li>Monitoring changes in the volume level and sound mode<p>You can <a href="#monitor">monitor changes in the volume level and sound mode</a> by registering appropriate listeners.</p> </li>
- <li>Monitoring changes in the sound device state<p>You can <a href="#monitor_sound_device">monitor changes in the state of sound devices</a> with the <span style="font-family: Courier New,Courier,monospace">addDeviceStateChangeListener()</span> method.</p></li>
+ <li>Monitoring changes in the sound device state<p>You can <a href="#monitor_sound_device">monitor changes in the state of sound devices</a> with the <code>addDeviceStateChangeListener()</code> method.</p></li>
</ul>
-
-
+
+
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Sound API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Sound API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/volume.set"/>
</pre>
<p>Managing volume levels and sound modes is a basic multimedia management skill:</p>
<ol>
-<li>Get the current volume level using the <span style="font-family: Courier New,Courier,monospace">getVolume()</span> method:
+<li>Get the current volume level using the <code>getVolume()</code> method:
<pre class="prettyprint">
var vol = tizen.sound.getVolume("RINGTONE");
</pre>
</li>
-<li>Set a new volume level using the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method.
+<li>Set a new volume level using the <code>setVolume()</code> method.
<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);</pre>
+tizen.sound.setVolume("RINGTONE", vol + 0.1);
+</pre>
</li>
-<li>Get the current sound mode using the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method:
+<li>Get the current sound mode using the <code>getSoundMode()</code> method:
<pre class="prettyprint">
var mode = tizen.sound.getSoundMode();
-console.log("Sound Mode is " + mode);</pre>
+console.log("Sound Mode is " + mode);
+</pre>
</li>
</ol>
-
+
<h2 id="monitor" name="monitor">Monitoring Volume and Sound Mode Changes</h2>
<p>Managing volume and sound mode changes is a basic multimedia management skill:</p>
tizen.sound.unsetVolumeChangeListener();
}
-tizen.sound.setVolumeChangeListener(onsuccessCB);</pre>
+tizen.sound.setVolumeChangeListener(onsuccessCB);
+</pre>
</li>
<li>Register the sound mode change listener to track changes in the sound mode:
<p>Learning how to list connected and activated sound devices allows you to manage sound devices more effectively:</p>
<ol>
-<li>Get a list of the current sound devices in a connected state using the <span style="font-family: Courier New,Courier,monospace">getConnectedDeviceList()</span> method:
+<li>Get a list of the current sound devices in a connected state using the <code>getConnectedDeviceList()</code> method:
<pre class="prettyprint">
var infoArr = tizen.sound.getConnectedDeviceList();
-for (var i = 0; i < infoArr.length; i++)
+for (var i = 0; i < infoArr.length; i++)
{
console.log(infoArr[i].device);
}
</pre>
</li>
-<li>Get a list of the current sound devices in an activated state using the <span style="font-family: Courier New,Courier,monospace">getActivatedDeviceList()</span> method:
+<li>Get a list of the current sound devices in an activated state using the <code>getActivatedDeviceList()</code> method:
<pre class="prettyprint">
var infoArr = tizen.sound.getActivatedDeviceList();
-for (var i = 0; i < infoArr.length; i++)
+for (var i = 0; i < infoArr.length; i++)
{
console.log(infoArr[i].device);
}
<li>Add a sound device state change listener to track changes in the sound device state:
<pre class="prettyprint">
-function onchangedCB(info)
+function onchangedCB(info)
{
- if (info.isConnected)
+ if (info.isConnected)
{
console.log(info.device + " is connected");
- }
- else
+ }
+ else
{
console.log(info.device + " is not connected");
}
- if (info.isActivated)
+ if (info.isActivated)
{
console.log(info.device + " is activated");
- }
- else
+ }
+ else
{
console.log(info.device + " is not activated");
}
<h1>Camera</h1>
-
+
<p>You can use the camera features in the Tizen wearable Web applications.</p>
<p>This feature is supported in wearable applications only.</p>
<p>To take advantage of the camera features, you must learn to access the camera device:</p>
<ol>
-<li>Access the camera with the stream that you can receive from the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.
+<li>Access the camera with the stream that you can receive from the <code>getUserMedia()</code> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.
<pre class="prettyprint">
var stream;
-navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,
+navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,
noStreamCallback);
-function gotStream(rStream)
+function gotStream(rStream)
{
stream = rStream;
}
</pre>
</li>
-<li>Use the received stream as the first parameter for the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, which returns the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object. The <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method is a member object of <span style="font-family: Courier New,Courier,monospace">tizCamera</span> from the navigator.
+<li>Use the received stream as the first parameter for the <code>createCameraControl()</code> method, which returns the <code>cameraControl</code> object. The <code>createCameraControl()</code> method is a member object of <code>tizCamera</code> from the navigator.
<pre class="prettyprint">
-navigator.tizCamera.createCameraControl(stream, gotCameraCallback, noCameraCallback);
+navigator.tizCamera.createCameraControl(stream, gotCameraCallback, noCameraCallback);
</pre>
</li>
-<li>You can use the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> in the success event handler of the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, where it is provided as a parameter:
+<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)
</pre>
-</li>
- </ol>
+</li>
+ </ol>
<h2 id="manage" name="manage">Managing the Camera</h2>
<p>To take advantage of the camera features, you must learn to manage the camera:</p>
- <ul>
- <li>You can record videos with the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object.
- <p>Use the <span style="font-family: Courier New,Courier,monospace">start()</span> to start the recording, and the <span style="font-family: Courier New,Courier,monospace">stop()</span> method to stop the recording:</p>
-<pre class="prettyprint">
+ <ul>
+ <li>You can record videos with the <code>cameraControl</code> object.
+ <p>Use the <code>start()</code> to start the recording, and the <code>stop()</code> method to stop the recording:</p>
+<pre class="prettyprint">
cameraControl.recorder.start(recordingStartSuccess, recordingStartError);
-cameraControl.recorder.stop(recordingStopSuccess, recordingStopError);
+cameraControl.recorder.stop(recordingStopSuccess, recordingStopError);
</pre></li>
-
- <li>Use the <span style="font-family: Courier New,Courier,monospace">takePicture()</span> method to capture an image and write it in a file:
-<pre class="prettyprint">
-cameraControl.image.takePicture(takePictureSuccess, takePictureError);
+
+ <li>Use the <code>takePicture()</code> method to capture an image and write it in a file:
+<pre class="prettyprint">
+cameraControl.image.takePicture(takePictureSuccess, takePictureError);
</pre></li>
-
- <li>Use the <span style="font-family: Courier New,Courier,monospace">applySettings()</span> method to modify the camera settings (to set the file name of the recorded video or captured image):
-<pre class="prettyprint">
-var recordingSetting =
+
+ <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";
-}
-cameraControl.recorder.applySettings(recordingSetting,
- recorderSettingSuccessCallback,
+}
+cameraControl.recorder.applySettings(recordingSetting,
+ recorderSettingSuccessCallback,
recorderSettingErrorCallback);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If a setting cannot be set, the error callback is called to resolve the issue.</td>
- </tr>
- </tbody>
- </table></li>
+
+<div class="note">
+ <strong>Note</strong>
+ If a setting cannot be set, the error callback is called to resolve the issue.
+</div>
+ </li>
</ul>
<h2 id="deallocate" name="deallocate">Deallocating the Camera Preview Stream</h2>
<p>To take advantage of the camera features, you must learn to deallocate the camera preview stream resources when the application is invisible, so that the preview stream can be assigned to another application:</p>
<ol>
-<li>Access the camera preview stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method:
-<pre class="prettyprint">
-function initCameraPreview()
+<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 onPreviewStream(stream)
+function onPreviewStream(stream)
{
cameraStream = stream;
-}</pre>
+}
+</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">onVisibilityChange()</span> event listener to detect changes in the visibility state of the application. When the application becomes invisible, the <span style="font-family: Courier New,Courier,monospace">cameraStream.stop()</span> 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()
+<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')
+ if (document.visibilityState !== 'visible')
{
cameraStream.stop();
- }
- else
+ }
+ else
{
initCameraPreview();
}
}
</pre>
</li>
-</ol>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<h1>JPEG File EXIF Information</h1>
-<p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <span style="font-family: Courier New,Courier,monospace">.jpg</span> extension).</p>
+<p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <code>.jpg</code> extension).</p>
<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<p>Learning how to retrieve EXIF data from JPEG files is a useful content management skill:</p>
<ol>
-<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 <span style="font-family: Courier New,Courier,monospace">file:///opt/usr/media/Images/tizen.jpg</span>). The <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> and <span style="font-family: Courier New,Courier,monospace">toURI()</span> methods can be used to convert a virtual path to a URI.</p>
+<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 = "";
+<pre class="prettyprint">
+var fileURI = "";
function resolveSuccess(file)
{
fileURI = file.toURI();
function resolveFail(error)
{
- console.log("resolve() error occurred: " + error.name + " with message: " + error.message);
+ console.log("resolve() error occurred: " + error.name
+ + " with message: " + error.message);
}
-tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);</pre></li>
+tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+</pre></li>
-<li><p>With a valid <
span style="font-family: Courier New,Courier,monospace">File</span> object, use the <span style="font-family: Courier New,Courier,monospace">getExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> 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>
+<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)
+<pre class="prettyprint">
+function onSuccess(exifInfo)
{
console.log("Successfully got EXIF information object");
}
console.log("Error occurred: " + error.name + " with message:" + error.message);
}
-tizen.exif.getExifInfo(fileURI, onSuccess, onError);</pre>
-<p>With a valid <span style="font-family: Courier New,Courier,monospace">exifInfo</span> object, you can access various <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> attributes (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications), such as width, height, orientation, and flash.</p>
+tizen.exif.getExifInfo(fileURI, onSuccess, onError);
+</pre>
+<p>With a valid <code>exifInfo</code> object, you can access various <code>ExifInformation</code> attributes (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications), such as width, height, orientation, and flash.</p>
</li>
<li>To retrieve an EXIF thumbnail of the image:
<ol type="a"><li>Resolve the input JPEG file:
-<pre class="prettyprint">var fileURI = "";
+<pre class="prettyprint">
+var fileURI = "";
-tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail); </pre></li>
+tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">getThumbnail()</span> method to retrieve the thumbnail:
+<li>Use the <code>getThumbnail()</code> method to retrieve the thumbnail:
-<pre class="prettyprint">function onSuccess(thumbData)
+<pre class="prettyprint">
+function onSuccess(thumbData)
{
console.log("Got thumbnail data from EXIF stored in JPEG file");
if (thumbData)
function onError(error)
{
- console.log("Error occurred: " + error.name + " with message: " + error.message);
+ 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);
-} </pre></li></ol></li>
+}
+</pre></li></ol></li>
</ol>
-
+
<h2 id="add" name="add">Adding EXIF Data</h2>
<p>Learning how to add EXIF data to JPEG files is a useful content management skill:</p>
<ol>
-<li><p>Create a new <
span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications):</p>
+<li><p>Create a new <
code>ExifInformation</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications):</p>
-<pre class="prettyprint">var myNewExif = new tizen.ExifInformation();
+<pre class="prettyprint">
+var myNewExif = new tizen.ExifInformation();
myNewExif.userComment = "Photo taken on Charles Bridge in Prague";
-myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);</pre>
+myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);
+</pre>
</li>
<li><p>Resolve the virtual path to the output JPEG file and get the URI:</p>
-<pre class="prettyprint">var fileNoExifURI = "";
+<pre class="prettyprint">
+var fileNoExifURI = "";
function resolveSuccess(file)
{
fileNoExifURI = file.toURI();
console.log("Error occurred: " + error.name + " with message: " + error.message);
}
-tizen.filesystem.resolve("images/image_without_exif.jpg", resolveSuccess, resolveFail);</pre>
+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 <
span style="font-family: Courier New,Courier,monospace">myNewExif</span> object and call the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> 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>
+<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()
+<pre class="prettyprint">
+function onSaveSuccess()
{
console.log("Successfully saved EXIF information to JPEG file");
}
}
myNewExif.uri = fileNoExifURI;
-tizen.exif.saveExifInfo(myNewExif, onSaveSuccess, onSaveError);</pre>
+tizen.exif.saveExifInfo(myNewExif, onSaveSuccess, onSaveError);
+</pre>
</li>
</ol>
-
+
<h2 id="update" name="update">Updating the EXIF Data</h2>
<p>Learning how to update EXIF data in JPEG files is a useful content management skill:</p>
<ol>
-<li><p>To update the EXIF data, load the <
span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications) from the file and change the values of the object properties.</p>
-<p>You can remove information from the file by setting the property to <span style="font-family: Courier New,Courier,monospace">null</span>.</p>
+<li><p>To update the EXIF data, load the <
code>ExifInformation</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications) from the file and change the values of the object properties.</p>
+<p>You can remove information from the file by setting the property to <code>null</code>.</p>
-<pre class="prettyprint">function getSuccess(exifInfo)
+<pre class="prettyprint">
+function getSuccess(exifInfo)
{
exifInfo.orientation = "FLIP_HORIZONTAL";
exifInfo.userComment = "Great times!";
}
tizen.filesystem.resolve("images/photo.jpg", function(file)
-{
- tizen.exif.getExifInfo(file.toURI(), getSuccess);
-});</pre></li>
+ {
+ tizen.exif.getExifInfo(file.toURI(), getSuccess);
+ });
+</pre></li>
-<li>After updating the property values, use the <
span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> 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:
+<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)
+<pre class="prettyprint">
+function saveSuccess(exifInfo)
{
console.log("new EXIF saved");
}
-tizen.exif.saveExifInfo(exifInfo, saveSuccess);</pre></li>
+tizen.exif.saveExifInfo(exifInfo, saveSuccess);
+</pre></li>
</ol>
<p>Learning how to copy EXIF data between JPEG files is a useful content management skill:</p>
<ol>
-<li><p>Get the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications) and resolve the output file, and then change the <span style="font-family: Courier New,Courier,monospace">sourceExifInfo.uri</span> attribute to point to the output JPEG file:</p>
+<li><p>Get the <code>ExifInformation</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications) and resolve the output file, and then change the <code>sourceExifInfo.uri</code> attribute to point to the output JPEG file:</p>
-<pre class="prettyprint">var sourceExifInfo = null;
+<pre class="prettyprint">
+var sourceExifInfo = null;
function resolveOutSuccess(outFile)
{
{
console.log("Successfully got EXIF information object");
sourceExifInfo = exifInfo;
- tizen.filesystem.resolve("images/image_without_exif.jpg", resolveOutSuccess, resolveOutFail);
+ tizen.filesystem.resolve("images/image_without_exif.jpg", resolveOutSuccess,
+ resolveOutFail);
}
-tizen.exif.getExifInfo(fileURI, onSuccess);</pre></li>
+tizen.exif.getExifInfo(fileURI, onSuccess);
+</pre></li>
-<li>Use the <
span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> 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:
+<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()
<p>The main features of the Media Controller API include:</p>
<ul>
<li>Setting up the client and server pair
- <p>You can <a href="#create">set up the client and server pair</a> by creating a new server using the <span style="font-family: Courier New,Courier,monospace">createServer()</span> method. On the client side, you can get a client and find active servers using the <span style="font-family: Courier New,Courier,monospace">getClient()</span> and <span style="font-family: Courier New,Courier,monospace">findServers()</span> methods.</p>
+ <p>You can <a href="#create">set up the client and server pair</a> by creating a new server using the <code>createServer()</code> method. On the client side, you can get a client and find active servers using the <code>getClient()</code> and <code>findServers()</code> methods.</p>
</li>
<li>Managing requests
<p>You can <a href="#request">send a request</a> from the client to the server to modify various playback attributes. In the server, you can set up a listener to react to the client request and perform the requested task.</p></li>
<li>Receiving notifications from the server
- <p>You can <a href="#noti">receive notifications on changed made by the server</a> by registering a listener with the <span style="font-family: Courier New,Courier,monospace">addPlaybackInfoChangeListener()</span> method.</p> </li>
+ <p>You can <a href="#noti">receive notifications on changed made by the server</a> by registering a listener with the <code>addPlaybackInfoChangeListener()</code> method.</p> </li>
<li>Sending custom commands
- <p>You can <a href="#send_command">use the client to send commands</a> with the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method.</p>
- <p>To <a href="#receive_command">receive and handle incoming commands</a> in the server, use the <span style="font-family: Courier New,Courier,monospace">addCommandListener()</span> method.</p>
+ <p>You can <a href="#send_command">use the client to send commands</a> with the <code>sendCommand()</code> method.</p>
+ <p>To <a href="#receive_command">receive and handle incoming commands</a> in the server, use the <code>addCommandListener()</code> method.</p>
</li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Media Controller API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Media Controller API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/mediacontroller.client"/>
<tizen:privilege name="http://tizen.org/privilege/mediacontroller.server"/>
<p>To manage the media controller features in your application, you must learn to set up the client and server pair:</p>
<ol>
-<li>Create a media controller server using the <span style="font-family: Courier New,Courier,monospace">createServer()</span> method:
+<li>Create a media controller server using the <code>createServer()</code> method:
<pre class="prettyprint">
var mcServer = tizen.mediacontroller.createServer();
</pre>
</li>
-<li>Get the client using the <span style="font-family: Courier New,Courier,monospace">getClient()</span> method:
+<li>Get the client using the <code>getClient()</code> method:
<pre class="prettyprint">
var mcClient = tizen.mediaController.getClient();
</pre>
</li>
-<li>Define a success (and optionally error) event handler by implementing the <
span style="font-family: Courier New,Courier,monospace">MediaControllerServerInfoArraySuccessCallback</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">wearable</a> applications):
+<li>Define a success (and optionally error) event handler by implementing the <
code>MediaControllerServerInfoArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">wearable</a> applications):
<pre class="prettyprint">
var mcServerInfo;
-function findSuccessCallback(servers)
+function findSuccessCallback(servers)
{
console.log("Found " + servers.length + " servers");
- if (servers.length > 0)
+ if (servers.length > 0)
{
mcServerInfo = servers[0];
}
}
-function findErrorCallback(e)
+function findErrorCallback(e)
{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>To search for all activated media controller servers, use the <
span style="font-family: Courier New,Courier,monospace">findServers()</span> method of the <span style="font-family: Courier New,Courier,monospace">MediaControllerClient</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerClient">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerClient">wearable</a> applications):
+<li>To search for all activated media controller servers, use the <
code>findServers()</code> method of the <code>MediaControllerClient</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerClient">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerClient">wearable</a> applications):
<pre class="prettyprint">
-mcClient.findServers(findSuccessCallback, findErrorCallback);</pre>
+mcClient.findServers(findSuccessCallback, findErrorCallback);
+</pre>
</li>
</ol>
<p>To manage the media controller features in your application, you must learn to handle requests from the client to the server:</p>
<ol>
-<li>Create a <
span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">wearable</a> applications) to define listeners for getting the requests from a client.
+<li>Create a <
code>MediaControllerChangeRequestPlaybackInfoCallback</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">wearable</a> applications) to define listeners for getting the requests from a client.
-<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 <span style="font-family: Courier New,Courier,monospace">onplaybackstaterequest</span> listener must use the <span style="font-family: Courier New,Courier,monospace">updatePlaybackState()</span> method to update the playback state.</p>
+<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 =
+var requestPlaybackInfoCb =
{
- onplaybackstaterequest: function(state)
+ onplaybackstaterequest: function(state)
{
console.log('Request to change the playback state to: ' + state);
mcServer.updatePlaybackState(state);
},
- onplaybackpositionrequest: function(position)
+ onplaybackpositionrequest: function(position)
{
console.log('Request to change the playback position to: ' + position);
mcServer.updatePlaybackPosition(position);
},
- onshufflemoderequest: function(mode)
+ onshufflemoderequest: function(mode)
{
- console.log('Request to change the playback shuffle mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ console.log('Request to change the playback shuffle mode to: '
+ + (mode ? 'TRUE' : 'FALSE'));
mcServer.updateShuffleMode(mode);
},
- onrepeatmoderequest: function(mode)
+ onrepeatmoderequest: function(mode)
{
- console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ console.log('Request to change the playback repeat mode to: '
+ + (mode ? 'TRUE' : 'FALSE'));
mcServer.updateRepeatMode(mode);
}
};
</pre>
</li>
-<li>Add the listeners defined in the <span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object to the server:
+<li>Add the listeners defined in the <code>MediaControllerChangeRequestPlaybackInfoCallback</code> object to the server:
<pre class="prettyprint">
var watchId = mcServer.addChangeRequestPlaybackInfoListener(requestPlaybackInfoCb);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">watchId</span> variable stores the value, which can be used in the future to remove the listeners from the server using the <span style="font-family: Courier New,Courier,monospace">removeChangeRequestPlaybackInfoListener()</span> method.</p>
+<p>The <code>watchId</code> variable stores the value, which can be used in the future to remove the listeners from the server using the <code>removeChangeRequestPlaybackInfoListener()</code> method.</p>
</li>
<li>At the client side, before sending a request, define optional success and error callbacks:
<pre class="prettyprint">
-function successCallback()
+function successCallback()
{
console.log("Playback has been paused.");
}
-function errorCallback(e)
+function errorCallback(e)
{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>You can send a request from the client using the <
span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span>, <span style="font-family: Courier New,Courier,monospace">sendPlaybackPosition()</span>, <span style="font-family: Courier New,Courier,monospace">endShuffleMode()</span>, or <span style="font-family: Courier New,Courier,monospace">sendRepeatMode()</span> method of the <span style="font-family: Courier New,Courier,monospace">MediaControllerServerInfo</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfo">wearable</a> applications).
-<p>In the following example, send a request for the changing the playback state to paused using the <span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span> method:
+<li>You can send a request from the client using the <
code>sendPlaybackState()</code>, <code>sendPlaybackPosition()</code>, <code>endShuffleMode()</code>, or <code>sendRepeatMode()</code> method of the <code>MediaControllerServerInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfo">wearable</a> applications).
+<p>In the following example, send a request for the changing the playback state to paused using the <code>sendPlaybackState()</code> method:
</p>
<pre class="prettyprint">
</pre>
</li>
-<li>Define the event handlers for different notifications by implementing the <
span style="font-family: Courier New,Courier,monospace">MediaControllerPlaybackInfoChangeCallback</span> 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):
+<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 =
+var playbackListener =
{
- onplaybackchanged: function(state, position)
+ onplaybackchanged: function(state, position)
{
console.log("Current playback state: " + state);
console.log("Current playback position: " + position);
},
- onshufflemodechanged: function(mode)
+ onshufflemodechanged: function(mode)
{
console.log("Shuffle mode changed to: " + mode);
},
- onrepeatmodechanged: function(mode)
+ onrepeatmodechanged: function(mode)
{
console.log("Repeat mode changed to: " + mode);
},
- onmetadatachanged: function(metadata)
+ onmetadatachanged: function(metadata)
{
console.log("Playback metadata changed: " + JSON.stringify(metadata));
}
</pre>
</li>
-<li>To stop receiving notifications, use the <span style="font-family: Courier New,Courier,monospace">removePlaybackInfoChangeListener()</span> method:
+<li>To stop receiving notifications, use the <code>removePlaybackInfoChangeListener()</code> method:
<pre class="prettyprint">
mcServerInfo.removePlaybackInfoChangeListener(watcherId);
<ol><li>Define your custom command:
<pre class="prettyprint">
-var exampleCustomCommandData =
+var exampleCustomCommandData =
{
myFilter: "rock"
};
</pre>
</li>
-<li>Define a success (and optionally error) callback implementing the <
span style="font-family: Courier New,Courier,monospace">MediaControllerSendCommandSuccessCallback</span> 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):
+<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)
+function sendCommandSuccessCallback(response)
{
console.log("Command executed with result: " + JSON.stringify(response));
}
-function sendCommandErrorCallback(e)
+function sendCommandErrorCallback(e)
{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>Send the command to the server using the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method:
+<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 id="receive_command">On the server side:
<ol>
-<li>Create the <
span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> 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:
+<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)
+var commandReceiveListener = function(client, command, data)
{
- console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
+ console.log('command: ' + command + ' client: ' + client
+ + ' data: ' + JSON.stringify(data));
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 <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method that it used to send the command.</p>
+<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>
-<li>Add the listener defined in the <span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> object to the server:
+<li>Add the listener defined in the <code>MediaControllerReceiveCommandCallback</code> object to the server:
<pre class="prettyprint">
var watcherId = mcServer.addCommandListener(commandReceiveListener);
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">watcherId</span> variable stores the value, which can be used in the future to remove the listener from the server using the <span style="font-family: Courier New,Courier,monospace">removeCommandListener()</span> method.</p>
+<p>The <code>watcherId</code> variable stores the value, which can be used in the future to remove the listener from the server using the <code>removeCommandListener()</code> method.</p>
</li>
</ol></li></ol>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Media and Camera</title>
+ <title>Media and Camera</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<p>You can control the device camera by using the camera options. You can capture images and record video.</p></li>
</ul>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html">Media Key API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Key Events</h1>
-
+
<p>Tizen enables you to handle media keys in your application. The media keys are used to <a href="#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-
+
<p>The main features of the Media Key API include:</p>
<ul>
<li>Registering a listener<p>You can register and deregister a listener for the media key state changes.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can register only 1 media key state change listener for your application. If you attempt to register a second listener, the first listener is unset and replaced with the new one.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ You can register only 1 media key state change listener for your application. If you attempt to register a second listener, the first listener is unset and replaced with the new one.
+</div>
</li>
<li>Handling state changes<p>With the registered listener, you can monitor the media keys and react to their state changes, when the user presses or releases a key.</p> </li>
</ul>
<p>Learning how to register key event listener is a basic media key management skill:</p>
<ol>
-<li>Implement the listener to handle media key state changes. The listener can contain event listeners for key press (<span style="font-family: Courier New,Courier,monospace">onpressed</span>) and release (<span style="font-family: Courier New,Courier,monospace">onreleased</span>) notifications.
+<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 =
{
{
console.log("Released key: " + key);
}
-}</pre>
+}
+</pre>
</li>
<li>Register the media key state change listener:
<pre class="prettyprint">
-tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener);</pre>
+tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener);
+</pre>
</li>
<li>Deregister the media key state change listener when it is no longer needed:
<pre class="prettyprint">
-tizen.mediakey.unsetMediaKeyEventListener();</pre>
+tizen.mediakey.unsetMediaKeyEventListener();
+</pre>
</li></ol>
<p>The main features of the Player Util API include:</p>
<ul>
<li>Getting the latency mode
- <p>You can <a href="#get">get the current latency mode of the player</a> with the <span style="font-family: Courier New,Courier,monospace">getLatencyMode()</span> method.</p></li>
+ <p>You can <a href="#get">get the current latency mode of the player</a> with the <code>getLatencyMode()</code> method.</p></li>
<li>Setting the latency mode
- <p>You can <a href="#set">set the latency mode of the player</a> with the <span style="font-family: Courier New,Courier,monospace">setLatencyMode()</span> method.</p></li>
+ <p>You can <a href="#set">set the latency mode of the player</a> with the <code>setLatencyMode()</code> method.</p></li>
</ul>
<h2 id="get">Getting the Current Latency Mode</h2>
-<p>To get the current latency mode, use the <span style="font-family: Courier New,Courier,monospace">getLatencyMode()</span> method:</p>
+<p>To get the current latency mode, use the <code>getLatencyMode()</code> method:</p>
<pre class="prettyprint">
var latencyMode;
}
catch (error)
{
- console.log(error.name + ': ' + error.message);
+ console.log(error.name + ': ' + error.message);
}
</pre>
<h2 id="set">Setting the Latency Mode</h2>
-<p>To set a new latency mode, use one of the available modes defined in the <
span style="font-family: Courier New,Courier,monospace">LatencyMode</span> 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>
+<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
}
catch (error)
{
- console.log(error.name + ': ' + error.message);
+ console.log(error.name + ': ' + error.message);
}
</pre>
<li>Scanning available radio channels
<p>You can <a href="#scan">scan the available frequencies to find a channel</a>.</p></li>
<li>Getting information about interruptions
-<p>The Tizen system has a feature to prevent interference between radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <
span style="font-family: Courier New,Courier,monospace">oninterrupted</span> event handler to <a href="#get_info">detect the reason for the interruption</a>.</p></li>
+<p>The Tizen system has a feature to prevent interference between radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <
code>oninterrupted</code> event handler to <a href="#get_info">detect the reason for the interruption</a>.</p></li>
</ul>
-<p>The available operations depend on the current radio state. To get information about the current radio state, read the <
span style="font-family: Courier New,Courier,monospace">state</span> attribute of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface (the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies the possible state values). The following figure illustrates the radio states and transitions between them.</p>
-<p class="figure">Figure: FM radio states and transitions</p>
+<p>The available operations depend on the current radio state. To get information about the current radio state, read the <
code>state</code> attribute of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface (the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies the possible state values). The following figure illustrates the radio states and transitions between them.</p>
+<p align="center"><strong>Figure: FM radio states and transitions</strong></p>
<p align="center"><img alt="FM radio states and transitions" src="../../images/fmradio-state.png" /></p>
<p></p>
<p>Starting and stopping an FM radio and changing the frequency is a basic FM radio management skill:</p>
<ol>
-<li>To start the FM radio, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface:
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Always check the current state before using any state-dependent functions.</td>
- </tr>
- </tbody>
-</table>
+<li>To start the FM radio, use the <code>start()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface:
+
+<div class="note">
+ <strong>Note</strong>
+ Always check the current state before using any state-dependent functions.
+</div>
<pre class="prettyprint">
var radioState = tizen.fmradio.state;
}
</pre>
<p>
-Pass the <span style="font-family: Courier New,Courier,monospace">frequencyToPlay</span> double value. This value represents the radio frequency. If this value is not passed, the radio module tunes to the lowest frequency available.</p>
+Pass the <code>frequencyToPlay</code> double value. This value represents the radio frequency. If this value is not passed, the radio module tunes to the lowest frequency available.</p>
</li>
-<li>The FM radio can play any frequency between the <span style="font-family: Courier New,Courier,monospace">frequencyLowerBound</span> and <span style="font-family: Courier New,Courier,monospace">requencyUpperBound</span> values. To change the current frequency, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method:
+<li>The FM radio can play any frequency between the <code>frequencyLowerBound</code> and <code>requencyUpperBound</code> values. To change the current frequency, use the <code>start()</code> method:
<pre class="prettyprint">
var frequencyLowerBound = tizen.fmradio.frequencyLowerBound;
var frequencyUpperBound = tizen.fmradio.frequencyUpperBound;
</pre>
</li>
-<li>To stop FM Radio, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method:
+<li>To stop FM Radio, use the <code>stop()</code> method:
<pre class="prettyprint">
var radioState = tizen.fmradio.state;
</pre>
</li>
</ol>
-
+
<h2 id="scan" name="scan">Scanning the FM Radio Frequency</h2>
<p>To create an application with FM radio features, you must provide a scanning capability:</p>
<ol>
<li>
-<p>To find a radio channel at a higher frequency than the current one, use the <span style="font-family: Courier New,Courier,monospace">seekUp()</span>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 <span style="font-family: Courier New,Courier,monospace">PLAYING</span> radio state.</p>
+<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")
+<pre class="prettyprint">
+if (tizen.fmradio.state === "PLAYING")
{
tizen.fmradio.seekUp(successCallback, errorCallback);
-}</pre>
+}
+</pre>
</li>
<li>
-<p>To find a radio channel at a lower frequency than the current one, use the <span style="font-family: Courier New,Courier,monospace">seekDown()</span>method of the <span style="font-family: Courier New,Courier,monospace">FMRadioManager</span> interface. This function is available only in <span style="font-family: Courier New,Courier,monospace">PLAYING</span> radio state.</p>
+<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")
+<pre class="prettyprint">
+if (tizen.fmradio.state === "PLAYING")
{
tizen.fmradio.seekDown(successCallback, errorCallback);
-}</pre>
+}
+</pre>
</li>
-<li>To scan all available radio channels, use the <span style="font-family: Courier New,Courier,monospace">scanStart()</span> method of the <span style="font-family: Courier New,Courier,monospace">FMRadioManager</span> interface. This function is available only in the <span style="font-family: Courier New,Courier,monospace">READY</span> state. During scanning, the state is changed to <span style="font-family: Courier New,Courier,monospace">SCANNING</span>.
-<pre class="prettyprint">var radioScanCallback =
+<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)
{
if (tizen.fmradio.state === "READY")
{
tizen.fmradio.scanStart(radioScanCallback, errorCallback);
-}</pre>
+}
+</pre>
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">scanStart()</span> method must be an object implementing the <span style="font-family: Courier New,Courier,monospace">FMRadioScanCallback</span> interface.</p></li>
+<p>The first parameter of the <code>scanStart()</code> method must be an object implementing the <code>FMRadioScanCallback</code> interface.</p></li>
-<li>To stop scanning before all stations are found, use the <span style="font-family: Courier New,Courier,monospace">scanStop()</span> method:
+<li>To stop scanning before all stations are found, use the <code>scanStop()</code> method:
-<pre class="prettyprint">function successCallback()
+<pre class="prettyprint">
+function successCallback()
{
console.log("The scanning stops");
}
<ol>
<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">oninterrupted</span> 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 =
+<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)
{
}
};
-tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);</pre>
+tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);
+</pre>
</li>
<li>
-<p>To stop receiving information about interruptions, use the <
span style="font-family: Courier New,Courier,monospace">unsetFMRadioInterruptedListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface.</p>
+<p>To stop receiving information about interruptions, use the <
code>unsetFMRadioInterruptedListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface.</p>
</li>
</ol>
<li><a href="#Managing_Messages">Managing Messages</a></li>
<li><a href="#Find_Folders">Finding Folders</a></li>
<li><a href="#Synchronizing_with_the_Server">Synchronizing with the Server</a></li>
- <li><a href="#Receiving_Notifications">Receiving Notifications on Message Storage Changes</a></li>
+ <li><a href="#Receiving_Notifications">Receiving Notifications on Message Storage Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Messages</h1>
-
+
<p>Tizen enables you to create applications with messaging functionalities for SMS, MMS, and email.</p>
<p>This feature is supported in mobile applications only.</p>
- <p>The messaging process used in HTML5 involves Uniform Resource Identifiers (URIs), which form values of attributes, such as <span style="font-family: Courier New,Courier,monospace">tel</span>, <span style="font-family: Courier New,Courier,monospace">mailto</span>, and <span style="font-family: Courier New,Courier,monospace">sms</span>. These attributes invoke external services which then perform the messaging tasks. The Messaging API minimizes your coding efforts by providing one-step capabilities to perform all high-level messaging-related operations.</p>
-
+ <p>The messaging process used in HTML5 involves Uniform Resource Identifiers (URIs), which form values of attributes, such as <code>tel</code>, <code>mailto</code>, and <code>sms</code>. These attributes invoke external services which then perform the messaging tasks. The Messaging API minimizes your coding efforts by providing one-step capabilities to perform all high-level messaging-related operations.</p>
+
<p>The main features of the Messaging API include:</p>
<ul>
<li>Message writing and sending
<li>Message management
<p>You can <a href="#Managing_Messages">find, update, and delete messages</a> in the message storage.</p>
</li>
- <li>Finding folders
+ <li>Finding folders
<p>You can <a href="#Find_Folders">find message folders</a> belonging to a message service.</p>
</li>
- <li>Full message content retrieval from the email server
+ <li>Full message content retrieval from the email server
<p>You can <a href="#Synchronizing_with_the_Server">load email messages and attachments</a> from the email service and synchronize your email accounts.</p>
</li>
- <li>Message storage change notifications
+ <li>Message storage change notifications
<p>You can <a href="#Receiving_Notifications">receive notifications</a> when messages are added, updated, or deleted.</p>
</li>
</ul>
-
+
<p>For a practical example of sending, receiving, and managing messages in your application, see the <a href="task_chatter_w.htm">Chatter</a> mobile sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/messaging.read"/>
<tizen:privilege name="http://tizen.org/privilege/messaging.write"/>
</pre>
-
+
<h2 id="Sending_Messages" name="Sending_Messages">Creating and Sending Messages</h2>
-
-<p>You can create a message by using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> object constructor, and you can set the message attributes and parameters using a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageInit">MessageInit</a> object (for example, you can set the message service type - SMS, MMS or email - by using the <span style="font-family: Courier New,Courier,monospace">type</span> parameter).</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The system assigns a unique read-only message ID to each message the first time it is processed, such as when sending it or creating a draft message for it. </td>
- </tr>
- </tbody>
- </table>
-
-<p>To create and send messages:</p>
- <ol>
-<li><p>Retrieve the messaging service using the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> 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>
+
+<p>You can create a message by using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> object constructor, and you can set the message attributes and parameters using a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageInit">MessageInit</a> object (for example, you can set the message service type - SMS, MMS or email - by using the <code>type</code> parameter).</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The system assigns a unique read-only message ID to each message the first time it is processed, such as when sending it or creating a draft message for it.
+</div>
+
+<p>To create and send messages:</p>
+ <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)
+function errorCallback(error)
{
console.log(error.name + ": " + error.message);
}
-tizen.messaging.getMessageServices("messaging.sms", serviceListCB, errorCallback);</pre> </li>
+tizen.messaging.getMessageServices("messaging.sms", serviceListCB, errorCallback);
+</pre></li>
-<li><p>In the success callback of the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method, use the <span style="font-family: Courier New,Courier,monospace">Message</span> interface to define the content and attributes of the message, and then send the message using the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. The <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> 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 <span style="font-family: Courier New,Courier,monospace">addDraftMessage()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p> <pre class="prettyprint">
+<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 serviceListCB(services)
-{
+{
/* Define SMS message */
var msg = new tizen.Message("messaging.sms",
{
/* 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 (<span style="font-family: Courier New,Courier,monospace">image/png</span>, <span style="font-family: Courier New,Courier,monospace">text/pdf</span>, or <span style="font-family: Courier New,Courier,monospace">text/html</span>) defined for each object.</p>
+}
+</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 <span style="font-family: Courier New,Courier,monospace">attachments</span> attribute of the <span style="font-family: Courier New,Courier,monospace">Message</span> 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"),
+msg.attachments = [new tizen.MessageAttachment("images/myimage.png", "image/png"),
new tizen.MessageAttachment("docs/mydoc.pdf","text/pdf")];
-</pre> </li>
+</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>
+<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)
+function messageSent(recipients)
{
- for (var i = 0; i < recipients.length; i++)
+ 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>
-
+</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>
+
<h2 id="Selecting_the_SIM_Card" name="Selecting_the_SIM_Card">Selecting the SIM Card for Sending Messages</h2>
<p>If there are multiple SIM cards in the device, by default the system determines which one is used to send a message. You can also specify the SIM card when sending an SMS.</p>
<p>To add the dual SIM feature to your messaging application, you must learn to retrieve information on available SIM cards and select the SIM card to send SMS and MMS messages:</p>
<ol>
-<li>To check how many SIM cards are available, call the <
span style="font-family: Courier New,Courier,monospace">getCount()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">SystemInfo</a> interface.
+<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)
}
</pre>
</li>
-<li>To retrieve additional information on the available SIM cards, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValueArray()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:
+<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);
+ console.log("SIM" + (i+1) + " - " + sims[i].msisdn
+ + " (" + sims[i].operatorName + ") " + sims[i].state);
}
}
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 <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> 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 <span style="font-family: Courier New,Courier,monospace">2</span>:
+<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()
{
function serviceSuccess(messageService)
{
message = new Message(messageService.type,
- {
- to: ["0001"],
- plainBody: "Surprise!"
- });
+ {
+ to: ["0001"],
+ plainBody: "Surprise!"
+ });
/* SIM is selected (first SIM - 1, second SIM - 2) */
messageService.sendMessage(message, sendSuccess, null, 2);
}
</pre>
</li>
</ol>
-
+
<h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2>
-<p>You can find, update, and delete stored messages with methods provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface: <span style="font-family: Courier New,Courier,monospace">findMessages()</span>, <span style="font-family: Courier New,Courier,monospace">updateMessages()</span>, and <span style="font-family: Courier New,Courier,monospace">removeMessages()</span>. The interface allows you to manage message storages.</p>
-
-<p>To work with messages in the message store:</p>
- <ol>
- <li><p>Retrieve messages whose sender is "me" from the message storage using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface .</p>
+<p>You can find, update, and delete stored messages with methods provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface: <code>findMessages()</code>, <code>updateMessages()</code>, and <code>removeMessages()</code>. The interface allows you to manage message storages.</p>
+
+<p>To work with messages in the message store:</p>
+ <ol>
+ <li><p>Retrieve messages whose sender is "me" from the message storage using the <code>findMessages()</code> method of the <code>MessageStorage</code> interface .</p>
<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)
+function serviceListCB(services)
{
- emailService = services[0];
+ emailService = services[0];
/* Set the attribute filter */
var filter = new tizen.AttributeFilter("from", "CONTAINS", "me");
-
+
emailService.messageStorage.findMessages(filter, messageArrayCB);
}
tizen.messaging.getMessageServices("messaging.email", serviceListCB);
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">findMessages()</span> 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 <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> 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 <span style="font-family: Courier New,Courier,monospace">updateMessages()</span> method. The method uses an array of <span style="font-family: Courier New,Courier,monospace">Message</span> objects found previously by the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method as a parameter.</p>
- <p>In the following example, the <span style="font-family: Courier New,Courier,monospace">isRead</span> attribute of the first <span style="font-family: Courier New,Courier,monospace">Message</span> object in the given array is updated to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+</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()
{
{
messages[0].isRead = true;
emailService.messageStorage.updateMessages(messages, successCallback);
-}</pre> </li>
- <li><p>To delete a message from the message storage, use the <span style="font-family: Courier New,Courier,monospace">removeMessages()</span> method:</p> <pre class="prettyprint">function messageArrayCB(messages)
+}
+</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);
-}</pre> </li>
- </ol>
-
+}
+</pre></li>
+ </ol>
+
<h2 id="Find_Folders" name="Find_Folders">Finding Folders</h2>
-<p>To find message folders, use the <
span style="font-family: Courier New,Courier,monospace">findFolders()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>
+<p>To find message folders, use the <
code>findFolders()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>
<ol>
- <li><p>To retrieve the messaging service, use the <
span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Messaging">Messaging</a> interface: </p>
+ <li><p>To retrieve the messaging service, use the <
code>getMessageServices()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Messaging">Messaging</a> interface: </p>
<pre class="prettyprint">
var service;
service = services[0];
}
-tizen.messaging.getMessageServices("messaging.email", serviceListCB);</pre> </li>
+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("Error occurred: " + error.name);
}
-</pre> </li>
+</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);
-</pre> </li>
- <li><p>To get all message folders, use the <span style="font-family: Courier New,Courier,monospace">findFolders()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface:</p> <pre class="prettyprint">service.messageStorage.findFolders(filter, onFindFolders, onFindFoldersFail);</pre> </li>
+</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">
+service.messageStorage.findFolders(filter, onFindFolders, onFindFoldersFail);
+</pre></li>
</ol>
-
+
<h2 id="Synchronizing_with_the_Server" name="Synchronizing_with_the_Server">Synchronizing with the Server</h2>
-
-<p>To keep your email service accounts up-to-date, synchronize them with their respective external servers, such as Gmail and Microsoft Exchange, with the <span style="font-family: Courier New,Courier,monospace">sync()</span> method. You can also synchronize just one folder, such as the Inbox, with the <span style="font-family: Courier New,Courier,monospace">syncFolder()</span> method. You can specify the maximum number of messages that can be retrieved in each folder.</p>
-<p>It is possible that an email message is accessible through the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> object, but its full body or attachment has not been downloaded yet. You can load email messages and attachments from the email service with the <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> and <span style="font-family: Courier New,Courier,monospace">loadMessageAttachment()</span> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. </p>
+<p>To keep your email service accounts up-to-date, synchronize them with their respective external servers, such as Gmail and Microsoft Exchange, with the <code>sync()</code> method. You can also synchronize just one folder, such as the Inbox, with the <code>syncFolder()</code> method. You can specify the maximum number of messages that can be retrieved in each folder.</p>
+
+<p>It is possible that an email message is accessible through the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> object, but its full body or attachment has not been downloaded yet. You can load email messages and attachments from the email service with the <code>loadMessageBody()</code> and <code>loadMessageAttachment()</code> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. </p>
<p>To load email messages and attachments and synchronize email:</p>
<ol>
- <li><p>Retrieve the messaging service using the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method. </p> <pre class="prettyprint">
-tizen.messaging.getMessageServices("messaging.email", serviceListCB, errorCallback);</pre> </li>
- <li><p>Search for all email messages with attachments using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> 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),
- messageQueryCallback);</pre></li>
- <li><p>To load a message body, use the <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageService</span> interface:</p> <pre class="prettyprint">
+ <li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method.</p>
+<pre class="prettyprint">
+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),
+ 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)
{
if (!message.body.loaded)
{
tizen.messaging.loadMessageBody(message, successCallback, errorCallback);
-</pre> </li>
- <li><p>To download the message attachments, use the <span style="font-family: Courier New,Courier,monospace">loadMessageAttachment()</span> method with an array of attachments (with valid file paths) as a parameter:</p> <pre class="prettyprint">
+</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);
}
}
-}</pre> </li>
+}
+</pre></li>
<li><p>To synchronize email with an external server:</p>
<ol type="a">
- <li><p>To synchronize all account folders, use the <span style="font-family: Courier New,Courier,monospace">sync()</span> method:</p> <pre class="prettyprint">
+ <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)
{
}
/* Get the email service */
-tizen.messaging.getMessageServices("messaging.email", servicesListSuccessCB); </pre> </li>
- <li>To synchronize a specific folder, use the <span style="font-family: Courier New,Courier,monospace">syncFolder()</span> method. In the following example, only folders containing "INBOX" in their name are synchronized. <pre class="prettyprint">
+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)
{
};
/* 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");
-emailService.messageStorage.findFolders(filter, folderQueryCallback)); </pre> </li>
+emailService.messageStorage.findFolders(filter, folderQueryCallback));
+</pre></li>
</ol> </li>
</ol>
<h2 id="Receiving_Notifications" name="Receiving_Notifications">Receiving Notifications on Message Storage Changes</h2>
<p>You can register event listeners to monitor changes in the message storage, a particular conversation, or a particular message folder.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">addMessagesChangeListener()</span>, <span style="font-family: Courier New,Courier,monospace">addConversationsChangeListener()</span>, and <span style="font-family: Courier New,Courier,monospace">addFoldersChangeListener()</span> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface register an event listener, which starts asynchronously once the method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessagesChangeCallback">MessagesChangeCallback</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> interfaces to define listener event handlers for receiving notifications about the changes.</p>
+<p>The <
code>addMessagesChangeListener()</code>, <code>addConversationsChangeListener()</code>, and <code>addFoldersChangeListener()</code> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface register an event listener, which starts asynchronously once the method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessagesChangeCallback">MessagesChangeCallback</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> interfaces to define listener event handlers for receiving notifications about the changes.</p>
<p>To receive notifications when messages and message folders are added, updated, or removed:</p>
<ol>
- <li>Define the needed variable: <pre class="prettyprint">/* Watch identifier */
-var watchId;</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">
+ <li>Define the needed variable:
+<pre class="prettyprint">
+/* Watch identifier */
+var watchId;
+</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 */
console.log(messages.length + " message(s) removed");
}
};
-</pre> </li>
- <li>Register the listener to use the defined event handlers: <pre class="prettyprint">
+</pre></li>
+ <li>Register the listener to use the defined event handlers:
+<pre class="prettyprint">
watchId = msgService.messageStorage.addMessagesChangeListener(messageChangeCallback);
</pre> </li>
- <li><p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface:</p> <pre class="prettyprint">msgService.messageStorage.removeChangeListener(watchId);</pre> </li>
+ <li><p>To stop receiving the notifications, use the <code>removeChangeListener()</code> method of the <code>MessageStorage</code> interface:</p>
+<pre class="prettyprint">
+msgService.messageStorage.removeChangeListener(watchId);
+</pre></li>
</ol>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To provide notifications for changes in specific conversations or message folders, use the applicable methods and event handlers similarly as above.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ To provide notifications for changes in specific conversations or message folders, use the applicable methods and event handlers similarly as above.
+</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Push Notification</h1>
-
+
<p>Tizen enables you to receive notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server. Push enables you to push events from an application server to your application on a Tizen device. Connection with the push service is used to deliver push notifications to the application, and process the registration and deregistration requests.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>Push notification helps your application server send data to the application on devices over network even if the application is not running. Push service can reduce battery consumption and data transfer.</p>
- <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the push service makes a sound or vibrates, and adds a ticker or a badge notification to notify the user. By touching the notification, the user can check the message. The application server can send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the push service forcibly launches the application and hands over the message to the application.</p>
+ <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the push service makes a sound or vibrates, and adds a ticker or a badge notification to notify the user. By touching the notification, the user can check the message. The application server can send a message with a <code>LAUNCH</code> option. In this case, the push service forcibly launches the application and hands over the message to the application.</p>
<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>, including the <a href="#permission">necessary information</a>. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Remember about security issues when sending notifications with sensitive information. For a list of strongly recommended rules, see <a href="../../native/messaging/push_n.htm#security">Managing Security</a>.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Remember about security issues when sending notifications with sensitive information. For a list of strongly recommended rules, see <a href="../../native/messaging/push_n.htm#security">Managing Security</a>.
+</div>
<h2 id="architecture">Architecture</h2>
<p>The architecture of the Tizen Push service is described in detail in the <a href="../../native/messaging/push_n.htm#service">mobile native Push guide</a>.</p>
-<p class="figure">Figure: Service architecture</p>
+<p align="center"><strong>Figure: Service architecture</strong></p>
<p align="center"><img alt="Service architecture" src="../../images/push_overview.png"/></p>
-
-
+
+
<p>To receive push notifications for your application:</p>
<ol>
<li>Request permission to access the Tizen Push servers for using the push service API.</li>
<p>To enable your application to use the push functionality:</p>
<ol>
<li>
- <p>To use the Push API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+ <p>To use the Push API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/push"/>
</pre>
<p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>, including the following information. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
<p>By sending the application, you agree to the <a href="https://www.tizen.org/about/terms-service" target="_blank">Terms of Service</a> and <a href="https://www.tizen.org/about/privacy-policy" target="_blank">Privacy Policy</a>.</p>
- <table id="request_form">
-<caption>Table: Request form details</caption>
+<p align="center" class="Table"><strong>Table: Request form details</strong></p>
+<table id="request_form">
<tbody>
<tr>
<th colspan="2">Developer information</th>
</li>
</ol>
-
+
<h2 id="Registering" name="Registering">Registering to the Push Service</h2>
<p>To receive push notifications, you must learn how to register your application to the push service:</p>
<ul>
<li>
<p>Up to Tizen 2.4:</p>
- <ol>
+ <ol>
<li><p>Define event handlers for the registration results:</p>
<pre class="prettyprint">
-/* 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");
+/*
+ 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");
/* Define the error callback */
function errorCallback(response)
}
</pre>
</li>
- <li><p>Register the application for the service with the <span style="font-family: Courier New,Courier,monospace">register()</span> method. This operation has to be done only once.</p>
-
<pre class="prettyprint">
+ <li><p>Register the application for the service with the <code>register()</code> method. This operation has to be done only once.</p>
+<pre class="prettyprint">
/* Request application registration */
tizen.push.registerService(service, registerSuccessCallback, errorCallback);
</pre>
<p>Before registering, you must connect to the push service:</p>
<ol>
<li><p>Define event handlers:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
/* Define the error callback */
function errorCallback(response)
{
}
</pre>
</li>
- <li><p>Connect to the push service with the <span style="font-family: Courier New,Courier,monospace">connect()</span> method. The <span style="font-family: Courier New,Courier,monospace">register()</span> method is called in the <span style="font-family: Courier New,Courier,monospace">stateChangeCallback()</span> callback. This operation has to be done only once.</p>
-
<pre class="prettyprint">
+ <li><p>Connect to the push service with the <code>connect()</code> method. The <code>register()</code> method is called in the <code>stateChangeCallback()</code> callback. This operation has to be done only once.</p>
+<pre class="prettyprint">
/* Connect to push service */
tizen.push.connect(stateChangeCallback, notificationCallback, errorCallback);
</pre>
</ol>
</li>
</ul>
- <p>If the registration is successful, the <span style="font-family: Courier New,Courier,monospace;">registerSuccessCallback()</span> 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 <span style="font-family: Courier New,Courier,monospace;">getRegistrationId()</span> method:</p>
-
<pre class="prettyprint">
+ <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)
{
</pre>
<p>Since Tizen 3.0, you must connect to the push service before getting the registration ID.</p>
-
+
<h2 id="Receiving" name="Receiving">Receiving Push Notifications</h2>
-<p>You can connect to the push service and start receiving push notifications with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method up to Tizen 2.4, or with the <span style="font-family: Courier New,Courier,monospace">connect()</span> method since Tizen 3.0. Up to Tizen 2.4, you must pass the <span style="font-family: Courier New,Courier,monospace">PushNotificationCallback</span> listener (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushNotificationCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html#PushNotificationCallback">wearable</a> applications) as a parameter in the method to receive push notifications. Since Tizen 3.0, you must pass the <span style="font-family: Courier New,Courier,monospace">PushRegistrationStateChangeCallback</span> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushRegistrationStateChangeCallback">mobile</a> applications) and <span style="font-family: Courier New,Courier,monospace">PushNotificationCallback</span> callbacks as parameters in the method. The first callback is called when the registration change state changes. This callback is called at least once, just after the connection is established. The second callback is called when notification messages arrive. You can also pass the <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> as a parameter to be called if the connection request fails.</p>
+<p>You can connect to the push service and start receiving push notifications with the <code>connectService()</code> method up to Tizen 2.4, or with the <code>connect()</code> method since Tizen 3.0. Up to Tizen 2.4, you must pass the <code>PushNotificationCallback</code> listener (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushNotificationCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html#PushNotificationCallback">wearable</a> applications) as a parameter in the method to receive push notifications. Since Tizen 3.0, you must pass the <code>PushRegistrationStateChangeCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushRegistrationStateChangeCallback">mobile</a> applications) and <code>PushNotificationCallback</code> callbacks as parameters in the method. The first callback is called when the registration change state changes. This callback is called at least once, just after the connection is established. The second callback is called when notification messages arrive. You can also pass the <code>ErrorCallback</code> as a parameter to be called if the connection request fails.</p>
<p>When a notification arrives at the device, its delivery mechanism depends on whether the application is running:</p>
<p>If the notification arrives when the application is not running, there are 3 ways to handle the notification:</p>
<ul>
<li>Forcibly launch the application and deliver the notification to it.
- <p>This happens when the action is set to <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> in the message field when sending the notification from the application server. When the notification action arrives at the device, the push service forcibly launches the application and delivers the notification as a bundle.</p>
+ <p>This happens when the action is set to <code>LAUNCH</code> in the message field when sending the notification from the application server. When the notification action arrives at the device, the push service forcibly launches the application and delivers the notification as a bundle.</p>
<p>For more information, see the <a href="#GetPushMessage">Retrieving Messages When Launched by the Push Service</a> use case.</p></li>
<li>Store the notification at the push service database and request it later when the application is launched.
- <p>This happens when the action is set to <span style="font-family: Courier New,Courier,monospace">ALERT</span> or <span style="font-family: Courier New,Courier,monospace">SILENT</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application.</p>
+ <p>This happens when the action is set to <code>ALERT</code> or <code>SILENT</code> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application.</p>
<p>For more information, see the <a href="#UnreadNotifications">Retrieving Missed Push Messages</a> use case.</p>
- <p>The difference between the <span style="font-family: Courier New,Courier,monospace">ALERT</span> and <span style="font-family: Courier New,Courier,monospace">SILENT</span> 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 forcibly launches the application and delivers the notification.</p></li>
+ <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 forcibly launches the application and delivers the notification.</p></li>
<li>Discard the notification.
- <p>This happens when the action is set to <span style="font-family: Courier New,Courier,monospace">DISCARD</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service discards the notification unless the application is running.</p></li>
+ <p>This happens when the action is set to <code>DISCARD</code> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service discards the notification unless the application is running.</p></li>
</ul>
</li>
</ul>
-
+
<p>To take advantage of the push technology, you must learn how to connect to the push service and receive push notifications:</p>
- <ol>
+ <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)
function notificationCallback(message)
{
- console.log("New push message: " + message.alertMessage + ", date: " + message.date + ", data: " + message.appData);
+ console.log("New push message: " + message.alertMessage
+ + ", date: " + message.date
+ + ", data: " + message.appData);
}
/* Since Tizen 3.0, you must provide PushRegistrationStateChangeCallback */
}
</pre>
<p>The following table lists the fields available in the notification callback.</p>
+ <p align="center" class="Table"><strong>Table: Push message key-value pairs</strong></p>
<table>
- <caption>Table: Push message key-value pairs</caption>
<tbody>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">appData</span></td>
+ <td><code>appData</code></td>
<td>String, less than 1 KB</td>
- <td>Message payload.
+ <td>Message payload.
<p>The applications can use this field to carry their own data.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">alertMessage</span></td>
+ <td><code>alertMessage</code></td>
<td>String, up to 127 bytes</td>
<td>Alert message shown to the user in the quick panel.
- <p>The <span style="font-family: Courier New,Courier,monospace;">alertMessage</span> field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the alert message in the quick panel or increase the badge count.</p></td>
+ <p>The <code>alertMessage</code> field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the alert message in the quick panel or increase the badge count.</p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">message</span></td>
+ <td><code>message</code></td>
<td>String</td>
- <td>Full push notification message.
- <p>For example: <span style="font-family: Courier New,Courier,monospace;">"badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi"</span></p></td>
+ <td>Full push notification message.
+ <p>For example: <code>"badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi"</code></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">date</span></td>
+ <td><code>date</code></td>
<td>Date</td>
<td>Date and time when a push notification message was received.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">sender</span></td>
+ <td><code>sender</code></td>
<td>String</td>
<td>Name of the notification sender.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">sessionInfo</span></td>
+ <td><code>sessionInfo</code></td>
<td>String</td>
<td>Session information of the notification.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">requestId</span></td>
+ <td><code>requestId</code></td>
<td>String</td>
<td>Request ID assigned by the sender.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td><code>type</code></td>
<td>Number</td>
<td>Type value assigned by the sender.</td>
</tr>
</li>
</ol>
- <p>To stop listening for new push messages, call the <span style="font-family: Courier New,Courier,monospace">disconnectService()</span> (up to Tizen 2.4) or <span style="font-family: Courier New,Courier,monospace">disconnect()</span> (since Tizen 3.0) method:</p>
-
<pre class="prettyprint">
+ <p>To stop listening for new push messages, call the <code>disconnectService()</code> (up to Tizen 2.4) or <code>disconnect()</code> (since Tizen 3.0) method:</p>
+<pre class="prettyprint">
/* Up to Tizen 2.4 */
tizen.push.disconnectService();
<li>
<p>Up to Tizen 2.4:</p>
<ol>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method to connect to the Tizen push server and receive new push notifications:
+<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);
+ console.log("New push message: " + message.alertMessage
+ + ", date: " + message.date
+ + ", data: " + message.appData);
}
tizen.push.connectService(notificationCallback);
<li>
<p>Since Tizen 3.0:</p>
-<p>Call the <span style="font-family: Courier New,Courier,monospace">connect()</span> method to connect to the Tizen push server, and retrieve any unread messages with the <span style="font-family: Courier New,Courier,monospace">getUnreadNotifications()</span> method in the state change callback when the application is registered:</p>
+<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)
</li>
</ul>
-<p>The notification callback passed to the <span style="font-family: Courier New,Courier,monospace">connectService()</span> (up to Tizen 2.4) or <span style="font-family: Courier New,Courier,monospace">connect()</span> (since Tizen 3.0) method is called for every unread message.</p>
+<p>The notification callback passed to the <code>connectService()</code> (up to Tizen 2.4) or <code>connect()</code> (since Tizen 3.0) method is called for every unread message.</p>
<h2 id="HandlingWhenLaunched">Handling a Launch by the Push Service</h2>
<p>If the application is launched by the push service, determine the reason for the application launch and react to it appropriately:</p>
<ol>
-<li>Get the requested application control with the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method:
+<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')
+ 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];
</ol>
<h2 id="GetPushMessage">Retrieving Messages When Launched by the Push Service</h2>
-<p>If the application is launched by the push service due to a notification, use the <span style="font-family: Courier New,Courier,monospace">getPushMessage()</span> method to return the last undelivered push message. If none exists, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>If the application is launched by the push service due to a notification, use the <code>getPushMessage()</code> method to return the last undelivered push message. If none exists, the function returns <code>NULL</code>.</p>
<p>To retrieve and read the last message:</p>
<pre class="prettyprint">
if (pushMessage)
{
- console.log('notification received on ' + pushMessage.date + ' from: ' + pushMessage.sender);
+ 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(' - type: ' + pushMessage.type);
}
</pre></li>
-</ol>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Task: Chatter</title>
+ <title>Task: Chatter</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li><a href="#Initializing_App">Initializing the Application</a></li>
<li><a href="#Managing_Messages">Managing Messages</a></li>
<li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a></li>
- <li><a href="#Managing_Message_Status">Managing Message Status Changes</a></li>
+ <li><a href="#Managing_Message_Status">Managing Message Status Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="https://developer.tizen.org/development/sample/web/Communication/Chatter" target="_blank">Chatter Sample Description</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Task: Chatter</h1>
- <p>This task, based on the Chatter sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API to send, receive, and manage your messages. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Chatter" target="blank">Chatter</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
+ <h1>Task: Chatter</h1>
+ <p>This task, based on the Chatter sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API to send, receive, and manage your messages. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Chatter" target="blank">Chatter</a>.</p>
+ <p>This task consists of the following parts:</p>
+ <ul>
<li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
<li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
<li><a href="#Managing_Messages">Managing Messages</a> defines how to retrieve message recipient information and group it into a single list.</li>
<li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a> defines how to get contacts using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, how to set the recipient for a new message, and how to send the message.</li>
<li><a href="#Managing_Message_Status">Managing Message Status Changes</a> defines how to use event listeners to check and update the message status.</li>
- </ul>
- <p>This sample is a fully functional application for managing, creating, and sending messages.</p>
-
- <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
- <p>The Chatter sample application layout consists of 3 screens: the main screen displays a contact list, the Select contact screen displays a contact list and a pop-up allowing the user to enter a phone number, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send a message.</p>
+ </ul>
+ <p>This sample is a fully functional application for managing, creating, and sending messages.</p>
- <p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: Chatter screens</p>
- <p align="center"><img alt="Chatter screens" src="../../images/chatter.png" /></p>
+ <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
+ <p>The Chatter sample application layout consists of 3 screens: the main screen displays a contact list, the Select contact screen displays a contact list and a pop-up allowing the user to enter a phone number, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send a message.</p>
+
+ <p>The following figure shows the main screens of the application.</p>
+ <p align="center"><strong>Figure: Chatter screens</strong></p>
+ <p align="center"><img alt="Chatter screens" src="../../images/chatter.png" /></p>
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
+ <h3 id="main" name="main">Defining the Main Screen</h3>
+ <ol>
- <li>main_page.tpl Source File
-<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+ <li><strong>main_page.tpl Source File</strong>
+<p>The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
<p>The content section of the screen is added dynamically and displays a contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a>. The footer section contains a tab bar with a button for starting a new chat.</p>
- <pre class="prettyprint lang-html"><!--Header section-->
+<pre class="prettyprint lang-html">
+<!--Header section-->
<div id="main-header" data-role="header" data-position="fixed">
<h1>Chatter</h1>
</div>
</div>
</pre>
-</li>
+</li>
-<li>app.ui.event.js Source File
+<li><strong>app.ui.event.js Source File</strong>
<p>When the user taps the <strong>New chat</strong> button, an event is fired, and the contact list is loaded. The events are based on jQuery selectors.</p>
-
<pre class="prettyprint">
-$('#contactSelect-button').on('click', function(event)
-{
- event.preventDefault();
- event.stopPropagation();
- app.loadContacts();
-});
+<pre class="prettyprint">
+$('#contactSelect-button').on('click', function(event)
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ app.loadContacts();
+ });
</pre>
</li>
</ol>
-
- <h3 id="contact" name="contact">Defining the Select Contact Screen</h3>
- <ol class="tutorstep">
- <li>contactSelect.tpl Source File
+
+ <h3 id="contact" name="contact">Defining the Select Contact Screen</h3>
+ <ol>
+ <li><strong>contactSelect.tpl Source File</strong>
<p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a>, a pop-up opens allowing the user to enter a phone number for a contact not on the list. The <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">popup</a> component contains a form for number input.</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<!--Content section-->
<div data-role="content">
<ul data-role="listview" id="contactSelect-list"></ul>
<a href="#" id="enterNumber" data-role="button">Enter number</a>
</div>
-
+
<div data-role="popup" id="enterNumber-popup">
<div class="ui-popup-title">
<h1>Enter phone number<h1>
</div>
<div class="ui-popup-text">
<form id="numberForm">
- <input type="tel" id="number" name="number" maxlength="20"/>
+ <input type="tel" id="number" name="number" maxlength="20"/>
</form>
</div>
<div class="ui-popup-button-bg">
- <a data-role="button" id="enterNumberCreate" data-rel="back"
+ <a data-role="button" id="enterNumberCreate" data-rel="back"
data-inline="true" class="ui-disabled">
Create Chat
</a>
</pre>
</li>
</ol>
-
+
<h3 id="chat" name="chat">Defining the Chat Screen</h3>
- <ol class="tutorstep">
- <li>chat.tpl Source File
+ <ol>
+ <li><strong>chat.tpl Source File</strong>
<p>When the user taps a list item on the main screen, the chat screen is displayed. The structure of the chat template is similar to main screen. The content section of the screen displays all messages from the selected contact, grouped into a conversation. </p>
- <p>The footer section contains a <span style="font-family: Courier New,Courier,monospace">textarea</span> for writing a message and a button for sending it.</p>
+ <p>The footer section contains a <code>textarea</code> for writing a message and a button for sending it.</p>
<p>
-The template also contains a <span style="font-family: Courier New,Courier,monospace">popup</span> element used to show warning and exceptions information.</p>
-
<pre class="prettyprint">
+The template also contains a <code>popup</code> element used to show warning and exceptions information.</p>
+<pre class="prettyprint">
<!--Content section-->
<div id="chat-content" data-role="content">
<ul data-role="listview" id="message-chat"></ul>
<div id="chat-footer" data-role="footer" data-position="fixed">
<div class="ui-textArea">
<div class="ui-textArea-text">
- <textarea id="text" class="ui-textArea-text-text" placeholder="Your message" data-role="none"></textarea>
+ <textarea id="text" class="ui-textArea-text-text"
+ placeholder="Your message" data-role="none"></textarea>
</div>
<div class="ui-textArea-button">
<a data-role="button" id="send">Send</a>
</ol>
<h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File
- <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
- <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file.</p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.write"/>
<tizen:privilege name="http://tizen.org/privilege/messaging.read"/>
<tizen:privilege name="http://tizen.org/privilege/messaging.send"/>
<tizen:privilege name="http://tizen.org/privilege/messaging.write"/>
-</widget></pre>
- </li>
- </ol>
+</widget>
+</pre>
+ </li>
+ </ol>
+
-
<h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2>
<p>This section builds upon the elements described in <a href="messages_w.htm#Managing_Messages">Managing Messages</a>.</p>
<h3 id="get" name="get">Retrieving SMS Messages</h3>
- <p>The message retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.model.js</span> file.</p>
- <ol class="tutorstep">
- <li>Preparing the Message Service
- <p>To retrieve messages from the device storage, you must first initialize the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface and prepare the <span style="font-family: Courier New,Courier,monospace">smsService</span> object.</p>
-
<pre class="prettyprint">
-initSmsService: function()
+ <p>The message retrieval functionality is implemented in the <code>app.model.js</code> file.</p>
+ <ol>
+ <li><strong>Preparing the Message Service</strong>
+ <p>To retrieve messages from the device storage, you must first initialize the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface and prepare the <code>smsService</code> object.</p>
+<pre class="prettyprint">
+initSmsService: function()
{
var self = this;
- try
+ try
{
- tizen.messaging.getMessageServices("messaging.sms", function(s)
- {
- self.smsService = s[0];
- self.prepareMessages(app.fillUpMessagePage.bind(self));
- self.messagesChangeListener();
- });
+ tizen.messaging.getMessageServices("messaging.sms", function(s)
+ {
+ self.smsService = s[0];
+ self.prepareMessages(app.fillUpMessagePage.bind(self));
+ self.messagesChangeListener();
+ });
}
}
-</pre>
-</li>
+</pre>
+</li>
- <li>Retrieving Messages for the Device Storage<p>The messages are retrieved using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. The first argument of the method a is the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">AttributeFilter</a> filter object of the Tizen API, and the second argument is an event handler for sorting the messages (newest on top). The retrieved messages are saved in the <span style="font-family: Courier New,Courier,monospace">messagesList</span> variable.</p>
- <pre class="prettyprint">
-prepareMessages: function(callback)
+ <li><strong>Retrieving Messages for the Device Storage</strong>
+ <p>The messages are retrieved 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. The first argument of the method a is the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">AttributeFilter</a> filter object of the Tizen API, and the second argument is an event handler for sorting the messages (newest on top). The retrieved messages are saved in the <code>messagesList</code> variable.</p>
+<pre class="prettyprint">
+prepareMessages: function(callback)
{
var self = this;
- try
+ try
{
- this.smsService.messageStorage.findMessages(new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
- function(messages)
- {
- function compare(a, b)
+ this.smsService.messageStorage
+ .findMessages(new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
+ function(messages)
{
- if (a.timestamp > b.timestamp)
+ function compare(a, b)
{
- return -1;
- }
- else if (a.timestamp < b.timestamp)
- {
- return 1;
- }
- else
- {
- return 0;
+ if (a.timestamp > b.timestamp)
+ {
+ return -1;
+ }
+ else if (a.timestamp < b.timestamp)
+ {
+ return 1;
+ }
+ else
+ {
+ return 0;
+ }
}
- }
- messages.sort(compare);
- self.messagesList = self.groupMessages(messages);
- app.ui.loadCallerList();
- callback();
- },
+ messages.sort(compare);
+ self.messagesList = self.groupMessages(messages);
+ app.ui.loadCallerList();
+ callback();
+ },
}
}
</pre>
</li>
</ol>
-
+
<h3 id="group" name="group">Grouping SMS Messages</h3>
<p>Chatter messages are grouped according to their recipient key. Each recipient object consists of a message array and the latest message. The grouped object can be used for both main and chat screens of the Chatter application.</p>
- <p>The message grouping functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.model.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating the Group
+ <p>The message grouping functionality is implemented in the <code>app.model.js</code> file.</p>
+ <ol>
+ <li><strong>Creating the Group</strong>
<ol type="a">
<li>
- <p>The <span style="font-family: Courier New,Courier,monospace">groupMessages()</span> method is used to filter the messages according to their status.</p>
-
<pre class="prettyprint">
-groupMessages: function(messages)
+ <p>The <code>groupMessages()</code> method is used to filter the messages according to their status.</p>
+<pre class="prettyprint">
+groupMessages: function(messages)
{
var i, obj = {}, folderId;
- for (i in messages)
+ for (i in messages)
{
folderId = messages[i].folderId;
- if ((folderId !== null && folderId !== this.DRAFTS_FOLDER) || messages[i].messageStatus === 'DRAFT')
+ if ((folderId !== null && folderId !== this.DRAFTS_FOLDER)
+ || messages[i].messageStatus === 'DRAFT')
{
- if (messages.hasOwnProperty(i))
+ if (messages.hasOwnProperty(i))
{
obj = this.groupMessagesSingle(messages[i], obj);
}
</pre>
</li>
<li>
- <p>The <span style="font-family: Courier New,Courier,monospace">groupMessagesSingle()</span> method prepares the conversation array for the recipient key.</p>
+ <p>The <code>groupMessagesSingle()</code> method prepares the conversation array for the recipient key.</p>
<pre class="prettyprint">
-groupMessagesSingle: function(message, obj)
+groupMessagesSingle: function(message, obj)
{
var key, j;
- if (message.from)
+ if (message.from)
{
key = message.from;
obj[key] = this.pushData(message, obj[key]);
- }
- else
+ }
+ else
{
- for (j in message.to)
+ for (j in message.to)
{
- if (message.to.hasOwnProperty(j))
+ if (message.to.hasOwnProperty(j))
{
key = message.to[j];
obj[key] = this.pushData(message, obj[key]);
</pre>
</li>
</ol></li>
- <li>Pushing Data to the Conversation Array
- <p>The <span style="font-family: Courier New,Courier,monospace">pushData()</span> method pushes the retrieved data into the recipient conversation array and sets the <span style="font-family: Courier New,Courier,monospace">lastMessage</span> object.</p>
+ <li><strong>Pushing Data to the Conversation Array</strong>
+ <p>The <code>pushData()</code> method pushes the retrieved data into the recipient conversation array and sets the <code>lastMessage</code> object.</p>
<pre class="prettyprint">
-pushData: function(message, obj)
+pushData: function(message, obj)
{
obj = obj || this.getGroupObject();
obj.messages.push(message);
- if (app.helpers.objectLength(obj.lastMessage) === 0)
+ if (app.helpers.objectLength(obj.lastMessage) === 0)
{
obj.lastMessage = message;
}
</pre>
</li>
-<li>Including the Latest Message
-<p>The <span style="font-family: Courier New,Courier,monospace">getGroupObject()</span> method is used to include the latest message in the array.</p>
+<li><strong>Including the Latest Message</strong>
+<p>The <code>getGroupObject()</code> method is used to include the latest message in the array.</p>
<pre class="prettyprint">
-getGroupObject: function()
+getGroupObject: function()
{
- return
+ return
{
messages: [], lastMessage: {},
- last:
+ last:
{
body: {plainBody: null}, timestamp: new Date()
}
<h2 id="Creating_Sending_Messages" name="Creating_Sending_Messages">Creating and Sending Messages</h2>
<p>This section builds upon the elements described in <a href="messages_w.htm#Sending_Messages">Creating and Sending Messages</a>.</p>
-
+
<h3 id="get_contact" name="get_contact">Getting the Contact List</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File
- <ol type="a"><li><p>To get the contact list from the device memory, get the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method.</p>
-
<pre class="prettyprint">
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <ol type="a"><li><p>To get the contact list from the device memory, get the default address book using the <code>getDefaultAddressBook()</code> method.</p>
+<pre class="prettyprint">
this.addressBook = tizen.contact.getDefaultAddressBook();
-</pre></li>
+</pre></li>
<li>
-<p>The contacts are retrieved using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface of the Contact API, and grouped into a <span style="font-family: Courier New,Courier,monospace">contactsLoaded</span> object.
+<p>The contacts are retrieved 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 of the Contact API, and grouped into a <code>contactsLoaded</code> object.
</p>
<pre class="prettyprint">
-loadContacts: function(callback)
+loadContacts: function(callback)
{
var contactsFoundCB, errorCB;
this.contactsLoaded = null;
- contactsFoundCB = function(contacts)
+ contactsFoundCB = function(contacts)
{
var i;
this.contactsLoaded = [];
- for (i in contacts)
+ for (i in contacts)
{
if (contacts.hasOwnProperty(i)
- && this.getNumberFromContact(contacts[i]))
+ && this.getNumberFromContact(contacts[i]))
{
contacts[i].primaryNumber =
this.getNumberFromContact(contacts[i])
this.contactsLoaded.push(contacts[i]);
}
}
- if (callback instanceof Function)
+ if (callback instanceof Function)
{
callback();
}
</ol>
</li></ol>
<h3 id="prepare" name="prepare">Setting the Message Recipient</h3>
- <p>The message recipient selection functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p>
- <ol class="tutorstep">
- <li>Displaying the Contacts
- <p>Before the user write the message text, they select the message recipient. The recipient list stored in the <span style="font-family: Courier New,Courier,monospace">contactsLoaded</span> object in the device memory is retrieved and displayed for the selection.</p>
-
<pre class="prettyprint">
-showContactsLoaded: function()
+ <p>The message recipient selection functionality is implemented in the <code>app.js</code> file.</p>
+ <ol>
+ <li><strong>Displaying the Contacts</strong>
+ <p>Before the user write the message text, they select the message recipient. The recipient list stored in the <code>contactsLoaded</code> object in the device memory is retrieved and displayed for the selection.</p>
+<pre class="prettyprint">
+showContactsLoaded: function()
{
var i, len, sortedContactList = [];
- if (this.model.contactsLoaded !== null && this.model.contactsLoaded.length)
+ if (this.model.contactsLoaded !== null && this.model.contactsLoaded.length)
{
len = this.model.contactsLoaded.length;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
- if (this.model.contactsLoaded[i].phoneNumbers.length)
+ if (this.model.contactsLoaded[i].phoneNumbers.length)
{
sortedContactList.push(
{
- caller: this.helpers.getCallerName(this.model.contactsLoaded[i], 'no name'),
+ caller: this.helpers.getCallerName(this.model.contactsLoaded[i],
+ 'no name'),
number: this.model.contactsLoaded[i].primaryNumber,
contact: this.model.contactsLoaded[i]
});
}
}
- sortedContactList.sort(function(a, b)
- {
- if (a.caller < b.caller)
+ sortedContactList.sort(function(a, b)
{
- return -1;
- }
- else if (a.caller > b.caller)
- {
- return 1;
- }
+ if (a.caller < b.caller)
+ {
+ return -1;
+ }
+ else if (a.caller > b.caller)
+ {
+ return 1;
+ }
- return 0;
- });
+ return 0;
+ });
}
this.ui.fillContactList(sortedContactList);
}
-fillContactList: function(sortedContactList)
+fillContactList: function(sortedContactList)
{
var i, ul = $("#contactSelect-list").empty(),
len, listElement, self = this;
len = sortedContactList.length;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
- listElement = this.templateManager.get('contactRow',
+ listElement = this.templateManager.get('contactRow',
{
'number': sortedContactList[i].number,
'callerName': sortedContactList[i].caller
});
- if (app.helpers.validateNumberLength(sortedContactList[i].number))
+ if (app.helpers.validateNumberLength(sortedContactList[i].number))
{
ul.append(listElement);
}
- }</pre>
+ }
+</pre>
</li>
-<li>Selecting the Contact
+<li><strong>Selecting the Contact</strong>
<p>When the user clicks the wanted recipient, the touch event that sets the current list item as the recipient is triggered, and the chat screen is displayed.</p>
-<pre class="prettyprint"> $('li.ui-li-has-multiline', ul).on('click', function(event)
- {
- app.ui.onCallerListElementTap(event, $(this));
- });
+<pre class="prettyprint">
+ $('li.ui-li-has-multiline', ul).on('click', function(event)
+ {
+ app.ui.onCallerListElementTap(event, $(this));
+ });
ul.trigger('create');
ul.listview('refresh');
</pre>
</li>
</ol>
-
+
<h3 id="send" name="send">Sending the Message</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File
- <p>After the user writes the message and taps the <strong>Send</strong> button, the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method is called to send the message using the <span style="font-family: Courier New,Courier,monospace">smsService</span> object. The message type and recipient information are included as arguments for the method.</p>
-
<pre class="prettyprint">
-sendMessage: function(number, text, callback, errorcallback)
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <p>After the user writes the message and taps the <strong>Send</strong> button, the <code>sendMessage()</code> method is called to send the message using the <code>smsService</code> object. The message type and recipient information are included as arguments for the method.</p>
+<pre class="prettyprint">
+sendMessage: function(number, text, callback, errorcallback)
{
var message;
callback = callback || new Function();
errorcallback = errorcallback || new Function();
message = new tizen.Message("messaging.sms", {plainBody: text, to: [number]});
- try
+ try
{
- this.smsService.sendMessage(message, callback, function(e)
+ this.smsService.sendMessage(message, callback, function(e)
{
/* Error handling */
});
},
</pre>
</li>
-
+
</ol>
-
- <h2 id="Managing_Message_Status" name="Managing_Message_Status">Managing Message Status Changes</h2>
+
+ <h2 id="Managing_Message_Status" name="Managing_Message_Status">Managing Message Status Changes</h2>
<p>This section builds upon the elements described in <a href="messages_w.htm#Receiving_Notifications">
Receiving Notifications on Message Storage Changes</a>.</p>
-
- <h3 id="get_message" name="get_message">Getting the Message Status</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File<p>An event listener is added to detect whether messages have been changed, added, or removed using the <span style="font-family: Courier New,Courier,monospace">addMessagesChangeListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. When messages have been added or removed, the <span style="font-family: Courier New,Courier,monospace">prepareMessages()</span> method is called to refresh the message list.</p>
- <pre class="prettyprint">
-messagesChangeListener: function()
+
+ <h3 id="get_message" name="get_message">Getting the Message Status</h3>
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <p>An event listener is added to detect whether messages have been changed, added, or removed using the <code>addMessagesChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. When messages have been added or removed, the <code>prepareMessages()</code> method is called to refresh the message list.</p>
+<pre class="prettyprint">
+messagesChangeListener: function()
{
- var self = this, config, messageChangeCallback =
+ var self = this, config, messageChangeCallback =
{
- messagesupdated: function(messages)
+ messagesupdated: function(messages)
{
- if (messages[0].messageStatus !== 'SENDING')
+ if (messages[0].messageStatus !== 'SENDING')
{
app.ui.changeMessageStatus(messages[0]);
}
},
- messagesadded: function(messages)
+ messagesadded: function(messages)
{
self.prepareMessages(app.ui.showMessageChat);
},
- messagesremoved: function()
+ messagesremoved: function()
{
self.prepareMessages(app.ui.showMessageChat);
}
};
this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
}
-</pre></li>
+</pre></li>
</ol>
- <h3 id="change" name="change">Displaying Updated Messages</h3>
- <ol class="tutorstep">
- <li>app.ui.js Source File<p> When the message status has changed, the <span style="font-family: Courier New,Courier,monospace">changeMessageStatus()</span>method is called to update the message view.</p>
- <pre class="prettyprint">
-changeMessageStatus: function(message, loop)
+ <h3 id="change" name="change">Displaying Updated Messages</h3>
+ <ol>
+ <li><strong>app.ui.js Source File</strong>
+ <p>When the message status has changed, the <code>changeMessageStatus()</code>method is called to update the message view.</p>
+<pre class="prettyprint">
+changeMessageStatus: function(message, loop)
{
var warning = $('#' + message.id + ' .warning'),
classes, i, self = this;
loop = loop + 1 || 0;
- if (warning.length === 1)
+ if (warning.length === 1)
{
classes = warning.attr('class').split(' ');
- for (i in classes)
+ for (i in classes)
{
- if (classes.hasOwnProperty(i))
+ if (classes.hasOwnProperty(i))
{
- if (/status([A-Z]*)/.test(classes[i]))
+ if (/status([A-Z]*)/.test(classes[i]))
{
warning.removeClass(classes[i]);
}
}
}
warning.addClass('status' + message.messageStatus);
- }
- else if (loop < 3)
+ }
+ else if (loop < 3)
{
- setTimeout(function()
- {
- self.changeMessageStatus(message, loop)
- }, 1000);
+ setTimeout(function()
+ {
+ self.changeMessageStatus(message, loop)
+ }, 1000);
}
}
</pre>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Notifications</title>
- </head>
+ <title>Notifications</title>
+ </head>
<body onload="prettyPrint()" style="overflow: auto;">
-
+
<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
</div>
-
+
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<h1>Notifications</h1>
<p>Tizen enables you to provide notifications about application events.</p>
-
+
<p>This feature is supported in mobile and wearable applications only.</p>
-
+
<p>The main features of the Notification API include:</p>
<ul>
<li>Creating simple notifications
<li>Managing notifications
<p>You can <a href="#manage">retrieve, update, and remove posted notifications</a>.</p></li>
</ul>
-
- <p>To display a notification, you need to create a <span style="font-family: Courier New,Courier,monospace">Notification</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#Notification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#Notification">wearable</a> applications), or its subtype. </p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Currently, only the <span style="font-family: Courier New,Courier,monospace">StatusNotification</span> subtype (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) is supported. This subtype displays notifications in the status bar.</td>
- </tr>
- </tbody>
- </table>
+ <p>To display a notification, you need to create a <code>Notification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#Notification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#Notification">wearable</a> applications), or its subtype. </p>
+
+<div class="note">
+ <strong>Note</strong>
+ Currently, only the <code>StatusNotification</code> subtype (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) is supported. This subtype displays notifications in the status bar.
+</div>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Notification API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Notification API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/notification"/>
</pre>
<h2 id="create" name="create">Creating Simple Notifications</h2>
-
- <p>Learning how to create status notifications allows you to design interactive applications that provide the user information about their events:</p>
- <ol>
- <li><p>Define the status notification properties of the <span style="font-family: Courier New,Courier,monospace">StatusNotificationInit</span> 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">
+
+ <p>Learning how to create status notifications allows you to design interactive applications that provide the user information about their events:</p>
+ <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 appControl =
+ new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+ null, "image/jpg", null, null);
-var notificationDict =
+var notificationDict =
{
/* Notification content */
content: "This is a simple notification.",
/* 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,
+ vibration: true,
/* Application control to be launched when the user selects the notification */
appControl: appControl
};
-</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> 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 <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
- <li><p>To be able to display the notification, create a <span style="font-family: Courier New,Courier,monospace">StatusNotification</span> 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);
-</pre> </li>
- <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <span style="font-family: Courier New,Courier,monospace">NotificationManager</span> 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">
-tizen.notification.post(notification);
-</pre> </li>
- </ol>
-
+</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);
+</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">
+tizen.notification.post(notification);
+</pre></li>
+ </ol>
+
<h2 id="progress" name="progress">Creating Progress Notifications</h2>
-
+
<p>Learning how to create progress notifications allows you to design interactive applications that inform the user about the progress of an activity:</p>
<ol>
- <li><p>Define the status notification properties of the <span style="font-family: Courier New,Courier,monospace">StatusNotificationInit</span> 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">
+ <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 appControl =
+ new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+ null, "image/jpg", null, null);
var notificationDict =
{
progressType: "PERCENTAGE",
progressValue: 0
};
-</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> 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 <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
- <li><p>To be able to display the notification, create a <span style="font-family: Courier New,Courier,monospace">StatusNotification</span> 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);
-</pre> </li>
- <li><p>Define a function which uses the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <span style="font-family: Courier New,Courier,monospace">NotificationManager</span> 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">
+</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);
+</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()
- {
- updateProgressNotification(progress + 10);
- },
- 1000);
+ {
+ updateProgressNotification(progress + 10);
+ }, 1000);
}
else
{
tizen.notification.remove(notification.id);
}
}
-</pre> </li>
- <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <span style="font-family: Courier New,Courier,monospace">NotificationManager</span> 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><pre class="prettyprint">
+</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>
+<pre class="prettyprint">
tizen.notification.post(notification);
updateProgressNotification(0);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="manage" name="manage">Managing Notifications</h2>
-
- <p>Learning how to manage notifications allows you to design interactive applications that provide the user information about their events:</p>
- <ol>
- <li><p>To retrieve notifications: </p>
- <ol type="a">
- <li>To retrieve a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <span style="font-family: Courier New,Courier,monospace">NotificationManager</span> 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 with the notification ID as a parameter: <pre class="prettyprint">
+
+ <p>Learning how to manage notifications allows you to design interactive applications that provide the user information about their events:</p>
+ <ol>
+ <li><p>To retrieve notifications:</p>
+ <ol type="a">
+ <li>To retrieve a previously posted notification, use the <code>get()</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 with the notification ID as a parameter:
+<pre class="prettyprint">
var myId = notification.id;
-var myNotification = tizen.notification.get(myId);
-</pre> </li>
- <li><p>To retrieve all previously posted notifications, use the <span style="font-family: Courier New,Courier,monospace">getAll()</span> method, which returns all the notifications as an array:</p> <pre class="prettyprint">
+var myNotification = tizen.notification.get(myId);
+</pre></li>
+ <li><p>To retrieve all previously posted notifications, use the <code>getAll()</code> method, which returns all the notifications as an array:</p>
+<pre class="prettyprint">
var notifications = tizen.notification.getAll();
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);
-}</pre> </li>
+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 <span style="font-family: Courier New,Courier,monospace">update()</span> method by specifying the updated notification object:</p> <pre class="prettyprint">
+ <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";
-tizen.notification.update(myNotification);
-</pre> </li>
+tizen.notification.update(myNotification);
+</pre></li>
<li>To remove notifications:
<ol type="a">
- <li><p>To remove a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the notification ID as a parameter:</p> <pre class="prettyprint">
+ <li><p>To remove a previously posted notification, use the <code>remove()</code> method with the notification ID as a parameter:</p>
+<pre class="prettyprint">
tizen.notification.remove(myNotification.id);
-</pre> </li>
- <li><p>To remove all notifications previously posted by the current application, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">
-tizen.notification.removeAll();</pre> </li>
- </ol></li>
+</pre></li>
+ <li><p>To remove all notifications previously posted by the current application, use the <code>removeAll()</code> method:</p>
+<pre class="prettyprint">
+tizen.notification.removeAll();
+</pre></li>
+ </ol></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>To enable your application to use the account functionality:</p>
<ol>
-<li>To make your application visible only for devices that support the account feature, the application must specify the following feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To make your application visible only for devices that support the account feature, the application must specify the following feature in the <code>config.xml</code> file:
<pre class="prettyprint">
<widget>
<tizen:feature name="http://tizen.org/feature/account"/>
</widget>
</pre>
-<p>Additionally, to double-check the Account API support while the application is running, use the <span style="font-family: Courier New,Courier,monospace">tizen.systeminfo.getCapability()</span> method and enable or disable the code that needs the API, as needed.</p>
+<p>Additionally, to double-check the Account API support while the application is running, use the <code>tizen.systeminfo.getCapability()</code> method and enable or disable the code that needs the API, as needed.</p>
</li>
-<li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:
+<li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/account.read"/>
<tizen:privilege name="http://tizen.org/privilege/account.write"/>
</li>
<li>Some of the account management features can be invoked only in account provider applications. If you are creating an account provider application, pay attention to the following requirements:
<ul>
-<li>Account provider applications must have a specially prepared <span style="font-family: Courier New,Courier,monospace">config.xml</span> file with an account provider section:
+<li>Account provider applications must have a specially prepared <code>config.xml</code> file with an account provider section:
<pre class="prettyprint">
<tizen:account multiple-account-support="true">
<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:account></pre>
+ <tizen:capability>
+ http://tizen.org/account/capability/contact
+ </tizen:capability>
+</tizen:account>
+</pre>
</li>
<li>If the application is registered as a provider, it is launched to authenticate the account. You must implement an application control to allow the account provider to be launched through the application control request.
</li>
-<li>The following methods are available only in an account provider application: <span style="font-family: Courier New,Courier,monospace">add()</span>, <span style="font-family: Courier New,Courier,monospace">remove()</span>, and <span style="font-family: Courier New,Courier,monospace">update()</span>.
+<li>The following methods are available only in an account provider application: <code>add()</code>, <code>remove()</code>, and <code>update()</code>.
</li>
<li>The account provider application declares the account capabilities. The capability name is decided by the author of the account provider application, and must have an IRI form. For example:
-<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> is used when the account is related to contacts.</li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> is used when the account is related to the calendar.
+<ul><li><code>http://tizen.org/account/capability/contact</code> is used when the account is related to contacts.</li>
+<li><code>http://tizen.org/account/capability/calendar</code> is used when the account is related to the calendar.
</li></ul>
</li></ul>
</li></ol>
<p>Learning how to retrieve account information enables you to include account support into your applications:</p>
<ul>
-<li>To retrieve information about all available accounts, use the <
span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
+<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)
+<pre class="prettyprint">
+function getAccountsSuccess(accounts)
{
for (var i = 0; i < accounts.length; i++)
{
{
console.log('Error: ' + error.message);
}
-tizen.account.getAccounts(getAccountsSuccess, getAccountsError);</pre>
+tizen.account.getAccounts(getAccountsSuccess, getAccountsError);
+</pre>
</li>
-<li>If you already know the ID of the account, you can get the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> object using the <span style="font-family: Courier New,Courier,monospace">getAccount()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+<li>If you already know the ID of the account, you can get the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> object using the <code>getAccount()</code> method of the <code>AccountManager</code> interface:
-<pre class="prettyprint">var account = tizen.account.getAccount(my_account_id);</pre>
+<pre class="prettyprint">
+var account = tizen.account.getAccount(my_account_id);
+</pre>
</li>
</ul>
<p>To create accounts, you must learn how to get access to account providers:</p>
<ul>
-<li>Get a specific account provider with the given application ID using the <
span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.
-<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_account"><tizen:account></a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), you can use the current application ID. Otherwise, get the ID of the current application using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
+<li>Get a specific account provider with the given application ID using the <
code>getProviders()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.
+<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_account"><tizen:account></a> element in its <code>config.xml</code> file), you can use the current application ID. Otherwise, get the ID of the current application using the <code>getCurrentApplication()</code> method of the <code>ApplicationManager</code> interface:</p>
-<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
-var provider = tizen.account.getProvider(appId);</pre>
+<pre class="prettyprint">
+var appId = tizen.application.getCurrentApplication().appInfo.id;
+var provider = tizen.account.getProvider(appId);
+</pre>
</li>
-<li>To get information about all available account providers, use the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+<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)
+<pre class="prettyprint">
+function getProvidersSuccess(providers)
{
/* Providers is an array whose members are providers with contact capability */
}
console.log('Error: ' + error.message);
}
-tizen.account.getProviders(getProvidersSuccess, getProvidersError, "http://tizen.org/account/capability/contact");</pre>
+tizen.account.getProviders(getProvidersSuccess, getProvidersError,
+ "http://tizen.org/account/capability/contact");
+</pre>
</li>
</ul>
<p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To perform these operations, your application must be the account provider.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ To perform these operations, your application must be the account provider.
+</div>
<ol>
-<li>To create an account, first get an account provider. If your application is an account provider application (meaning that it contains the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_account"><tizen:account></a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), use the <span style="font-family: Courier New,Courier,monospace">getProvider()</span> method:
+<li>To create an account, first get an account provider. If your application is an account provider application (meaning that it contains the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_account"><tizen:account></a> element in its <code>config.xml</code> file), use the <code>getProvider()</code> method:
-<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
-var accountProvider = tizen.account.getProvider(appId);</pre>
+<pre class="prettyprint">
+var appId = tizen.application.getCurrentApplication().appInfo.id;
+var accountProvider = tizen.account.getProvider(appId);
+</pre>
</li>
<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'});</pre>
+<pre class="prettyprint">
+var account =
+ new tizen.Account(accountProvider, {userName: 'admin', iconUri: 'path/to/icon.jpg'});
+</pre>
</li>
<li>Add the account to the account database:
-<pre class="prettyprint">tizen.account.add(account);</pre>
+<pre class="prettyprint">
+tizen.account.add(account);
+</pre>
</li>
-<li>To update the account information, change the attributes of the <span style="font-family: Courier New,Courier,monospace">Account</span> object for the relevant account:
+<li>To update the account information, change the attributes of the <code>Account</code> object for the relevant account:
-<pre class="prettyprint">account.userName = 'new username';</pre>
+<pre class="prettyprint">
+account.userName = 'new username';
+</pre>
</li>
-<li>To save the changed values, use the <
span style="font-family: Courier New,Courier,monospace">update()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
+<li>To save the changed values, use the <
code>update()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
-<pre class="prettyprint">tizen.account.update(account);</pre>
+<pre class="prettyprint">
+tizen.account.update(account);
+</pre>
</li>
-<li>To remove the account from the system, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface, providing the account ID:
+<li>To remove the account from the system, use the <code>remove()</code> method of the <code>AccountManager</code> interface, providing the account ID:
-<pre class="prettyprint">tizen.account.remove(account.id);</pre>
+<pre class="prettyprint">
+tizen.account.remove(account.id);
+</pre>
</li>
</ol>
<ol>
<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 =
+<pre class="prettyprint">
+var accountChangeListener =
{
onadded: function(account)
{
{
/* Called when a registered account is changed */
}
-};</pre>
+};
+</pre>
</li>
-<li>Register the account listener using the <
span style="font-family: Courier New,Courier,monospace">addAccountListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface to start receiving notifications about changes:
+<li>Register the account listener using the <
code>addAccountListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface to start receiving notifications about changes:
-<pre class="prettyprint">var watchId = tizen.account.addAccountListener(accountChangeListener);</pre>
+<pre class="prettyprint">
+var watchId = tizen.account.addAccountListener(accountChangeListener);
+</pre>
</li>
-<li>When notifications are no longer required, deregister the listener using the <span style="font-family: Courier New,Courier,monospace">removeAccountListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+<li>When notifications are no longer required, deregister the listener using the <code>removeAccountListener()</code> method of the <code>AccountManager</code> interface:
-<pre class="prettyprint">tizen.account.removeAccountListener(watchId);</pre>
+<pre class="prettyprint">
+tizen.account.removeAccountListener(watchId);
+</pre>
</li>
</ol>
<h2 id="extend" name="extend">Managing Extended Account Data</h2>
<li><a href="#get_account">Retrieve the account object</a>.</li>
<li>Manage the extended data for the retrieved account:
<ul><li>To set extended data:
-<p>Set the additional information with the <span style="font-family: Courier New,Courier,monospace">setExtendedData()</span> method:</p>
+<p>Set the additional information with the <code>setExtendedData()</code> method:</p>
-<pre class="prettyprint">var key = 'nickname';
+<pre class="prettyprint">
+var key = 'nickname';
var value = 'nickname of anonymous user';
-account.setExtendedData(key, value);</pre>
+account.setExtendedData(key, value);
+</pre>
<p>To overwrite the previous data value, set a new value with the same key:</p>
-<pre class="prettyprint">account.setExtendedData(key, 'nickname updated');</pre>
+<pre class="prettyprint">
+account.setExtendedData(key, 'nickname updated');
+</pre>
</li>
<li>To get extended data:
-<ul><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:
+<ul><li>To retrieve extended data value for a specific key, use the <code>getExtendedData()</code> method:
-<pre class="prettyprint">var key = 'accessToken';
-var value = account.getExtendedData(key); </pre>
+<pre class="prettyprint">
+var key = 'accessToken';
+var value = account.getExtendedData(key);
+</pre>
</li>
-<li>To retrieve all extended data for an account, use the asynchronous version of the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> 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);
- });</pre>
+<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);
+ });
+</pre>
</li></ul></li></ul></li>
</ol>
<p>The main features of the Bookmark API include:</p>
<ul>
<li>Creating bookmarks <p>You can <a href="#Creating_Bookmark">create bookmark folders and items</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface.</p> </li>
- <li>Deleting bookmarks <p>You can <a href="#Deleting_Bookmark">delete bookmark folders and items</a> using the <span style="font-family: Courier New,Courier,monospace">BookmarkManager</span> interface.</p> </li>
- <li>Retrieving bookmarks <p>You can <a href="#Retrieving_Bookmark">retrieve a list of current bookmarks</a> of the Tizen Web browser using the <span style="font-family: Courier New,Courier,monospace">BookmarkManager</span> interface.</p> </li>
+ <li>Deleting bookmarks <p>You can <a href="#Deleting_Bookmark">delete bookmark folders and items</a> using the <code>BookmarkManager</code> interface.</p> </li>
+ <li>Retrieving bookmarks <p>You can <a href="#Retrieving_Bookmark">retrieve a list of current bookmarks</a> of the Tizen Web browser using the <code>BookmarkManager</code> interface.</p> </li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/bookmark.read"/>
<tizen:privilege name="http://tizen.org/privilege/bookmark.write"/>
<ul>
<li>To add a folder and a bookmark to the root bookmark folder:
<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">
+ <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");
-</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");</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> 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">tizen.bookmark.add(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");
+</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">
+tizen.bookmark.add(folder1);
tizen.bookmark.add(tizen);
-</pre> </li>
+</pre></li>
</ol> </li>
<li>To add a folder and a bookmark to a subfolder:
<ol>
- <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">BookmarkFolder</span> and <span style="font-family: Courier New,Courier,monospace">BookmarkItem</span> interface:</p> <pre class="prettyprint">
+ <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");
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> method to add a folder and a bookmark to a bookmark subfolder by specifying the parent bookmark folder name:</p> <pre class="prettyprint">
+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">
tizen.bookmark.add(folder2, folder1);
tizen.bookmark.add(developerTizen, folder1);
-</pre>
-<p>As a result of the code snippet above, the <span style="font-family: Courier New,Courier,monospace">folder1</span> folder contains the <span style="font-family: Courier New,Courier,monospace">developerTizen</span> bookmark and the <span style="font-family: Courier New,Courier,monospace">folder2</span> subfolder.</p></li>
+</pre>
+<p>As a result of the code snippet above, the <code>folder1</code> folder contains the <code>developerTizen</code> bookmark and the <code>folder2</code> subfolder.</p></li>
</ol> </li>
</ul>
<p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p>
<ol>
- <li><p>To remove a bookmark item, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface and specify the bookmark item:</p> <pre class="prettyprint">
+ <li><p>To remove a bookmark item, use the <code>remove()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface and specify the bookmark item:</p>
+<pre class="prettyprint">
tizen.bookmark.remove(tizen);
-</pre> </li>
- <li><p>To remove a bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method and specify the bookmark folder:</p> <pre class="prettyprint">
-tizen.bookmark.remove(folder2);</pre> </li>
- <li><p>To remove all the bookmark folders and items from the bookmarks list, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method without specifying a parameter:</p> <pre class="prettyprint">tizen.bookmark.remove();
-</pre> </li>
+</pre></li>
+ <li><p>To remove a bookmark folder, use the <code>remove()</code> method and specify the bookmark folder:</p>
+<pre class="prettyprint">
+tizen.bookmark.remove(folder2);
+</pre></li>
+ <li><p>To remove all the bookmark folders and items from the bookmarks list, use the <code>remove()</code> method without specifying a parameter:</p>
+<pre class="prettyprint">
+tizen.bookmark.remove();
+</pre></li>
</ol>
<p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p>
<ol>
- <li><p>To retrieve bookmarks only from the root bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface without specifying any parameter:</p> <pre class="prettyprint">
+ <li><p>To retrieve bookmarks only from the root bookmark folder, use the <code>get()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface without specifying any parameter:</p>
+<pre class="prettyprint">
tizen.bookmark.get();
-</pre> </li>
- <li><p>To retrieve bookmarks from the root bookmark folder and subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and set the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">
-tizen.bookmark.get(null, true);</pre> </li>
- <li><p>To retrieve bookmarks only from a specific bookmark folder excluding its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and specify the bookmark folder name:</p> <pre class="prettyprint">tizen.bookmark.get(folder1);
-</pre> </li>
- <li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method, specifying the bookmark folder name and setting the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">tizen.bookmark.get(folder1, true);
-</pre> </li>
+</pre></li>
+ <li><p>To retrieve bookmarks from the root bookmark folder and subfolders, use the <code>get()</code> method and set the <code>recursive</code> parameter as <code>true</code>:</p>
+<pre class="prettyprint">
+tizen.bookmark.get(null, true);
+</pre></li>
+ <li><p>To retrieve bookmarks only from a specific bookmark folder excluding its subfolders, use the <code>get()</code> method and specify the bookmark folder name:</p>
+<pre class="prettyprint">
+tizen.bookmark.get(folder1);
+</pre></li>
+ <li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <code>get()</code> method, specifying the bookmark folder name and setting the <code>recursive</code> parameter as <code>true</code>:</p>
+<pre class="prettyprint">
+tizen.bookmark.get(folder1, true);
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>The main features of the Calendar API include:</p>
<ul>
<li>Calendar management
- <p>You can <a href="#Creating_Calendar">create a new calendar</a> using the <
span style="font-family: Courier New,Courier,monospace">addCalendar()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface (you also need the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API).</p>
+ <p>You can <a href="#Creating_Calendar">create a new calendar</a> 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 (you also need the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API).</p>
</li>
<li>Calendar item management
<p>You can manage calendar items (add a new <a href="#Adding_Events">event</a> or <a href="#Adding_Tasks">task</a> to a calendar, or manage a single calendar <a href="#Managing_Event">event</a> or <a href="#Managing_Task">task</a>) by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface. You can also delete or <a href="#Updating_Event">update a single instance of a recurring event</a>.</p>
<p>When creating an important event or task, such as a monthly meeting or a task of paying a utility bill, you can set an alarm for it by using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface. The alarm is triggered at a defined time to remind the user of the event or task.</p>
<p>You can create multiple <a href="#Adding_Events_Batch">events</a> or <a href="#Adding_Tasks_Batch">tasks</a>, and manage multiple calendar <a href="#Managing_Event_Batch">events</a> or <a href="#Managing_Task_Batch">tasks</a> simultaneously by using the applicable batch methods. The batch mode provides faster, optimized processing of multiple calendar items.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.
+</div>
</li>
<li>iCalendar 2.0 format conversions
<p>You can convert a calendar <a href="#Converting_Event">event</a> or <a href="#Converting_Task">task</a> to the iCalendar format and back.</p>
</li>
</ul>
- <p>The Calendar API uses the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TZDate">TZDate</a> object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API and not the standard JavaScript <span style="font-family: Courier New,Courier,monospace">Date</span> object to handle difficult issues related to the time zone, because the <span style="font-family: Courier New,Courier,monospace">TZDate</span> object handles exact time and provides various utility methods.</p>
+ <p>The Calendar API uses the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TZDate">TZDate</a> object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API and not the standard JavaScript <code>Date</code> object to handle difficult issues related to the time zone, because the <code>TZDate</code> object handles exact time and provides various utility methods.</p>
<p>For a practical example of managing calendar events in your application, see the <a href="task_eventmanager_w.htm">Event Manager</a> sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
<tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
<h2 id="Creating_Calendar" name="Creating_Calendar">Creating a Calendar</h2>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.
+</div>
<p>To create a new calendar:</p>
<ol>
<li>Declare a variable to store the created calendar:
-<pre class="prettyprint">var myCalendar = null;</pre>
+<pre class="prettyprint">
+var myCalendar = null;
+</pre>
</li>
- <li>Define a success callback for the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> 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 <span style="font-family: Courier New,Courier,monospace">addCalendar()</span> 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)
+ <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)
tizen.calendar.addCalendar(myCalendar);
console.log("New calendar created with ID=" + myCalendar.id);
}
-}</pre></li>
- <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above:
-<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
+}
+</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">
+tizen.account.getAccounts(getAccountsSuccess, function(err));
</pre></li>
</ol>
<p>To access the device calendars and retrieve calendar objects:</p>
<ul>
- <li>To retrieve the default calendar, use the <
span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.
+ <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");
</pre></li>
- <li>To retrieve all the available calendars as an array, use the <span style="font-family: Courier New,Courier,monospace">getCalendars()</span> method.
+ <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);
</pre></li>
- <li>To retrieve a special calendar, which combines events (or tasks) from all calendars of the same type, use the <span style="font-family: Courier New,Courier,monospace">getUnifiedCalendar()</span> method of the <span style="font-family: Courier New,Courier,monospace">CalendarManager</span> interface.
+ <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");
<h2 id="Events" name="Events">Events</h2>
- <p>The events are identified using the <span style="font-family: Courier New,Courier,monospace">CalendarEventId</span>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef. In recurring events, the <span style="font-family: Courier New,Courier,monospace">CalendarEventId</span> contains a recurrence ID (<span style="font-family: Courier New,Courier,monospace">rid</span>) in addition to the actual event ID, to separately identify each occurrence of the recurring event.</p>
+ <p>The events are identified using the <code>CalendarEventId</code>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef. In recurring events, the <code>CalendarEventId</code> contains a recurrence ID (<code>rid</code>) in addition to the actual event ID, to separately identify each occurrence of the recurring event.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Due to time zone and daylight saving time, an event for "today" can actually occur in the past or in the future.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Due to time zone and daylight saving time, an event for "today" can actually occur in the past or in the future.
+</div>
<p>Using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object, you can:</p>
<ul>
<p>To add events to a calendar:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <
span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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>
+ <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");
-</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
+</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",
-</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">
+</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})
});
-</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">
+</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");
ev.alarms = [alarm];
</pre></li>
- <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.</p> <pre class="prettyprint">calendar.add(ev); /* ev.id attribute is generated */</pre> </li>
+ <li><p>Add the <code>CalendarEvent</code> object to the default calendar with the <code>add()</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">
+calendar.add(ev); /* ev.id attribute is generated */
+</pre></li>
</ol>
<h3 id="Adding_Events_Batch" name="Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</h3>
-<p>You can create multiple events simultaneously by using the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method.</p>
+<p>You can create multiple events simultaneously by using the <code>addBatch()</code> method.</p>
<p>To add events to a calendar in the batch mode:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">
+ <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");
-</pre> </li>
- <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
+</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",
location:"Huesca"
});
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To keep the example as simple as possible, the array above includes only 1 event.</td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the events in the array to the calendar:</p> <pre class="prettyprint">
+
+<div class="note">
+ <strong>Note</strong>
+ To keep the example as simple as possible, the array above includes only 1 event.
+</div>
+ </li>
+ <li><p>Use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the events in the array to the calendar:</p>
+<pre class="prettyprint">
calendar.addBatch([ev]);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used to react to the success or failure of the operation.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>addBatch()</code> method is asynchronous, and its callbacks must be used to react to the success or failure of the operation.
+</div>
</li>
</ol>
<p>To manage a single event:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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">
+ <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");
-</pre> </li>
- <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(eventSearchSuccessCallback);</pre>
+</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">
+myCalendar.find(eventSearchSuccessCallback);
+</pre>
<p>When searching for calendar items, 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#calendar">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 the events are retrieved because no filter is used.</p></li>
- <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">eventSearchSuccessCallback()</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second event is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
+ <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 */
/* Delete the second existing event */
myCalendar.remove(events[1].id);
-}</pre> </li>
+}
+</pre></li>
</ol>
<h3 id="Updating_Event" name="Updating_Event">Updating Recurring Events</h3>
- <p>If you need to delete or update a single instance of a recurring event, get the list of event instances first with the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object. Then, delete the applicable event instance, or update it by calling the <span style="font-family: Courier New,Courier,monospace">update()</span> method with the <span style="font-family: Courier New,Courier,monospace">updateAllInstances</span> parameter set to <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+ <p>If you need to delete or update a single instance of a recurring event, get the list of event instances first with the <code>expandRecurrence()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object. Then, delete the applicable event instance, or update it by calling the <code>update()</code> method with the <code>updateAllInstances</code> parameter set to <code>false</code>.</p>
<p>To update recurring events:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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 <span style="font-family: Courier New,Courier,monospace">get()</span> method by specifying the event ID.</p> <pre class="prettyprint">
+ <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 event = calendar.get(evId);
-</pre> </li>
- <li>Expand the recurring event to get its instances by using the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> method of the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object: <pre class="prettyprint">
+</pre></li>
+ <li>Expand the recurring event to get its instances by using the <code>expandRecurrence()</code> method of the <code>CalendarEvent</code> object:
+<pre class="prettyprint">
event.expandRecurrence(new tizen.TZDate(2012, 2, 1), new tizen.TZDate(2012, 2, 15),
- eventExpandSuccessCB);</pre> <p>The expanded event instances have their own <span style="font-family: Courier New,Courier,monospace">id.uid</span> and <span style="font-family: Courier New,Courier,monospace">id.rid</span> attributes, where the <span style="font-family: Courier New,Courier,monospace">id.uid</span> attribute is the same for all instances.</p> </li>
- <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 <span style="font-family: Courier New,Courier,monospace">update()</span> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, all instances are updated, while if it is set to <span style="font-family: Courier New,Courier,monospace">false</span>, only the indicated instance of the recurring event is updated (based on the <span style="font-family: Courier New,Courier,monospace">id.rid</span> attribute).</p> <p>In this example, the second instance of the event is updated.</p> <pre class="prettyprint">
+ eventExpandSuccessCB);
+</pre>
+<p>The expanded event instances have their own <code>id.uid</code> and <code>id.rid</code> attributes, where the <code>id.uid</code> attribute is the same for all instances.</p> </li>
+ <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);
}
-</pre> </li>
+</pre></li>
</ol>
<h3 id="Managing_Event_Batch" name="Managing_Event_Batch">Managing Multiple Events in the Batch Mode</h3>
-<p>You can manage multiple events simultaneously by using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>.</p>
+<p>You can manage multiple events simultaneously by using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
<p>To manage multiple events in the batch mode:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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">
+ <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");
-</pre> </li>
- <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(eventSearchSuccessCallback, errorCallback);</pre>
+</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">
+myCalendar.find(eventSearchSuccessCallback, errorCallback);
+</pre>
<p>When searching for calendar items, 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#calendar">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 the events are retrieved because no filter is used.</p> </li>
<li>To update events:
<ol type="a">
- <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
+ <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";
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint">
+</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));
}
-</pre> </li>
+</pre></li>
</ol> </li>
- <li><p>To delete events, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">
+ <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]);
}
-</pre> </li>
+</pre></li>
</ol>
<h3 id="Converting_Event" name="Converting_Event">Converting Event Formats</h3>
-<p>You can make event exchange more efficient in your application by converting an event to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object constructor and the <
span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
-<p>The conversion allows you to exchange calendar data between applications by sharing files with the <span style="font-family: Courier New,Courier,monospace">.ics</span> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
+<p>You can make event exchange more efficient in your application by converting an event to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object constructor and the <
code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
+<p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
<p>The following example shows a sample event in the iCalendar format:</p>
<pre class="prettyprint">
BEGIN:VCALENDAR
<ul>
<li>To convert an iCalendar string to an event:
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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");</pre> </li>
- <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">
+ <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");
+</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
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 <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>
+}
+</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>
<li>To convert an event to the iCalendar format:
<ol>
- <li>Get the default calendar and find all events which include the "Tizen" string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
+ <li>Get the default calendar and find all events which include the "Tizen" string in the <code>Summary</code> attribute:
+<pre class="prettyprint">
var myCalendar;
myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
/* 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">
+</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");
}
-</pre> </li>
+</pre></li>
</ol>
-<p>To export and convert multiple events from a calendar, find the required events using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>
+<p>To export and convert multiple events from a calendar, find the required events using the <code>find()</code> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>
<h2 id="Tasks" name="Tasks">Tasks</h2>
-<p>The tasks are identified using the <
span style="font-family: Courier New,Courier,monospace">CalendarTaskId</span>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef.</p>
+<p>The tasks are identified using the <
code>CalendarTaskId</code>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef.</p>
<p>Using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object, you can:</p>
<ul>
<p>To add tasks to a calendar:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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">
+ <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");
-</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
+</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",
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">
+</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");
task.alarms = [alarm];
</pre></li>
- <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">calendar.add(task); /* task.id attribute is generated */</pre> </li>
+ <li><p>Add the <code>CalendarTask</code> object to the default calendar with the <code>add()</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">
+calendar.add(task); /* task.id attribute is generated */
+</pre></li>
</ol>
<h3 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</h3>
-<p>You can create multiple tasks simultaneously by using the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method.</p>
+<p>You can create multiple tasks simultaneously by using the <code>addBatch()</code> method.</p>
<p>To add tasks to a calendar in the batch mode:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">
+ <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");
-</pre> </li>
- <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
+</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",
location:"Huesca"
});
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To keep the example as simple as possible, the array above includes only 1 task.
- </td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the tasks in the array to the calendar:</p> <pre class="prettyprint">
+
+<div class="note">
+ <strong>Note</strong>
+ To keep the example as simple as possible, the array above includes only 1 task.
+</div>
+ </li>
+ <li><p>Use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the tasks in the array to the calendar:</p>
+<pre class="prettyprint">
calendar.addBatch([task]);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used if you want to react to the success or failure of the operation.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>addBatch()</code> method is asynchronous, and its callbacks must be used if you want to react to the success or failure of the operation.
+</div>
</li>
</ol>
<p>To manage a single task:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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">
+ <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");
-</pre> </li>
- <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(taskSearchSuccessCallback);</pre>
+</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">
+myCalendar.find(taskSearchSuccessCallback);
+</pre>
<p>When searching for calendar items, 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#calendar">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 the events are retrieved because no filter is used.</p> </li>
- <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">taskSearchSuccessCallback()</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second task is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
+ <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 */
/* Delete the second existing task */
myCalendar.remove(tasks[1].id);
-}</pre> </li>
+}
+</pre></li>
</ol>
<h3 id="Managing_Task_Batch" name="Managing_Task_Batch">Managing Multiple Tasks in the Batch Mode</h3>
- <p>You can manage multiple tasks simultaneously by using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>.</p>
+ <p>You can manage multiple tasks simultaneously by using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
<p>To manage multiple tasks in the batch mode:</p>
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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">
+ <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");
-</pre> </li>
- <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(taskSearchSuccessCallback);</pre>
+</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">
+myCalendar.find(taskSearchSuccessCallback);
+</pre>
<p>When searching for calendar items, 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#calendar">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 the events are retrieved because no filter is used.</p> </li>
<li>To update tasks:
<ol type="a">
- <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint open-bottom">
+ <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";
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint open-top">
+</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));
}
-</pre> </li>
+</pre></li>
</ol> </li>
- <li><p>To delete tasks, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">
+ <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]);
}
-</pre> </li>
+</pre></li>
</ol>
<h3 id="Converting_Task" name="Converting_Task">Converting Task Formats</h3>
-<p>You can make task exchange more efficient in your application by converting a task to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object constructor and the <
span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
-<p>The conversion allows you to exchange calendar data between applications by sharing files with the <span style="font-family: Courier New,Courier,monospace">.ics</span> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
+<p>You can make task exchange more efficient in your application by converting a task to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object constructor and the <
code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
+<p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
<p>The following example shows a sample task in the iCalendar format:</p>
<pre class="prettyprint">
BEGIN:VCALENDAR
DUE:TZID=CET:20110906T150000Z
SUMMARY:Prepare team meeting
END:VTODO
-END:VCALENDAR</pre>
+END:VCALENDAR
+</pre>
<p>To convert the task to iCalendar format and back:</p>
<ul>
<li>To convert an iCalendar string to a task:
<ol>
- <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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");</pre> </li>
- <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">
+ <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");
+</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" +
calendar.add(task);
console.log('Task added with id ' + task.id);
-</pre> </li>
- </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <
span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>
+</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_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>
<li>To convert a task to the iCalendar format:
<ol>
- <li>Get the default calendar and find all calendar items which include the "Tizen" string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
+ <li>Get the default calendar and find all calendar items which include the "Tizen" string in the <code>Summary</code> attribute:
+<pre class="prettyprint">
var myCalendar;
myCalendar = tizen.calendar.getDefaultCalendar("TASK");
/* 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">
+</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");
}
-</pre> </li>
- </ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
+</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>
</ul>
<h2 id="Receiving_Calendar" name="Receiving_Calendar">Receiving Notifications on Calendar Changes</h2>
<p>You can keep the calendar in your application synchronized with user-specific calendars by receiving notifications in your application when calendar items are added, updated, or deleted. Every change made to the calendar database triggers an event for which you can define a notification. For batch mode operations, each operation generates only a single event. A recurring event is treated as one event.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Calendar</span> interface registers an event listener, which starts asynchronously once the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
+<p>The <
code>addChangeListener()</code> method of the <code>Calendar</code> interface registers an event listener, which starts asynchronously once the <code>addChangeListener()</code> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
<p>To receive notifications when calendar items are added, updated, or removed:</p>
<ol>
- <li><p>Define the needed variables:</p> <pre class="prettyprint">
+ <li><p>Define the needed variables:</p>
+<pre class="prettyprint">
/* Watcher identifier */
var watcherId = 0;
/* This example assumes that the calendar is initialized */
var calendar;
-</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">
+</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 */
console.log(ids.length + " items were removed");
}
};
-</pre> </li>
- <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Register the listener to use the defined event handlers:</p>
+<pre class="prettyprint">
watcherId = calendar.addChangeListener(watcher);
-</pre> </li>
- <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method: </p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To stop the notifications, use the <code>removeChangeListener()</code> method: </p>
+<pre class="prettyprint">
function cancelWatch()
{
calendar.removeChangeListener(watcherId);
}
-</pre> </li>
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<li>Call history tracking
<p>You can <a href="#Searching_Call_History">search and store data about all incoming and outgoing calls</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface. The retrieved data is displayed as a list using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> interface.</p></li>
<li>Call history item deletion
- <p>You can manage the call history by <a href="#Removing_Call_History">removing unnecessary call history items</a> using the <span style="font-family: Courier New,Courier,monospace">CallHistory</span> interface.</p></li>
+ <p>You can manage the call history by <a href="#Removing_Call_History">removing unnecessary call history items</a> using the <code>CallHistory</code> interface.</p></li>
<li>Change monitoring
<p>You can register event listeners to <a href="#Monitoring_Call_History">monitor changes in the call history</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface.</p> </li>
</ul>
<p>For a practical example of managing call logs in your application, see the <a href="task_calllog_w.htm">Call Log</a> sample task.</p>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
<tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
<p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p>
<ol>
- <li>To retrieve call history items, use the <span style="font-family: Courier New,Courier,monospace">find(successCallback, errorCallback, filter, sortMode, limit, offset)</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface. <p>This method is asynchronous, and the result of the query is an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> objects.</p> <pre class="prettyprint">tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);</pre> </li>
- <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> 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)
+ <li>To retrieve call history items, use the <code>find(successCallback, errorCallback, filter, sortMode, limit, offset)</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface. <p>This method is asynchronous, and the result of the query is an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> objects.</p>
+<pre class="prettyprint">
+tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);
+</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++)
+ for (var i = 0; i < results.length; i++)
{
- console.log(i + ". " + results[i].toString());
+ console.log(i + ". " + results[i].toString());
/* Process the CallHistoryEntry */
}
-}</pre> </li>
- <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">filter</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define a filter for the query result set. A filter with the <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> attributes is used to limit the results of the call history search.</p>
+}
+</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>
<p>When searching for call history items, 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#call">specific filter attributes</a>.</p>
<p>You can define various filters:</p>
<ul>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> type is used to search based on a single <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> 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 */
+ <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");
/* Second filter example */
-var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty", "EXACTLY", "123456789")</pre> </li>
- <li> <p> The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> type represents a set of filters. The <span style="font-family: Courier New,Courier,monospace">UNION</span> type composite filter matches any object that is matched by any of its filters; the <span style="font-family: Courier New,Courier,monospace">INTERSECTION</span> 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 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",
new Date(2009, 0, 1),
new Date(2010, 0, 1));
var y2011Filter = new tizen.AttributeRangeFilter("startTime",
var tfilter = new tizen.AttributeFilter("features", "EXACTLY", "VIDEOCALL");
/* Combine the filters into a set */
-var ifilter = new tizen.CompositeFilter("INTERSECTION", [numberFilter, dataFilter, tfilter]);</pre> </li>
+var ifilter = new tizen.CompositeFilter("INTERSECTION",
+ [numberFilter, dataFilter, tfilter]);
+</pre></li>
</ul> </li>
- <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">sortMode</span> 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 <span style="font-family: Courier New,Courier,monospace">null</span>, 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");</pre> </li>
- <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">limit</span> and <span style="font-family: Courier New,Courier,monospace">offset</span> parameters of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <span style="font-family: Courier New,Courier,monospace">limit</span> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <span style="font-family: Courier New,Courier,monospace">offset</span> 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>
+ <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");
+</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>
<p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p>
<ol>
- <li><p> Use the <span style="font-family: Courier New,Courier,monospace">remove()</span> 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method, and then handle the removal in the event handler that is called when the <span style="font-family: Courier New,Courier,monospace">find()</span> method is successful.</p> <pre class="prettyprint">/* Remove the found call history item */
-function onSuccess(results)
+ <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]);
}
-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 <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method.</p> <p>The <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method functions similarly as the <span style="font-family: Courier New,Courier,monospace">remove()</span> 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)
+</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);
}
-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 <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">tizen.callhistory.removeAll();</pre> </li>
+</pre></li>
+ <li><p> To remove all call history items, use the <code>removeAll()</code> method:</p>
+<pre class="prettyprint">
+tizen.callhistory.removeAll();
+</pre></li>
</ol>
<p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p>
<ol>
- <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onadded</span> 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 =
+ <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);
+ console.log("Item " + i + " is newly added. Its startTime: "
+ + newItems[i].startTime);
}
- },</pre> </li>
- <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onchanged</span> 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">
+ },
+</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);
+ console.log("Item " + i + " is updated. Its direction: "
+ + changedItems[i].direction);
}
},
-</pre> </li>
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">onremoved</span> event handler, which tracks all items that are removed from the call history:</p>
-<pre class="prettyprint"> onremoved: function(removedItems)
+</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)
+ for (var i in removedItems)
{
- console.log("Item " + i + " is removed. The removed item's UID: " + removedItems[i]);
+ console.log("Item " + i + " is removed. The removed item's UID: "
+ + removedItems[i]);
}
}
-};</pre>
+};
+</pre>
</li>
-<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to register a listener for observing call history changes:</p> <pre class="prettyprint">var callHistoryListener = tizen.callhistory.addChangeListener(onHistoryChange);</pre> </li>
+<li> <p>Use the <code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to register a listener for observing call history changes:</p>
+<pre class="prettyprint">
+var callHistoryListener = tizen.callhistory.addChangeListener(onHistoryChange);
+</pre></li>
- <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method to deregister a previously registered listener. Use the ID returned by the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span>:</p> <pre class="prettyprint">tizen.callhistory.removeChangeListener(callHistoryListener);</pre> </li>
+ <li> <p>Use the <code>removeChangeListener()</code> method to deregister a previously registered listener. Use the ID returned by the <code>addChangeListener()</code>:</p>
+<pre class="prettyprint">
+tizen.callhistory.removeChangeListener(callHistoryListener);
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<li>Group and multiple contact management
<p>You can <a href="#Managing_Groups">manage contact groups</a>, including getting, updating, and deleting them, using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
<p>You can also <a href="#Adding_Multiple_Contact">create</a> and <a href="#Managing_Multiple_Contact">manage</a> multiple contacts simultaneously using the batch mode. The batch mode provides faster, optimized processing of multiple contacts.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Additionally, breaking down a batch operation helps you avoid blocking other database operations, such as add or remove.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Additionally, breaking down a batch operation helps you avoid blocking other database operations, such as add or remove.
+</div>
+
<p>If you want to receive notifications for batch mode operations, note that each requested batch operation generates only a single event.</p>
</li>
</li>
<li>vCard format conversions
<p>You can convert the contacts to <a target="_blank" href="https://tools.ietf.org/html/rfc2426">vCard format</a> or back to <a href="#Importing_Contact">import</a> and <a href="#Exporting_Contact">export</a> contacts.</p>
-<p>The vCard (RFC 2426) file format (<
span style="font-family: Courier New,Courier,monospace">.vcf</span> or <span style="font-family: Courier New,Courier,monospace">.vcard</span>) is a standard for electronic business cards, which contain contact information, such as name, address, phone numbers, email addresses, URLs, logos, photographs, and audio clips.</p><p>The Contact API supports vCard version 3.0.</p></li>
+<p>The vCard (RFC 2426) file format (<
code>.vcf</code> or <code>.vcard</code>) is a standard for electronic business cards, which contain contact information, such as name, address, phone numbers, email addresses, URLs, logos, photographs, and audio clips.</p><p>The Contact API supports vCard version 3.0.</p></li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/contact.read"/>
<tizen:privilege name="http://tizen.org/privilege/contact.write"/>
</pre>
<h2 id="Adding_Addressbook" name="Adding_Addressbook">Creating an Address Book</h2>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.
+</div>
<p>To create a new address book:</p>
<ol>
<li>Declare a variable to store the created address book:
-<pre class="prettyprint">var myAddressBook = null;</pre>
+<pre class="prettyprint">
+var myAddressBook = null;
+</pre>
</li>
- <li>Define a success callback for the <
span style="font-family: Courier New,Courier,monospace">getAccounts()</span> 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/contact.html#AddressBook">AddressBook</a> object.
+ <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/contact.html#AddressBook">AddressBook</a> object.
- <p>Add the new address book to the system using the <span style="font-family: Courier New,Courier,monospace">addAddressBook()</span> 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)
+ <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)
tizen.contact.addAddressBook(myAddressBook);
console.log("New address book created with ID=" + myAddressBook.id);
}
-}</pre></li>
- <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above.
-<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
+}
+</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">
+tizen.account.getAccounts(getAccountsSuccess, function(err));
</pre></li>
</ol>
<h2 id="Getting_Address_Books" name="Getting_Address_Books">Getting Address Books</h2>
<p>You must retrieve the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the applicable address book to access an existing contact.</p>
<p>To access the address books in which the contacts are listed:</p>
<ul>
- <li><p>To get the default address book, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface to retrieve the default address book as an <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object:</p> <pre class="prettyprint">
+ <li><p>To get the default address book, use the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface to retrieve the default address book as an <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object:</p>
+<pre class="prettyprint">
var myAddressbook;
/* Get the default address book */
myAddressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
- <li><p>To get all available address books, use the <span style="font-family: Courier New,Courier,monospace">getAddressBooks()</span> method. This method passes an array of <span style="font-family: Courier New,Courier,monospace">AddressBook</span> objects to the success event handler.</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>To get all available address books, use the <code>getAddressBooks()</code> method. This method passes an array of <code>AddressBook</code> objects to the success event handler.</p>
+<pre class="prettyprint">
var addressBook;
function addressBooksCB(addressBooks)
/* Get the list of available address books */
tizen.contact.getAddressBooks(addressBooksCB);
</pre>
- <p>All available address books on the device are retrieved. You can use an <span style="font-family: Courier New,Courier,monospace">AddressBook</span> object ID to select a specific address book with the <span style="font-family: Courier New,Courier,monospace">getAddressBook()</span> method, if you know the ID of the address book in advance.</p>
+ <p>All available address books on the device are retrieved. You can use an <code>AddressBook</code> object ID to select a specific address book with the <code>getAddressBook()</code> method, if you know the ID of the address book in advance.</p>
</li>
</ul>
<p>You can add a contact using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
<p>To add a contact to an address book:</p>
<ol>
- <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+ <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</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">
var addressbook = tizen.contact.getDefaultAddressBook();
-</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 <span style="font-family: Courier New,Courier,monospace">Contact</span> constructor):</p> <pre class="prettyprint">
+</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")]
});
-</pre> </li>
- <li><p>Add the <span style="font-family: Courier New,Courier,monospace">Contact</span> object to the default address book with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p> <pre class="prettyprint">addressbook.add(contact);</pre> </li>
+</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">
+addressbook.add(contact);
+</pre></li>
</ol>
<h2 id="Managing_Contact" name="Managing_Contact">Managing a Contact</h2>
<p>You can manage a contact by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface. When managing a single contact at a time, the operations are handled in a synchronous mode.</p>
<p>To manage a contact in your address book:</p>
<ol>
- <li>To retrieve a single contact, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface with the <span style="font-family: Courier New,Courier,monospace">ContactID</span> as a parameter:
- <p>The following example uses the object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactRef">ContactRef</a> interface. The <span style="font-family: Courier New,Courier,monospace">ContactRef</span> object contains both <span style="font-family: Courier New,Courier,monospace">AddressBook</span> ID and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> ID.</p> <pre class="prettyprint">
+ <li>To retrieve a single contact, use the <code>get()</code> method of the <code>AddressBook</code> interface with the <code>ContactID</code> as a parameter:
+ <p>The following example uses the object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactRef">ContactRef</a> interface. The <code>ContactRef</code> object contains both <code>AddressBook</code> ID and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> ID.</p>
+<pre class="prettyprint">
/* contactRef is retrieved by other APIs */
var contactRef;
try
var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
var contact = addressBook.get(contactRef.contactId);
}
-</pre> </li>
+</pre></li>
<li>To manage a single contact:
<ol type="a">
- <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
+ <li><p>Retrieve the default address book using the <code>getDefaultAddressBook()</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">
var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
- <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p> <pre class="prettyprint">
+</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");
try
{
addressbook.find(contactsFoundCB, null, filter, sortMode);
-}</pre>
+}
+</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. The filter includes the standard English characters in the uppercase and lowercase. The entire list consists of ASCII characters from 32 to 126, and from 160 to 255.</p>
<p>The contacts that match the filter are passed as an array to the registered success event handler in the selected sorting order.</p> </li>
- <li><p>Update or delete the found contact inside the <span style="font-family: Courier New,Courier,monospace">contactsFoundCB</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second contact is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
+ <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";
/* Delete the second found contact */
addressbook.remove(contacts[1].id);
}
-}</pre> </li>
+}
+</pre></li>
</ol> </li>
</ol>
<h2 id="Receiving_Contact" name="Receiving_Contact">Receiving Notifications on Contact Changes</h2>
<p>You can keep the address book in your application synchronized with the external contact manager by receiving notifications in your application when contact information is added, updated, or deleted.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface registers an event listener, which starts asynchronously once the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
+<p>The <
code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface registers an event listener, which starts asynchronously once the <code>addChangeListener()</code> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
<p>To receive notifications when contact information changes:</p>
<ol>
- <li><p>Define the needed variables:</p> <pre class="prettyprint">
+ <li><p>Define the needed variables:</p>
+<pre class="prettyprint">
/* Watcher identifier */
var watcherId = 0;
/* This example assumes that the address book is initialized */
var addressbook;
-</pre> </li>
- <li><p>Define the event handlers for different notifications about changes in the selected address book using the <span style="font-family: Courier New,Courier,monospace">AddressBookChangeCallback</span> listener interface:</p> <pre class="prettyprint">
+</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 */
console.log(ids.length + " contacts were deleted");
}
};
-</pre> </li>
- <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Register the listener to use the defined event handlers:</p>
+<pre class="prettyprint">
watcherId = addressbook.addChangeListener(watcher);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The listener object that is the first argument of the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method must have at least 1 event handler defined. If no handlers are defined, a <span style="font-family: Courier New,Courier,monospace">TypeMismatchError</span> error occurs. </td>
- </tr>
- </tbody>
- </table> </li>
- <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Addressbook</span> interface:</p> <pre class="prettyprint">
+
+<div class="note">
+ <strong>Note</strong>
+ The listener object that is the first argument of the <code>addChangeListener()</code> method must have at least 1 event handler defined. If no handlers are defined, a <code>TypeMismatchError</code> error occurs.
+</div>
+ </li>
+ <li><p>To stop the notifications, use the <code>removeChangeListener()</code> method of the <code>Addressbook</code> interface:</p>
+<pre class="prettyprint">
addressbook.removeChangeListener(watcherId);
-</pre> </li>
+</pre></li>
</ol>
<h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</h2>
-<p>You can create multiple contacts simultaneously using the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method.</p>
+<p>You can create multiple contacts simultaneously using the <code>addBatch()</code> method.</p>
<p>To add multiple contacts to an address book in the batch mode:</p>
<ol>
- <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+ <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</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">
addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
- <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
+</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"}),
name: new tizen.ContactName({firstName:"Elton", lastName:"John"}),
emails: [new tizen.ContactEmailAddress("user2@example.com")]
});
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> 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 class="prettyprint">
+</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 class="prettyprint">
addressbook.addBatch([c1, c2]);
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous. Make sure you provide success and error callbacks with it.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>addBatch()</code> method is asynchronous. Make sure you provide success and error callbacks with it.
+</div>
</li>
</ol>
<h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</h2>
-<p>You can manage multiple contacts simultaneously using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>.</p>
+<p>You can manage multiple contacts simultaneously using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
<p>To manage multiple contacts in your address books in the batch mode:</p>
<ol>
- <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
+ <li><p>Retrieve the default address book using the <code>getDefaultAddressBook()</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">
var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
- <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">
+</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");
try
{
addressbook.find(contactsFoundCB, null, filter, sortMode);
-}</pre>
+}
+</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>
</li>
<li>To update contacts:
<ol type="a">
- <li><p>Define the contact changes to be made in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
+ <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 */
{
contacts[i].name.firstName = "Christopher";
}
-</pre> </li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple contacts asynchronously:</p> <pre class="prettyprint">
+</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);
}
-</pre> </li>
+</pre></li>
</ol> </li>
- <li><p>To delete contacts, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple contacts asynchronously:</p> <pre class="prettyprint">
+ <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]);
}
-</pre> </li>
+</pre></li>
</ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> methods are asynchronous. Make sure you provide success and error callbacks with them.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>updateBatch()</code> and <code>removeBatch()</code> methods are asynchronous. Make sure you provide success and error callbacks with them.
+</div>
<h2 id="Managing_Groups" name="Managing_Groups">Managing Contact Groups</h2>
<p>To create engaging applications with various contact features, learn to manage contact groups:</p>
<ol>
- <li><p>Retrieve the default system address book using the <
span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
+ <li><p>Retrieve the default system address book using the <
code>getDefaultAddressBook()</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">
-var addressbook = tizen.contact.getDefaultAddressBook();</pre> </li>
- <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 <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>
+var addressbook = tizen.contact.getDefaultAddressBook();
+</pre></li>
+ <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
+try
{
group = new tizen.ContactGroup("Company");
addressbook.addGroup(group)
<li>To manage groups:
-<ul> <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method
- of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+<ul> <li><p>To retrieve all the contact groups from the address book, use the <code>getGroups()</code> method
+ of the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
var groups;
-try
+try
{
groups = addressbook.getGroups();
}
</pre></li>
- <li><p>To change the name of the group, assign the <span style="font-family: Courier New,Courier,monospace">name</span> property a new value and use the <span style="font-family: Courier New,Courier,monospace">updateGroup()</span>
- method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+ <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
+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 <span style="font-family: Courier New,Courier,monospace">getGroup()</span> method of
- the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+ <li><p>To retrieve a specific group, use the <code>getGroup()</code> method of
+ the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
-try
+try
{
group = addressbook.getGroup(group.id);
}
</pre></li>
- <li><p>To remove a group from the address book, use the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method of
- the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+ <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
+try
{
addressbook.removeGroup(group.id);
console.log("Group was removed");
<li>To manage a single person:
<p>When you are managing a single person at a time, the operations are handled in a synchronous mode.</p>
<ol>
- <li><p>To retrieve persons, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContactManager</span> interface.</p>
+ <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");
<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>
- <li><p>Update or delete the found persons in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second person is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
+ <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;
/* Delete the second found person */
tizen.contact.remove(persons[1].id);
}
-}</pre></li>
+}
+</pre></li>
</ol> </li>
-<li>To handle multiple persons simultaneously, use the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>.</li>
+<li>To handle multiple persons simultaneously, use the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</li>
<li>To merge multiple persons into a single person item:
<ol>
<li>Retrieve the persons as described above.</li>
- <li><p>Define the persons to be merged in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler:</p> <pre class="prettyprint">function personsFoundCB(persons)
+ <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];</pre></li>
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">link()</span> 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 */
+ 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);
-}</pre></li>
+}
+</pre></li>
</ol> </li>
<li>To get and reset the number of person's calls, messages, and emails:
- <p>You can get the total number of each person's calls, messages, and emails by using the <span style="font-family: Courier New,Courier,monospace">getUsageCount()</span> function. You can also reset the usage count of a person using the <span style="font-family: Courier New,Courier,monospace">resetUsageCount()</span> function of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">Person</a> interface, which works in a synchronous mode. To reset the usage count for multiple persons, use the <span style="font-family: Courier New,Courier,monospace">resetUsageCountBatch()</span> function, which works in an asynchronous mode.</p>
+ <p>You can get the total number of each person's calls, messages, and emails by using the <code>getUsageCount()</code> function. You can also reset the usage count of a person using the <code>resetUsageCount()</code> function of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">Person</a> interface, which works in a synchronous mode. To reset the usage count for multiple persons, use the <code>resetUsageCountBatch()</code> function, which works in an asynchronous mode.</p>
<ul>
<li><p>Retrieve the total number of calls, messages, and emails of a particular person:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
/* Get a person first */
var person = tizen.contact.get(person_id);
/* Get the total number of calls, messages, and emails */
</pre></li>
<li><p>Retrieve the number of usages of a specified type:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
/* Get a person first */
var person = tizen.contact.get(person_id);
/* Get number of incoming calls */
</pre></li>
<li><p>Reset the total number of calls, messages, and emails of a particular person:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
/* Get a person first */
var person = tizen.contact.get(person_id);
/* Reset all usage counts */
</pre></li>
<li><p>Reset the number of usages of a specified type:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
/* Get a person first */
var person = tizen.contact.get(person_id);
/* Reset incoming calls */
</pre></li>
<li><p>Reset the total number of calls, messages, and emails for a few persons:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
tizen.contact.resetUsageCountBatch([person1_id, person2_id]);
</pre></li>
<li><p>Reset the number usages of a specified type for a few persons:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
tizen.contact.resetUsageCountBatch([person1_id, person2_id], 'INCOMING_CALLS');
</pre></li>
</ul>
<p>To create engaging applications with various contacts features, import contacts with the help of the vCard format:</p>
<ol>
- <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+ <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</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">
var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
- <li><p>Create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the vCard string and add it to the default address book:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the vCard string and add it to the default address book:</p>
+<pre class="prettyprint">
var contact = null;
try
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 <span style="font-family: Courier New,Courier,monospace">addBatch()</span> 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>
+}
+</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>
<h2 id="Exporting_Contact" name="Exporting_Contact">Exporting Contacts</h2>
<p>To create engaging applications with various contacts features, export contacts with the help of the vCard format:</p>
<ol>
- <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with "Chris" in the first name:</p> <pre class="prettyprint">
+ <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with "Chris" in the first name:</p>
+<pre class="prettyprint">
var addressbook;
var addressbook = tizen.contact.getDefaultAddressBook();
/* 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 <span style="font-family: Courier New,Courier,monospace">find()</span> 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">
+</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");
-}</pre></li>
+}
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>After starting the synchronization process, you can <a href="#Starting_Sync">monitor the progress</a> of the operation.</p>
</li>
</ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">As a prerequisite to synchronizing your device data with the server, you must create an OMA DS server account.</td>
- </tr>
- </tbody>
- </table>
-
+
+<div class="note">
+ <strong>Note</strong>
+ As a prerequisite to synchronizing your device data with the server, you must create an OMA DS server account.
+</div>
+
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization</a> API, the application has to request permission by adding the following privilege to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization</a> API, the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/datasync"/>
</pre>
<p>To create a sync profile:</p>
<ol>
- <li><p>Check whether there are available profile slots on the device using the <span style="font-family: Courier New,Courier,monospace">getProfilesNum()</span> and <span style="font-family: Courier New,Courier,monospace">getMaxProfilesNum()</span> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface:</p> <pre class="prettyprint">
+ <li><p>Check whether there are available profile slots on the device using the <code>getProfilesNum()</code> and <code>getMaxProfilesNum()</code> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface:</p>
+<pre class="prettyprint">
var numMaxProfiles = tizen.datasync.getMaxProfilesNum();
var numProfiles = tizen.datasync.getProfilesNum();
-</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">
+</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 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 <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <span style="font-family: Courier New,Courier,monospace">DataSynchronizationManager</span> interface:</p> <pre class="prettyprint">
+</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;
-}</pre> </li>
+}
+</pre></li>
</ol>
<h2 id="Starting_Sync" name="Starting_Sync">Starting and Monitoring Data Synchronization</h2>
-<p>After starting the synchronization process using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method of the <span style="font-family: Courier New,Courier,monospace">DataSynchronizationManager</span> interface, you can monitor the progress of the operation. Use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <span style="font-family: Courier New,Courier,monospace">getLastSyncStatistics()</span> method.</p>
+<p>After starting the synchronization process using the <code>startSync()</code> method of the <code>DataSynchronizationManager</code> interface, you can monitor the progress of the operation. Use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <code>getLastSyncStatistics()</code> method.</p>
<p>To start and monitor the data synchronization process:</p>
<ol>
- <li><p>Define the event handlers for the notifications using the <span style="font-family: Courier New,Courier,monospace">SyncProgressCallback</span> listener interface:</p> <pre class="prettyprint">
+ <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)
+ onprogress: function(profileId, serviceType, isFromServer,
+ totalPerType, syncedPerType)
{
- console.log('Total: ' + totalPerType + ', synced: ' + syncedPerType + ' for the sync type: ' + serviceType);
+ 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 <span style="font-family: Courier New,Courier,monospace">startSync()</span> method, with the corresponding listener as a parameter:</p> <pre class="prettyprint">
+</pre></li>
+ <li><p>Start the sync operation using the <code>startSync()</code> method, with the corresponding listener as a parameter:</p>
+<pre class="prettyprint">
tizen.datasync.startSync(profileId, syncCallback);
-</pre> </li>
+</pre></li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>The CallLog sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 2 screens: the main screen displays the entire call history and the History for Caller screen displays the detailed call history of a specific caller.</p>
<p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: CallLog screens</p>
+ <p align="center"><strong>Figure: CallLog screens</strong></p>
<p align="center"><img alt="CallLog screens" src="../../images/calllog.png" /></p>
<h3 id="temp" name="temp">Using the Template Manager</h3>
<p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol class="tutorstep">
- <li>app.ui.templateManager.js Source File
+ <ol>
+ <li><strong>app.ui.templateManager.js Source File</strong>
<ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
if ($.isArray(tplNames))
{
$.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
{
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
+ if (self.cache[fileName] === undefined)
{
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
+ tplName = [fileName, app.config.get('templateExtension')].join('');
+ tplPath = [app.config.get('templateDir'), tplName].join('/');
+ $.ajax(
{
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
+ url: tplPath,
+ cache: true,
+ dataType: 'html',
+ async: true,
+ success: function(data)
+ {
+ cachedTemplates += 1;
+ self.cache[fileName] = data;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
+ },
+ error: function(jqXHR, textStatus, errorThrown)
{
- onSuccess();
+ console.error('templateManagerError: ' + errorThrown);
}
- },
- error: function(jqXHR, textStatus, errorThrown)
+ });
+ }
+ else
+ {
+ cachedTemplates += 1;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
{
- console.error('templateManagerError: ' + errorThrown);
+ onSuccess();
}
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
- {
- onSuccess();
}
- }
- });
+ });
}
}
</pre> </li>
<li> <p>Next, the template manager returns the template HTML content from the cache.</p>
- <pre class="prettyprint">get: function TemplateManager_get(tplName, tplParams)
+<pre class="prettyprint">
+get: function TemplateManager_get(tplName, tplParams)
{
if (this.cache[tplName] !== undefined)
{
}
</pre> </li>
<li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
- <pre class="prettyprint">getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
+<pre class="prettyprint">
+getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
{
var tplParam, replaceRegExp;
}
return tplHtml;
-}</pre> </li>
+}
+</pre></li>
</ol> </li>
</ol>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>callView.tpl Source File
+ <ol>
+ <li><strong>callView.tpl Source File</strong>
<ol type="a">
- <li> <p>The main screen of the application displays an aggregated call history list sorted by date. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
- <pre class="prettyprint lang-html"><div data-role="page" id="callView">
+ <li> <p>The main screen of the application displays an aggregated call history list sorted by date. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
+<pre class="prettyprint lang-html">
+<div data-role="page" id="callView">
<!--Header section-->
<div data-role="header" id="page-header" data-position="fixed">
<h1>CALL LOG</h1>
</div>
-</pre> </li>
- <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements listed in the <span style="font-family: Courier New,Courier,monospace;">templates/callItemRow.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/dateRow.tpl</span> files. To display the search bar, the <span style="font-family: Courier New,Courier,monospace;">data-filter</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p> <pre class="prettyprint lang-html"> <!--Content section-->
+</pre></li>
+ <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements listed in the <code>templates/callItemRow.tpl</code> and <code>templates/dateRow.tpl</code> files. To display the search bar, the <code>data-filter</code> attribute is set to <code>true</code>.</p>
+<pre class="prettyprint lang-html">
+ <!--Content section-->
<div id="page-content-scroll">
<div id="page-content">
- <ul data-role="listview" id="calllogList" data-filter="true"
+ <ul data-role="listview" id="calllogList" data-filter="true"
data-position="fixed" data-insert="true"></ul>
</div>
</div>
</div>
-</pre> </li>
+</pre></li>
</ol> </li>
- <li>dateRow.tpl Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">dateRow.tpl</span> template file defines the date at which a call has been logged in the history.</p>
- <pre class="prettyprint lang-html"><li class="date">%date%</li></pre> </li>
- <li>callItemRow.tpl Source File
- <p>The <span style="font-family: Courier New,Courier,monospace;">callItemRow.tpl</span> template file defines the details of each call.</p>
- <pre class="prettyprint lang-html"><li data-filtertext="%name%" class="%cssClasses%">
- <div class="toRemove hidden"><input type="checkbox" /></div>
+ <li><strong>dateRow.tpl Source File</strong>
+<p>The <code>dateRow.tpl</code> template file defines the date at which a call has been logged in the history.</p>
+<pre class="prettyprint lang-html">
+<li class="date">%date%</li>
+</pre></li>
+ <li><strong>callItemRow.tpl Source File</strong>
+ <p>The <code>callItemRow.tpl</code> template file defines the details of each call.</p>
+<pre class="prettyprint lang-html">
+<li data-filtertext="%name%" class="%cssClasses%">
+ <div class="toRemove hidden"><input type="checkbox"/></div>
<div class="numberOrName">%name%</div>
<div class="iconStatus"></div>
<div class="callTime">%callTime%</div>
-</li>
-</pre> </li>
+</li>
+</pre></li>
</ol>
<h2 id="Initializing" name="Browsing">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. </p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file. </p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
- <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
-</widget></pre></li>
+ <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
+</widget>
+</pre></li>
</ol>
<h2 id="Browsing" name="Browsing">Browsing a Call Log</h2>
<p>This section builds upon the elements described in <a href="call_history_w.htm#Searching_Call_History">Searching for Call History Items</a>.</p>
- <p>The call log retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> file.</p>
- <ol class="tutorstep">
- <li>Retrieving the Complete Call History
+ <p>The call log retrieval functionality is implemented in the <code>app.model.js</code> file.</p>
+ <ol>
+ <li><strong>Retrieving the Complete Call History</strong>
<ol type="a">
- <li><p>The <span style="font-family: Courier New,Courier,monospace;">find()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> file, is used to retrieve the call history in the descending order by specifying the required parameters.</p>
-<pre class="prettyprint">getCallHistory: function Model_getCallHistory(onSuccess, onError)
+ <li><p>The <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <code>app.model.js</code> file, is used to retrieve the call history in the descending order by specifying the required parameters.</p>
+<pre class="prettyprint">
+getCallHistory: function Model_getCallHistory(onSuccess, onError)
{
- tizen.callhistory.find(onSuccess, onError, null, new tizen.SortMode('startTime', 'DESC'));
+ tizen.callhistory.find(onSuccess, onError, null,
+ new tizen.SortMode('startTime', 'DESC'));
}
</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace;">showCallHistory()</span> method, placed in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file, calls the <span style="font-family: Courier New,Courier,monospace;">getCallHistory()</span> method from <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> and shows the results of the call history retrieval on the screen.</p>
-<pre class="prettyprint">showCallHistory: function App_showCallHistory()
+ <li><p>The <code>showCallHistory()</code> method, placed in the <code>app.js</code> file, calls the <code>getCallHistory()</code> method from <code>app.model.js</code> and shows the results of the call history retrieval on the screen.</p>
+<pre class="prettyprint">
+showCallHistory: function App_showCallHistory()
{
this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
}
</pre></li></ol>
</li>
- <li>Retrieving the Call History for a Specific Caller
- <ol type="a"><li><p>To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the <span style="font-family: Courier New,Courier,monospace;">find()</span> method.</p>
-<pre class="prettyprint">getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, onSuccess)
+ <li><strong>Retrieving the Call History for a Specific Caller</strong>
+ <ol type="a"><li><p>To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the <code>find()</code> method.</p>
+<pre class="prettyprint">
+getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber,
+ onSuccess)
{
tizen.callhistory.find(onSuccess, null,
new tizen.AttributeFilter('remoteParties.remoteParty',
'EXACTLY', phoneNumber),
new tizen.SortMode('startTime', 'DESC'));
}
-
</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace;">showHistoryForCaller()</span> method calls the <span style="font-family: Courier New,Courier,monospace;">getCallHistoryForCaller()</span> method and shows the results of the specific caller history retrieval on the screen.</p>
-<pre class="prettyprint">showHistoryForCaller: function App_showHistoryForCaller(phoneNumber)
+ <li><p>The <code>showHistoryForCaller()</code> method calls the <code>getCallHistoryForCaller()</code> method and shows the results of the specific caller history retrieval on the screen.</p>
+<pre class="prettyprint">
+showHistoryForCaller: function App_showHistoryForCaller(phoneNumber)
{
this.lastViewedCaller = phoneNumber;
- this.model.getCallHistoryForCaller(phoneNumber,
- this.ui.showHistoryForCaller.bind(this.ui, phoneNumber));
+ this.model.getCallHistoryForCaller(phoneNumber,
+ this.ui.showHistoryForCaller.bind(this.ui,
+ phoneNumber));
}
</pre></li></ol>
</li>
<p>This section builds upon the elements described in <a href="call_history_w.htm#Removing_Call_History">Removing Call History Items</a>.</p>
<h3 id="listen" name="listen">Listening to Call History Changes</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File
- <p>The <span style="font-family: Courier New,Courier,monospace;">addChangeListener()</span> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface is used to add an event listener for listening to change events in the call history.</p>
- <pre class="prettyprint">registerChangeListener: function Model_registerChangeListener(onSuccessCallback)
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <p>The <code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface is used to add an event listener for listening to change events in the call history.</p>
+<pre class="prettyprint">
+registerChangeListener: function Model_registerChangeListener(onSuccessCallback)
{
var callHistoryListener =
{
tizen.callhistory.addChangeListener(callHistoryListener);
}
-</pre> </li>
-<li>app.js Source File<p>The <span style="font-family: Courier New,Courier,monospace;">registerChangeListener()</span> method is called during the application initialization to register the defined event handlers.</p>
- <pre class="prettyprint">init: function App_init()
+</pre></li>
+<li><strong>app.js Source File</strong>
+<p>The <code>registerChangeListener()</code> method is called during the application initialization to register the defined event handlers.</p>
+<pre class="prettyprint">
+init: function App_init()
{
this.config = new Config();
this.model = new Model();
return this;
}
-</pre> </li></ol>
+</pre></li></ol>
<h3 id="delete" name="delete">Deleting the Call History for a Caller</h3>
- <ol class="tutorstep">
- <li>app.model.js Source File <p>The <span style="font-family: Courier New,Courier,monospace;">remove()</span> method of the <span style="font-family: Courier New,Courier,monospace;">CallHistory</span> interface is used to delete a specific call log entry.</p>
-<pre class="prettyprint">deleteLog: function Model_deleteLog(entry)
+ <ol>
+ <li><strong>app.model.js Source File</strong>
+ <p>The <code>remove()</code> method of the <code>CallHistory</code> interface is used to delete a specific call log entry.</p>
+<pre class="prettyprint">
+deleteLog: function Model_deleteLog(entry)
{
try
{
tizen.callhistory.remove(entry);
}
}
-</pre></li>
+</pre></li>
</ol>
<h3 id="respond" name="respond">Responding to a Call Log Entry</h3>
- <p>The call log entry response functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file.</p>
- <ol class="tutorstep">
- <li>Calling <p>The <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API is used to <a href="../app_management/app_controls_w.htm">launch other applications</a>. To respond to the call log by calling, specify the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/appcontrol/operation/dial</span> operation and the contact number as parameters.</p> <pre class="prettyprint">makeCall: function App_makeCall(phoneNumber)
+ <p>The call log entry response functionality is implemented in the <code>app.js</code> file.</p>
+ <ol>
+ <li><strong>Calling</strong>
+ <p>The <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API is used to <a href="../app_management/app_controls_w.htm">launch other applications</a>. To respond to the call log by calling, specify the <code>http://tizen.org/appcontrol/operation/dial</code> operation and the contact number as parameters.</p>
+<pre class="prettyprint">
+makeCall: function App_makeCall(phoneNumber)
{
- var self = this, appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call',
- 'tel:' + phoneNumber);
+ var self = this, appControl =
+ new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call',
+ 'tel:' + phoneNumber);
- tizen.application.launchAppControl(appControl, null, function() {}, function(e)
- {
- /* Error handling */
- },
- {
- onsuccess: function() {},
- onfailure: function(er)
+ tizen.application.launchAppControl(appControl, null, function() {}, function(e)
{
/* Error handling */
+ },
+ {
+ onsuccess: function() {},
+ onfailure: function(er)
+ {
+ /* Error handling */
+ }
}
- }
},
-</pre> </li>
- <li>Sending a Message <p>To respond to the call log by sending a message, specify the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/appcontrol/operation/compose</span> operation and the contact number as parameters.</p>
- <pre class="prettyprint">sendSms: function App_sendSms(phoneNumber)
+</pre></li>
+ <li><strong>Sending a Message</strong>
+ <p>To respond to the call log by sending a message, specify the <code>http://tizen.org/appcontrol/operation/compose</code> operation and the contact number as parameters.</p>
+<pre class="prettyprint">
+sendSms: function App_sendSms(phoneNumber)
{
- var self = this, appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
- 'sms:' + phoneNumber);
+ var self = this, appControl =
+ new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
+ 'sms:' + phoneNumber);
tizen.application.launchAppControl(appControl, null, function() {}, function(e)
- {
- /* Error handling */
- },
- {
- onsuccess: function() {},
- onfailure: function(er)
{
/* Error handling */
- }
- });
+ },
+ {
+ onsuccess: function() {},
+ onfailure: function(er)
+ {
+ /* Error handling */
+ }
+ });
}
-</pre> </li>
+</pre></li>
</ol>
<p>The EventManager sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays the events list, the New event screen allows adding and editing events, and the Set alarm screen enables setting an alarm for an event.</p>
<p>The following figure shows the main screens of the application.</p>
- <p class="figure">Figure: EventManager screens</p>
+ <p align="center"><strong>Figure: EventManager screens</strong></p>
<p align="center"><img alt="EventManager screens" src="../../images/eventmanager.png" /></p>
<h3 id="temp" name="temp">Using the Template Manager</h3>
<p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol class="tutorstep">
- <li>app.ui.templateManager.js Source File
+ <ol>
+ <li><strong>app.ui.templateManager.js Source File</strong>
<ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
if ($.isArray(tplNames))
{
$.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
{
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
+ if (self.cache[fileName] === undefined)
{
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
+ tplName = [fileName, app.config.get('templateExtension')].join('');
+ tplPath = [app.config.get('templateDir'), tplName].join('/');
+ $.ajax(
{
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
+ url: tplPath,
+ cache: true,
+ dataType: 'html',
+ async: true,
+ success: function(data)
+ {
+ cachedTemplates += 1;
+ self.cache[fileName] = data;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
+ {
+ onSuccess();
+ }
+ },
+ error: function(jqXHR, textStatus, errorThrown)
{
- onSuccess();
+ /* Error handling */
}
- },
- error: function(jqXHR, textStatus, errorThrown)
+ });
+ }
+ else
+ {
+ cachedTemplates += 1;
+ if (cachedTemplates >= tplNames.length
+ && typeof onSuccess === 'function')
{
- /* Error handling */
+ onSuccess();
}
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function')
- {
- onSuccess();
}
- }
- });
+ });
}
}
-</pre> </li>
+</pre></li>
<li> <p>Next, the template manager returns the template HTML content from the cache.</p>
- <pre class="prettyprint">get: function TemplateManager_get(tplName, tplParams)
+<pre class="prettyprint">
+get: function TemplateManager_get(tplName, tplParams)
{
if (this.cache[tplName] !== undefined)
{
return '';
}
-</pre> </li>
+</pre></li>
<li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
- <pre class="prettyprint">getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
+<pre class="prettyprint">
+getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
{
var tplParam, replaceRegExp;
return tplHtml;
}
-</pre> </li>
+</pre></li>
</ol> </li>
</ol>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>templates/home.tpl Source File
+ <ol>
+ <li><strong>templates/home.tpl Source File</strong>
<ol type="a"><li>
-<p>The main screen displays a list of calendar events. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+<p>The main screen displays a list of calendar events. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
<div data-role="page" id="home" data-add-back-btn="false">
<div data-role="header">
<h1>Event manager</h1>
</div>
-</pre> </li>
-<li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements as defined in the <span style="font-family: Courier New,Courier,monospace;">templates/event.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/all_day_event.tpl</span> files.</p>
+</pre></li>
+<li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements as defined in the <code>templates/event.tpl</code> and <code>templates/all_day_event.tpl</code> files.</p>
<pre class="prettyprint lang-html">
<!--Content section-->
<div data-role="content">
<div id="events_list">
<ul data-role="listview" data-inset="true"></ul>
</div>
- </div></pre></li>
-<li><p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">footer</span>. The footer section contains a tab bar with buttons for adding an event and closing the application.</p>
-<pre class="prettyprint lang-html"> <!--Footer section-->
+ </div>
+</pre></li>
+<li><p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for adding an event and closing the application.</p>
+<pre class="prettyprint lang-html">
+ <!--Footer section-->
<div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar" >
+ <div data-role="tabbar" data-style="tabbar">
<ul>
<li><a href="#new_event" id="newEventBtn">Add New Event</a></li>
<li><a href="javascript:void(0)" id="exit_btn">Exit</a></li>
</div>
</div>
</div>
-</pre> </li></ol>
+</pre></li></ol>
</li>
-<li>templates/event.tpl Source File
+<li><strong>templates/event.tpl Source File</strong>
<p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a>.</p>
<pre class="prettyprint lang-html">
<li class="event" data-eventid="%uid%">
</div>
<div class="deleteEvent">
<form>
- <input type="button" class="remove_event_btn" data-inline="true" value="delete"/>
+ <input type="button" class="remove_event_btn"
+ data-inline="true" value="delete"/>
</form>
</div>
</li>
</pre>
</li></ol>
<h3 id="new" name="new">Defining the New Event Screen</h3>
- <ol class="tutorstep">
-<li>templates/new_event.tpl Source File
+ <ol>
+<li><strong>templates/new_event.tpl Source File</strong>
<p>The New event screen contains UI components for setting the event title, type, start and end date, and an alarm for the event. The footer section of the screen contains a tab bar with buttons for saving the event information, or deleting it.</p>
<pre class="prettyprint lang-html">
<!--New event screen layout-->
</pre>
</li></ol>
<h3 id="set" name="set">Defining the Set Alarm Screen</h3>
- <ol class="tutorstep">
-<li>templates/alarm.tpl Source File
+ <ol>
+<li><strong>templates/alarm.tpl Source File</strong>
<p>The Set alarm screen contains radio buttons for defining the time of the alarm. The footer section of the screen contains a button for saving the alarm setting.</p>
<pre class="prettyprint lang-html">
<!--Set alarm screen layout-->
<!--Content section-->
<div data-role="content">
- <input type="radio" name="radio-choice" id="radio-choice-0" value="-1" />
+ <input type="radio" name="radio-choice" id="radio-choice-0" value="-1"/>
<label for="radio-choice-0">(Off)</label>
<input type="radio" name="radio-choice" id="radio-choice-1" value="0" checked />
<label for="radio-choice-1">On time</label>
- <input type="radio" name="radio-choice" id="radio-choice-2" value="5" />
+ <input type="radio" name="radio-choice" id="radio-choice-2" value="5"/>
<label for="radio-choice-2">5 minutes before</label>
- <input type="radio" name="radio-choice" id="radio-choice-3" value="30" />
+ <input type="radio" name="radio-choice" id="radio-choice-3" value="30"/>
<label for="radio-choice-3">30 minutes before</label>
- <input type="radio" name="radio-choice" id="radio-choice-4" value="60" />
+ <input type="radio" name="radio-choice" id="radio-choice-4" value="60"/>
<label for="radio-choice-4">1 hour before</label>
<input type="radio" class="customDuration" name="radio-choice" id="yes_1"
<!--Footer section-->
<div data-role="footer" data-position ="fixed">
- <div data-role="tabbar" data-style="tabbar" >
+ <div data-role="tabbar" data-style="tabbar">
<ul>
<li><a href="#new_event" id="add-alarm">Save</a></li>
</ul>
</ol>
<h2 id="Initializing" name="Initializing">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. </p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file. </p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
<tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
<tizen:privilege name="http://tizen.org/privilege/time"/>
-</widget></pre> </li>
+</widget>
+</pre></li>
</ol>
<h2 id="Managing" name="Managing">Managing Calendar Events</h2>
<p>This section builds upon the elements described in <a href="calendar_w.htm#Adding_Events">Adding Events to a Calendar</a> and <a href="calendar_w.htm#Managing_Event">Managing a Single Calendar Event</a>.</p>
- <p>The calendar event management functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p>
- <ol class="tutorstep">
- <li>Accessing Events
-<p>To access events, retrieve the default calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method.</p>
+ <p>The calendar event management functionality is implemented in the <code>js/app.model.js</code> file.</p>
+ <ol>
+ <li><strong>Accessing Events</strong>
+<p>To access events, retrieve the default calendar using the <code>getDefaultCalendar()</code> method.</p>
<pre class="prettyprint">
getCalendar: function Model_getCalendar()
{
},
</pre>
</li>
-<li>Creating a New Calendar Event
-<p>Use the <span style="font-family: Courier New,Courier,monospace">addEventToDefaultCalendar()</span> method to add a new event to the calendar.</p>
-<pre class="prettyprint">addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit)
+<li><strong>Creating a New Calendar Event</strong>
+<p>Use the <code>addEventToDefaultCalendar()</code> method to add a new event to the calendar.</p>
+<pre class="prettyprint">
+addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit)
{
var calendar = null, event = null;
calendar = this.getCalendar();
},
</pre>
</li>
-<li>Modifying a Calendar Event
-<p>Use the <span style="font-family: Courier New,Courier,monospace">get()</span> method to get the calendar, and use the <span style="font-family: Courier New,Courier,monospace">update()</span> method to save the changed values to the calendar.</p>
-<pre class="prettyprint">updateEvent: function Model_updateEvent(event_id, new_values)
+<li><strong>Modifying a Calendar Event</strong>
+<p>Use the <code>get()</code> method to get the calendar, and use the <code>update()</code> method to save the changed values to the calendar.</p>
+<pre class="prettyprint">
+updateEvent: function Model_updateEvent(event_id, new_values)
{
var myCalendar = this.getCalendar(), new_event, prop,
event = myCalendar.get(new tizen.CalendarEventId(event_id));
</pre>
</li>
-<li>Deleting Calendar Event
-<p>Use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method to delete an event, and update the event list using the <span style="font-family: Courier New,Courier,monospace">loadEvents()</span> method.</p>
-<pre class="prettyprint">deleteEvent: function Model_deleteEvent(event_id)
+<li><strong>Deleting Calendar Event</strong>
+<p>Use the <code>remove()</code> method to delete an event, and update the event list using the <code>loadEvents()</code> method.</p>
+<pre class="prettyprint">
+deleteEvent: function Model_deleteEvent(event_id)
{
var myCalendar = this.getCalendar();
myCalendar.remove(new tizen.CalendarEventId(event_id));
</ol>
<h2 id="Filtering" name="Filtering">Filtering Calendar Events</h2>
- <p>The calendar event filtering functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating a Filter
-<p>Use the <span style="font-family: Courier New,Courier,monospace">getStartDateFilter()</span> method to create a filter for a given date. The filter includes events starting on the specified date or before, and ending on the specified date or later. It also includes all-day events for the specified date.</p>
+ <p>The calendar event filtering functionality is implemented in the <code>js/app.model.js</code> file.</p>
+ <ol>
+ <li><strong>Creating a Filter</strong>
+<p>Use the <code>getStartDateFilter()</code> method to create a filter for a given date. The filter includes events starting on the specified date or before, and ending on the specified date or later. It also includes all-day events for the specified date.</p>
<pre class="prettyprint">
getStartDateFilter: function Model_getStartDateFilter(date)
{
var today = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()),
- tomorrow = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()+1);
+ tomorrow =
+ new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()+1);
return new tizen.CompositeFilter("UNION",
[
},
</pre>
</li>
-<li>Retrieving Filtered Events
-<p>Use the <span style="font-family: Courier New,Courier,monospace">find()</span> method with the composite filter created above to retrieve filtered events from the calendar.</p>
-<pre class="prettyprint">getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date, onSuccess, onError)
+<li><strong>Retrieving Filtered Events</strong>
+<p>Use the <code>find()</code> method with the composite filter created above to retrieve filtered events from the calendar.</p>
+<pre class="prettyprint">
+getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date,
+ onSuccess,
+ onError)
{
var calendar = null, filter = null;
calendar = this.getCalendar();
</li>
</ul>
- <p class="figure">Figure: Key manager process</p>
+ <p align="center"><strong>Figure: Key manager process</strong></p>
<p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
<h2 id="save">Saving Data</h2>
<p>To save data in a repository:</p>
<ol>
-<li><p>Save the data using the <span style="font-family: Courier New,Courier,monospace">saveData()</span> method:</p>
+<li><p>Save the data using the <code>saveData()</code> method:</p>
<pre class="prettyprint">
var data_name = "data1", raw_data = "my data";
</pre></li>
<li>
-<p>To set a permission for an application to remove the data, use the <span style="font-family: Courier New,Courier,monospace">setPermission()</span> method in the data saving callback.</p>
+<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()
+function onPermissionSet()
{
console.log("Successfully set permission");
}
-function onSave()
+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",
+ /*
+ 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>
<pre class="prettyprint">
var data_name = "data1", raw_data = "my data";
-function onSave()
+function onSave()
{
- /* Dictionary does not require a package ID because the */
- /* application calling getData() saved "data1" */
+ /*
+ 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");
}
</li>
<li><p>Retrieve data which another application has saved, and granted permission for you to access.</p>
-<p>The following example assumes that the application that created <span style="font-family: Courier New,Courier,monospace">aliases[0]</span> also gave your application permission to read it:</p>
+<p>The following example assumes that the application that created <code>aliases[0]</code> also gave your application permission to read it:</p>
<pre class="prettyprint">
var aliases = tizen.keymanager.getDataAliasList();
-if (aliases.length != 0)
+if (aliases.length != 0)
{
- /* Assuming that the application calling getData() */
- /* has permission to read aliases[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 class="prettyprint">
var data_name = "data1", raw_data = "my data";
-function onSave()
+function onSave()
{
/* Do something */
- /* Dictionary does not require a package ID because the */
- /* application calling removeData() saved "data1" */
+ /*
+ Dictionary does not require a package ID because the
+ application calling removeData() saved "data1"
+ */
tizen.keymanager.removeData({"name": data_name});
}
</li>
<li><p>Remove data which another application has saved, and granted permission for you to remove.</p>
-<p>The following example assumes that the application that created <span style="font-family: Courier New,Courier,monospace">aliases[0]</span> also gave your application permission to remove it:</p>
+<p>The following example assumes that the application that created <code>aliases[0]</code> also gave your application permission to remove it:</p>
<pre class="prettyprint">
var aliases = tizen.keymanager.getDataAliasList();
-if (aliases.length != 0)
+if (aliases.length != 0)
{
- /* Assuming that the application calling removeData() */
- /* has permission to remove aliases[0] */
+ /*
+ Assuming that the application calling removeData()
+ has permission to remove aliases[0]
+ */
var app_data = tizen.keymanager.removeData(aliases[0]);
}
</pre>
<div id="container"><div id="contents"><div class="content">
<h1>Device Sensors</h1>
-
<p>Tizen provides interfaces and methods to manage sensor data from <a href="#capability">various sensors on the device</a>. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>Learning how to start, read and stop a sensor is a basic sensor management skill:</p>
<ol>
-<li id="support"><p>Check that the sensor is supported by the device using the <
span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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>
+<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)
{
</pre>
</li>
-<li><p>To get all available sensor types, use the <span style="font-family: Courier New,Courier,monospace">getAvailableSensors()</span> method:</p>
+<li><p>To get all available sensor types, use the <code>getAvailableSensors()</code> method:</p>
<pre class="prettyprint">
var sensors = tizen.sensorservice.getAvailableSensors();
</pre>
</li>
-<li><p>Obtain the <span style="font-family: Courier New,Courier,monospace">Sensor</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultSensor()</span> method of the <span style="font-family: Courier New,Courier,monospace">SensorService</span> 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 <span style="font-family: Courier New,Courier,monospace">start()</span> method:</p>
+<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");
</pre>
</li>
-<li><p>To get data from the sensor, use the appropriate method of the sensor object. For example, for the <span style="font-family: Courier New,Courier,monospace">LightSensor</span> (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 <span style="font-family: Courier New,Courier,monospace">getLightSensorData()</span> method:</p>
+<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");
</pre>
</li>
-<li><p>To disable the sensor when it is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">Sensor</span> interface:</p>
+<li><p>To disable the sensor when it is no longer needed, use the <code>stop()</code> method of the <code>Sensor</code> interface:</p>
<pre class="prettyprint">
proximitySensor.stop();
</pre>
<ol>
-<li>Define an event handler for sensor data changes by implementing the <
span style="font-family: Courier New,Courier,monospace">SensorDataSuccessCallback</span> 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):
+<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)
{
</li>
<li>Register a change listener to be called when the sensor data changes.
-<p>To register a change listener, use the <
span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Sensor</span> interface (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).</p>
+<p>To register a change listener, use the <
code>setChangeListener()</code> method of the <code>Sensor</code> interface (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).</p>
<p>This command requires 3 parameters:</p>
<ul>
<li>The first one is a handle to the callback method, which is invoked for every incoming event.</li>
<li>The second determines the amount of time (in milliseconds) passing between 2 consecutive events. Valid values are integers from 10 to 1000, inclusively. For example, the value 100 results in approximately 10 events being send every second.</li>
-<li>The third determines the batch latency time (in milliseconds) at which sensor events are stored or delivered when the processor stays on the sleep or suspend status. You can calculate the maximum batch latency value using the <span style="font-family: Courier New,Courier,monospace">maxBatchCount</span> (for example, interval x <span style="font-family: Courier New,Courier,monospace">maxBatchCount</span>). If <span style="font-family: Courier New,Courier,monospace">maxBatchCount</span> is zero, the device does not support the batch latency time.</li>
+<li>The third determines the batch latency time (in milliseconds) at which sensor events are stored or delivered when the processor stays on the sleep or suspend status. You can calculate the maximum batch latency value using the <code>maxBatchCount</code> (for example, interval x <code>maxBatchCount</code>). If <code>maxBatchCount</code> is zero, the device does not support the batch latency time.</li>
</ul>
<pre class="prettyprint">
</pre>
</li>
-<li>To stop receiving notifications on sensor data changes, use the <span style="font-family: Courier New,Courier,monospace">unsetChangeListener()</span> method of the Sensor interface.
+<li>To stop receiving notifications on sensor data changes, use the <code>unsetChangeListener()</code> method of the Sensor interface.
<pre class="prettyprint">
lightSensor.unsetChangeListener();
<ol>
-<li>Define a success callback for handling a <
span style="font-family: Courier New,Courier,monospace">SensorHardwareInfo</span> 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.
+<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)
{
</pre>
</li>
-<li>Call the <span style="font-family: Courier New,Courier,monospace">getSensorHardwareInfo()</span> method of an existing <span style="font-family: Courier New,Courier,monospace">Sensor</span> object to obtain its hardware information as the <span style="font-family: Courier New,Courier,monospace">SensorHardwareInfo</span> object:
+<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");
<p>The following table lists the sensor capabilities you can use to <a href="#support">determine whether a specific sensor is supported</a> on a device.</p>
+ <p align="center" class="Table"><strong>Table: Sensors and capabilities</strong></p>
<table>
- <caption>
- Table: Sensors and capabilities
- </caption>
- <tbody>
+ <tbody>
<tr>
<th>Sensor</th>
<th>Capability</th>
</tr>
<tr>
<td>Light sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.photometer</span></td>
+ <td><code>http://tizen.org/feature/sensor.photometer</code></td>
</tr>
<tr>
<td>Magnetic sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.magnetometer</span></td>
+ <td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
</tr>
<tr>
<td>Pressure sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.barometer</span></td>
+ <td><code>http://tizen.org/feature/sensor.barometer</code></td>
</tr>
<tr>
<td>Proximity sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.proximity</span></td>
+ <td><code>http://tizen.org/feature/sensor.proximity</code></td>
</tr>
<tr>
<td>Ultraviolet sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.ultraviolet</span></td>
+ <td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
</tr>
<tr>
<td>Heart rate monitor sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
</tr>
<tr>
<td>Gravity sensor <strong>in wearable applications only</strong></td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.gravity</span></td>
+ <td><code>http://tizen.org/feature/sensor.gravity</code></td>
</tr>
<tr>
<td>Gyroscope sensor <strong>in wearable applications only</strong></td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.gyroscope</span></td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
</tr>
<tr>
<td>Gyroscope rotation vector sensor <strong>in wearable applications only</strong></td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td>
+ <td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
</tr>
<tr>
<td>Linear acceleration sensor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+ <td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td>
</tr>
</tbody>
</table>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the Human Activity Monitor API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To use the Human Activity Monitor API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<tizen:privilege name="http://tizen.org/privilege/healthinfo"/>
<tizen:privilege name="http://tizen.org/privilege/location"/>
<p>Enabling the monitor and retrieving data is a basic Human Activity Monitor (HAM) management skill:</p>
<ol>
-<li id="support">Check whether a sensor is supported using the <
span style="font-family: Courier New,Courier,monospace">tizen.systeminfo.getCapability()</span> method to get the <a href="#ham_capabilities">appropriate capability</a>.</li>
+<li id="support">Check whether a sensor is supported using the <
code>tizen.systeminfo.getCapability()</code> method to get the <a href="#ham_capabilities">appropriate capability</a>.</li>
-<li>To enable the monitor and start collecting data, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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">var counter = 0;
+<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">
+var counter = 0;
function onchangedCB(hrmInfo)
{
}
}
-tizen.humanactivitymonitor.start("HRM", onchangedCB);</pre>
+tizen.humanactivitymonitor.start("HRM", onchangedCB);
+</pre>
-<p>You can also detect the wrist up gesture using the <span style="font-family: Courier New,Courier,monospace">start()</span> method:</p>
+<p>You can also detect the wrist up gesture using the <code>start()</code> method:</p>
<pre class="prettyprint">
function onchangedCB()
</pre>
</li>
-<li>When the heart rate monitor (HRM) is enabled, you can get the current data using the <span style="font-family: Courier New,Courier,monospace">getHumanActivityData()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<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)
{
</pre>
</li>
-<li>To disable HAM when it is no longer required, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<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");
</pre>
<p>The Human Activity Monitor API allows you to record and retrieve saved sensor data:</p>
<ol>
-<li>To check whether a sensor is supported, use the <
span style="font-family: Courier New,Courier, monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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):
+<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)
+if (tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer")
+ === false)
{
console.log("PRESSURE is not supported on this device.");
</pre>
</li>
-<li>To enable data recording, use the <span style="font-family: Courier New,Courier,monospace">startRecorder()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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). Optionally, you can also define an interval and period for the data recording.
+<li>To enable data recording, use the <code>startRecorder()</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). Optionally, you can also define an interval and period for the data recording.
<pre class="prettyprint">
var type = 'PRESSURE';
console.log(err.name + ': ' + err.message);
}
</pre>
-<p>To stop recording sensor data, use the <span style="font-family: Courier New,Courier,monospace">stopRecorder()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:</p>
+<p>To stop recording sensor data, use the <code>stopRecorder()</code> method of the <code>HumanActivityMonitorManager</code> interface:</p>
<pre class="prettyprint">
try
{
}
</pre>
</li>
-<li>Before retrieving data, you can specify a time period to be retrieved using the <
span style="font-family: Courier New,Courier,monospace">startTime</span> and <span style="font-family: Courier New,Courier, monospace">endTime</span> options in the <span style="font-family: Courier New,Courier,monospace">HumanActivityRecorderQuery</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityRecorderQuery">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityRecorderQuery">wearable</a> applications):
+<li>Before retrieving data, you can specify a time period to be retrieved using the <
code>startTime</code> and <code>endTime</code> options in the <code>HumanActivityRecorderQuery</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityRecorderQuery">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityRecorderQuery">wearable</a> applications):
<pre class="prettyprint">
/* To retrieve data from July 1, 2016 to July 31, 2016 */
var query = {};
query['endTime'] = (new Date(2016, 7, 31)).getTime() / 1000;
</pre>
</li>
- <li>To get the data sliced by an interval, you can use a combination of the <span style="font-family: Courier New,Courier,monospace">anchorTime</span> and <span style="font-family: Courier New,Courier, monospace">interval</span> options in the <span style="font-family: Courier New,Courier,monospace">HumanActivityRecorderQuery</span> interface.
+ <li>To get the data sliced by an interval, you can use a combination of the <code>anchorTime</code> and <code>interval</code> options in the <code>HumanActivityRecorderQuery</code> interface.
<p>Some human activity recorder types do not allow slicing the data by an interval.</p>
<pre class="prettyprint">
/* To retrieve data everyday at midnight */
-query['anchorTime'] = (new Date(2016, 7, 1, 0, 0)).getTime() / 1000; /* Time is 0:00 internally */
+/* Time is 0:00 internally */
+query['anchorTime'] = (new Date(2016, 7, 1, 0, 0)).getTime() / 1000;
query['interval'] = 1440; /* Day */
</pre>
</li>
- <li>To read the human activity recorder data from the database, use the <span style="font-family: Courier New,Courier,monospace">readRecorderData()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface with the query.
+ <li>To read the human activity recorder data from the database, use the <code>readRecorderData()</code> method of the <code>HumanActivityMonitorManager</code> interface with the query.
<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">
var type = 'PRESSURE';
-try
+try
{
tizen.humanactivitymonitor.readRecorderData(type, query, onread, onerror);
}
</ol>
<h2 id="interval" name="interval">Using User-defined Intervals</h2>
-<p>The Human Activity Monitor API allows the user to select their own intervals for collecting samples in a specified range using the <
span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorOption</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorOption">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorOption">wearable</a> applications). Such functionality can be used to build more power-efficient data collection applications (the less often the device gathers data, the less energy is used). You can change the interval according to the device state, for example, when the display is switched off, the sampling interval can be decreased.</p>
+<p>The Human Activity Monitor API allows the user to select their own intervals for collecting samples in a specified range using the <
code>HumanActivityMonitorOption</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorOption">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorOption">wearable</a> applications). Such functionality can be used to build more power-efficient data collection applications (the less often the device gathers data, the less energy is used). You can change the interval according to the device state, for example, when the display is switched off, the sampling interval can be decreased.</p>
<ol>
-<li>If a human activity type allows setting the interval at which data is sent to the application or setting the sampling interval, the last parameter of the <span style="font-family: Courier New,Courier,monospace">start()</span> method can be used to specify this information:
+<li>If a human activity type allows setting the interval at which data is sent to the application or setting the sampling interval, the last parameter of the <code>start()</code> method can be used to specify this information:
<pre class="prettyprint">
var myCallbackInterval = 240000;
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");
+ console.log("the gpsInfo includes the information of the GPS that is collected every "
+ + mySampleInterval + " milliseconds");
}
function onerrorCB(error)
</pre>
</li>
-<li>When the heart-rate monitor (HRM) is enabled, you can get the current data using the <span style="font-family: Courier New,Courier,monospace">getHumanActivityData()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
-<pre class="prettyprint">function onsuccessCB(hrmInfo)
+<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);
}
{
console.log("Error occurred: " + error.message);
}
-tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);</pre>
+tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);
+</pre>
</li>
-<li>To disable HAM when it is no longer required, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<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");
</pre>
<h2 id="receive" name="receive">Receiving Notifications on Pedometer Data Changes</h2>
-<p>Learning how to register a listener for accumulative allows you to monitor the step count maintained by the system without enabling the Pedometer sensor and the <span style="font-family: Courier New,Courier,monospace">PEDOMETER</span> monitor is a basic Human Activity Monitor (HAM) management skill:</p>
+<p>Learning how to register a listener for accumulative allows you to monitor the step count maintained by the system without enabling the Pedometer sensor and the <code>PEDOMETER</code> monitor is a basic Human Activity Monitor (HAM) management skill:</p>
<ol>
-<li>To register an event handler for accumulative pedometer changes, use the <span style="font-family: Courier New,Courier,monospace">setAccumulativePedometerListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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)
+<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);
tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
}
-tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);</pre>
+tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
+</pre>
</li>
-<li>To stop receiving notifications about the accumulative pedometer changes, use the <span style="font-family: Courier New,Courier,monospace">unsetAccumulativePedometerListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<li>To stop receiving notifications about the accumulative pedometer changes, use the <code>unsetAccumulativePedometerListener()</code> method of the <code>HumanActivityMonitorManager</code> interface:
-<pre class="prettyprint">tizen.humanactivitymonitor.unsetAccumulativePedometerListener()
+<pre class="prettyprint">
+tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
</pre>
</li>
</ol>
<p>Learning how to register a listener that allows you to recognize and monitor an activity of the given type is a basic Human Activity Monitor (HAM) management skill:</p>
<ol>
-<li>To register an event handler for recognizing a walking activity, use the <
span style="font-family: Courier New,Courier,monospace">addActivityRecognitionListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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):
+<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)
+function errorCallback(error)
{
- console.log(error.name +": " + error.message);
+ console.log(error.name +": " + error.message);
}
-function listener(info)
+function listener(info)
{
- console.log("type: " + info.type);
- console.log("timestamp: " + info.timestamp);
- console.log("accuracy: " + info.accuracy);
+ console.log("type: " + info.type);
+ console.log("timestamp: " + info.timestamp);
+ console.log("accuracy: " + info.accuracy);
}
-try
+try
{
- var listenerId = tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener, errorCallback);
-}
-catch (error)
+ var listenerId =
+ tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
+ errorCallback);
+}
+catch (error)
{
- console.log(error.name +": " + error.message);
+ console.log(error.name +": " + error.message);
}
</pre></li>
-<li>To stop receiving activity recognition notifications, use the <span style="font-family: Courier New,Courier,monospace">removeActivityRecognitionListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<li>To stop receiving activity recognition notifications, use the <code>removeActivityRecognitionListener()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
var listenerId;
-function errorCallback(error)
+function errorCallback(error)
{
- console.log(error.name + ": " + error.message);
+ console.log(error.name + ": " + error.message);
}
-function listener(info)
+function listener(info)
{
- console.log("type: " + info.type);
- console.log("timestamp: " + info.timestamp);
- console.log("accuracy: " + info.accuracy);
+ 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
+try
{
- listenerId = tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener, errorCallback);
-}
-catch (error)
+ listenerId =
+ tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
+ errorCallback);
+}
+catch (error)
{
- console.log(error.name +": " + error.message);
+ console.log(error.name +": " + error.message);
}
</pre>
</li>
<p>Learning how to detect whether the user is asleep is a basic Human Activity Monitor (HAM) management skill:</p>
<ol>
-<li>To enable the monitor and start collecting data, use the <
span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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):
+<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)
{
tizen.humanactivitymonitor.start("SLEEP_MONITOR", onchangedCB);
</pre>
</li>
-<li>To disable the monitor when it is no longer required, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<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");
</pre>
<p>The following table introduces the available monitor types and lists the monitor capabilities you can use to <a href="#support">determine whether a specific monitor is supported</a> on a device.</p>
- <table id="ham_capabilities">
- <caption>
- Table: Human activity monitors and capabilities
- </caption>
+<p align="center" class="Table"><strong>Table: Human activity monitors and capabilities</strong></p>
+<table id="ham_capabilities">
<tbody>
<tr>
<th>Monitor</th>
</tr>
<tr>
<td>Pedometer and accumulative pedometer</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.pedometer</span></td>
- <td>When the pedometer sensor is started, a change callback is invoked when data changes. Use the <span style="font-family: Courier New,Courier,monospace;">getHumanActivityData()</span> method to get the current data.
- <p>The accumulative pedometer sensor does not have to be started by your application as long as step counting is enabled by any other application or the system. Listener registered with the <span style="font-family: Courier New,Courier,monospace;">setAccumulativePedometerListener()</span> method is called when accumulative counters are changed.</p></td>
+ <td><code>http://tizen.org/feature/sensor.pedometer</code></td>
+ <td>When the pedometer sensor is started, a change callback is invoked when data changes. Use the <code>getHumanActivityData()</code> method to get the current data.
+ <p>The accumulative pedometer sensor does not have to be started by your application as long as step counting is enabled by any other application or the system. Listener registered with the <code>setAccumulativePedometerListener()</code> method is called when accumulative counters are changed.</p></td>
</tr>
<tr>
<td>Wrist up</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.wrist_up</span></td>
- <td>The wrist up sensor is notified when the relevant gesture is performed. The sensor must be enabled using the <span style="font-family: Courier New,Courier,monospace;">start()</span> method. An event listener invoked when the gesture is detected. This sensor does not provide any data.</td>
+ <td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
+ <td>The wrist up sensor is notified when the relevant gesture is performed. The sensor must be enabled using the <code>start()</code> method. An event listener invoked when the gesture is detected. This sensor does not provide any data.</td>
</tr>
<tr>
<td>Heart rate monitor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
- <td>When the heart rate monitor (HRM) sensor is started, a change callback is invoked when data changes. Use the <span style="font-family: Courier New,Courier,monospace;">getHumanActivityData()</span> method to get the current data.</td>
+ <td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
+ <td>When the heart rate monitor (HRM) sensor is started, a change callback is invoked when data changes. Use the <code>getHumanActivityData()</code> method to get the current data.</td>
</tr>
<tr>
<td>GPS</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/location.batch</span></td>
- <td>When the GPS sensor is started, a change callback is invoked when data changes. Use the <span style="font-family: Courier New,Courier,monospace;">getHumanActivityData()</span> method to get the current data.
+ <td><code>http://tizen.org/feature/location.batch</code></td>
+ <td>When the GPS sensor is started, a change callback is invoked when data changes. Use the <code>getHumanActivityData()</code> method to get the current data.
<p>The GPS sensor provides both the current value and a short history of last recorded GPS positions. The sensor supports sampling intervals, which can be used to create more power-efficient applications.</p></td>
</tr>
<tr>
<td>Sleep monitor</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.sleep_monitor</span></td>
- <td>When the sleep sensor is started, a change callback is invoked when data changes. Use the <span style="font-family: Courier New,Courier,monospace;">getHumanActivityData()</span> method to get the current data.</td>
+ <td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
+ <td>When the sleep sensor is started, a change callback is invoked when data changes. Use the <code>getHumanActivityData()</code> method to get the current data.</td>
</tr>
<tr>
<td>Activity recognition</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.activity_recognition</span></td>
- <td>To recognize an activity, start listening for it using the <span style="font-family: Courier New,Courier,monospace;">addActivityRecognitionListener()</span> method. The following activity types can be recognized:
+ <td><code>http://tizen.org/feature/sensor.activity_recognition</code></td>
+ <td>To recognize an activity, start listening for it using the <code>addActivityRecognitionListener()</code> method. The following activity types can be recognized:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">STATIONARY</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">WALKING</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">RUNNING</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">IN_VEHICLE</span></li>
+ <li><code>STATIONARY</code></li>
+ <li><code>WALKING</code></li>
+ <li><code>RUNNING</code></li>
+ <li><code>IN_VEHICLE</code></li>
</ul></td>
</tr>
</tbody>
<p>The following table introduces the available recorder types and lists the capabilities you can use to <a href="#support">determine whether a specific recorder is supported</a> on a device.</p>
+<p align="center" class="Table"><strong>Table: Human activity recorders and capabilities</strong></p>
<table id="ham_recorder_capabilities">
- <caption>Table: Human activity recorders and capabilities</caption>
- <tbody>
+ <tbody>
<tr>
<th>Recorder</th>
<th>Capability</th>
</tr>
<tr>
<td>Pressure</td>
- <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.barometer</span></td>
- <td>Use the <span style="font-family: Courier New,Courier,monospace;">startRecorder()</span> and <span style="font-family: Courier New,Courier,monospace;">stopRecorder()</span> methods to record the pressure sensor data for the specific period of time. Use the <span style="font-family: Courier New,Courier,monospace;">readRecorderData()</span> method to read the recorded pressure sensor data.</td>
+ <td><code>http://tizen.org/feature/sensor.barometer</code></td>
+ <td>Use the <code>startRecorder()</code> and <code>stopRecorder()</code> methods to record the pressure sensor data for the specific period of time. Use the <code>readRecorderData()</code> method to read the recorded pressure sensor data.</td>
</tr>
</tbody>
</table>
<p>The SensorBall sample application layout contains only 1 screen: the main screen that displays the game.</p>
<p>The following figure shows the main screen of the application.</p>
- <p class="figure">Figure: SensorBall screen</p>
+ <p align="center"><strong>Figure: SensorBall screen</strong></p>
<p align="center"><img alt="SensorBall screen" src="../../images/sensorball.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
- <ol type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace"><div></span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">header</span>. The header section determines the title of the screen.</p>
-
<pre class="prettyprint">
+ <ol>
+ <li><strong>index.html Source File</strong>
+ <ol type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
+<pre class="prettyprint">
<body>
<div data-role="page" id="mainPage">
<!--Header section-->
<h1>Sensor ball</h1>
</div>
</pre></li>
-<li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace"><div></span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">content</span>. The content section of the main screen contains a background image (defined in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file based on the <span style="font-family: Courier New,Courier,monospace">background</span> class), and the image of the game ball.
+<li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a background image (defined in the <code>style.css</code> file based on the <code>background</code> class), and the image of the game ball.
</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<!--Content section-->
<div data-role="content" class="background background1" data-scroll="none">
<div id="main">
- <img id="image1" class="ball" src="./images/ball1.png" />
+ <img id="image1" class="ball" src="./images/ball1.png"/>
</div>
</div>
</pre></li>
-<li> <p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace"><div></span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">footer</span>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>
-
<pre class="prettyprint lang-html">
- <!--Footer section-->
+<li> <p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>
+<pre class="prettyprint lang-html">
+ <!--Footer section-->
<div data-role="footer" data-position="fixed">
<div data-role="tabbar" data-style="toolbar" id="footerControls">
<ul>
</pre></li>
</ol>
</li>
-<li>css/style.css Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">
-style.css</span> file defines the background image for each animation mode and the size and location of the game ball.</p>
+<li><strong>css/style.css Source File</strong>
+<p>The <code>
+style.css</code> file defines the background image for each animation mode and the size and location of the game ball.</p>
<pre class="prettyprint">
-.background1
+.background1
{
background-image: url('../images/background1.jpg');
}
-.background2
+.background2
{
background-image: url('../images/background2.jpg');
}
-.background3
+.background3
{
background-image: url('../images/background3.jpg');
background-color: #000;
overflow: hidden;
}
-.ball
+.ball
{
position: absolute;
left: 0px;
</ol>
<h2 id="configure" name="configure">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. </p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file. </p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
-</widget></pre>
+</widget>
+</pre>
</li>
</ol>
<h3 id="appobjectcreate" name="appobjectcreate">Managing the Application and Window Objects</h3>
- <p>The object management functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating the Application Object
-<p>The application object is initialized when the document <span style="font-family: Courier New,Courier,monospace">ready()</span> event is fired. All the application events are bound during the initialization.</p>
+ <p>The object management functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+ <li><strong>Creating the Application Object</strong>
+<p>The application object is initialized when the document <code>ready()</code> event is fired. All the application events are bound during the initialization.</p>
-
<pre class="prettyprint">
-$(document).ready(function()
+<pre class="prettyprint">
+$(document).ready(function()
{
"use strict";
var img,
- contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight()
+ contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight()
- $('div[data-role="footer"]').outerHeight();
$('div[data-role="content"]').css('height', contentHeight - 33);
app.fun();
/* Hardware Back key event */
- $(window).on('tizenhwkey', function(e)
- {
- if (e.originalEvent.keyName === "back")
+ $(window).on('tizenhwkey', function(e)
{
- tizen.application.getCurrentApplication().exit();
- }
- });
+ if (e.originalEvent.keyName === "back")
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ });
/* Button events */
- $('#btnBall').bind('click', function(event)
- {
- $('#sun').remove();
- app.startBall();
- });
+ $('#btnBall').bind('click', function(event)
+ {
+ $('#sun').remove();
+ app.startBall();
+ });
- $('#btnSky').bind('click', function(event)
- {
- $('#sun').remove();
- app.startSky();
- });
+ $('#btnSky').bind('click', function(event)
+ {
+ $('#sun').remove();
+ app.startSky();
+ });
- $('#btnSpace').bind('click', function(event)
- {
- $('#sun').remove();
- app.startSpace();
- });
+ $('#btnSpace').bind('click', function(event)
+ {
+ $('#sun').remove();
+ app.startSpace();
+ });
/* Screen show event */
- $('#mainPage').on('pageshow', function()
- {
- app.startBall();
- });
+ $('#mainPage').on('pageshow', function()
+ {
+ app.startBall();
+ });
- document.addEventListener('webkitvisibilitychange', function(event)
- {
- if (document.webkitVisibilityState === 'visible')
+ document.addEventListener('webkitvisibilitychange', function(event)
{
- app.fun();
- }
- });
+ if (document.webkitVisibilityState === 'visible')
+ {
+ app.fun();
+ }
+ });
/* Preload backgrounds */
img = $('<img>').hide();
img.attr('src', 'images/background1.png');
});
</pre></li>
-<li>Resizing the Window
+<li><strong>Resizing the Window</strong>
<p>The application handles the window resize events and sets the display accordingly.</p>
-
<pre class="prettyprint">
-$(window).resize(function()
-{
- 'use strict';
- app.gameWidth = screen.availWidth;
- app.gameHeight = $('.background').outerHeight();
-});
+<pre class="prettyprint">
+$(window).resize(function()
+ {
+ 'use strict';
+ app.gameWidth = screen.availWidth;
+ app.gameHeight = $('.background').outerHeight();
+ });
</pre></li>
</ol>
<h3 id="access" name="access">Accessing Gyro Sensor Data</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
- <li>The <span style="font-family: Courier New,Courier,monospace">
-devicemotion</span> event listener calls the <span style="font-family: Courier New,Courier,monospace">
-saveSensorData()</span> method each time the event takes place. The event allows the application to access information about sensor data changes.
-
<pre class="prettyprint">
+ <li>The <code>
+devicemotion</code> event listener calls the <code>
+saveSensorData()</code> method each time the event takes place. The event allows the application to access information about sensor data changes.
+<pre class="prettyprint">
window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
-</pre> </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">
-saveSensorData()</span> methods stores the event (containing the gyro sensor data) for later processing.
-
<pre class="prettyprint">
-saveSensorData: function saveSensorData(event)
+</pre></li>
+<li>The <code>
+saveSensorData()</code> methods stores the event (containing the gyro sensor data) for later processing.
+<pre class="prettyprint">
+saveSensorData: function saveSensorData(event)
{
"use strict";
this.event = event;
}
</pre></li>
-<li>The stored event is used by the <span style="font-family: Courier New,Courier,monospace">
-ballEvents()</span> and <span style="font-family: Courier New,Courier,monospace">
-earthEvents()</span> methods, which control the game ball and the animation of the different game modes. These methods are called repeatedly with the <span style="font-family: Courier New,Courier,monospace">
-setTimeout()</span> method.</li></ol></li></ol>
+<li>The stored event is used by the <code>
+ballEvents()</code> and <code>
+earthEvents()</code> methods, which control the game ball and the animation of the different game modes. These methods are called repeatedly with the <code>
+setTimeout()</code> method.</li></ol></li></ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>You can <a href="#reg_unreg">register keys</a> to handle DOM events for them.</p></li>
</ul>
- <p>The key names are listed in the <a href="http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-key-20140612" target="_blank">DOM Level 3 KeyboardEvent key Values</a> specification. The <span style="font-family: Courier New,Courier,monospace">name</span> attribute in the Input Device API is equal to the key value specified in the specification (the <a href="http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-key-20140612/#keys-media-controller" target="_blank">Media Controller Keys</a> section is the most relevant to the Input Device API). If the specification does not contain an appropriate entry for the key, the Input Device API provides a device-specific <span style="font-family: Courier New,Courier,monospace">name</span>.</p>
+ <p>The key names are listed in the <a href="http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-key-20140612" target="_blank">DOM Level 3 KeyboardEvent key Values</a> specification. The <code>name</code> attribute in the Input Device API is equal to the key value specified in the specification (the <a href="http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-key-20140612/#keys-media-controller" target="_blank">Media Controller Keys</a> section is the most relevant to the Input Device API). If the specification does not contain an appropriate entry for the key, the Input Device API provides a device-specific <code>name</code>.</p>
<h2 id="getkeys" name="getkeys">Getting a List of All Supported Keys</h2>
<p>To get a list of all supported keys:</p>
<ol>
-<li><p>To get a supported key list, use the <
span style="font-family: Courier New,Courier,monospace">getSupportedKeys()</span> method of the <span style="font-family: Courier New,Courier,monospace">InputDeviceManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications):</p>
+<li><p>To get a supported key list, use the <
code>getSupportedKeys()</code> method of the <code>InputDeviceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications):</p>
<pre class="prettyprint">
var keyCodes = {};
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(i + ": " + supportedKeys[i].name + " - " + supportedKeys[i].code);
}
-</pre> </li>
+</pre></li>
-<li> <p>Use the gathered list to handle <span style="font-family: Courier New,Courier,monospace">keydown</span> and <span style="font-family: Courier New,Courier,monospace">keyup</span> events.</p></li>
+<li> <p>Use the gathered list to handle <code>keydown</code> and <code>keyup</code> events.</p></li>
</ol>
<p>To gather information about the key by its name:</p>
<ol>
<li>
-<p>Create a list of keys for which you want the information by using the <
span style="font-family: Courier New,Courier,monospace">InputDeviceKey</span> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceKey">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceKey">wearable</a> applications).</p>
+<p>Create a list of keys for which you want the information by using the <
code>InputDeviceKey</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceKey">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceKey">wearable</a> applications).</p>
<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">
</pre>
</li>
-<li><p>Check each key separately using the <
span style="font-family: Courier New,Courier,monospace">getKey()</span> method of the <span style="font-family: Courier New,Courier,monospace">InputDeviceManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications).</p>
+<li><p>Check each key separately using the <
code>getKey()</code> method of the <code>InputDeviceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications).</p>
-<p>If the result of the <span style="font-family: Courier New,Courier,monospace">getKey()</span> method is not <span style="font-family: Courier New,Courier,monospace">null</span>, you can access the key information. If the result is <span style="font-family: Courier New,Courier,monospace">null</span>, the key is not supported.</p>
+<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++)
{
}
catch (e)
{
- console.log("error: " + e.name + ":" + e.message + ", when getting key with name " + keys[i]);
+ console.log("error: " + e.name + ":" + e.message
+ + ", when getting key with name " + keys[i]);
}
}
</pre>
</ol>
<h2 id="reg_unreg" name="reg_unreg">Registering and Deregistering Keys</h2>
-<p>When you want to react to input device key presses, register the applicable key using the <span style="font-family: Courier New,Courier,monospace">InputDeviceManager</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications). After registering the input device key, the application receives a DOM keyboard event when the key is pressed or released. When the events are no longer needed, deregister the key.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The application cannot register the mandatory keys (<strong>ArrowLeft</strong>, <strong>ArrowRight</strong>, <strong>ArrowUp</strong>, <strong>ArrowDown</strong>, <strong>Enter</strong>, and <strong>Back</strong>).</td>
- </tr>
- </tbody>
- </table>
+<p>When you want to react to input device key presses, register the applicable key using the <code>InputDeviceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a> applications). After registering the input device key, the application receives a DOM keyboard event when the key is pressed or released. When the events are no longer needed, deregister the key.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The application cannot register the mandatory keys (<strong>ArrowLeft</strong>, <strong>ArrowRight</strong>, <strong>ArrowUp</strong>, <strong>ArrowDown</strong>, <strong>Enter</strong>, and <strong>Back</strong>).
+</div>
<p>To manage input device keys, you must learn to change the action of a supported key:</p>
</li>
<li>
-<p>To register all supported keys for handling <span style="font-family: Courier New,Courier,monospace">keydown</span> and <span style="font-family: Courier New,Courier,monospace">keyup</span> events:</p>
+<p>To register all supported keys for handling <code>keydown</code> and <code>keyup</code> events:</p>
<pre class="prettyprint">
var codeNamesMap = {};
{
tizen.inputdevice.registerKey(supportedKeys[i].name);
codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
- console.log("key: " + supportedKeys[i].name + " was registered for event handling");
+ console.log("key: " + supportedKeys[i].name
+ + " was registered for event handling");
}
catch (error)
{
}
</pre>
-<p>If you know the exact list of keys you want to register, the registration can also be done with the asynchronous <span style="font-family: Courier New,Courier,monospace">registerKeyBatch()</span> method:</p>
+<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"];
function errorCB(err)
{
- console.log('The following error occurred: ' + err.name);
+ console.log('The following error occurred: ' + err.name);
}
function successCB()
<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");
- }
-});
+ 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");
- }
-});
+ 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)
+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");
+ console.log("key: " + supportedKeys[i].name
+ + " was unregistered for event handling");
}
</pre>
-<p>The deregistration can also be done with the <span style="font-family: Courier New,Courier,monospace">unregisterKeyBatch()</span> method:</p>
+<p>The deregistration can also be done with the <code>unregisterKeyBatch()</code> method:</p>
<pre class="prettyprint">
var keys = ["VolumeUp", "VolumeDown"];
function errorCB(err)
{
- console.log('The following error occurred: ' + err.name);
+ console.log('The following error occurred: ' + err.name);
}
function successCB()
tizen.inputdevice.unregisterKeyBatch(keys, successCB, errorCB);
</pre>
-<p>After deregistration, the <span style="font-family: Courier New,Courier,monospace">keydown</span> and <span style="font-family: Courier New,Courier,monospace">keyup</span> events are no longer triggered for the keys.</p>
+<p>After deregistration, the <code>keydown</code> and <code>keyup</code> events are no longer triggered for the keys.</p>
</li>
</ol>
<div id="container"><div id="contents"><div class="content">
<h1>IME Application</h1>
-<p>Tizen Web IME (Input Method Editor) applications are written in HTML5 for Tizen, combining HTML, JavaScript, and CSS into a package that can be installed on a Tizen device, such as Samsung Gear, or the Tizen Emulator. Both the Tizen device and the Emulator must run Tizen version 2.3 or later to run Web IME applications.</p>
+<p>Tizen Web IME (Input Method Editor) applications are written in HTML5 for Tizen, combining HTML, JavaScript, and CSS into a package that can be installed on a Tizen device, such as Samsung Gear, or the Tizen emulator. Both the Tizen device and the emulator must run Tizen version 2.3 or later to run Web IME applications.</p>
<p>This feature is supported in wearable applications only.</p>
<p>IME applications differ from other applications in that they do not follow the normal application life-cycle management and they need a mechanism to interact with the client application requesting the IME.</p>
<p>Tizen provides a special architecture to guarantee that Web IME applications work just like native IME applications (however, there are some restrictions due to the capability limitations of the Web applications in general). A Web IME application can be run within the core Input Service Engine process, which is also used to run native IME applications.</p>
<p>The following figure shows the overall architecture of the Tizen Web IME support.</p>
- <p class="figure">Figure: Tizen Web IME support architecture</p>
+ <p align="center"><strong>Figure: Tizen Web IME support architecture</strong></p>
<p align="center"><img alt="Tizen Web IME support architecture" src="../../images/web_ime_architecture.png"/></p>
- <p>When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span>, which executes a Web IME within its Web container and communicates with the executed Web IME.</p>
- <p>The communication between the Web IME and the <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span> module is accomplished by 2 utility modules, <span style="font-family: Courier New,Courier,monospace">web-helper-agent</span> on the Web helper agent side and <span style="font-family: Courier New,Courier,monospace">web-helper-client</span> on the Web IME side. Therefore, a Web IME application must contain the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span>, which is created automatically when you create a Web IME project using the Tizen Studio.</p>
- <p>Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span> file is included and properly used.</p>
+ <p>When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, <code>ise-web-helper-agent</code>, which executes a Web IME within its Web container and communicates with the executed Web IME.</p>
+ <p>The communication between the Web IME and the <code>ise-web-helper-agent</code> module is accomplished by 2 utility modules, <code>web-helper-agent</code> on the Web helper agent side and <code>web-helper-client</code> on the Web IME side. Therefore, a Web IME application must contain the <code>web-helper-client.js</code>, which is created automatically when you create a Web IME project using the Tizen Studio.</p>
+ <p>Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the <code>web-helper-client.js</code> file is included and properly used.</p>
<h2 id="types" name="types">Supported Application Types</h2>
<h2 id="apis" name="apis">Supported APIs</h2>
- <p>All the APIs you can use for your Web IME are provided by the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object, which is accessible when you include the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span> file in your Web IME project:</p>
- <pre class="prettyprint"><script type="text/javascript" src="js/web-helper-client.js"></script></pre>
- <p>The following table lists the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> methods that you can invoke in your Web IME.</p>
+ <p>All the APIs you can use for your Web IME are provided by the <code>WebHelperClient</code> object, which is accessible when you include the <code>web-helper-client.js</code> file in your Web IME project:</p>
+<pre class="prettyprint">
+<script type="text/javascript" src="js/web-helper-client.js"></script>
+</pre>
+ <p>The following table lists the <code>WebHelperClient</code> methods that you can invoke in your Web IME.</p>
- <table>
- <caption>
- Table: WebHelperClient methods
- </caption>
- <tbody>
+
+<p align="center" class="Table"><strong>Table: WebHelperClient methods</strong></p>
+<table>
+ <tbody>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">initialize(handler)</span></td>
- <td>Initializes the WebHelperClient object by registering a handler object. Before using the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> functionalities, make sure to call this method passing the handler object as its parameter, which implements the event handlers that must be handled by the IME.
- <p><span style="font-family: Courier New,Courier,monospace">handler</span> parameter: Handler object implementing the <span style="font-family: Courier New,Courier,monospace">on*</span> event handlers.</p>
- <p>The following example shows how to initialize the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> by passing a customized handler object.</p>
-
<pre class="prettyprint">
-var WebHelperClientHandler =
+ <td><code>initialize(handler)</code></td>
+ <td>Initializes the WebHelperClient object by registering a handler object. Before using the <code>WebHelperClient</code> functionalities, make sure to call this method passing the handler object as its parameter, which implements the event handlers that must be handled by the IME.
+ <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()
+ onInit: function()
{
/* Do what you want when your IME gets the INIT message */
}
};
-WebHelperClient.initialize(WebHelperClientHandler);</pre>
+WebHelperClient.initialize(WebHelperClientHandler);
+</pre>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">log(str)</span></td>
+ <td><code>log(str)</code></td>
<td>Leaves a dlog message.
- <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Log message to display.</p>
+ <p><code>str</code> parameter: Log message to display.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">commitString(str)</span></td>
+ <td><code>commitString(str)</code></td>
<td>Commits a UTF-8 string to the client application directly.
- <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Byte array of the UTF-8 string to be committed.</p>
+ <p><code>str</code> parameter: Byte array of the UTF-8 string to be committed.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">updatePreeditString(str)</span></td>
+ <td><code>updatePreeditString(str)</code></td>
<td>Updates a new UTF-8 string for pre-edit.
- <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Byte array of the UTF-8 string to be updated.</p>
+ <p><code>str</code> parameter: Byte array of the UTF-8 string to be updated.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">sendKeyEvent(code)</span></td>
+ <td><code>sendKeyEvent(code)</code></td>
<td>Sends a key event to a client application.
- <p><span style="font-family: Courier New,Courier,monospace">code</span> parameter: Key event to be sent.</p>
+ <p><code>code</code> parameter: Key event to be sent.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">setKeyboardSizes(portraitWidth, portraitHeight, landscapeWidth, landscapeHeight)</span></td>
+ <td><code>setKeyboardSizes(portraitWidth, portraitHeight, landscapeWidth, landscapeHeight)</code></td>
<td>Updates the keyboard window geometry information.
<p>You must specify the portrait and landscape sizes of the Web IME using this method, or the Web IME cannot be displayed correctly as the Input Service Engine process cannot resize the IME window to the desired size.</p>
- <p><span style="font-family: Courier New,Courier,monospace">portraitWidth</span> parameter: Width of the keyboard, when in portrait mode.<br/>
- <span style="font-family: Courier New,Courier,monospace">portraitHeight</span> parameter: Height of the keyboard, when in portrait mode.<br/>
- <span style="font-family: Courier New,Courier,monospace">landscapeWidth</span> parameter: Width of the keyboard, when in landscape mode.<br/>
- <span style="font-family: Courier New,Courier,monospace">landscapeHeight</span> parameter: Height of the keyboard, when in landscape mode.
+ <p><code>portraitWidth</code> parameter: Width of the keyboard, when in portrait mode.<br/>
+ <code>portraitHeight</code> parameter: Height of the keyboard, when in portrait mode.<br/>
+ <code>landscapeWidth</code> parameter: Width of the keyboard, when in landscape mode.<br/>
+ <code>landscapeHeight</code> parameter: Height of the keyboard, when in landscape mode.
</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">setSelection(start_index, end_index)</span></td>
+ <td><code>setSelection(start_index, end_index)</code></td>
<td>Selects text.
- <p><span style="font-family: Courier New,Courier,monospace">start_index</span> parameter: Text start position.<br/>
- <span style="font-family: Courier New,Courier,monospace">end_index</span> parameter: Text end position.</p>
+ <p><code>start_index</code> parameter: Text start position.<br/>
+ <code>end_index</code> parameter: Text end position.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">getSelection()</span></td>
+ <td><code>getSelection()</code></td>
<td>Gets the selected text.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">getSurroundingText(maxlen_before, maxlen_after)</span></td>
+ <td><code>getSurroundingText(maxlen_before, maxlen_after)</code></td>
<td>Selects the surrounding text.
- <p><span style="font-family: Courier New,Courier,monospace">maxlen_before</span> parameter: Max length before.<br/>
- <span style="font-family: Courier New,Courier,monospace">maxlen_after</span> parameter: Max length after.</p>
+ <p><code>maxlen_before</code> parameter: Max length before.<br/>
+ <code>maxlen_after</code> parameter: Max length after.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">deleteSurroundingText(offset, len)</span></td>
+ <td><code>deleteSurroundingText(offset, len)</code></td>
<td>Deletes the surrounding text.
- <p><span style="font-family: Courier New,Courier,monospace">offset</span> parameter: Cursor position offset.<br/>
- <span style="font-family: Courier New,Courier,monospace">len</span> parameter: Length of the text deletion.</p>
+ <p><code>offset</code> parameter: Cursor position offset.<br/>
+ <code>len</code> parameter: Length of the text deletion.</p>
</td>
</tr>
</tbody>
</table>
- <p>The following table lists the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> enumerations that you can use when invoking the <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> and <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> methods of the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object.</p>
+ <p>The following table lists the <code>WebHelperClient</code> enumerations that you can use when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods of the <code>WebHelperClient</code> object.</p>
- <table>
- <caption>
- Table: WebHelperClient enumerations
- </caption>
+
+<p align="center" class="Table"><strong>Table: WebHelperClient enumerations </strong></p>
+<table>
<tbody>
<tr>
<th>Enumeration</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Keycode</span></td>
- <td>Enumeration values used when invoking the <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> and <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> methods.
+ <td><code>Keycode</code></td>
+ <td>Enumeration values used when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods.
<p>Keycode example:</p>
-
<pre class="prettyprint">
-Keycode:
+<pre class="prettyprint">
+Keycode:
{
BACKSPACE:0xff08,
TAB:0xff09,
RETURN:0xff0d,
ASCIITILDE:0x07e
-},</pre>
+},
+</pre>
</td>
</tr>
</tbody>
</table>
- <p>You can display event notifications, such as client application requesting the IME, on the screen. In these cases, implement the event handlers in your handler object, which you pass as a parameter of the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object <span style="font-family: Courier New,Courier,monospace">initialize()</span> method.</p>
+ <p>You can display event notifications, such as client application requesting the IME, on the screen. In these cases, implement the event handlers in your handler object, which you pass as a parameter of the <code>WebHelperClient</code> object <code>initialize()</code> method.</p>
<p>The following table lists the events that you can implement in your handler object.</p>
- <table>
- <caption>
- Table: Handler events
- </caption>
+<p align="center" class="Table"><strong>Table: Handler events</strong></p>
+<table>
<tbody>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onInit()</span></td>
+ <td><code>onInit()</code></td>
<td>Handler for the initialization signal, used when the Web IME framework initialization is finished.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onExit()</span></td>
+ <td><code>onExit()</code></td>
<td>Handler for the exit signal, used when this Web IME is about to be terminated.
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onFocusIn(inputContext)</span></td>
+ <td><code>onFocusIn(inputContext)</code></td>
<td>Handler for the focus in signal, used to do something when the input context is focused in.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onFocusOut(inputContext)</span></td>
+ <td><code>onFocusOut(inputContext)</code></td>
<td>Handler for the focus out signal, used to do something when the input context is focused out.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onShow(inputContext)</span></td>
+ <td><code>onShow(inputContext)</code></td>
<td>Handler for the show signal, used to show the keyboard.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onHide(inputContext)</span></td>
+ <td><code>onHide(inputContext)</code></td>
<td>Handler for the hide signal, used to hide the keyboard.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetRotation(degree)</span></td>
+ <td><code>onSetRotation(degree)</code></td>
<td>Handler for the rotation signal, used to notify that the keyboard is being rotated.
- <p><span style="font-family: Courier New,Courier,monospace">degree</span> parameter: Angle that this keyboard is being rotated to.</p>
+ <p><code>degree</code> parameter: Angle that this keyboard is being rotated to.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onUpdateCursorPosition(inputContext, position)</span></td>
+ <td><code>onUpdateCursorPosition(inputContext, position)</code></td>
<td>Handler for the update cursor position signal, used to let the keyboard get the cursor position information.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetLanguage(language)</span></td>
+ <td><code>onSetLanguage(language)</code></td>
<td>Handler for the set language signal, used to set the input language.
- <p><span style="font-family: Courier New,Courier,monospace">language</span> parameter: Language to be set.</p>
+ <p><code>language</code> parameter: Language to be set.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetImdata(imdata)</span></td>
+ <td><code>onSetImdata(imdata)</code></td>
<td>Handler for the set IM data signal, used to send IM data to the keyboard.
- <p><span style="font-family: Courier New,Courier,monospace">imdata</span> parameter: IM data to be set.</p>
+ <p><code>imdata</code> parameter: IM data to be set.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onGetImdata()</span></td>
+ <td><code>onGetImdata()</code></td>
<td>Handler for the get IM data signal, used to get IM data from the keyboard.
<p>This method returns the current IM data value.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetReturnKeyType(type)</span></td>
+ <td><code>onSetReturnKeyType(type)</code></td>
<td>Handler for the set return key type signal, used to set the return key type to the keyboard.
- <p><span style="font-family: Courier New,Courier,monospace">type</span> parameter: Type of the return key to be set; the following values are acceptable:</p>
-
<pre class="prettyprint">
+ <p><code>type</code> parameter: Type of the return key to be set; the following values are acceptable:</p>
+<pre class="prettyprint">
"default"
"done"
"go"
"next"
"search"
"send"
-"signin"</pre>
+"signin"
+</pre>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onGetReturnKeyType()</span></td>
+ <td><code>onGetReturnKeyType()</code></td>
<td>Handler for the get return key type signal, used to get the return key type from the keyboard.
- <p>This method returns the current return key type value, which is one of the values introduced in the <span style="font-family: Courier New,Courier,monospace">onSetReturnKeyType()</span> event.</p>
+ <p>This method returns the current return key type value, which is one of the values introduced in the <code>onSetReturnKeyType()</code> event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetReturnKeyDisable(disabled)</span></td>
+ <td><code>onSetReturnKeyDisable(disabled)</code></td>
<td>Handler for the set return key disable signal, used to set the return key disabled state to the keyboard.
- <p><span style="font-family: Courier New,Courier,monospace">disabled</span> parameter: Value that indicates whether the return key must be disabled.</p>
+ <p><code>disabled</code> parameter: Value that indicates whether the return key must be disabled.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onGetReturnKeyDisable()</span></td>
+ <td><code>onGetReturnKeyDisable()</code></td>
<td>Handler for the get return key disable signal, used to get the return key disabled state from the keyboard.
<p>This method returns the current return key disabled state value.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onSetLayout(layout)</span></td>
+ <td><code>onSetLayout(layout)</code></td>
<td>Handler for the set virtual keyboard layout signal, used to set the virtual keyboard layout.
- <p><span style="font-family: Courier New,Courier,monospace">layout</span> parameter: Virtual keyboard layout value to be set; the following values are acceptable:</p>
-
<pre class="prettyprint">
+ <p><code>layout</code> parameter: Virtual keyboard layout value to be set; the following values are acceptable:</p>
+<pre class="prettyprint">
"normal"
"number"
"email"
"month"
"numberonly"
"password"
-"datetime"</pre>
+"datetime"
+</pre>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onGetLayout()</span></td>
+ <td><code>onGetLayout()</code></td>
<td>Handler for the get virtual keyboard layout signal, used to get the virtual keyboard layout.
- <p>This method returns the current virtual keyboard layout value, which is one of the values introduced in <span style="font-family: Courier New,Courier,monospace">onSetLayout()</span> event.</p>
+ <p>This method returns the current virtual keyboard layout value, which is one of the values introduced in <code>onSetLayout()</code> event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onResetInputContext(inputContext)</span></td>
+ <td><code>onResetInputContext(inputContext)</code></td>
<td>Handler for the reset input context signal, used to reset the keyboard input context.
- <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+ <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent(code, mask, layout)</span></td>
+ <td><code>onProcessKeyEvent(code, mask, layout)</code></td>
<td>Handler for the process key event signal.
<p>
- <span style="font-family: Courier New,Courier,monospace">code</span> parameter: Key code of the current key event.<br/>
- <span style="font-family: Courier New,Courier,monospace">mask</span> parameter: Modifier mask of the current key event.<br/>
- <span style="font-family: Courier New,Courier,monospace">layout</span> parameter: Hardware keyboard layout identifier.
+ <code>code</code> parameter: Key code of the current key event.<br/>
+ <code>mask</code> parameter: Modifier mask of the current key event.<br/>
+ <code>layout</code> parameter: Hardware keyboard layout identifier.
</p>
- <p>This method returns <span style="font-family: Courier New,Courier,monospace">true</span> if the event is processed; otherwise it is forwarded to the client application.</p>
+ <p>This method returns <code>true</code> if the event is processed; otherwise it is forwarded to the client application.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onUpdateSurroundingText(cursor, text)</span></td>
+ <td><code>onUpdateSurroundingText(cursor, text)</code></td>
<td>Handler for the surrounding text signal update.
<p>
- <span style="font-family: Courier New,Courier,monospace">cursor</span> parameter: Cursor position.<br/>
- <span style="font-family: Courier New,Courier,monospace">text</span> parameter: Surrounding text near the cursor.</p>
+ <code>cursor</code> parameter: Cursor position.<br/>
+ <code>text</code> parameter: Surrounding text near the cursor.</p>
</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onUpdateSelection(text)</span></td>
+ <td><code>onUpdateSelection(text)</code></td>
<td>Handler for the selection signal update.
<p>
- <span style="font-family: Courier New,Courier,monospace">text</span> parameter: Currently selected text.</p>
+ <code>text</code> parameter: Currently selected text.</p>
</td>
</tr>
</tbody>
</table>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.</td>
- </tr>
- </tbody>
- </table>
-
-
+
+<div class="note">
+ <strong>Note</strong>
+ The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.
+</div>
+
<h2 id="config" name="config">Web IME Configuration</h2>
<p>The Web IME configuration follows the Tizen packaging policy with certain extensions. Tizen applications are packaged according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget packaging guidelines</a>. For more information about Tizen extensions to configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#elements">Configuration Elements</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p>
<p>Tizen has the following additional configuration elements:</p>
<ul>
<li>
- <span style="font-family: Courier New,Courier,monospace">tizen:category</span>
+ <code>tizen:category</code>
<p>To identify with other IMEs, the Web IME application must contain the UUID information.</p>
- <pre class="prettyprint"><tizen:category name="http://tizen.org/category/ime"/></pre>
+<pre class="prettyprint">
+<tizen:category name="http://tizen.org/category/ime"/>
+</pre>
</li>
<li>
- <span style="font-family: Courier New,Courier,monospace">tizen:uuid</span>
+ <code>tizen:uuid</code>
<p>Added to identify the Web IME application type. If this element is defined, the application type is IME.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.</td>
- </tr>
- </tbody>
- </table>
- <pre class="prettyprint"><tizen:uuid>6153122a-a429-40d2-ef21-a75f468c202c</tizen:uuid></pre>
+
+<div class="note">
+ <strong>Note</strong>
+ The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.
+</div>
+
+<pre class="prettyprint">
+<tizen:uuid>6153122a-a429-40d2-ef21-a75f468c202c</tizen:uuid>
+</pre>
</li>
<li>
- <span style="font-family: Courier New,Courier,monospace">tizen:languages</span>
+ <code>tizen:languages</code>
- <p>The locale string in the <span style="font-family: Courier New,Courier,monospace"><tizen:language></span> element can be used to display the input language the specific Input Method Editor supports. The <span style="font-family: Courier New,Courier,monospace"><tizen:languages></span> parent element can have more than 1 <span style="font-family: Courier New,Courier,monospace"><tizen:language></span> child element.</p>
-
<pre class="prettyprint">
+ <p>The locale string in the <code><tizen:language></code> element can be used to display the input language the specific Input Method Editor supports. The <code><tizen:languages></code> parent element can have more than 1 <code><tizen:language></code> child element.</p>
+<pre class="prettyprint">
<tizen:languages>
<tizen:language>en-us</tizen:language>
<tizen:language>en-gb</tizen:language>
</pre>
</li>
</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">2-letter primary codes are reserved for [ISO639] language abbreviations. 2-letter codes include <span style="font-family: Courier New,Courier,monospace">fr</span> (French), <span style="font-family: Courier New,Courier,monospace">de</span> (German), <span style="font-family: Courier New,Courier,monospace">it</span> (Italian), <span style="font-family: Courier New,Courier,monospace">nl</span> (Dutch), <span style="font-family: Courier New,Courier,monospace">el</span> (Greek), <span style="font-family: Courier New,Courier,monospace">es</span> (Spanish), <span style="font-family: Courier New,Courier,monospace">pt</span> (Portuguese), <span style="font-family: Courier New,Courier,monospace">ar</span> (Arabic), <span style="font-family: Courier New,Courier,monospace">he</span> (Hebrew), <span style="font-family: Courier New,Courier,monospace">ru</span> (Russian), <span style="font-family: Courier New,Courier,monospace">zh</span> (Chinese), <span style="font-family: Courier New,Courier,monospace">ja</span> (Japanese), <span style="font-family: Courier New,Courier,monospace">hi</span> (Hindi), <span style="font-family: Courier New,Courier,monospace">ur</span> (Urdu), and <span style="font-family: Courier New,Courier,monospace">sa</span> (Sanskrit).
+
+<div class="note">
+ <strong>Note</strong>
+ 2-letter primary codes are reserved for [ISO639] language abbreviations. 2-letter codes include <code>fr</code> (French), <code>de</code> (German), <code>it</code> (Italian), <code>nl</code> (Dutch), <code>el</code> (Greek), <code>es</code> (Spanish), <code>pt</code> (Portuguese), <code>ar</code> (Arabic), <code>he</code> (Hebrew), <code>ru</code> (Russian), <code>zh</code> (Chinese), <code>ja</code> (Japanese), <code>hi</code> (Hindi), <code>ur</code> (Urdu), and <code>sa</code> (Sanskrit).
<p>Any 2-letter subcode is understood to be a [ISO3166] country code. For more information, see <a href="http://www.w3.org/TR/html401/struct/dirlang.html" target="_blank">http://www.w3.org/TR/html401/struct/dirlang.html</a>.</p>
-</td>
- </tr>
- </tbody>
- </table>
-
+</div>
+
<h2 id="hw" name="hw">Hardware Key Events</h2>
<p>The Web IME is capable of not only showing a soft keyboard and emitting key events to client application, but also handling hardware key events and translating them to a specific language. This is very common when typing texts in CJK (Chinese, Japanese, and Korean) languages, where each key event must be composed to produce a final result string.</p>
<p>When a hardware key is pressed, the client application receives the key event and requests the Input Service framework to translate the key event. The request is then delivered to the currently selected Web IME through the event handler.</p>
- <p>When creating the handler object for <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span>, implement the <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent()</span> method in case you want to translate each hardware key event.</p>
- <p>The following example translates the key event to a string "ㅁ", which is a Korean character mapped to the <span style="font-family: Courier New,Courier,monospace">a</span> key event. </p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To provide a full support for Korean character composition, a more complex process is needed. This example is only a demonstration.</td>
- </tr>
- </tbody>
- </table>
- <pre class="prettyprint">
+ <p>When creating the handler object for <code>WebHelperClient</code>, implement the <code>onProcessKeyEvent()</code> method in case you want to translate each hardware key event.</p>
+ <p>The following example translates the key event to a string "ㅁ", which is a Korean character mapped to the <code>a</code> key event. </p>
+
+<div class="note">
+ <strong>Note</strong>
+ To provide a full support for Korean character composition, a more complex process is needed. This example is only a demonstration.
+</div>
+
+<pre class="prettyprint">
var WebHelperClientHandler =
{
onProcessKeyEvent: function(code, mask, layout)
}
}
};
-WebHelperClient.initialize(WebHelperClientHandler);</pre>
+WebHelperClient.initialize(WebHelperClientHandler);
+</pre>
- <p>When the processing of a hardware key event is completed, the <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent</span> event handler must return <span style="font-family: Courier New,Courier,monospace">true</span>. Otherwise, the client application considers the Web IME as not reacting to the key event, and tries to invoke its fallback handler, which appends an additional <span style="font-family: Courier New,Courier,monospace">a</span> to the committed "ㅁ" string.</p>
+ <p>When the processing of a hardware key event is completed, the <code>onProcessKeyEvent</code> event handler must return <code>true</code>. Otherwise, the client application considers the Web IME as not reacting to the key event, and tries to invoke its fallback handler, which appends an additional <code>a</code> to the committed "ㅁ" string.</p>
<h2 id="key" name="key">Key Events, Commit Strings, and Pre-edit Strings</h2>
<p>Key events, commit strings and pre-edit strings are needed to send appropriate messages to the client application.</p>
- <p>Key events, when sent to the client application, use the same process as when a hardware key is pressed. Therefore, sending a key event to the client application using the <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> method calls the Web IME <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent()</span> event handler.</p>
- <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 <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> method that invokes the client application's fallback key event handler.</p>
-
<pre class="prettyprint">
+ <p>Key events, when sent to the client application, use the same process as when a hardware key is pressed. Therefore, sending a key event to the client application using the <code>sendKeyEvent()</code> method calls the Web IME <code>onProcessKeyEvent()</code> event handler.</p>
+ <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);
-</script></pre>
+</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 <span style="font-family: Courier New,Courier,monospace">commitString()</span> method:</p>
- <pre class="prettyprint">
-/* Generate the "a" key event in the client application
-"a" is appended to the client application's editable widget */
+ <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
+*/
WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.a);
-/* Append the string "www." to the client application's editable widget,
-without generating key events */
-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 <span style="font-family: Courier New,Courier,monospace">updatePreeditString()</span> 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 style="background-color:#c3c3c3;">abc</span>" */
+/*
+ Append the string "www." to the client application's editable widget,
+ without generating key events
+*/
+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>"
+*/
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 style="background-color:#c3c3c3;">def</span>" string on the editable widget */
-WebHelperClient.updatePreeditString("def");</pre>
+/*
+ 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");
+</pre>
<h2 id="lifecycle" name="lifecycle">Web IME Life-cycle</h2>
<p>To create an IME application:</p>
<ol>
- <li>To create the Web IME project, launch the Tizen Studio and go to <strong>File > New > Tizen Project</strong>. Select a template for a wearable Web application, and create a project using the <strong>Web Input Method Editor</strong> template.</li>
+ <li>To create the Web IME project, launch the Tizen Studio and go to <strong>File > New > Tizen Project</strong>.</li>
+ <li>In the Project Wizard, select <strong>Template</strong> as the project type, <strong>WEARABLE</strong> profile and applicable version, <strong>Web Application</strong> type, and <strong>Web Input Method Editor</strong> template.</li>
<li>Enter the project name and click <strong>Finish</strong>.
<p align="center"><img alt="Create a Web IME project" src="../../images/web_ime_create_project.png"/></p></li>
- <li>Modify the source code in, for example, the <span style="font-family: Courier New,Courier,monospace">index.html</span> and <span style="font-family: Courier New,Courier,monospace">style.css</span> files, as needed.</li>
- <li>Install the Web IME package on the Emulator. To run the application, go to <strong>Run As > Tizen Wearable Web Application</strong>.</li>
- <li>In the Emulator, change the default keyboard with the Web IME you developed in <strong>Setting > Text input</strong>.
+ <li>Modify the source code in, for example, the <code>index.html</code> and <code>style.css</code> files, as needed.</li>
+ <li>Install the Web IME package on the emulator. To run the application, go to <strong>Run As > Tizen Web Application</strong>.</li>
+ <li>In the emulator, change the default keyboard with the Web IME you developed in <strong>Setting > Text input</strong>.
<p align="center"><img alt="Setting main" src="../../images/web_ime_setting_main.png"/><img alt="Setting text input" src="../../images/web_ime_setting_text_input.png"/></p></li>
</ol>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<ol>
<li>Content
<p>The actual element content is read first.</p></li>
- <li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
+ <li>Other attributes than <code>role</code> and <code>aria-label</code></li>
+ <li><code>role</code> attribute
</li>
- <li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
+ <li><code>aria-label</code> attribute
</li>
</ol>
<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
<ul>
<li>Result: checkbox checked, double tap to uncheck
- <pre class="prettyprint"><div role="checkbox" aria-checked="true" aria-label="double tap to uncheck"></div></pre></li>
+<pre class="prettyprint">
+<div role="checkbox" aria-checked="true" aria-label="double tap to uncheck"></div>
+</pre></li>
<li>Result: test button, double tap to click
- <pre class="prettyprint"><div role="button" aria-label="double tap to click">test</div></pre></li>
+<pre class="prettyprint">
+<div role="button" aria-label="double tap to click">test</div>
+</pre></li>
</ul>
<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
<ul>
- <li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
+ <li>If the <code>aria-hidden</code> attribute of an element is set to <code>true</code>, the screen reader does not read the content of the element or its child elements.
<p>In the following snippet, the screen reader reads "on", but not "off" or "child".</p>
-<pre class="prettyprint"><div tabindex="0">
+<pre class="prettyprint">
+<div tabindex="0">
<div>on</div>
<div aria-hidden="true">
off
<div>child</div>
</div>
-</div></pre></li>
- <li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
+</div>
+</pre></li>
+ <li>If the <code>role</code> attribute is not defined, it is not read.
<p>In the following snippet, the screen reader reads "test", but not "link".</p>
- <pre class="prettyprint"><a role="" href="test.html">test</a></pre></li>
- <li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
+<pre class="prettyprint">
+<a role="" href="test.html">test</a>
+</pre></li>
+ <li>The screen reader does not read elements that are hidden, for example, if the <code>display</code> property is set to <code>none</code>.</li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace"><img></span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
-<pre class="prettyprint"><img src="icon.jpg" alt="icon"></pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">alt</span> attribute need not be defined for the virtual grid component.
- <p>The accessibility feature is supported since Tizen 2.1.</p></td>
- </tr>
- </tbody>
-</table>
+<p>The <code><img></code> element supports the image alt text through the <code>alt</code> attribute:</p>
+<pre class="prettyprint">
+<img src="icon.jpg" alt="icon">
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>alt</code> attribute need not be defined for the virtual grid component.
+ <p>The accessibility feature is supported since Tizen 2.1.</p>
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>TAU Animation provides the following features:</p>
<ul>
<li>Single or group animation
- <p>Provides usability from minimized parameters and APIs. You can easily make an animation or <span style="font-family: Courier New,Courier,monospace">TimeLine</span>.</p></li>
+ <p>Provides usability from minimized parameters and APIs. You can easily make an animation or <code>TimeLine</code>.</p></li>
<li>Group effects
<p>Provided by a stagger. Insert a stagger into the option, and all objects in the group are applied a sequential delay.</p></li>
<li>Time control
<li>Effect
<p>Provides predefined effects. This means that you can use a fancy effect just by sting instead of specifying an animation value. Predefined effects are fully controlled in TAU Animation. You can also stop the animation.</p></li>
<li>CSS animation
- <p>Target objects can be animated using CSS styles, such as <span style="font-family: Courier New,Courier,monospace">backgroundColor</span>, <span style="font-family: Courier New,Courier,monospace">border</span>, <span style="font-family: Courier New,Courier,monospace">margin</span>, <span style="font-family: Courier New,Courier,monospace">padding</span>, and <span style="font-family: Courier New,Courier,monospace">shadow</span>. A CSS animation can also be controlled by TAU Animation.</p></li>
+ <p>Target objects can be animated using CSS styles, such as <code>backgroundColor</code>, <code>border</code>, <code>margin</code>, <code>padding</code>, and <code>shadow</code>. A CSS animation can also be controlled by TAU Animation.</p></li>
<li>HTML element-based animation (in future)
<p>You can set an animation in an element instead of JavaScript. If you are skilled in HTML, you can make the animation in HTML.</p></li>
- <li>Custom <span style="font-family: Courier New,Courier,monospace">KeyFrame</span> (in future)
- <p>You can make an animation based on a custom <span style="font-family: Courier New,Courier,monospace">KeyFrame</span>.</p></li>
+ <li>Custom <code>KeyFrame</code> (in future)
+ <p>You can make an animation based on a custom <code>KeyFrame</code>.</p></li>
<li>Callbacks
- <p>Provides the <span style="font-family: Courier New,Courier,monospace">onStart</span>, <span style="font-family: Courier New,Courier,monospace">onUpdate</span>, and <span style="font-family: Courier New,Courier,monospace">onComplete</span> callbacks. CSS animations do not support the <span style="font-family: Courier New,Courier,monospace">updateCallback</span> and <span style="font-family: Courier New,Courier,monospace">progress</span> callbacks. TAU Animation provides these features.</p></li>
+ <p>Provides the <code>onStart</code>, <code>onUpdate</code>, and <code>onComplete</code> callbacks. CSS animations do not support the <code>updateCallback</code> and <code>progress</code> callbacks. TAU Animation provides these features.</p></li>
</ul>
-<p>To use TAU Animation, you must load the <span style="font-family: Courier New,Courier,monospace">tau.animation.min.js</span> file, which can work with any other library or Web framework. There are no other prerequisites.</p>
+<p>To use TAU Animation, you must load the <code>tau.animation.min.js</code> file, which can work with any other library or Web framework. There are no other prerequisites.</p>
<h2 id="fundamentals">Animation Fundamentals</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">tau.animation.js</span> file has its own modules for animating target objects when animation methods are invoked.</p>
+<p>The <code>tau.animation.js</code> file has its own modules for animating target objects when animation methods are invoked.</p>
<p>The general idea of animating target objects is for several parts to interact with each other.</p>
-<p class="figure">Figure: Animation parts</p>
+<p align="center"><strong>Figure: Animation parts</strong></p>
<p align="center"><img src="../../../images/tau_animation_1.png" alt="Animation parts" /></p>
<ul>
- <li>Ticker: Switches the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method on and off. Ticker is operated based on events.</li>
+ <li>Ticker: Switches the <code>requestAnimationFrame()</code> method on and off. Ticker is operated based on events.</li>
<li>TweenAnimator: Runs the whole time logic. The TweenAnimator invokes the animation to play or stop, and it also updates the tween value per frame.</li>
<li>SimpleAnimation: Consists of the animation play logic. The animation makes the tween object and target object, and it also interacts with the TweenAnimator.</li>
- <li>SimpleAnimationGroup: Group of <span style="font-family: Courier New,Courier,monospace">simpleAnimation</span> objects. It can include several objects for animation.</li>
- <li>SimpleAnimation Extension: Provides the mixin functionality. Pure DOM can be a target object with the <span style="font-family: Courier New,Courier,monospace">simpleAnimation</span> extension.</li>
+ <li>SimpleAnimationGroup: Group of <code>simpleAnimation</code> objects. It can include several objects for animation.</li>
+ <li>SimpleAnimation Extension: Provides the mixin functionality. Pure DOM can be a target object with the <code>simpleAnimation</code> extension.</li>
<li>DomObject: Target object that also has a render logic. If the tick is switched on, the TweenAnimator invokes the update method. And then, the render logic of DomObject is invoked, and the target objects are moved based on the animation option.</li>
- <li>AnimationObject: Interface for various target objects. In this example, the <span style="font-family: Courier New,Courier,monospace">DomObject</span> is used as a reference.</li>
+ <li>AnimationObject: Interface for various target objects. In this example, the <code>DomObject</code> is used as a reference.</li>
</ul>
<p>To make and call several animations:</p>
<li>Make a target object for the animation.
<p>After making the target object, you can make and call animations.</p>
-<p class="figure">Figure: Target object</p>
+<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">
var t = tau.animation.target,
- blueBox = document.getElementById('blueBox');
+ blueBox = document.getElementById('blueBox');
t('#blueBox');
/* Pure HTML element can be a target */
t(blueBox);
<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">
<li>Put the animations into an animation queue.
<p>After making an animation, the animation is inserted into the animation queue automatically.</p>
-<p class="figure">Figure: Animation queue</p>
+<p align="center"><strong>Figure: Animation queue</strong></p>
<p align="center"><img src="../../../images/tau_animation_3.png" alt="Animation queue" /></p>
</li>
<li>After inserting the animation, send an event to the Ticker.
<p>In the above queue, there are 4 animations in queue. When all animations are inserted, the animations are popped and animated sequentially by the TweenAnimator.</p>
</li>
-<li>The Ticker calls the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method.
-<p>The TweenAnimator invokes the play and tick methods in the Ticker. The Ticker calls the <span style="font-family: Courier New,Courier,monospace">on()</span> method, and the <span style="font-family: Courier New,Courier,monospace">on()</span> method includes the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method. The <span style="font-family: Courier New,Courier,monospace">RAF()</span> method is invoked until the TweenAnimator's tick time reaches the end of the duration.</p>
+<li>The Ticker calls the <code>requestAnimationFrame()</code> method.
+<p>The TweenAnimator invokes the play and tick methods in the Ticker. The Ticker calls the <code>on()</code> method, and the <code>on()</code> method includes the <code>requestAnimationFrame()</code> method. The <code>RAF()</code> method is invoked until the TweenAnimator's tick time reaches the end of the duration.</p>
</li>
-<li>During the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method call, the <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> renders the target object and the TweenAnimator's time logic is operating.
-<p>The <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> can get the time value using the calculating animation. The <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> renders the target object based on the time value. If the duration is 1000 (ms), the TweenAnimator gives time 0 through 1000.</p>
-<p class="figure">Figure: TweenAnimator</p>
+<li>During the <code>requestAnimationFrame()</code> method call, the <code>AnimationObject</code> renders the target object and the TweenAnimator's time logic is operating.
+<p>The <code>AnimationObject</code> can get the time value using the calculating animation. The <code>AnimationObject</code> renders the target object based on the time value. If the duration is 1000 (ms), the TweenAnimator gives time 0 through 1000.</p>
+<p align="center"><strong>Figure: TweenAnimator</strong></p>
<p align="center"><img src="../../../images/tau_animation_4.png" alt="TweenAnimator" /></p>
</li>
</ol>
<h3 id="tween">Tween</h3>
-<p>You can make an animation using the <span style="font-family: Courier New,Courier,monospace">tween()</span> method. If a tween animation is made, the animation is run right away. The <span style="font-family: Courier New,Courier,monospace">tween()</span> method consists of 2 parameters, <span style="font-family: Courier New,Courier,monospace">{animation}</span> and <span style="font-family: Courier New,Courier,monospace">{option}</span>:</p>
+<p>You can make an animation using the <code>tween()</code> method. If a tween animation is made, the animation is run right away. The <code>tween()</code> method consists of 2 parameters, <code>{animation}</code> and <code>{option}</code>:</p>
<pre class="prettyprint">
tween({animation}, {option});
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">{animation}</span> can be various animations, such as transform, CSS property, or predefined effect. Basically, <span style="font-family: Courier New,Courier,monospace">{animation}</span> indicates the destination of the animation. For example, <span style="font-family: Courier New,Courier,monospace">{rotateZ: 90}</span> 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. <span style="font-family: Courier New,Courier,monospace">{rotateZ: [30, 90]}</span> indicates the changing rotation value of the transform from 30 to 90.</p>
+<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;
+<pre class="prettyprint">
+var t = tau.animation.target;
t('#redBox').tween({translateX: 1000}, 1000); /* Translate from current position to 1000 */
-t('#blueBox').tween({left: 200, top: [100, 300]}, 1000); /* Add left property from current to 200, add top property from 100 to 300 */
+/* Add left property from current to 200, add top property from 100 to 300 */
+t('#blueBox').tween({left: 200, top: [100, 300]}, 1000);
</pre>
<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;
+<pre class="prettyprint">
+var t = tau.animation.target;
t('#blueBox').tween({translateX: [500, 1000]}, 1000).tween({translateY: 500}, 1000)
.tween({rotateZ: 120}, 1000).tween({skewX: [0, 30]}, 1000)
.tween({opacity: [1, 0]}, 1000).tween({opacity: 0.5}, 1000);
</pre>
-<p class="figure">Figure: Animation queue and chaining</p>
+<p align="center"><strong>Figure: Animation queue and chaining</strong></p>
<p align="center"><img src="../../../images/tau_animation_5.png" alt="Animation queue and chaining" /></p>
<p>The chaining feature makes an intuitive sequence group animation.</p>
<h3 id="effects">Predefined Effects</h3>
<p>The following predefined effects are available:</p>
-<p><span style="font-family: Courier New,Courier,monospace">bounce</span>, <span style="font-family: Courier New,Courier,monospace">flash</span>, <span style="font-family: Courier New,Courier,monospace">pulse</span>, <span style="font-family: Courier New,Courier,monospace">rubberBand</span>, <span style="font-family: Courier New,Courier,monospace">shake</span>, <span style="font-family: Courier New,Courier,monospace">swing</span>, <span style="font-family: Courier New,Courier,monospace">tada</span>, <span style="font-family: Courier New,Courier,monospace">wobble</span>, <span style="font-family: Courier New,Courier,monospace">jello</span>, <span style="font-family: Courier New,Courier,monospace">bounceIn</span>, <span style="font-family: Courier New,Courier,monospace">bounceInDown</span>, <span style="font-family: Courier New,Courier,monospace">bounceInLeft</span>, <span style="font-family: Courier New,Courier,monospace">bounceInRight</span>, <span style="font-family: Courier New,Courier,monospace">bounceInUp</span>, <span style="font-family: Courier New,Courier,monospace">bounceOut</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutDown</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutRight</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutUp</span>, <span style="font-family: Courier New,Courier,monospace">fadeIn</span>, <span style="font-family: Courier New,Courier,monospace">fadeInDown</span>, <span style="font-family: Courier New,Courier,monospace">fadeInLeft</span>, <span style="font-family: Courier New,Courier,monospace">fadeInRight</span>, <span style="font-family: Courier New,Courier,monospace">fadeInUp</span>,
-<span style="font-family: Courier New,Courier,monospace">fadeOut</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutDown</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutRight</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutUp</span>, <span style="font-family: Courier New,Courier,monospace">flip</span>, <span style="font-family: Courier New,Courier,monospace">flipInX</span>, <span style="font-family: Courier New,Courier,monospace">flipInY</span>, <span style="font-family: Courier New,Courier,monospace">flipOutX</span>, <span style="font-family: Courier New,Courier,monospace">flipOutY</span>,
-<span style="font-family: Courier New,Courier,monospace">lightSpeedIn</span>, <span style="font-family: Courier New,Courier,monospace">lightSpeedOut</span>, <span style="font-family: Courier New,Courier,monospace">rotateIn</span>, <span style="font-family: Courier New,Courier,monospace">rotateInDownLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateInDownRight</span>, <span style="font-family: Courier New,Courier,monospace">rotateInUpLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateInUpRight</span>,
-<span style="font-family: Courier New,Courier,monospace">rotateOut</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutDownLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutDownRight</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutUpLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutUpRight</span>, <span style="font-family: Courier New,Courier,monospace">slideInUp</span>, <span style="font-family: Courier New,Courier,monospace">slideInDown</span>, <span style="font-family: Courier New,Courier,monospace">slideInLeft</span>, <span style="font-family: Courier New,Courier,monospace">slideInRight</span>,
-<span style="font-family: Courier New,Courier,monospace">slideOutUp</span>, <span style="font-family: Courier New,Courier,monospace">slideOutDown</span>, <span style="font-family: Courier New,Courier,monospace">slideOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">slideOutRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomIn</span>, <span style="font-family: Courier New,Courier,monospace">zoomInDown</span>, <span style="font-family: Courier New,Courier,monospace">zoomInLeft</span>, <span style="font-family: Courier New,Courier,monospace">zoomInRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomInUp</span>, <span style="font-family: Courier New,Courier,monospace">zoomOut</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutDown</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutUp</span>, <span style="font-family: Courier New,Courier,monospace">hinge</span>, <span style="font-family: Courier New,Courier,monospace">rollIn</span>, <span style="font-family: Courier New,Courier,monospace">rollOut</span></p>
+<p><code>bounce</code>, <code>flash</code>, <code>pulse</code>, <code>rubberBand</code>, <code>shake</code>, <code>swing</code>, <code>tada</code>, <code>wobble</code>, <code>jello</code>, <code>bounceIn</code>, <code>bounceInDown</code>, <code>bounceInLeft</code>, <code>bounceInRight</code>, <code>bounceInUp</code>, <code>bounceOut</code>, <code>bounceOutDown</code>, <code>bounceOutLeft</code>, <code>bounceOutRight</code>, <code>bounceOutUp</code>, <code>fadeIn</code>, <code>fadeInDown</code>, <code>fadeInLeft</code>, <code>fadeInRight</code>, <code>fadeInUp</code>,
+<code>fadeOut</code>, <code>fadeOutDown</code>, <code>fadeOutLeft</code>, <code>fadeOutRight</code>, <code>fadeOutUp</code>, <code>flip</code>, <code>flipInX</code>, <code>flipInY</code>, <code>flipOutX</code>, <code>flipOutY</code>,
+<code>lightSpeedIn</code>, <code>lightSpeedOut</code>, <code>rotateIn</code>, <code>rotateInDownLeft</code>, <code>rotateInDownRight</code>, <code>rotateInUpLeft</code>, <code>rotateInUpRight</code>,
+<code>rotateOut</code>, <code>rotateOutDownLeft</code>, <code>rotateOutDownRight</code>, <code>rotateOutUpLeft</code>, <code>rotateOutUpRight</code>, <code>slideInUp</code>, <code>slideInDown</code>, <code>slideInLeft</code>, <code>slideInRight</code>,
+<code>slideOutUp</code>, <code>slideOutDown</code>, <code>slideOutLeft</code>, <code>slideOutRight</code>, <code>zoomIn</code>, <code>zoomInDown</code>, <code>zoomInLeft</code>, <code>zoomInRight</code>, <code>zoomInUp</code>, <code>zoomOut</code>, <code>zoomOutDown</code>, <code>zoomOutLeft</code>, <code>zoomOutRight</code>, <code>zoomOutUp</code>, <code>hinge</code>, <code>rollIn</code>, <code>rollOut</code></p>
-<p>To make an identical effect, you can make many single animations. The following example shows the <span style="font-family: Courier New,Courier,monospace">shake</span> effect:</p>
+<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>
<h3 id="group">Group</h3>
-<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <span style="font-family: Courier New,Courier,monospace">target()</span> method is provided. If all classes of DOM are <span style="font-family: Courier New,Courier,monospace">box</span>, you can create a box group. Like a CSS selector, '.' means a class selector and '#' means an ID selector. Also, a pure HTML element can be a parameter of the <span style="font-family: Courier New,Courier,monospace">target()</span> method.</p>
+<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <code>target()</code> method is provided. If all classes of DOM are <code>box</code>, you can create a box group. Like a CSS selector, '.' means a class selector and '#' means an ID selector. Also, a pure HTML element can be a parameter of the <code>target()</code> method.</p>
<pre class="prettyprint">
<div class="box"></div>
<div class="box"></div>
</pre>
<h3 id="stagger">Stagger</h3>
-<p>In case of handling an animation group, you can apply a different delay value to a group. The following example shows a delay with the <span style="font-family: Courier New,Courier,monospace">zoomIn</span> effect:</p>
+<p>In case of handling an animation group, you can apply a different delay value to a group. The following example shows a delay with the <code>zoomIn</code> effect:</p>
<pre class="prettyprint">
<div class='box'></div>
<div class='box'></div>
</pre>
<h3 id="callback">Callback</h3>
-<p>You can add some actions before and after an animation. If you add the <span style="font-family: Courier New,Courier,monospace">onStart</span> callback, it is invoked before the animation. The <span style="font-family: Courier New,Courier,monospace">onComplete</span> callback is invoked after the animation.</p>
+<p>You can add some actions before and after an animation. If you add the <code>onStart</code> callback, it is invoked before the animation. The <code>onComplete</code> callback is invoked after the animation.</p>
<pre class="prettyprint">
<div id='blueBox'></div>
</pre>
<pre class="prettyprint"
>var t = tau.animation.target;
-t('#blueBox').tween({translateY: [0, 150], rotateZ: [0, 180]},
+t('#blueBox').tween({translateY: [0, 150], rotateZ: [0, 180]},
{
duration: 1000,
onStart: function()
{
t('#blueBox').innerText = 'start';
},
- onComplete: function()
+ 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 <span style="font-family: Courier New,Courier,monospace">start</span> text is inserted into the box. After translating and rotating, the box's background color is changed to navy.</p>
+<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>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>The following figure shows the layout of the progress bar component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Circle-shaped progress bar component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Circle-shaped progress bar component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Circle-shaped progress bar component in a rectangular device" src="../../../images/rectangular_progress.png" /> <img alt="Circle-shaped progress bar component in a circular device" src="../../../images/round_progress.png" /></p>
<p>To implement the progress bar component:</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;
position: absolute;
}
-@media all and (-tizen-geometric-shape: circle)
+@media all and (-tizen-geometric-shape: circle)
{
- .result
+ .result
{
top: 50%;
margin: 0;
}
- .ui-footer
+ .ui-footer
{
display: none;
}
resultText,
i;
- function printResult()
+ function printResult()
{
resultText = progressBarWidget.value();
resultDiv.innerHTML = resultText + "%";
};
- function clearVariables()
+ function clearVariables()
{
page = null;
progressBar = null;
resultDiv = null;
};
- function unbindEvents()
+ function unbindEvents()
{
page.removeEventListener("pageshow", pageBeforeShowHandler);
page.removeEventListener("pagehide", pageHideHandler);
- if (isCircle)
+ if (isCircle)
{
document.removeEventListener("rotarydetent", rotaryDetentHandler);
- }
- else
+ }
+ else
{
minusBtn.removeEventListener("click", minusBtnClickHandler);
plusBtn.removeEventListener("click", plusBtnClickHandler);
}
};
- function minusBtnClickHandler()
+ function minusBtnClickHandler()
{
i = i - 10;
- if (i < 0)
+ if (i < 0)
{
i = 0;
}
printResult();
};
- function plusBtnClickHandler()
+ function plusBtnClickHandler()
{
i = i + 10;
- if (i > 100)
+ if (i > 100)
{
i = 100;
}
printResult();
};
- function rotaryDetentHandler()
+ function rotaryDetentHandler()
{
/* Get the rotary direction */
var direction = event.detail.direction,
value = parseInt(progressBarWidget.value());
- if (direction === "CW")
+ if (direction === "CW")
{
/* Right direction */
- if (value < 100)
+ if (value < 100)
{
value++;
- }
- else
+ }
+ else
{
value = 100;
}
- }
- else if (direction === "CCW")
+ }
+ else if (direction === "CCW")
{
/* Left direction */
- if (value > 0)
+ if (value > 0)
{
value--;
- }
- else
+ }
+ else
{
value = 0;
}
printResult();
}
- function pageBeforeShowHandler()
+ function pageBeforeShowHandler()
{
- if (isCircle)
+ if (isCircle)
{
/* Make the circular progressbar object */
- progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "full"});
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
+ {size: "full"});
document.addEventListener("rotarydetent", rotaryDetentHandler);
- }
- else
+ }
+ else
{
- progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "large"});
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
+ {size: "large"});
minusBtn.addEventListener("click", minusBtnClickHandler);
plusBtn.addEventListener("click", plusBtnClickHandler);
}
resultDiv.innerHTML = i + "%";
};
- function pageHideHandler()
+ function pageHideHandler()
{
unbindEvents();
clearVariables();
</pre>
</li>
</ol>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div></div></div>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>To support the circular UI:</p>
<ol>
-<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.css</span> file into the <span style="font-family: Courier New,Courier,monospace"><head></span> element in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of the TAU library.</li>
+<li>Include the <code>link</code> element for the latest <code>tau.css</code> file into the <code><head></code> element in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of the TAU library.</li>
-<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file with the media query feature (<span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span>) next to the <span style="font-family: Courier New,Courier,monospace">link</span> element for the <span style="font-family: Courier New,Courier,monospace">tau.css</span>. Note that adding the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file following the general <span style="font-family: Courier New,Courier,monospace">tau.css</span> file covers the additional circular UI.</li>
+<li>Include the <code>link</code> element for the latest <code>tau.circle.css</code> file with the media query feature (<code>-tizen-geometric-shape: circle</code>) next to the <code>link</code> element for the <code>tau.css</code>. Note that adding the <code>tau.circle.css</code> file following the general <code>tau.css</code> file covers the additional circular UI.</li>
-<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.js</span> script file at the end of <span style="font-family: Courier New,Courier,monospace"><body></span> element in HTML.</li>
+<li>Include the <code>link</code> element for the latest <code>tau.js</code> script file at the end of <code><body></code> element in HTML.</li>
-<li>For writing a separate code for a circular UI in JavaScript, you can use the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property for detecting the circular device.</li>
+<li>For writing a separate code for a circular UI in JavaScript, you can use the <code>tau.support.shape.circle</code> property for detecting the circular device.</li>
</ol>
<pre class="prettyprint">
<head name="viewport" content="width=device-width, user-scalable=no">
<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">
+ <!--CSS media query on a link element-->
+ <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)
+ if (tau.support.shape.circle)
{
- /* Implement your code for the circular UI */
- }
- else
+ /* Implement your code for circular UI */
+ }
+ else
{
- /* Implement your code for the rectangular UI */
+ /* Implement your code for rectangular UI */
}
</script>
</body>
</pre>
-<p>The following figure shows how the media query <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span> works in a rectangular and circular UI.</p>
-<p class="figure">Figure: Media query in a rectangular device and circular device</p>
+<p>The following figure shows how the media query <code>-tizen-geometric-shape: circle</code> works in a rectangular and circular UI.</p>
+<p align="center"><strong>Figure: Media query in a rectangular device and circular device</strong></p>
<p align="center">
<img alt="Media query in a rectangular device and circular device" src="../../../images/circular_support.png" />
</p>
<h2 id="incss">Overriding the Circular CSS Style with a Media Query</h2>
-<p>For some styles to be applied selectively, you can use the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> media query feature with a <span style="font-family: Courier New,Courier,monospace">rectangle</span> or <span style="font-family: Courier New,Courier,monospace">circle</span> value to distinguish the type difference. Note that the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature is only available in Tizen devices.</p>
+<p>For some styles to be applied selectively, you can use the <code>-tizen-geometric-shape</code> media query feature with a <code>rectangle</code> or <code>circle</code> value to distinguish the type difference. Note that the <code>-tizen-geometric-shape</code> feature is only available in Tizen devices.</p>
+
+<p align="center" class="Table"><strong>Table: <code>-tizen-geometric-shape</code> feature description</strong></p>
<table>
- <caption>Table: <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature description</caption>
<tbody>
<tr>
<th colspan="2">-tizen-geometric-shape</th>
</tr>
<tr>
<td>Value</td>
- <td><span style="font-family: Courier New,Courier,monospace">rectangle</span> | <span style="font-family: Courier New,Courier,monospace">circle</span></td>
+ <td><code>rectangle</code> | <code>circle</code></td>
</tr>
<tr>
<td>Applied to</td>
</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)
+@media screen and (-tizen-geometric-shape: circle)
{
.className
{
</pre>
<h2 id="injs">Writing JavaScript Selectively for the Circular UI</h2>
-<p>TAU provides the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> 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 <span style="font-family: Courier New,Courier,monospace">true</span> when the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file is loaded.</p>
+<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)
+if (tau.support.shape.circle)
{
- /* Implement your code for the circular UI */
-}
-else
+ /* Implement your code for circular UI */
+}
+else
{
- /* Implement your code for the rectangular UI */
+ /* Implement your code for rectangular UI */
}
</pre>
<h2 id="components">Supported UI Components</h2>
<p>The following components can be used in both rectangular and circular devices.</p>
- <table>
- <caption>Table: UI components supported by a rectangular and circular UI</caption>
+
+<p align="center" class="Table"><strong>Table: UI components supported by a rectangular and circular UI</strong></p>
+<table>
<tbody>
<tr>
<th>Component</th>
<td><a href="list_ww.htm">Snap List</a></td>
<td>Shows how to create a snap list component.</td>
</tr>
-
<tr>
<td><a href="header_ww.htm">Expandable Header</a></td>
<td>Shows how to create a header component.</td>
<td><a href="moreoptions_ww.htm">More Options</a></td>
<td>Shows how to create a more options button component.</td>
</tr>
-
</tbody>
</table>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<h1>Creating Applications with Animation</h1>
<p>You can create a simple application using TAU Animation. With the following example, you can learn how to import TAU Animation into your application and create a basic simple application with animation.</p>
- <p>This feature is supported in mobile and wearable applications only.</p>
-
<h2 id="load">Loading a TAU Animation</h2>
<p>You can import the TAU Animation with HTML:</p>
<pre class="prettyprint">
<script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"></script>
</head>
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">tau.animation</span> is the namespace of the TAU Animation. You can call TAU Animation methods through this namespace.</p>
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To get the <span style="font-family: Courier New,Courier,monospace">tau.animation.min.js</span> library, create a new project from the <a href="https://developer.tizen.org/development/sample/web/UI/TAU_UI_Components" target="_blank">UIComponent</a> sample. The library is included in the sample's <span style="font-family: Courier New,Courier,monospace">lib/tau/animation</span> directory.</td>
- </tr>
- </tbody>
-</table>
+<p><code>tau.animation</code> is the namespace of the TAU Animation. You can call TAU Animation methods through this namespace.</p>
+<div class="note">
+ <strong>Note</strong>
+ To get the <code>tau.animation.min.js</code> library, create a new project from the <a href="https://developer.tizen.org/development/sample/web/UI/TAU_UI_Components" target="_blank">UIComponent</a> sample. The library is included in the sample's <code>lib/tau/animation</code> directory.
+</div>
<h2 id="create">Creating TAU Animations</h2>
<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;
+<pre class="prettyprint">
+var t = tau.animation.target;
t('#redBox').tween('swing', 1000);
t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
</pre>
-<p>If you want to animate the HTML element directly, you can use <span style="font-family: Courier New,Courier,monospace">mixin</span>. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like a CSS selector, '.' means class selector, '#' means ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
+<p>If you want to animate the HTML element directly, you can use <code>mixin</code>. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like a CSS selector, '.' means class selector, '#' means ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
<p>Available animation methods:</p>
<ul><li>Predefined effects
-<p>When the first parameter of the <
span style="font-family: Courier New,Courier,monospace">tween()</span> method indicates a string (such as 'swing' above) instead of an object, it is a predefined effect animation. Various <a href="animation_w.htm#effects">predefined effects</a> are available.</p></li>
+<p>When the first parameter of the <
code>tween()</code> method indicates a string (such as 'swing' above) instead of an object, it is a predefined effect animation. Various <a href="animation_w.htm#effects">predefined effects</a> are available.</p></li>
<li>Chaining
-<p>The <span style="font-family: Courier New,Courier,monospace">blueBox</span> animation above is a type of a connected animation. If animations are connected to the same target object, it is added to the queue. And if the <span style="font-family: Courier New,Courier,monospace">play()</span> method is invoked, all animations in the queue are called in the sequence order.</p></li>
+<p>The <code>blueBox</code> animation above is a type of a connected animation. If animations are connected to the same target object, it is added to the queue. And if the <code>play()</code> method is invoked, all animations in the queue are called in the sequence order.</p></li>
<li>Tween
-<p><span style="font-family: Courier New,Courier,monospace">tween()</span> is a TAU Animation method. It animates a target object based on parameters. The following example shows the use of the <span style="font-family: Courier New,Courier,monospace">tween()</span> method:</p>
+<p><code>tween()</code> is a TAU Animation method. It animates a target object based on parameters. The following example shows the use of the <code>tween()</code> method:</p>
<pre class="prettyprint">
tween({animation}, {option})
</pre>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">animation</span> is the part moving, such as a transform, CSS, or predefined effect.</li>
-<li><span style="font-family: Courier New,Courier,monospace">transform</span> options:
-<p><span style="font-family: Courier New,Courier,monospace">translateX</span>, <span style="font-family: Courier New,Courier,monospace">translateY</span>, <span style="font-family: Courier New,Courier,monospace">translateZ</span>, <span style="font-family: Courier New,Courier,monospace">rotateX</span>, <span style="font-family: Courier New,Courier,monospace">rotateY</span>, <span style="font-family: Courier New,Courier,monospace">rotateZ</span>, <span style="font-family: Courier New,Courier,monospace">scaleX</span>, <span style="font-family: Courier New,Courier,monospace">scaleY</span>, <span style="font-family: Courier New,Courier,monospace">skewX</span>, <span style="font-family: Courier New,Courier,monospace">skewY</span></p>
+<li><code>animation</code> is the part moving, such as a transform, CSS, or predefined effect.</li>
+<li><code>transform</code> options:
+<p><code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code>, <code>scaleX</code>, <code>scaleY</code>, <code>skewX</code>, <code>skewY</code></p>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">css</span> options:
-<p><span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">width</span>, <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">background-color</span>, <span style="font-family: Courier New,Courier,monospace">color</span>, <span style="font-family: Courier New,Courier,monospace">border</span>, <span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-color</span>, <span style="font-family: Courier New,Courier,monospace">margin</span>, <span style="font-family: Courier New,Courier,monospace">marginTop</span>, <span style="font-family: Courier New,Courier,monospace">marginRight</span>, <span style="font-family: Courier New,Courier,monospace">marginBottom</span>, <span style="font-family: Courier New,Courier,monospace">marginLeft</span>, <span style="font-family: Courier New,Courier,monospace">padding</span>, <span style="font-family: Courier New,Courier,monospace">paddingTop</span>, <span style="font-family: Courier New,Courier,monospace">paddingRight</span>, <span style="font-family: Courier New,Courier,monospace">paddingBottom</span>, <span style="font-family: Courier New,Courier,monospace">paddingLeft</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, <span style="font-family: Courier New,Courier,monospace">line-height</span>, <span style="font-family: Courier New,Courier,monospace">clip-path</span>, <span style="font-family: Courier New,Courier,monospace">background-position</span>, <span style="font-family: Courier New,Courier,monospace">background-size</span>, <span style="font-family: Courier New,Courier,monospace">box-shadow</span></p>
+<li><code>css</code> options:
+<p><code>left</code>, <code>top</code>, <code>width</code>, <code>height</code>, <code>background-color</code>, <code>color</code>, <code>border</code>, <code>border-width</code>, <code>border-color</code>, <code>margin</code>, <code>marginTop</code>, <code>marginRight</code>, <code>marginBottom</code>, <code>marginLeft</code>, <code>padding</code>, <code>paddingTop</code>, <code>paddingRight</code>, <code>paddingBottom</code>, <code>paddingLeft</code>, <code>font-size</code>, <code>line-height</code>, <code>clip-path</code>, <code>background-position</code>, <code>background-size</code>, <code>box-shadow</code></p>
</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;
t('#redBox').tween({rotateZ: 120}, 1000); /* Transform */
-t('#redBox').tween({backgroundColor: 'red', border: '10px 10px 10px 3px white'}, 1000); /* CSS property */
+/* CSS property */
+t('#redBox').tween({backgroundColor: 'red', border: '10px 10px 10px 3px white'}, 1000);
t('#redBox').tween('swing', 1000).tween('tada', 1000); /* Predefined effect */
</pre></li>
<li>Option
-<p>An <span style="font-family: Courier New,Courier,monospace">option</span> 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 <span style="font-family: Courier New,Courier,monospace">{option}</span> object and insert the <span style="font-family: Courier New,Courier,monospace">duration: value</span> into the object.
+<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>
<div class="box"></div>
</pre>
-<pre class="prettyprint">var t = tau.animation.target;
+<pre class="prettyprint">
+var t = tau.animation.target;
t('#redBox').tween({rotateZ: 120}, 1000);
t('#redBox').tween({rotateZ: 120}, {duration: 1000});
/* Result of this tween method is identical with the above method */
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, ease: 'bounceInOut'});
-t('#blueBox').tween({rotateZ: 120}, {duration: 1000, delay: 500}); /* After 500ms, blueBox is rotated */
+/* After 500ms, blueBox is rotated */
+t('#blueBox').tween({rotateZ: 120}, {duration: 1000, delay: 500});
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, onStart: function()
{
- t('#blueBox').style.innerText = 'start'; /* Before animation, the text is inserted into blueBox */
- },
- onComplete: function()
+ /* Before animation, the text is inserted into blueBox */
+ t('#blueBox').style.innerText = 'start';
+ }, onComplete: function()
{
- t('#blueBox').tween('swing', 1000); /* After animation, blueBox is animated with a predefined effect */
+ /* After animation, blueBox is animated with a predefined effect */
+ t('#blueBox').tween('swing', 1000);
}
});
-/* All boxes that include the className 'box' are rotated sequentially with a 200ms time difference */
-t('.box').tween({rotateZ: 120}, {duration: 1000, stagger: 200});
+/*
+ All boxes that include the className 'box' are
+ rotated sequentially with a 200ms time difference
+*/
+t('.box').tween({rotateZ: 120}, {duration: 1000, stagger: 200});
</pre></li></ul>
<html>
<head>
<style>
- .box
+ .box
{
position: absolute;
width: 100px;
<title>TAU Animation Sample</title>
- <!-- load TAU Animation -->
+ <!--Load TAU Animation-->
<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>
<script>
var t = tau.animation.target;
- t('#redBox').tween('swing', 1000); /* Single animation */
- t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000); /* Single animation */
- t('.box').tween({translateY: 500}, {duration: 1000, stagger: 200}); /* Group animation */
+ /* 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>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>To download and build TAU from Git:</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To build the TAU library, make sure that you have both Git and <span style="font-family: Courier New,Courier,monospace">Node.js</span> installed.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ To build the TAU library, make sure that you have both Git and <code>Node.js</code> installed.
+</div>
<ol>
<li>Download the Git repository:
<pre class="prettyprint">
grunt -V
</pre></li>
-<li>Build TAU by running the following command in the <span style="font-family: Courier New,Courier,monospace">tau</span> directory:
+<li>Build TAU by running the following command in the <code>tau</code> directory:
<pre class="prettyprint">
grunt build
</pre></li>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>The following figures show the hardware keys for mobile (on the left) and wearable (on the right) devices.</p>
- <p class="figure">Figure: Hardware keys</p>
+ <p align="center"><strong>Figure: Hardware keys</strong></p>
<p align="center"><img alt="Hardware keys" src="../../../images/hwkey_phone_wearable.png" /></p>
-
+<p align="center" class="Table"><strong> Table: Hardware key events</strong></p>
<table>
- <caption> Table: Hardware key events</caption>
<tbody>
<tr>
<th>Type</th>
<th>Attribute</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span></td>
+ <td><code>tizenhwkey</code></td>
<td>Event is triggered when a device detects the user interaction through a special point of hardware.</td>
<td>
- <span style="font-family: Courier New,Courier,monospace;">event.keyName</span>
+ <code>event.keyName</code>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable</li>
- <li><span style="font-family: Courier New,Courier,monospace;">back</span> or <span style="font-family: Courier New,Courier,monospace;">menu</span> for mobile</li>
+ <li><code>back</code> for wearable</li>
+ <li><code>back</code> or <code>menu</code> for mobile</li>
</ul>
</td>
</tr>
</tbody>
</table>
-<p>To bind an event callback on the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> events, use the following code:</p>
+<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 */
- }
-});
+ 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>When the application binds a <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event, it checks the page ID and decides to go back or exit with several lines of app-side script.</p>
+<p>When the application binds a <code>tizenhwkey</code> event, it checks the page ID and decides to go back or exit with several lines of app-side script.</p>
<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 <span style="font-family: Courier New,Courier,monospace;">main</span>.</p>
-<pre class="prettyprint">(function()
+<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")
+ if (ev.keyName === "back")
{
- try
+ var page = document.getElementsByClassName("ui-page-active")[0],
+ pageid = page ? page.id: "";
+ if (pageid === "main")
{
- tizen.application.getCurrentApplication().exit();
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (ignore)
+ {
+ }
}
- catch (ignore)
+ else
{
+ window.history.back();
}
}
- else
- {
- window.history.back();
- }
- }
- });
-}());</pre>
+ });
+}());
+</pre>
<h2 id="rotaryevent">Rotary Events in Wearable Applications</h2>
<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called detents. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
-<p class="figure">Figure: Rotary device</p>
+<p align="center"><strong>Figure: Rotary device</strong></p>
<p align="center"><img alt="Rotary device" src="../../../images/rotary_event.png" /> </p>
<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
+<p align="center" class="Table"><strong> Table: Rotary events</strong></p>
<table>
- <caption> Table: Rotary events</caption>
<tbody>
<tr>
<th>Type</th>
<th>Attribute</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">rotarydetent</span></td>
+ <td><code>rotarydetent</code></td>
<td>Event is triggered when a device detects the detent point.</td>
- <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: rotation direction
- <ul><li><span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise rotation direction</li>
- <li><span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation direction</li></ul></td>
+ <td><code>detail.direction</code>: rotation direction
+ <ul><li><code>CW</code> for clockwise rotation direction</li>
+ <li><code>CCW</code> for counter-clockwise rotation direction</li></ul></td>
</tr>
</tbody>
</table>
<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 */
-});
+ {
+ var direction = ev.detail.direction;
+ /* Add behavior for detent detected event with a direction value */
+ });
</pre>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>This feature is supported in wearable applications only.</p>
<p>The following figures show the layout of the footer button component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Footer button component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Footer button component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Footer button in a rectangular device" src="../../../images/rectangular_footer.png"/> <img alt="Footer button in a circular device" src="../../../images/round_footer.png"/></p>
-<p class="figure">Figure: Multiple footer buttons in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Multiple footer buttons in rectangular and circular devices</strong></p>
<p align="center"><img alt="Multiple footer buttons in a rectangular device" src="../../../images/rectangular_multibtn.png"/> <img alt="Multiple footer buttons in a circular device" src="../../../images/round_multibtn.png"/></p>
-<p>The footer button on the circular UI has the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
+<p>The footer button on the circular UI has the <code>ui-bottom-button</code> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
<p>To implement footer buttons:</p>
<p>Edit the HTML code to add the footer button component to your application screen.</p>
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="bottomButtonPage" >
+<div class="ui-page ui-page-active" id="bottomButtonPage">
<header class="ui-header">
<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>
<p>When there are multiple buttons, the buttons (except for the first button) use the drawer in the circular UI.</p>
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="bottomButtonWithMorePage" >
- <header class="ui-header">
- <h2 class="ui-title">Multiple Buttons</h2>
+<div class="ui-page ui-page-active" id="bottomButtonWithMorePage">
+ <header class="ui-header">
+ <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.
+ <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.
</div>
- <a class="drawer-handler"></a>
+ <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="selector" class="ui-selector">
- <div class="ui-item show-icon" data-title="2"></div>
- <div class="ui-item human-icon" data-title="3"></div>
+ <!--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="selector" class="ui-selector">
+ <div class="ui-item show-icon" data-title="2"></div>
+ <div class="ui-item human-icon" data-title="3"></div>
</div>
</div>
- <footer class="ui-footer ui-grid-col-3 ui-bottom-button">
- <a href="#" class="ui-btn">1</a>
- <a href="#" class="ui-btn">2</a>
- <a href="#" class="ui-btn">3</a>
+ <footer class="ui-footer ui-grid-col-3 ui-bottom-button">
+ <a href="#" class="ui-btn">1</a>
+ <a href="#" class="ui-btn">2</a>
+ <a href="#" class="ui-btn">3</a>
</footer>
</div>
</pre>
<li>Edit the CSS code to set the visual style of the buttons:
<pre class="prettyprint">
-.drawer-elem
+.drawer-elem
{
- display: none;
+ display: none;
}
-@media all and (-tizen-geometric-shape: circle)
+@media all and (-tizen-geometric-shape: circle)
{
- .drawer-handler
+ .drawer-handler
{
width: 24px;
- height: 115px;
- position: fixed;
- top: 122px;
- right: 0;
- color: transparent;
- background-color: #a4a4a4;
- -webkit-mask-image: url(/*path of the image*/);
- -webkit-mask-size: 18px 36px;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: 0 40px;
+ height: 115px;
+ position: fixed;
+ top: 122px;
+ right: 0;
+ color: transparent;
+ background-color: #a4a4a4;
+ -webkit-mask-image: url(/* Image path */);
+ -webkit-mask-size: 18px 36px;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: 0 40px;
}
- .ui-bottom-button a + a
+ .ui-bottom-button a + a
{
- display: none;
+ display: none;
}
}
</pre>
drawer = page.querySelector("#moreoptionsDrawer"),
handler = page.querySelector(".ui-more");
- page.addEventListener("pagebeforeshow", function()
- {
- if (tau.support.shape.circle)
+ page.addEventListener("pagebeforeshow", function()
{
- tau.helper.DrawerMoreStyle.create(drawer,
+ if (tau.support.shape.circle)
{
- handler: ".drawer-handler",
- });
- }
- });
+ tau.helper.DrawerMoreStyle.create(drawer,
+ {
+ handler: ".drawer-handler",
+ });
+ }
+ });
})();
</pre>
</li>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
</ul>
<p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file, see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
- <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace"><project>/lib/tau/<profile>js/cldr-data</span> folder.</p>
+ <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <code><project>/lib/tau/<profile>js/cldr-data</code> folder.</p>
<h2 id="use" name="use">Using the Globalize Utility</h2>
</ul>
</li>
<li>Create a folder structure, as shown in the following table.
- <table>
- <caption>
- Table: Globalize folder structure
- </caption>
- <tbody>
+
+<p align="center" class="Table"><strong>Table: Globalize folder structure</strong></p>
+<table>
+ <tbody>
<tr>
<th colspan="2">Folder structure</th>
<th>Description</th>
</tr>
<tr>
- <td rowspan="7"> <p class="figure"></p>
+ <td rowspan="7">
<p align="center"><img src="../../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
- <td rowspan="7"> <p class="figure"></p>
+ <td rowspan="7">
<p align="center"><img src="../../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
- <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
+ <td><code>cldr/</code>: Copy the cldr.js library in this folder.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
- <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not copy all languages, just the ones you need.</td>
- </tr>
- </tbody>
- </table></td>
+ <td><code>cldr-data/</code>: Copy the cldr-data files in this folder.
+ <p><code>cldr-data/main</code>: Copy the languages to be supported in this folder.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ Do not copy all languages, just the ones you need.
+</div>
+ </td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
+ <td><code>globalize/</code>: Copy the Globalize library in this folder.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
+ <td><code>locale/</code>: Make the custom locale string in this folder.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
+ <td><code>script/</code>: JavaScript files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
+ <td><code>style/</code>: CSS, image, and other style related files.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
+ <td><code>view/</code>: HTML files</td>
</tr>
</tbody>
</table>
<li>Set the locale using the following example code:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR";
+ localeId = "ko-KR";
document.addEventListener('pageshow', function()
-{
- globalize.setLocale(localeId)
- .done(function(ko)
{
- /* "ko" is the Globalize utility instance */
- console.log(ko.getLocale()) /* "ko" */
+ globalize.setLocale(localeId).done(function(ko)
+ {
+ /* "ko" is the Globalize utility instance */
+ console.log(ko.getLocale()); /* "ko" */
+ })
})
-})
</pre>
- <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
+ <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>
<p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
<ul>
- <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace"><body lang="ko-KR"></span>.</li>
- <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale("en")</span>) to overwrite the body element setting. </li>
+ <li>Specify the locale ID in the <code>lang</code> attribute of the body element, such as <code><body lang="ko-KR"></code>.</li>
+ <li>Use a string variable as an input argument of the <code>setLocale()</code> method (for example <code>ko.setLocale("en")</code>) to overwrite the body element setting. </li>
</ul>
- <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale "en".</p>
+ <p>If no <code>lang</code> attribute or <code>setLocale()</code> input argument is defined, the Globalize utility finds the locale by checking the <code>window.navigator.language</code> property. If the check result is false, the utility uses the default locale "en".</p>
<p>The following table illustrates the locale setting method order.</p>
- <table>
- <caption>
- Table: Locale setting methods
- </caption>
- <tbody>
+
+<p align="center" class="Table"><strong>Table: Locale setting methods</strong></p>
+<table>
+ <tbody>
<tr>
<th>Order</th>
<th>Locale setting methods</th>
</tr>
<tr>
<td>1</td>
- <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
+ <td><code>setLocale(LocaleId)</code></td>
</tr>
<tr>
<td>2</td>
- <td><span style="font-family: Courier New,Courier,monospace"><body lang="ko-KR"></span></td>
+ <td><code><body lang="ko-KR"></code></td>
</tr>
<tr>
<td>3</td>
- <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
+ <td><code>window.navigator.language</code></td>
</tr>
<tr>
<td>4</td>
</table>
</li>
<li>Make sure that you have all required CLDR files.
- <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
+ <p>The <code>setLocale()</code> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
- <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
+ <li><code>cldr/main/locale/ca-gregorian.json</code></li>
+ <li><code>cldr/main/locale/numbers.json</code></li>
+ <li><code>cldr/main/locale/currencies.json</code></li>
+ <li><code>cldr/supplemental/likelySubtags.json</code></li>
+ <li><code>cldr/supplemental/scriptMetaData.json</code></li>
+ <li><code>cldr/supplemental/timeData.json</code></li>
+ <li><code>cldr/supplemental/weekData.json</code></li>
+ <li><code>cldr/supplemental/numberingSystems.json</code></li>
+ <li><code>cldr/supplemental/plurals.json</code> (for cardinals)</li>
+ <li><code>cldr/supplemental/ordinals.json</code> (for ordinals)</li>
</ul>
<p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
- <table>
- <caption>
- Table: CLDR requirements
- </caption>
- <tbody>
+
+<p align="center" class="Table"><strong>Table: CLDR requirements</strong></p>
+<table>
+ <tbody>
<tr>
<th>Module</th>
<th>Required CLDR JSON files</th>
</tr>
<tr>
<td>Core module</td>
- <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
+ <td><code>cldr/supplemental/likelySubtags.json</code></td>
</tr>
<tr>
<td>Date module</td>
- <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
- <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
+ <td><code>cldr/main/locale/ca-gregorian.json</code>
+ <p><code>cldr/main/locale/timeZoneNames.json</code></p>
+ <p><code>cldr/supplemental/timeData.json</code></p>
+ <p><code>cldr/supplemental/weekData.json</code></p>
<p>CLDR JSON files from the number module</p></td>
</tr>
<tr>
<td>Number module</td>
- <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
- <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p></td>
+ <td><code>cldr/main/locale/numbers.json</code>
+ <p><code>cldr/supplemental/numberingSystems.json</code></p></td>
</tr>
<tr>
<td>Plural module</td>
- <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
- <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
+ <td><code>cldr/supplemental/plurals.json</code> (for cardinals)
+ <p><code>cldr/supplemental/ordinals.json</code> (for ordinals)</p>
</td>
</tr>
</tbody>
<h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
<p>The following code snippets show how to use the TAU Globalize utility methods:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
+ <li><code>formatCurrency()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR",
+ 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 */
+ 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><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
+ <li><code>formatDate()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR",
+ 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"});
+ 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><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
+ <li><code>getCalendar()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR";
+ localeId = "ko-KR";
document.addEventListener('pageshow', function()
-{
- globalize.setLocale(localeId)
- .done(function(ko)
{
- console.log(ko.getCalendar().months.format.wide, undefined, 4));
+ globalize.setLocale(localeId).done(function(ko)
+ {
+ console.log(ko.getCalendar().months.format.wide, undefined, 4));
+ })
})
-})
</pre>
- <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
+ <p>The calendar format is specified in the <code>gregorian.json</code> file in the CLDR data.</p>
</li>
- <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
+ <li><code>formatMessage()</code>:
<p>This method supports custom locale data.</p>
<ol>
<li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
ko.json
</pre>
</li>
- <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
+ <li>Create a JSON file for the <code>formatMessage</code> strings (custom locale strings) in locales paths:
<pre class="prettyprint">
{
"en":
</pre>
</li>
- <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
+ <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";
+ 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"));
+ 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>
- <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
+ <li><code>messageFormatter()</code>:
<p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
<ol>
<li>Create a locale resource in the locales path:
</pre>
</li>
- <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
+ <li>Use the <code>messageFormatter()</code> method:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "en-US";
+ 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));
+ 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>Locale-specific CSS</li>
<li>RTL property in a locale object</li>
</ul>
- <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
+ <p>When the <code>setLocale()</code> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
<p>The following examples show how to use the locale-specific CSS:</p>
<ul>
<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";
+ localeId = "ar-EG";
document.addEventListener('pageshow', function()
-{
- globalize.setLocale(localeId)
- .done(function(ar)
{
- ...
+ globalize.setLocale(localeId).done(function(ar)
+ {
+ /* Do something */
+ })
})
-})
</pre>
</li>
- <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
+ <li>The following example has a DOM of body with a locale-specific CSS named <code>ui-script-direction-rtl</code>:
<pre class="prettyprint">
<body class="ui-script-direction-rtl">
</pre>
</li>
</ul>
- <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+ <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";
+ localeId = "ar-EG";
document.addEventListener('pageshow', function()
-{
- globalize.setLocale(localeId)
- .done(function(ar)
{
- console.log(ar.rtl) /* true */
+ globalize.setLocale(localeId).done(function(ar)
+ {
+ console.log(ar.rtl); /* true */
+ })
})
-})
</pre>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>The following figure shows the layout of the header component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Header component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Header component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Header component in a rectangular device" src="../../../images/rectangular_header.png" /> <img alt="Header component in a circular device" src="../../../images/round_header.png" /></p>
<p>To implement the header component, edit the HTML code to add the header component to your application screen:</p>
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="headerPage" >
+<div class="ui-page ui-page-active" id="headerPage">
<header class="ui-header" id="myHeader">
<h2 class="ui-title">Long title with ExpandableHeader</h2>
</header>
<p>The header component supports the following events.</p>
+<p align="center" class="Table"><strong>Table: Header component events</strong></p>
<table>
- <caption>
- Table: Header component events
- </caption>
<tbody>
<tr>
<th>Event name</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">headerexpand</span></td>
+ <td><code>headerexpand</code></td>
<td>Triggered when the header starts to expand.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">headerexpandcomplete</span></td>
+ <td><code>headerexpandcomplete</code></td>
<td>Triggered after the header has fully expanded.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">headercollapse</span></td>
+ <td><code>headercollapse</code></td>
<td>Triggered when the header returns to the state before expanding.</td>
</tr>
</tbody>
</table>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">headerexpand</span> and <span style="font-family: Courier New,Courier,monospace">headercollapse</span> events if you need to do something when the header expands and collapses.</p>
+<p>You can use the <code>headerexpand</code> and <code>headercollapse</code> events if you need to do something when the header expands and collapses.</p>
<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("pagebeforeshow", function()
+ {
+ var textElement = page.querySelector(".ui-title"),
+ marquee = new tau.widget.Marquee(textElement);
+ }, false);
-page.addEventListener("headercollapse", function()
-{
- if (marquee)
+page.addEventListener("headercollapse", function()
{
- marquee.reset();
- }
-}, false);
+ if (marquee)
+ {
+ marquee.reset();
+ }
+ }, false);
-page.addEventListener("headerexpandcomplete", function()
-{
- if (marquee)
+page.addEventListener("headerexpandcomplete", function()
{
- marquee.start();
- }
-}, false);
+ if (marquee)
+ {
+ marquee.start();
+ }
+ }, false);
</pre>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The following example shows a basic TAU template:</p>
-
<pre class="prettyprint">
-<!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html>
<head>
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
- <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
- <link rel="stylesheet" href="myapp.css" />
- <title>Hello TAU</title>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ <link rel="stylesheet" href="myapp.css"/>
+ <title>Hello TAU</title>
</head>
<body>
- <!--HTML BODY CONTENT-->
- <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
- <script src="myapp.js"></script>
+ <!--HTML BODY CONTENT-->
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <script src="myapp.js"></script>
</body>
</html>
</pre>
<p>The Tizen Advanced UI (TAU)-based template provides 2 scaling methods: device-width and fixed-width.</p>
<ul>
<li>Device-width scaling
- <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone® and Android®. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
- <pre class="prettyprint"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"></pre>
+ <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone® and Android®. In this mode, the viewport width is set to <code>device-width</code>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
+<pre class="prettyprint">
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+</pre>
</li>
<li>Fixed-width scaling
<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 <span style="font-family: Courier New,Courier,monospace">device-width</span>:</p>
- <pre class="prettyprint lang-html"><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 <span style="font-family: Courier New,Courier,monospace"><meta name="viewport"></span> element:</p>
- <pre class="prettyprint"><meta name="viewport" content="width=360, initial-scale=1, user-scalable=no"></pre>
+ <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">
+</pre>
+ <p>To enable fixed-width scaling, the header must contain the <code><meta name="viewport"></code> element:</p>
+<pre class="prettyprint">
+<meta name="viewport" content="width=360, initial-scale=1, user-scalable=no">
+</pre>
</li>
</ul>
<h2 id="import_tau">Importing TAU</h2>
<p>You can import TAU with HTML. For better performance, all CSS files must be included in the header and all script elements must be put before the body element's close tag:</p>
<pre class="prettyprint">
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
</head>
<body>
- <!-- HTML BODY CONTENT -->
- <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <!--HTML BODY CONTENT-->
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
</body>
</html>
</pre>
-<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace"><script></span> and <span style="font-family: Courier New,Courier,monospace"><link></span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
+<p>In HTML, use the <code><script></code> and <code><link></code> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
<ul>
- <li>TAU library: <
span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
- <li>TAU theme: <
span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
+ <li>TAU library: <
code>tau(.min).js</code> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
+ <li>TAU theme: <
code>tau(.min).css</code> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
</ul>
<h2 id="custom_js">Running Custom JavaScript and CSS</h2>
-<p>You can add an additional <span style="font-family: Courier New,Courier,monospace"><script src="<CUSTOM_LIBRARY>"></span> or <span style="font-family: Courier New,Courier,monospace"><link rel="stylesheet" src="<CUSTOM_CSS>"></span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace"><script></span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace"><script></span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-<pre class="prettyprint"><script src="{YOUR_SCRIPT_PATH}"></script></pre>
+<p>You can add an additional <code><script src="<CUSTOM_LIBRARY>"></code> or <code><link rel="stylesheet" src="<CUSTOM_CSS>"></code> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <code><script></code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>To load your JavaScript file, include the file in the <code><script></code> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+<pre class="prettyprint">
+<script src="{YOUR_SCRIPT_PATH}"></script>
+</pre>
<h2 id="fill_content">Creating a Page in the Body</h2>
<p>The body section of the HTML file contains 1 or more pages.</p>
-<p>To create a page in <span style="font-family: Courier New,Courier,monospace"><body></span>, you can use the <span style="font-family: Courier New,Courier,monospace">"ui-page"</span> class with the <span style="font-family: Courier New,Courier,monospace"><div></span> element:</p>
-
<pre class="prettyprint">
+<p>To create a page in <code><body></code>, you can use the <code>"ui-page"</code> class with the <code><div></code> element:</p>
+<pre class="prettyprint">
<body>
- <div class="ui-page" id="main">
+ <div class="ui-page" id="main">
</div>
</body>
</pre>
<p>Each page has a header, mandatory content, and a footer: </p>
<pre class="prettyprint">
<body>
- <div class="ui-page" id="main">
- <div class="ui-header">
- <h1>Hello World</h1>
+ <div class="ui-page" id="main">
+ <div class="ui-header">
+ <h1>Hello World</h1>
</div>
- <div class="ui-content">
- <p>Hello TAU!</p>
+ <div class="ui-content">
+ <p>Hello TAU!</p>
</div>
- <div class="ui-footer">
- <button>OK</button>
+ <div class="ui-footer">
+ <button>OK</button>
</div>
</div>
</body>
<p>The following example shows a basic sample code for Hello World:</p>
<pre class="prettyprint">
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
- <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
- <link rel="stylesheet" href="myapp.css" />
- <title>Hello TAU</title>
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/>
+ <link rel="stylesheet" href="myapp.css"/>
+ <title>Hello TAU</title>
</head>
<body>
- <div class="ui-page" id="main">
- <div class="ui-header">
- <h1>Hello World</h1>
+ <div class="ui-page" id="main">
+ <div class="ui-header">
+ <h1>Hello World</h1>
</div>
- <div class="ui-content">
- <p>Hello TAU!</p>
+ <div class="ui-content">
+ <p>Hello TAU!</p>
</div>
- <div class="ui-footer">
- <button>OK</button>
+ <div class="ui-footer">
+ <button>OK</button>
</div>
</div>
- <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
- <script src="myapp.js"></script>
+ <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
+ <script src="myapp.js"></script>
</body>
</html>
</pre>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<pre class="prettyprint">
<script>
- var helperInstance = tau.helper.<i>NameSpace</i>
+ var helperInstance = tau.helper.<NameSpace>
</script>
</pre>
<p>The SnapListMarqueeStyle helper provides a helper script to support creating some usable components for the list style. It supports making the list view more effective using the <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview</a> and <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee</a> components.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This helper script is supported since Tizen 2.3.</td>
- </tr>
- </tbody>
- </table>
-
+<div class="note">
+ <strong>Note</strong>
+ This helper script is supported since Tizen 2.3.
+</div>
+
<p>The following example shows how to create your own listview style with SnapListMarqueeStyle. In the example, the list item text scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.</p>
<p>To create a SnapListMarqueeStyle:</p>
<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>
<li>Edit the CSS code to set your list animation style:
-<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee
+<pre class="prettyprint">
+.ui-listview.expand-list li.li-has-2line .ui-marquee
{
-webkit-transform: translate3d(0, 16px, 0);
-webkit-transition: all ease .5s;
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>
<p>The following table shows the options you have in creating your SnapListMarqueeStyle component.</p>
- <table>
- <caption>
- Table: SnapListMarqueeStyle component options
- </caption>
+<p align="center" class="Table"><strong>Table: SnapListMarqueeStyle component options</strong></p>
+<table>
<tbody>
<tr>
<th>Option</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">marqueeDelay</span></td>
+ <td><code>marqueeDelay</code></td>
<td>number</td>
<td>0</td>
<td>Sets the delay time (in milliseconds) for the marquee component.</td>
<p>You can use the following methods with the SnapListMarqueeStyle:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">create()</span>
+<li><code>create()</code>
<p>Creates the related components for SnapListMarqueeStyle.</p>
<p>This method is supported since Tizen 2.3.</p>
<p>The following code example shows the use of the method:</p>
</script>
</pre>
</li>
-<li><span style="font-family: Courier New,Courier,monospace">destroy()</span>
+<li><code>destroy()</code>
<p>Destroys the related components for SnapListMarqueeStyle.</p>
<p>This method is supported since Tizen 2.3. It has no return value.</p>
<p>The following code example shows the use of the method:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<ul class="ui-listview ui-snap-listview" id="snapList">
<li>some element or text</li>
</ul>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>The following figure shows the layout of the index scroll bar component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Index scroll bar component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Index scroll bar component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Index scroll bar component in a rectangular device" src="../../../images/rectangular_index.png" /> <img alt="Index scroll bar component in a circular device" src="../../../images/round_index.png" /></p>
<ol>
<li>Edit the HTML code to add the component to your application screen:
-<pre class="prettyprint"><div class="ui-page ui-page-active" id="pageIndexScrollbar" >
- <header class="ui-header ui-header-small">
- <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="pageIndexScrollbar">
+ <header class="ui-header ui-header-small">
+ <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
</header>
- <div id="indexscrollbar"></div>
- <section class="ui-content">
- <ul class="ui-listview ui-snap-listview" id="list1">
- <li class="ui-listview-divider">A</li>
+ <div id="indexscrollbar"></div>
+ <section class="ui-content">
+ <ul class="ui-listview ui-snap-listview" id="list1">
+ <li class="ui-listview-divider">A</li>
<li>Anton</li>
- <li class="ui-listview-divider">B</li>
+ <li class="ui-listview-divider">B</li>
<li>Barry</li>
<li>Bob</li>
- <li class="ui-listview-divider">C</li>
+ <li class="ui-listview-divider">C</li>
<li>Carry</li>
- <li class="ui-listview-divider">D</li>
+ <li class="ui-listview-divider">D</li>
<li>Daisy</li>
- <li class="ui-listview-divider">E</li>
+ <li class="ui-listview-divider">E</li>
<li>Eric</li>
- <li class="ui-listview-divider">F</li>
+ <li class="ui-listview-divider">F</li>
<li>Fay</li>
- <li class="ui-listview-divider">G</li>
+ <li class="ui-listview-divider">G</li>
<li>Garry</li>
</ul>
</section>
<pre class="prettyprint">
var indexScrollbarElement = document.getElementById("indexscrollbar");
-if (!tau.support.shape.circle)
+if (!tau.support.shape.circle)
{
/* Create IndexScrollbar */
indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
-}
-else
+}
+else
{
/* Create CircularIndexScrollbar */
indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
<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 <span style="font-family: Courier New,Courier,monospace">ui-listview-divider</span> class, selected by the index scroll bar.</p>
+<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()
+(function()
{
var page = document.getElementById("pageIndexScrollbar"),
listviewElement = document.getElementById("list1"),
scroller,
indexScrollbar;
- page.addEventListener("pageshow", function(ev)
- {
- var indexScrollbarElement = document.getElementById("indexscrollbar"),
- listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), /* List dividers */
- dividers = {}, /* Collection of list dividers */
- indices = [], /* Index list */
- divider,
- i, idx;
-
- /* For all list dividers */
- for (i = 0; i < listDividers.length; i++)
+ page.addEventListener("pageshow", function(ev)
{
- /* Add the list divider elements to the collection */
- divider = listDividers[i];
- idx = divider.innerText;
- dividers[idx] = divider;
+ 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;
+ dividers[idx] = divider;
- /* Add the index to the index list */
- indices.push(idx);
- }
+ /* Add the index to the index list */
+ indices.push(idx);
+ }
- scroller = tau.util.selectors.getScrollableParent(listviewElement);
+ 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});
+ 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);
+ });
+ }
- /* Add SnapListview item "selected" event handler */
- listviewElement.addEventListener("selected", function(ev)
+ /* Add IndexScrollbar index "select" event handler */
+ indexScrollbarElement.addEventListener("select", function(ev)
{
- var indexValue = ev.target.textContent[0];
- indexScrollbar.value(indexValue);
+ 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;
+ }
});
- }
+ });
- /* Add IndexScrollbar index "select" event handler */
- indexScrollbarElement.addEventListener("select", function(ev)
+ page.addEventListener("pagehide", 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;
- }
+ indexScrollbar.destroy();
});
- });
-
- page.addEventListener("pagehide", function(ev)
- {
- indexScrollbar.destroy();
- });
-} ());
+}());
</pre>
</li>
</ol>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>This feature is supported in wearable applications only.</p>
<p>The following figure shows the layout of the list component in a rectangular and circular UI.</p>
-<p class="figure">Figure: List component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: List component in rectangular and circular devices</strong></p>
<p align="center"><img alt="List component in a rectangular device" src="../../../images/rectangular_list.png" /> <img alt="List component in a circular device" src="../../../images/round_list.png" /></p>
<p>To implement the list component:</p>
<ol>
<li>Edit the HTML code to add the list component to your application screen:
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="snapListPage" >
+<div class="ui-page ui-page-active" id="snapListPage">
<header class="ui-header">
<h2 class="ui-title">Snap List</h2>
</header>
<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;
color: rgb(51, 51, 51);
}
-.ui-listview li.li-has-3line
+.ui-listview li.li-has-3line
{
padding-top: 0;
padding-bottom: 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;
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;
var page = document.querySelector("#snapListPage"),
listHelper;
-page.addEventListener("pagebeforeshow", function()
-{
- var list = document.getElementById("snapList");
-
- if (tau.support.shape.circle)
+page.addEventListener("pagebeforeshow", function()
{
- listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
- }
-});
+ var list = document.getElementById("snapList");
-page.addEventListener("pagehide", function()
-{
- if (tau.support.shape.circle)
+ if (tau.support.shape.circle)
+ {
+ listHelper =
+ tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+ }
+ });
+
+page.addEventListener("pagehide", function()
{
- if (listHelper)
+ if (tau.support.shape.circle)
{
- listHelper.destroy();
+ if (listHelper)
+ {
+ listHelper.destroy();
+ }
}
- }
-});
+ });
</pre>
</li>
</ol>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Managing Pages</h1>
-<p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
+<p>The basic building block of an application UI in the TAU library is the <code>Page</code> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li>Footer area
<p>Contains a status line or buttons. The footer is optional.</p></li>
</ul>
-<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
+<p>All the page areas are specified by a corresponding <code>class</code> attribute.</p>
-<p class="figure">Figure: Page content</p>
+<p align="center"><strong>Figure: Page content</strong></p>
<p align="center"><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
-<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
-<pre class="prettyprint"><span>I have no page</span></pre>
+<p>If there is no <code>Page</code> element in the markup, TAU creates one. For example, if no <code>Page</code> element exists:</p>
+<pre class="prettyprint">
+<span>I have no page</span>
+</pre>
<p>TAU creates a page:</p>
-<pre class="prettyprint"><div class="ui-page"><span>I have no page</span></div>
+<pre class="prettyprint">
+<div class="ui-page"><span>I have no page</span></div>
</pre>
<p>To create a page:</p>
<ol>
<li><p>Create a single page with the following code:</p>
-<pre class="prettyprint"><div class="ui-page">
+<pre class="prettyprint">
+<div class="ui-page">
Simple page
</div>
</pre>
-<p>To create a page for your application, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript component implementation.</p>
+<p>To create a page for your application, use the <code>class</code> attribute with the <code>ui-page</code> value. TAU uses that information to properly acquire the <code>div</code> element and bind the DOM element to its JavaScript component implementation.</p>
</li>
-<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-header"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
+<li><p>Create a header area by using the <code>class="ui-header"</code> attribute:</p>
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-header">This is a header</div>
</div>
</pre></li>
-<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-footer"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
+<li><p>Create a footer area by using the <code>class="ui-footer"</code> attribute:</p>
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-footer">This is a footer</div>
</div>
</pre></li>
-<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-content"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
+<li><p>Create the main content area by using the <code>class="ui-content"</code> attribute:</p>
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-header">MyApplication header</div>
<div class="ui-content">
Hello world!
</li>
<li>
<p>You can also create a popup for your page:</p>
-<pre class="prettyprint"><div class="ui-page">
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-header">Popup Open Page</div>
<div class="ui-content">
<a href="#popup" class="ui-btn" data-rel="popup">Popup Open</a>
</div>
</div>
</pre>
-<p>The popup works because TAU opens (makes visible) the page whose <
span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information, see <a href="#pageRouting">Page Routing</a>.</p>
+<p>The popup works because TAU opens (makes visible) the page whose <
code>id</code> attribute corresponds to the <code>#hashtag</code> page. This is basic page routing; for more information, see <a href="#pageRouting">Page Routing</a>.</p>
</li>
</ol>
<h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
-<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in the application's <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
-<p>In a multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
+<p>You can implement a template containing multiple <code>page</code> containers in the application's <code>index.html</code> file.</p>
+<p>In a multi-page layout, the main page is defined with the <code>ui-page-active</code> class. If no page has the <code>ui-page-active</code> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
<pre class="prettyprint">
<body>
<div class="ui-page ui-page-active" id="first">
<ul>
<li>To route without JavaScript:
-<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
-<p>TAU uses every <span style="font-family: Courier New,Courier,monospace"><a></span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has a <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
-<pre class="prettyprint"><!--pageOne.html-->
+<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <code>#hashtag</code> changes and tries to display the page that has the <code>id</code> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
+<p>TAU uses every <code><a></code> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <code>href</code> attribute work with the framework router. The active page has a <code>ui-page-active</code> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
+<pre class="prettyprint">
+<!--pageOne.html-->
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
<a href="pageTwo.html">Go to page two</a>
</div>
</div>
</pre>
-<p>With multiple pages in one HTML code, you can use only the ID of the page in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute:</p>
+<p>With multiple pages in one HTML code, you can use only the ID of the page in the <code>href</code> attribute:</p>
<pre class="prettyprint">
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
</pre>
</li>
<li>To route using the API:
-<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
-<pre class="prettyprint"><!--pageOne.html-->
+<p>You can change pages through the TAU API by using the <code>tau.changePage()</code> method:</p>
+<pre class="prettyprint">
+<!--pageOne.html-->
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
You are viewing the first page of the example.
<script>
var el1 = document.getElementById("first-button");
el1.addEventListener("click", function()
- {
- tau.changePage("pageTwo.html");
- });
+ {
+ tau.changePage("pageTwo.html");
+ });
</script>
</div>
<script>
var el2 = document.getElementById("second-button");
el2.addEventListener("click", function()
- {
- tau.changePage("pageOne.html");
- });
+ {
+ tau.changePage("pageOne.html");
+ });
</script>
</div>
</pre>
</li>
<li>To load pages from external resources:
-<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element's <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
-<p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
-<pre class="prettyprint"><div class="ui-page">
+<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <code>base</code> element's <code>href</code> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
+<p>To load pages from external resources, define the proper local address in the <code>href</code> attribute of the link:</p>
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-content">
<a href="external_text.html">Change to external</a>
</div>
</div>
</pre>
-<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel="external"</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax="false"</span>, or <span style="font-family: Courier New,Courier,monospace">target="_self"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
+<p>To create an external link that is not supposed to be handled by the TAU router, use the <code>rel="external"</code>, <code>data-ajax="false"</code>, or <code>target="_self"</code> attribute:</p>
+<pre class="prettyprint">
+<div class="ui-page">
<div class="ui-content">
<a href="external_text.html" target="_self">Change to external</a>
</div>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>This feature is supported in wearable applications only.</p>
<p>The following figure shows the more options component in a rectangular and circular UI.</p>
-<p class="figure">Figure: More options component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: More options component in rectangular and circular devices</strong></p>
<p align="center"><img alt="More options component in a rectangular device" src="../../../images/rectangular_moreoption.png" /> <img alt="More options component in a circular device" src="../../../images/round_moreoption.png" /></p>
<p>To implement the more options component:</p>
<ol>
<li>Edit the HTML code to add the more options component to your application screen:
-<pre class="prettyprint"><div id="moreoptionsPage" class="ui-page">
- <link rel="stylesheet" href="./moreoptions.css">
- <header class="ui-header ui-has-more">
- <h2 class="ui-title">More Options</h2>
- <button type="button" class="ui-more ui-icon-overflow">More Options</button>
+<pre class="prettyprint">
+<div id="moreoptionsPage" class="ui-page">
+ <link rel="stylesheet" href="./moreoptions.css">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">More Options</h2>
+ <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.
+ <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.
</div>
- <!-- Rectangular profile -->
- <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
- <div class="ui-popup-header">Options</div>
- <div class="ui-popup-content">
- <ul class="ui-listview">
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
+ <!--Rectangular profile-->
+ <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
+ <div class="ui-popup-header">Options</div>
+ <div class="ui-popup-content">
+ <ul class="ui-listview">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
</ul>
</div>
</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="selector" class="ui-selector">
- <div class="ui-item show-icon" data-title="Show"></div>
- <div class="ui-item human-icon" data-title="Human"></div>
- <div class="ui-item delete-icon" data-title="Delete"></div>
- <div class="ui-item show-icon" data-title="Show"></div>
- <div class="ui-item human-icon" data-title="Human"></div>
- <div class="ui-item delete-icon" data-title="Delete"></div>
- <div class="ui-item x-icon" data-title="X Icon"></div>
- <div class="ui-item fail-icon" data-title="Fail"></div>
- <div class="ui-item show-icon" data-title="Show"></div>
- <div class="ui-item human-icon" data-title="Human"></div>
- <div class="ui-item delete-icon" data-title="Delete"></div>
- <div class="ui-item show-icon" data-title="Show"></div>
- <div class="ui-item human-icon" data-title="Human"></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="selector" class="ui-selector">
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item x-icon" data-title="X Icon"></div>
+ <div class="ui-item fail-icon" data-title="Fail"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
</div>
</div>
</div>
<pre class="prettyprint">
#moreoptionsDrawer
{
- display: none;
+ display: none;
}
-@media all and (-tizen-geometric-shape: circle)
+@media all and (-tizen-geometric-shape: circle)
{
#moreoptionsDrawer
{
- display: block;
- background-color: rgba(255, 255, 255, 0.1);
- border-radius: 100%;
+ display: block;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 100%;
}
#moreoptionsPopup
{
- display: none;
+ display: none;
}
}
</pre>
}
page.addEventListener("pagebeforeshow", function()
- {
- if (tau.support.shape.circle)
{
- helper = tau.helper.DrawerMoreStyle.create(drawer,
+ if (tau.support.shape.circle)
{
- handler: ".drawer-handler"
- });
- }
- else
- {
- /* Shape is square */
- clickHandlerBound = clickHandler.bind(null);
- handler.addEventListener("click", clickHandlerBound);
- }
- });
+ helper = tau.helper.DrawerMoreStyle.create(drawer,
+ {
+ handler: ".drawer-handler"
+ });
+ }
+ 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);
- helper.destroy();
- }
- });
+ if (tau.support.shape.circle)
+ {
+ handler.removeEventListener("click", clickHandlerBound);
+ helper.destroy();
+ }
+ });
})();
</pre>
</li>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
<p>The Tizen Studio creates the application with a default file structure.</p>
</li>
-<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
-<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
+<li>Edit the section header for the <code>index.html</code> file.
+<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"/></pre></li>
+<pre class="prettyprint">
+<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"/></pre>
+<pre class="prettyprint">
+<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"><link rel="stylesheet" type="text/css" href="css/style.css"/>
+<pre class="prettyprint">
+<link rel="stylesheet" type="text/css" href="css/style.css"/>
</pre>
<p>The following example shows how the section header looks after editing:</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 charset="utf-8"/>
+ <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>
<!--Use 'mobile' or 'wearable' to choose the device TAU profile-->
<link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
-</head></pre>
+</head>
+</pre>
</li>
<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
<ol type="a">
-<li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
+<li>The main page is the first page, defined with the <code>div</code> block with the <code>ui-page</code> class and <code>main</code> id.
<ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
<pre class="prettyprint">
<div id="main" class="ui-page">
</header>
</div>
</pre></li>
- <li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
- the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
- <p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll="y"</span> and <span style="font-family: Courier New,Courier,monospace">data-handler="true"</span> attributes.</p>
- <p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
+ <li>Add content for the main page by adding a <code>div</code> element with
+ the <code>_ui-content</code> class. Add to this a <code>ul</code> element, which creates the list of notes.
+ <p>Set the <code>data-scroll="y"</code> and <code>data-handler="true"</code> attributes.</p>
+ <p>The item in the list is represented as a <code>li</code> element. When a note on the main page is clicked, the application triggers the <code>changepage</code> event to the <code>editor</code> page and shows the item.</p>
<pre class="prettyprint">
<div class="ui-content" data-scroll="y" data-handler="true">
<ul class="ui-listview" id="notesList"></ul>
</div>
</pre></li>
- <li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
- which has the <span style="font-family: Courier New,Courier,monospace">id="newBtn"</span> attribute.
+ <li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <code>a</code> element,
+ which has the <code>id="newBtn"</code> attribute.
<pre class="prettyprint">
<div class="ui-footer">
<a class="ui-btn" href="javascript:void()" id="newBtn">New note</a>
</div>
</div>
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ In mobile applications, pages are constructed using the <code>data-role</code> attribute, while the wearable applications use the <code>class</code> attribute. In addition, the value of the <code>data-role</code> attribute in mobile applications differs from the <code>class</code> attribute value in the wearable applications.
+</div>
</li>
<li>On the editing page, the header and footer are similar to the main page.
-<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">id="editor"</span> and <span style="font-family: Courier New,Courier,monospace">class="ui-page"</span> attributes.</p>
-<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
+<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <code>div</code> block with the <code>id="editor"</code> and <code>class="ui-page"</code> attributes.</p>
+<p>The editing page is needed for adding or editing a selected note. It has a <code>textarea</code> element to allow the user to edit the selected note.</p>
<pre class="prettyprint">
<!--This code applies to wearable applications-->
<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>
-<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
+<p>The <code>index.html</code> file is now ready.</p>
</li>
<li>Add styles for the content:
}
</pre>
</li>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application.
+<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()
EMPTY_CONTENT = '(empty)',
STORAGE_KEY = 'notepad';
- /**
- * Get data from local storage
- * @return {Array}
+ /*
+ 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
+ /*
+ Add data to local storage
+ @param {Array} data
*/
function addStorage(data)
{
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
- /**
- * Return current page ID
- * @returns
+ /*
+ Return current page ID
+ @returns
*/
function getCurrentPageId()
{
$('#' + getCurrentPageId()).trigger('create');
}
- /**
- * Get notes from storage
- * @return {Array}
+ /*
+ Get notes from storage
+ @return {Array}
*/
function getNotes()
{
event.stopPropagation();
}
- /**
- * Edit note using array index
- * @param index
+ /*
+ Edit note using array index
+ @param index
*/
function editNote(index)
{
editorPage.addEventListener('pageshow', onEditorPageShow);
window.addEventListener('tizenhwkey', function(e)
- {
- if (e.keyName === "back"
- && window.tizen
- && window.tizen.application)
{
- switch (getCurrentPageId())
+ if (e.keyName === "back"
+ && window.tizen
+ && window.tizen.application)
{
- case 'main':
- window.tizen.application.getCurrentApplication().exit();
- break;
- default:
- window.history.back();
- break;
+ switch (getCurrentPageId())
+ {
+ case 'main':
+ window.tizen.application.getCurrentApplication().exit();
+ break;
+ default:
+ window.history.back();
+ break;
+ }
+
+ return false;
}
-
- return false;
- }
- }, false);
+ }, false);
}
/* Initialize */
init();
}, false);
</pre>
-<p>Now the application is ready and you can deploy it to a device or Emulator.</p>
+<p>Now the application is ready and you can deploy it to a device or emulator.</p>
</li>
</ol>
<p>The following figures show the layout of the popup component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Bottom popup component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Bottom popup component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Bottom popup in a rectangular device" src="../../../images/rectangular_popup_bottom.png"/> <img alt="Bottom popup in a circular device" src="../../../images/round_popup_bottom.png"/></p>
-<p class="figure">Figure: Side popup component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Side popup component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Side popup component in a rectangular device" src="../../../images/rectangular_popup_side.png"/> <img alt="Side popup component in a circular device" src="../../../images/round_popup_side.png"/></p>
<ul>
<li>To implement a bottom popup button component:
-<p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class to the popup footer. The popup can have only 1 bottom button.</p>
+<p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <code>ui-bottom-button</code> class to the popup footer. The popup can have only 1 bottom button.</p>
<pre class="prettyprint">
<div id="bottomBtnPopup" class="ui-popup">
<div class="ui-popup-content">
</li>
<li>To implement a side popup button component:
-<p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-side-button</span> class to the popup footer. The popup can have only 2 side buttons.</p>
+<p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <code>ui-side-button</code> class to the popup footer. The popup can have only 2 side buttons.</p>
<pre class="prettyprint">
<style>
.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>This feature is supported in wearable applications only.</p>
<p>The following figure shows the layout of the processing component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Processing component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Processing component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Processing component in a rectangular device" src="../../../images/rectangular_processing.png" /> <img alt="Processing component in a circular device" src="../../../images/round_processing.png" /></p>
-
+
<p>To implement the processing component:</p>
<ol>
<li>Edit the HTML code to add the processing component to your application screen:
<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)
+@media all and (-tizen-geometric-shape: circle)
{
- .ui-processing
+ .ui-processing
{
display: none;
}
- .ui-processing.ui-processing-full-size
+ .ui-processing.ui-processing-full-size
{
display: block;
}
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<h2 id="notice">Backward Compatibility in TAU</h2>
-<p>To support backward compatibility, TAU provides the <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3.js</span> and <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3.css</span> files.</p>
+<p>To support backward compatibility, TAU provides the <code>tau.support-2.3.js</code> and <code>tau.support-2.3.css</code> files.</p>
<p>If you want to use deprecated components, you can import those files. See the following example:</p>
<pre class="prettyprint">
<html>
<head>
- <script type="text/javascript" src="../lib/tau/mobile/js/tau.js"></script>
- <script type="text/javascript" src="../lib/tau/mobile/js/tau.support-2.3.js"></script>
- <link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.css">
- <link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.support-2.3.css">
- <link rel="stylesheet" href="css/custom.css">
+ <script type="text/javascript" src="../lib/tau/mobile/js/tau.js"></script>
+ <script type="text/javascript" src="../lib/tau/mobile/js/tau.support-2.3.js"></script>
+ <link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.css">
+ <link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.support-2.3.css">
+ <link rel="stylesheet" href="css/custom.css">
</head>
</html>
</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note" colspan="1" rowspan="1">Note</th>
- </tr>
- <tr>
- <td class="note" colspan="1" rowspan="1">The <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3</span> file is only for backward compatibility. The above components are <strong>DEPRECATED since Tizen 2.4</strong> and are deleted in Tizen 3.0.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The <code>tau.support-2.3</code> file is only for backward compatibility. The above components are <strong>DEPRECATED since Tizen 2.4</strong> and are deleted in Tizen 3.0.
+</div>
<h2 id="selector">Component Definitions</h2>
-<p>Since Tizen 2.4, it is strongly recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector to define the components in HTML files. The <span style="font-family: Courier New,Courier,monospace;">"data-role"</span> selector has been deprecated and is no longer supported.</p>
+<p>Since Tizen 2.4, it is strongly recommended to use the <code>class</code> selector to define the components in HTML files. The <code>"data-role"</code> selector has been deprecated and is no longer supported.</p>
-<p>The class selectors in TAU are composed with the <
span style="font-family: Courier New,Courier,monospace;">"ui-"</span> prefix and followed by the <span style="font-family: Courier New,Courier,monospace;"><COMPONENT_NAME></span>. For more information, see <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference</a>.</p>
+<p>The class selectors in TAU are composed with the <
code>"ui-"</code> prefix and followed by the <code><COMPONENT_NAME></code>. For more information, see <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference</a>.</p>
<p>The following example shows how to define the UI components before and after:</p>
<ul>
<li>Before:
<pre class="prettyprint">
-<!-- Create Expandable component -->
-<div data-role="expandable">
- <h1>Expandable head</h1>
+<!--Create Expandable component-->
+<div data-role="expandable">
+ <h1>Expandable head</h1>
<div>Content</div>
</div>
-<!-- Create ToggleSwitch component -->
-<select data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
+<!--Create ToggleSwitch component-->
+<select data-role="toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
-<!-- Create SectionChanger component -->
-<div data-role="section-changer">
+<!--Create SectionChanger component-->
+<div data-role="section-changer">
<div>
<section>
- <h3>LEFT1 PAGE</h3>
+ <h3>LEFT1 PAGE</h3>
</section>
</div>
</div>
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note" colspan="1" rowspan="1">Note</th>
- </tr>
- <tr>
- <td class="note" colspan="1" rowspan="1">The old selector with <span style="font-family: Courier New,Courier,monospace;">data-role</span> can still be used in 2.4, but it is <strong>DEPRECATED</strong> and no longer supported in the next version.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The old selector with <code>data-role</code> can still be used in 2.4, but it is <strong>DEPRECATED</strong> and no longer supported in the next version.
+</div>
</li>
<li>After:
<pre class="prettyprint">
-<!-- Create Expandable component -->
-<div class="ui-expandable">
- <h1>Expandable head</h1>
+<!--Create Expandable component-->
+<div class="ui-expandable">
+ <h1>Expandable head</h1>
<div>Content</div>
</div>
-<!-- Create ToggleSwitch component -->
-<select class="ui-toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
+<!--Create ToggleSwitch component-->
+<select class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
-<!-- Create SectionChanger component -->
-<div class="ui-section-changer">
+<!--Create SectionChanger component-->
+<div class="ui-section-changer">
<div>
<section>
- <h3>LEFT1 PAGE</h3>
+ <h3>LEFT1 PAGE</h3>
</section>
</div>
</div>
<p>Some new mobile components are added in TAU since 2.4. Some are renamed from old components (such as Checkbox and Radio) and others are newly added with a new feature and theme (such as Colored ListView). The following table shows the new TAU components in 2.4.</p>
<p>For more information, see the <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Component API Reference</a>.</p>
- <table border="1">
- <caption>Table: New TAU mobile components in 2.4</caption>
- <tbody>
+<p align="center" class="Table"><strong>Table: New TAU mobile components in 2.4</strong></p>
+<table border="1">
+ <tbody>
<tr>
<th>UI component</th>
<th>Description</th>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Checkbox.htm">Checkbox</a></td>
<td>The checkbox component changes the default browser checkboxes to a form more adapted to the mobile environment.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm">Colored List View</a></td>
<td>The colored list view component shows each list item with a gradient background color.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm">Dropdown Menu</a></td>
<td>The dropdown menu component is used to select one option. It is created as a drop-down list form.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Expandable.htm">Expandable</a></td>
<td>The expandable component allows you to expand or collapse content when tapped.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_FloatingActions.htm">Floating Actions</a></td>
<td>The floating actions component shows a floating action button that can be moved left and right.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_GridView.htm">Grid View</a></td>
<td>The grid view component provides a grid-type list and presents content that are easily identified as images.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm">Index Scrollbar</a></td>
<td>The index scrollbar component shows a shortcut list that is bound to its parent scrollbar and list view.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm">Page Indicator</a></td>
<td>The page indicator component presents as a dot-typed indicator.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PanelChanger.htm">Panel Changer</a></td>
<td>The panel changer and panel component provide a multi-page layout in a page component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Radio.htm">Radio</a></td>
<td>The radio component changes the default browser radio button to a form more adapted to the mobile environment.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_SearchInput.htm">Search Input</a></td>
<td>The search input component is used to search for page content.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_SectionChanger.htm">Section Changer</a></td>
<td>The section changer component provides an application architecture, which has multiple sections on one page.</td>
</tr>
-
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm">Tabs</a></td>
<td>The tabs component shows an unordered list of buttons on the screen wrapped together in a single group.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm">Text Enveloper</a></td>
<td>The text enveloper component changes a text item to a button.</td>
</tr>
-
</tbody>
</table>
<p>Some mobile components are deprecated and no longer supported since 2.4. Instead of using deprecated components, see the following table and replace the components by new components or an HTML element.</p>
<p>For more information on deprecated components, see the <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile Component API Reference</a>.</p>
- <table border="1">
- <caption>Table: Deprecated TAU mobile components</caption>
+<p align="center" class="Table"><strong>Table: Deprecated TAU mobile components</strong></p>
+<table border="1">
<tbody>
<tr>
<th>UI component</th>
<th>Replace with</th>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Autodividers.htm">Autodividers</a></td>
<td>-</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Checkboxradio.htm">CheckboxRadio</a></td>
<td>Checkbox component for the checkbox, radio component for the radio button.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Collapsible.htm">Collapsible</a></td>
<td>Expandable component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Controlgroup.htm">ControlGroup</a></td>
<td>Implement your own customized application style.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_FastScroll.htm">Fast Scroll</a></td>
<td>Index scrollbar component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Gallery.htm">Gallery</a></td>
<td>Implement your own gallery with the section changer component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ListDivider.htm">List Divider</a></td>
- <td>Use the <span style="font-family: Courier New,Courier,monospace;">ui-group-index</span> class for a group index.</td>
+ <td>Use the <code>ui-group-index</code> class for a group index.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Notification.htm">Notification</a></td>
- <td>Popup component with the <span style="font-family: Courier New,Courier,monospace;">ui-popup-toast</span> class.</td>
+ <td>Popup component with the <code>ui-popup-toast</code> class.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ProgressBar.htm">Progress Bar</a></td>
- <td>Progress component with the <span style="font-family: Courier New,Courier,monospace;">data-type="bar"</span> option.</td>
+ <td>Progress component with the <code>data-type="bar"</code> option.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ScrollHandler.htm">Scroll Handler</a></td>
<td>-</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SearchBar.htm">Search Bar</a></td>
<td>Search input component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm">Select Menu</a></td>
<td>Dropdown menu component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Swipe.htm">Swipe</a></td>
<td>-</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_TabBar.htm">Tab Bar</a></td>
<td>Tabs component.</td>
</tr>
-
<tr>
<td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Tokentextarea.htm">Token Text Area</a></td>
<td>Text enveloper component.</td>
</tr>
-
</tbody>
</table>
<li><strong>CheckboxRadio</strong>
<p>Before:</p>
<pre class="prettyprint">
-<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
-<input type="radio" name="radio-1" id="radio-1"/>
+<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
+<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();
<p>After:</p>
<pre class="prettyprint">
-<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
-<input type="radio" name="radio-1" id="radio-1"/>
+<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
+<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();
<li><strong>Collapsible</strong>
<p>Before:</p>
<pre class="prettyprint">
-<ul data-role="listview">
- <li id="collapsible" data-role="collapsible" data-inset="false">
- <h2>Collapsible head</h2>
- <!--Sub list in collapsible li-->
- <ul data-role="listview">
- <li>sub list item1</li>
- <li>sub list item2</li>
+<ul data-role="listview">
+ <li id="collapsible" data-role="collapsible" data-inset="false">
+ <h2>Collapsible head</h2>
+ <!--Sub list in collapsible li-->
+ <ul data-role="listview">
+ <li>sub list item1</li>
+ <li>sub list item2</li>
</ul>
</li>
- <!--List item in 1st depth-->
- <li>other list item</li>
- <li>other list item</li>
+ <!--List item in 1st depth-->
+ <li>other list item</li>
+ <li>other list item</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>
<p>After:</p>
<pre class="prettyprint">
-<div id="expandable" class="ui-expandable" data-collapsed="false">
- <h1>Expandable head</h1>
+<div id="expandable" class="ui-expandable" data-collapsed="false">
+ <h1>Expandable head</h1>
<div>Content</div>
</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>
<li><strong>Fast Scroll</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="page" id="main">
- <div data-role="content">
- <ul id="list" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
+<div data-role="page" id="main">
+ <div data-role="content">
+ <ul id="list" data-role="listview" data-fastscroll="true">
+ <li data-role="list-divider">A</li>
<li>Anton</li>
<li>Arabella</li>
- <li data-role="list-divider">B</li>
+ <li data-role="list-divider">B</li>
<li>Barry</li>
<li>Bily</li>
</ul>
</div>
<script>
- var fastscroll = tau.widget.FastScroll(document.getElementById("list"));
+ var fastscroll = tau.widget.FastScroll(document.getElementById("list"));
</script>
</pre>
<p>After:</p>
<pre class="prettyprint">
-<div class="ui-page" id="indexscrollbarPage">
- <div class="ui-indexscrollbar" id="indexscrollbar"></div>
- <div class="ui-content">
- <ul class="ui-listview" id="isbList">
- <li class="ui-group-index">A</li>
- <li class="ui-li-static">Anton</li>
- <li class="ui-li-static">Arabella</li>
- <li class="ui-group-index">B</li>
- <li class="ui-li-static">Barry</li>
- <li class="ui-li-static">Bibi</li>
+<div class="ui-page" id="indexscrollbarPage">
+ <div class="ui-indexscrollbar" id="indexscrollbar"></div>
+ <div class="ui-content">
+ <ul class="ui-listview" id="isbList">
+ <li class="ui-group-index">A</li>
+ <li class="ui-li-static">Anton</li>
+ <li class="ui-li-static">Arabella</li>
+ <li class="ui-group-index">B</li>
+ <li class="ui-li-static">Barry</li>
+ <li class="ui-li-static">Bibi</li>
</ul>
</div>
</div>
<script>
- var isb = tau.widget.IndexScrollbar(document.getElementById("indexscrollbar"));
+ var isb = tau.widget.IndexScrollbar(document.getElementById("indexscrollbar"));
</script>
</pre>
</li>
<li><strong>Gallery</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="content" data-scroll="none">
- <div data-role="gallery" id="gallery" data-vertical-align="middle"></div>
+<div data-role="content" data-scroll="none">
+ <div data-role="gallery" id="gallery" data-vertical-align="middle"></div>
</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");
<p>After:</p>
<pre class="prettyprint">
-<div id="gallerySection" class="ui-content ui-section-changer" data-orientation="horizontal">
+<div id="gallerySection" class="ui-content ui-section-changer" data-orientation="horizontal">
<div>
- <section class="gallery-section">
- <img src="images/01.jpg" />
+ <section class="gallery-section">
+ <img src="images/01.jpg"/>
</section>
- <section class="gallery-section">
- <img src="images/02.jpg" />
+ <section class="gallery-section">
+ <img src="images/02.jpg"/>
</section>
</div>
</div>
<script>
- var sectionChangerElement = document.getElementById("gallerySection"),
- sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
- newSectionElement = document.createElement("section");
+ var sectionChangerElement = document.getElementById("gallerySection"),
+ sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
+ newSectionElement = document.createElement("section");
- newSectionElement.innerHTML = "<img src='images/03.jpg'>";
+ newSectionElement.innerHTML = "<img src='images/03.jpg'>";
sectionsParentNode.appendChild(newSectionElement);
sectionChangerWidget.refresh();
sectionChangerWidget.setActiveSection(1);
<li><strong>List Divider</strong>
<p>Before:</p>
<pre class="prettyprint">
-<ul data-role="listview">
- <li data-role="list-divider">Item styles</li>
- <li><a href="#">Normal lists</a></li>
- <li><a href="#">Normal lists</a></li>
- <li><a href="#">Normal lists</a></li>
+<ul data-role="listview">
+ <li data-role="list-divider">Item styles</li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
</ul>
</pre>
<p>After:</p>
<pre class="prettyprint">
-<ul class="ui-listview">
- <li class="ui-group-index">Item styles</li>
- <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
- <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
- <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
+<ul class="ui-listview">
+ <li class="ui-group-index">Item styles</li>
+ <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
+ <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
+ <li class="ui-li-anchor"><a href="#">Normal lists</a></li>
</ul>
</pre>
</li>
<li><strong>Notification</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="page" id="demo">
- <div data-role="notification" id="notification" data-type="popup">
- <p>Notification Demo TEST</p>
+<div data-role="page" id="demo">
+ <div data-role="notification" id="notification" data-type="popup">
+ <p>Notification Demo TEST</p>
</div>
- <div data-role="header" data-position="fixed">
+ <div data-role="header" data-position="fixed">
<h1>Notification</h1>
</div>
- <div data-role="content">
- <div data-role="button" id="noti-demo">Show small popup</div>
+ <div data-role="content">
+ <div data-role="button" id="noti-demo">Show small popup</div>
</div>
</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()
+ buttonEl.addEventListener("vclick", function()
{
notification.open();
});
<p>After:</p>
<pre class="prettyprint">
-<div data-role="content">
- <a class="ui-btn" id="open" data-inline="true">Button</a>
- <div id="popup_toast" data-role="popup" class="ui-popup ui-popup-toast">
- <div class="ui-popup-content">
- Toast popup text Toast popup text
+<div data-role="content">
+ <a class="ui-btn" id="open" data-inline="true">Button</a>
+ <div id="popup_toast" data-role="popup" class="ui-popup ui-popup-toast">
+ <div class="ui-popup-content">
+ Toast popup text Toast popup text
</div>
</div>
</div>
<script>
- var btn = document.getElementById("open");
+ var btn = document.getElementById("open");
- btn.addEventListener("vclick", function()
+ btn.addEventListener("vclick", function()
{
tau.openPopup("#popup_toast");
});
<li><strong>Progress Bar</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="progressbar" id="progressbar"></div>
+<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);
</script>
<p>After:</p>
<pre class="prettyprint">
-<div class="ui-progress" data-type="bar" id="progressbar"></div>
+<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);
</script>
<li><strong>Search Bar</strong>
<p>Before:</p>
<pre class="prettyprint">
-<input type="search" name="search" id="search-bar"/>
+<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>
<p>After:</p>
<pre class="prettyprint">
-<input type="search" id="search-test" />
+<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();
</script>
<li><strong>Select Menu</strong>
<p>Before:</p>
<pre class="prettyprint">
-<select id="selectmenu" data-native-menu="false">
- <option value="1">Item1</option>
- <option value="2">Item2</option>
- <option value="3">Item3</option>
- <option value="4">Item4</option>
+<select id="selectmenu" data-native-menu="false">
+ <option value="1">Item1</option>
+ <option value="2">Item2</option>
+ <option value="3">Item3</option>
+ <option value="4">Item4</option>
</select>
<script>
- var element = document.getElementById("selectmenu"),
- widget = tau.widget.SelectMenu(element);
+ var element = document.getElementById("selectmenu"),
+ widget = tau.widget.SelectMenu(element);
widget.open();
</script>
<p>After:</p>
<pre class="prettyprint">
-<select id="dropdownmenu" data-native-menu="false">
- <option value="1">Item1</option>
- <option value="2">Item2</option>
- <option value="3">Item3</option>
- <option value="4">Item4</option>
+<select id="dropdownmenu" data-native-menu="false">
+ <option value="1">Item1</option>
+ <option value="2">Item2</option>
+ <option value="3">Item3</option>
+ <option value="4">Item4</option>
</select>
<script>
- var element = document.getElementById("dropdownmenu"),
- widget = tau.widget.DropdownMenu(element);
+ var element = document.getElementById("dropdownmenu"),
+ widget = tau.widget.DropdownMenu(element);
widget.open();
</script>
<li><strong>Tab Bar</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="header">
- <div data-role="tabbar" id="tab-bar">
+<div data-role="header">
+ <div data-role="tabbar" id="tab-bar">
<ul>
- <li><a href="#">Tabbar1</a></li>
- <li><a href="#">Tabbar2</a></li>
- <li><a href="#">Tabbar3</a></li>
+ <li><a href="#">Tabbar1</a></li>
+ <li><a href="#">Tabbar2</a></li>
+ <li><a href="#">Tabbar3</a></li>
</ul>
</div>
</div>
<script>
- var tabBar = tau.widget.TabBar(document.getElementById("tab-bar"));
+ var tabBar = tau.widget.TabBar(document.getElementById("tab-bar"));
</script>
</pre>
<p>After:</p>
<pre class="prettyprint">
-<!-- Tabs component is composed with Tabbar and SectionChanger -->
-<div id="tabs" class="ui-tabs">
- <div class="ui-tabbar">
+<!--Tabs component is composed with Tabbar and SectionChanger-->
+<div id="tabs" class="ui-tabs">
+ <div class="ui-tabbar">
<ul>
- <li><a href="#" class="ui-btn-active">Tab1</a></li>
- <li><a href="#">Tab2</a></li>
- <li><a href="#">Tab3</a></li>
+ <li><a href="#" class="ui-btn-active">Tab1</a></li>
+ <li><a href="#">Tab2</a></li>
+ <li><a href="#">Tab3</a></li>
</ul>
</div>
- <div class="ui-section-changer">
+ <div class="ui-section-changer">
<div>
- <section class="ui-section-active">
+ <section class="ui-section-active">
<p>Tab1</p>
</section>
<section>
- <p>Tab2</p>
+ <p>Tab2</p>
</section>
<section>
<p>Tab3</p>
</section>
</div>
</div>
- </div>
+</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);
</script>
<li><strong>Token Text Area</strong>
<p>Before:</p>
<pre class="prettyprint">
-<div data-role="tokentextarea" id="tokentext"></div>
+<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");
</script>
<p>After:</p>
<pre class="prettyprint">
-<div class="ui-text-enveloper"></div>
+<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");
</script>
<p>Some events are changed. The following examples illustrate how to handle events:</p>
<ul>
<li>Swipe event
- <p>In the previous version, the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event was triggered in every area in the page automatically, but since 2.4, for efficient trigger and handling, the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event is only triggered when the Gesture event is created.</p>
- <p>To enable the swipe event, use the <span style="font-family: Courier New,Courier,monospace;">enableGesture()</span> method. The following example shows how to enable the swipe event on the content area:</p>
+ <p>In the previous version, the <code>swipe</code> event was triggered in every area in the page automatically, but since 2.4, for efficient trigger and handling, the <code>swipe</code> event is only triggered when the Gesture event is created.</p>
+ <p>To enable the swipe event, use the <code>enableGesture()</code> method. The following example shows how to enable the swipe event on the content area:</p>
<pre class="prettyprint">
-<!-- HTML code -->
-<div class="ui-page ui-page-active" id="pageSwipe">
- <header class="ui-header">
- <h2 class="ui-title">Swipe Event</h2>
+<!--HTML code-->
+<div class="ui-page ui-page-active" id="pageSwipe">
+ <header class="ui-header">
+ <h2 class="ui-title">Swipe Event</h2>
</header>
- <div id="content" class="ui-content></div>
+ <div id="content" class="ui-content></div>
</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(
+ var page = document.getElementById("pageSwipe");
+ page.addEventListener("pagebeforeshow", function()
{
- orientation: "horizontal"
- }));
- });
+ var content = document.getElementById("content");
+ tau.event.enableGesture(content, new tau.event.gesture.Swipe(
+ {
+ orientation: "horizontal"
+ }));
+ });
}());
</pre>
-<p>When the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event is enabled, the application can handle this event with some event detail data:</p>
+<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");
+ var content = document.getElementById("content");
- content.addEventListener("swipe", function(e)
- {
- console.log("swipe direction = " + e.detail.direction);
- });
+ content.addEventListener("swipe", function(e)
+ {
+ console.log("swipe direction = " + e.detail.direction);
+ });
}());
</pre>
</li>
<li>Tap event
- <p>Since 2.4, the <span style="font-family: Courier New,Courier,monospace;">tap</span> event has been deprecated. Use the <span style="font-family: Courier New,Courier,monospace;">click</span> event instead.</p>
+ <p>Since 2.4, the <code>tap</code> event has been deprecated. Use the <code>click</code> event instead.</p>
<p>If the application has one button in the content area:</p>
<pre class="prettyprint">
-<div class="ui-content">
- <a id="btn" href="#" class="ui-btn">Click me</a>
+<div class="ui-content">
+ <a id="btn" href="#" class="ui-btn">Click me</a>
</div>
</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>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following figure and table describe the rotary events.</p>
-<p class="figure">Figure: Rotary device and interaction direction</p>
+<p align="center"><strong>Figure: Rotary device and interaction direction</strong></p>
<p align="center"><img alt="Rotary device and interaction direction" src="../../../images/rotary_event.png" /> </p>
+<p align="center" class="Table"><strong> Table: Rotary events</strong></p>
<table>
- <caption> Table: Rotary events</caption>
<tbody>
<tr>
<th>Type</th>
<th>Attribute</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">rotarydetent</span></td>
+ <td><code>rotarydetent</code></td>
<td>Triggered when a device detects the detent point.</td>
- <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: Rotation direction, which can be:
- <ul><li><span style="font-family: Courier New,Courier,monospace;">CW</span>: Clockwise rotation</li>
- <li><span style="font-family: Courier New,Courier,monospace;">CCW</span>: Counter-clockwise rotation</li></ul></td>
+ <td><code>detail.direction</code>: Rotation direction, which can be:
+ <ul><li><code>CW</code>: Clockwise rotation</li>
+ <li><code>CCW</code>: Counter-clockwise rotation</li></ul></td>
</tr>
</tbody>
</table>
page = document.getElementById("main"); /* Query with page ID */
page.addEventListener("popupshow", function popupOpenHandler(e)
- {
- var popup = e.target, /* Popup element */
- scroller = popup.querySelector(".ui-popup-wrapper"), /* Element that has scroll */
+ {
+ var popup = e.target, /* Popup element */
+ /* Element that has scroll */
+ 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 */
+ /* Rotary event handler */
+ rotaryEventHandler = function(e)
{
- scroller.scrollTop -= SCROLL_STEP;
- }
- };
-
- /* Register the rotary event */
- document.addEventListener("rotarydetent", rotaryEventHandler, false);
-
- /* Deregister the rotary event */
- popup.addEventListener("popuphide", function popupHideHandler()
- {
- popup.removeEventListener("popuphide", popupHideHandler, false);
- document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+ 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);
+
+ /* Deregister the rotary event */
+ popup.addEventListener("popuphide", function popupHideHandler()
+ {
+ popup.removeEventListener("popuphide", popupHideHandler, false);
+ document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+ }, false);
}, false);
- }, false);
page.addEventListener("pagebeforeshow", function pageScrollHandler(e)
- {
- var page = e.target;
- 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;
- }
- };
+ var page = e.target;
+ elScroller = page.querySelector(".ui-scroller");
- /* Register the rotary event */
- document.addEventListener("rotarydetent", rotaryEventHandler, false);
+ /* 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;
+ }
+ };
+
+ /* Register the rotary event */
+ 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);
- /* Deregister the rotary event */
- page.addEventListener("pagebeforehide", function pageHideHanlder()
- {
- page.removeEventListener("pagebeforehide", pageHideHanlder, false);
- document.removeEventListener("rotarydetent", rotaryEventHandler, false);
}, false);
-
- }, false);
}());
</script>
</pre>
if (tau.support.shape.circle)
{
document.addEventListener("pagebeforeshow", function()
- {
- list = document.getElementById("snapList");
- snapListviewWidget = tau.widget.SnapListview(list);
- window.addEventListener("rotarydetent", rotarydetentHandler);
- });
+ {
+ 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);
- }
- });
+ if (list)
+ {
+ snapListviewWidget.destroy();
+ window.removeEventListener("rotarydetent", rotarydetentHandler);
+ }
+ });
}
}(tau));
</script>
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);
- });
+ {
+ 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);
- });
+ {
+ sectionChangerWidget.destroy();
+ document.removeEventListener("rotarydetent", rotarydetentHandler);
+ });
}
}(tau));
</script>
};
document.addEventListener("pagebeforeshow", function()
- {
- resultDiv = document.getElementById("result");
-
- 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);
- });
+ {
+ resultDiv = document.getElementById("result");
+
+ 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("pagehide", function()
- {
- progressBarWidget.destroy();
- document.removeEventListener("rotarydetent", rotaryDetentHandler);
- });
+ {
+ progressBarWidget.destroy();
+ document.removeEventListener("rotarydetent", rotaryDetentHandler);
+ });
}());
</script>
</pre>
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div></div></div>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of the Web UI Framework Library were coding simplification and application creation speed. The purpose of TAU is to be the "framework advanced to the next level".</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Tizen Advanced UI Framework is <strong>optional</strong>, but recommended for making Web applications for Tizen.
- </td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Tizen Advanced UI Framework is <strong>optional</strong>, but recommended for making Web applications for Tizen.
+</div>
<p>With TAU, you can take advantage of the following benefits in your code:</p>
<ul>
<li>TAU supports various profiles (mobile, wearable, and TV).</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">TAU (Tizen Advanced UI) is the new name of the <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>. In all documents and source code, TAU is used instead of <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.
-<p>Since 2.3, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> has been deprecated (including <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.js</span>, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw-libs.js</span>, and <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.css</span>). Since 2.4, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> is fully deleted and not supported anymore.</p>
- </td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ TAU (Tizen Advanced UI) is the new name of the <code>tizen-web-ui-fw</code>. In all documents and source code, TAU is used instead of <code>tizen-web-ui-fw</code>.
+<p>Since 2.3, <code>tizen-web-ui-fw</code> has been deprecated (including <code>tizen-web-ui-fw.js</code>, <code>tizen-web-ui-fw-libs.js</code>, and <code>tizen-web-ui-fw.css</code>). Since 2.4, <code>tizen-web-ui-fw</code> is fully deleted and not supported anymore.</p>
+</div>
<p>To learn to use the TAU features in your application UI, see the following topics:</p>
<ul>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
- <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
<script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<p>The following figure shows the layout of the thumbnail component in a rectangular and circular UI.</p>
-<p class="figure">Figure: Thumbnail component in rectangular and circular devices</p>
+<p align="center"><strong>Figure: Thumbnail component in rectangular and circular devices</strong></p>
<p align="center"><img alt="Thumbnail component in a rectangular device" src="../../../images/rectangular_thumbnail.png" /> <img alt="Thumbnail component in a circular device" src="../../../images/round_thumbnail.png" /></p>
<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;
border: 1px solid #a06322;
}
-@media all and (-tizen-geometric-shape: circle)
+@media all and (-tizen-geometric-shape: circle)
{
- section
+ section
{
padding: 0;
}
- .thumbnail
+ .thumbnail
{
height: 200px;
width: 200px;
var page = document.getElementById("sectionChangerPage"),
sectionChanger = document.getElementById("sectionChanger");
- page.addEventListener("pagebeforeshow", function()
- {
- tau.widget.SectionChanger(sectionChanger,
+ page.addEventListener("pagebeforeshow", function()
{
- orientation: "horizontal",
- fillContent: false
+ tau.widget.SectionChanger(sectionChanger,
+ {
+ orientation: "horizontal",
+ fillContent: false
+ });
});
- });
})();
</pre>
</li>
<h1>UI Components</h1>
-<p>Each UI component in TAU has its own selector for autodetecting in an HTML file. The most popular selector is <span style="font-family: Courier New,Courier,monospace;">class</span>. The old selector style is the <span style="font-family: Courier New,Courier,monospace;">data-role</span>, which is deprecated. Some UI components have also simple HTML selectors, such as <span style="font-family: Courier New,Courier,monospace;">button</span> (button component), or <span style="font-family: Courier New,Courier,monospace;">input[type=checkbox]</span> (CheckboxRadio component).</p>
+<p>Each UI component in TAU has its own selector for autodetecting in an HTML file. The most popular selector is <code>class</code>. The old selector style is the <code>data-role</code>, which is deprecated. Some UI components have also simple HTML selectors, such as <code>button</code> (button component), or <code>input[type=checkbox]</code> (CheckboxRadio component).</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>You can define UI components in 2 different ways using selectors:</p>
<ul>
-<li>With a <span style="font-family: Courier New,Courier,monospace;">class</span> selector
-<p>It is recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector for each component. Class selectors in TAU are composed with a <span style="font-family: Courier New,Courier,monospace;">ui-</span>prefix and <COMPONENT_NAME>.</p>
-<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">class</span> selector:</p>
+<li>With a <code>class</code> selector
+<p>It is recommended to use the <code>class</code> selector for each component. Class selectors in TAU are composed with a <code>ui-</code>prefix and <COMPONENT_NAME>.</p>
+<p>The following example shows the creation of some components with a <code>class</code> selector:</p>
<pre class="prettyprint">
-<!-- Create an Expandable component -->
-<div class="ui-expandable" id="expandable-test">
- <h1>Expandable head</h1>
+<!--Create an Expandable component-->
+<div class="ui-expandable" id="expandable-test">
+ <h1>Expandable head</h1>
<div>Content</div>
</div>
-<!-- Create a ToggleSwitch component -->
-<select class="ui-toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select></pre>
+<!--Create a ToggleSwitch component-->
+<select class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
+</select>
+</pre>
</li>
-<li>With a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector
-<p>The <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector in TAU is composed with <COMPONENT_NAME> in lowercase.</p>
-<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector:</p>
+<li>With a <code>data-role</code> selector
+<p>The <code>data-role</code> selector in TAU is composed with <COMPONENT_NAME> in lowercase.</p>
+<p>The following example shows the creation of some components with a <code>data-role</code> selector:</p>
<pre class="prettyprint">
-<!-- Create a TextEnveloper component -->
-<div data-role="textenveloper"></div>
+<!--Create a TextEnveloper component-->
+<div data-role="textenveloper"></div>
-<!-- Create a Drawer component -->
-<div data-role="drawer">
- <ul data-role="listview">
- <li><a href="#">List item 1</a></li>
+<!--Create a Drawer component-->
+<div data-role="drawer">
+ <ul data-role="listview">
+ <li><a href="#">List item 1</a></li>
</ul>
-</div></pre>
+</div>
+</pre>
</li>
</ul>
<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a> and <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a>.</p>
<p>To set the options:</p>
<ul>
-<li>Initializing options with the <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute
-<p>Various options can be set with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute when the component is being created. You can set options this way only when the component is created. After creating the component, changing the data attributes on the HTML element does not change the component options.</p>
-<p>The following example shows a SectionChanger code with a <span style="font-family: Courier New,Courier,monospace;">data-</span> option:</p>
-<pre class="prettyprint"><div id="hasSectionchangerPage" class="ui-page">
- <header class="ui-header">
- <h2 class="ui-title">SectionChanger</h2>
+<li>Initializing options with the <code>data-</code> attribute
+<p>Various options can be set with <code>data-</code> attribute when the component is being created. You can set options this way only when the component is created. After creating the component, changing the data attributes on the HTML element does not change the component options.</p>
+<p>The following example shows a SectionChanger code with a <code>data-</code> option:</p>
+<pre class="prettyprint">
+<div id="hasSectionchangerPage" class="ui-page">
+ <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>
+ <h3>LEFT1 PAGE</h3>
</section>
- <section class="ui-section-active">
- <h3>MAIN PAGE</h3>
+ <section class="ui-section-active">
+ <h3>MAIN PAGE</h3>
</section>
<section>
</div>
</div>
-</div></pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">data-circular</span> and <span style="font-family: Courier New,Courier,monospace;">data-use-tab</span> attributes are the initial options for creating a SectionChanger.</p>
+</div>
+</pre>
+<p>The <code>data-circular</code> and <code>data-use-tab</code> attributes are the initial options for creating a SectionChanger.</p>
</li>
<li>Setting options with a manual constructor
<p>Options can be set as arguments to the component constructor. When using options as arguments, you must use the camelCase name.</p>
<p>The following example shows the use of a manual constructor:</p>
-<pre class="prettyprint"><div id="hasSectionchangerPage" class="ui-page">
- <header class="ui-header">
- <h2 class="ui-title">SectionChanger</h2>
+<pre class="prettyprint">
+<div id="hasSectionchangerPage" class="ui-page">
+ <header class="ui-header">
+ <h2 class="ui-title">SectionChanger</h2>
</header>
- <div class="ui-section-changer" id="sectionchanger">
+ <div class="ui-section-changer" id="sectionchanger">
<div>
<section>
- <h3>LEFT1 PAGE</h3>
+ <h3>LEFT1 PAGE</h3>
</section>
- <section class="ui-section-active">
- <h3>MAIN PAGE</h3>
+ <section class="ui-section-active">
+ <h3>MAIN PAGE</h3>
</section>
</div>
</div>
</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>
<li>Setting options with a method call
-<p>To set options dynamically, use the <span style="font-family: Courier New,Courier,monospace;">option</span>() method.</p>
-<pre class="prettyprint"><div id="hasSectionchangerPage" class="ui-page">
- <header class="ui-header">
- <h2 class="ui-title">SectionChanger</h2>
+<p>To set options dynamically, use the <code>option</code>() method.</p>
+<pre class="prettyprint">
+<div id="hasSectionchangerPage" class="ui-page">
+ <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>
+ <h3>LEFT1 PAGE</h3>
</section>
- <section class="ui-section-active">
- <h3>MAIN PAGE</h3>
+ <section class="ui-section-active">
+ <h3>MAIN PAGE</h3>
</section>
<section>
</div>
</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);
</script>
<p>To manage the UI components if the jQuery library is loaded:</p>
<ol>
<li>Create the UI component:
-<pre class="prettyprint"><div class="ui-indexscrollbar" id="indexscrollbar"></div>
+<pre class="prettyprint">
+<div class="ui-indexscrollbar" id="indexscrollbar"></div>
<script>
$("#indexscrollbar").indexscrollbar();
-</script></pre>
+</script>
+</pre>
</li>
<li>Use the call methods:
-<pre class="prettyprint">$(".selector").componentName("methodName", argument1, argument2, ...);</pre>
-<pre class="prettyprint"><div class="ui-indexscrollbar" id="indexscrollbar"></div>
+<pre class="prettyprint">
+$(".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");
-</script></pre>
+</script>
+</pre>
</li>
</ol>
<p>This feature is supported in mobile applications only.</p>
-<p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push. The repeat period of the server request is determined by the <
span style="font-family: Courier New,Courier,monospace">retry</span> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>. If the value is not defined, the repeat period is the default value of the browser.</p>
+<p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push. The repeat period of the server request is determined by the <
code>retry</code> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>. If the value is not defined, the repeat period is the default value of the browser.</p>
<p>The main features of the Server-Sent Events API include:</p>
<ul>
<li>Creating an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> instance
-<p>The <span style="font-family: Courier New,Courier,monospace">EventSource</span> interface is the core object of server-sent event implementation. <a href="#Triggering">Creating a new EventSource instance</a> triggers repeated server request automatically, and allows you to use the receiving data event. When creating the <span style="font-family: Courier New,Courier,monospace">EventSource</span> instance, you must use the URL of the server page sending the event stream as a parameter.</p></li>
+<p>The <code>EventSource</code> interface is the core object of server-sent event implementation. <a href="#Triggering">Creating a new EventSource instance</a> triggers repeated server request automatically, and allows you to use the receiving data event. When creating the <code>EventSource</code> instance, you must use the URL of the server page sending the event stream as a parameter.</p></li>
<li>Receiving server push data
<p>After triggering the server requests, you can <a href="#Receiving">receive push data from the server</a> by implementing the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onmessage" target="_blank">message</a> event.</p>
<p>The received event stream data is parsed as a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object, to make the target data easily accessible. </p>
<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 eventSource = new EventSource(serverPage);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For the server push to work, the <span style="font-family: Courier New,Courier,monospace">serverPage</span> parameter must contain the actual push server URL.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ For the server push to work, the <code>serverPage</code> parameter must contain the actual push server URL.
+</div>
</li>
<li>Implement the event handler for the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onopen" target="_blank">open</a> event:
<pre class="prettyprint">
var log = document.getElementById("log")
- /* open event */
+ /* Open event */
eventSource.onopen = function(e)
- {
+ {
log.innerHTML+= "<p>open: " + new Date() + "</p>";
- };
+ };
</script>
</pre>
-<p>The <
span style="font-family: Courier New,Courier,monospace">open</span> event is triggered repeatedly based on the <span style="font-family: Courier New,Courier,monospace">retry</span> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
+<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/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
</li>
</ol>
-<p>In the following figure, the <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds.</p>
-<p class="figure">Figure: Push request event</p>
+<p>In the following figure, the <code>open</code> event is fired every 2 seconds.</p>
+<p align="center"><strong>Figure: Push request event</strong></p>
<p align="center"><img alt="Push request event" src="../../../images/server-sent_request.png" /></p>
<h3>Source Code</h3>
<p>To take advantage of the server push feature, you must learn to handle the push data events:</p>
<ol>
<li><p>Define the data server that the client connects to, according to the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream interpretation rules</a>.</p>
-<p>Set the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#text-event-stream" target="_blank">MIME type</a> to <span style="font-family: Courier New,Courier,monospace">text/event-stream</span> so that the event stream can be sent, and set the header not to be cached.</p>
+<p>Set the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#text-event-stream" target="_blank">MIME type</a> to <code>text/event-stream</code> so that the event stream can be sent, and set the header not to be cached.</p>
<pre class="prettyprint">
<?php
header('Content-Type: text/event-stream');
echo "retry: 2000\n\n"; /* Reconnection interval */
echo "data: push time => ". date('r') . "\n\n";
-
+
flush();
?>
</pre>
var serverPage = "http://localhost/server_sent_events_server.php";
var eventSource = new EventSource(serverPage);
var log = document.getElementById("log");
-
- /* open event */
+
+ /* 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>
+</script>
</pre>
</li>
</ol>
-<p>In the following figure, the <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds and the <span style="font-family: Courier New,Courier,monospace">message</span> event shows that push data is received.</p>
-<p class="figure">Figure: Push message event</p>
+<p>In the following figure, the <code>open</code> event is fired every 2 seconds and the <code>message</code> event shows that push data is received.</p>
+<p align="center"><strong>Figure: Push message event</strong></p>
<p align="center"><img alt="Push message event" src="../../../images/server-sent_message.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
<p>With the Web Messaging API, messages are sent and received asynchronously using the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object, within 1 domain or between different domains.</p>
<h2 id="Cross-document_Messaging" name="Cross-document_Messaging">Using Cross-document Messaging</h2>
-<p>Send the message from the sending page using the <
span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#posting-messages" target="_blank">receiving page window object</a>. To receive the page, the receiving page window object must be registered to receive messages.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method supports the following parameters:</p>
+<p>Send the message from the sending page using the <
code>postMessage()</code> method of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#posting-messages" target="_blank">receiving page window object</a>. To receive the page, the receiving page window object must be registered to receive messages.</p>
+<p>The <code>postMessage()</code> method supports the following parameters:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">message</span>: Message to be sent.</li>
-<li><span style="font-family: Courier New,Courier,monospace">targetOrigin</span>: Domain receiving the message. If a certain domain cannot be defined, use the wildcard ('*').</li>
-<li><span style="font-family: Courier New,Courier,monospace">transfer</span> (optional): List of transferable objects.</li>
+<li><code>message</code>: Message to be sent.</li>
+<li><code>targetOrigin</code>: Domain receiving the message. If a certain domain cannot be defined, use the wildcard ('*').</li>
+<li><code>transfer</code> (optional): List of transferable objects.</li>
</ul>
<p>Learning how to use cross-document messaging enhances the communication capabilities of your application:</p>
<ol>
<li>Create document A and B.</li>
-<li>Insert document B as <span style="font-family: Courier New,Courier,monospace">iframe</span> into document A:
+<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 <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method to send a message to document B.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">iframe</span> window, which sends the message from the method content, to deliver the message to the <span style="font-family: Courier New,Courier,monospace">iframe</span>.</p>
+<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)
+ function sendMessage(message)
{
var frame1 = document.getElementById('frame1');
frame1.contentWindow.postMessage(message, '*');
</script>
</pre>
</li>
-<li>Register the <span style="font-family: Courier New,Courier,monospace">message</span> event handler in document B to receive the sent message:
+<li>Register the <code>message</code> event handler in document B to receive the sent message:
<pre class="prettyprint">
<script>
- btnSendMessageHandler = function(e)
+ btnSendMessageHandler = function(e)
{
var messageEle = document.getElementById('message');
sendMessage(messageEle.value);
</ul>
<h2 id="Channel_Messaging" name="Channel_Messaging">Using Channel Messaging</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> instance broadcasts message sending and receiving, and has 2 properties: <span style="font-family: Courier New,Courier,monospace">port1</span> and <span style="font-family: Courier New,Courier,monospace">port2</span>. Each port is used to send and receive messages, and a message that is sent from one port with the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method is received by the other through the <span style="font-family: Courier New,Courier,monospace">message</span> event.</p>
+<p>The <code>MessageChannel</code> instance broadcasts message sending and receiving, and has 2 properties: <code>port1</code> and <code>port2</code>. Each port is used to send and receive messages, and a message that is sent from one port with the <code>postMessage()</code> method is received by the other through the <code>message</code> event.</p>
<p>Learning how to use channel messaging enhances the communication capabilities of your application:</p>
<ol>
-<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <span style="font-family: Courier New,Courier,monospace">port1</span> and <span style="font-family: Courier New,Courier,monospace">port2</span>.
-<p>The <span style="font-family: Courier New,Courier,monospace">port2</span> attribute of the <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> instance is delivered to document B through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the document B window object:</p>
+<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <code>port1</code> and <code>port2</code>.
+<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()
+
+ function setMessagePort()
{
/* iframe element ID of the port to be delivered */
var frame1 = document.getElementById('iframe1');
frame1.contentWindow.postMessage('', [messageChannel.port2], '*');
};
-
- window.onload = function()
+
+ window.onload = function()
{
setMessagePort();
};
-
+
/* Message is sent to port2 through port1 */
- function sendMessage(message)
+ function sendMessage(message)
{
messageChannel.port1.postMessage(message);
};
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method can have 3 parameters: <span style="font-family: Courier New,Courier,monospace">message</span>, <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#security-postmsg" target="_blank">origin</a>, and <span style="font-family: Courier New,Courier,monospace">ports</span>.</p>
- <p>According to the W3C specifications, the arguments are ordered as <span style="font-family: Courier New,Courier,monospace">message</span>, <span style="font-family: Courier New,Courier,monospace">origin</span>, and <span style="font-family: Courier New,Courier,monospace">ports</span>. However, in Tizen, the order used is actually <span style="font-family: Courier New,Courier,monospace">message</span>, <span style="font-family: Courier New,Courier,monospace">ports</span>, and <span style="font-family: Courier New,Courier,monospace">origin</span>. This approach is used in all browsers that currently support the <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> interface.</p></td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>postMessage()</code> method can have 3 parameters: <code>message</code>, <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#security-postmsg" target="_blank">origin</a>, and <code>ports</code>.
+<p>According to the W3C specifications, the arguments are ordered as <code>message</code>, <code>origin</code>, and <code>ports</code>. However, in Tizen, the order used is actually <code>message</code>, <code>ports</code>, and <code>origin</code>. This approach is used in all browsers that currently support the <code>MessageChannel</code> interface.</p>
+</div>
</li>
-<li>Define a <span style="font-family: Courier New,Courier,monospace">message</span> event in the <span style="font-family: Courier New,Courier,monospace">window</span> object of document B, and register the event handler in the <span style="font-family: Courier New,Courier,monospace">port</span> sent from document A.
+<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)
- {
+
+ messageHandler = function(e)
+ {
port = e.ports[0];
- port.onmessage = function(e)
+ port.onmessage = function(e)
{
var messageEle = document.getElementById('message');
messageEle.innerHTML = e.data;
window.onmessage = messageHandler;
</script>
-</pre><p>A message sent through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of <span style="font-family: Courier New,Courier,monospace">port1</span> from document A is received through the <span style="font-family: Courier New,Courier,monospace">message</span> event of <span style="font-family: Courier New,Courier,monospace">port2</span> in document B, and the message sent through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of <span style="font-family: Courier New,Courier,monospace">port2</span> from document B is received through the <span style="font-family: Courier New,Courier,monospace">message</span> event of <span style="font-family: Courier New,Courier,monospace">port1</span> in document A.</p>
+</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>
</li>
</ol>
<h3>Source Code</h3>
<ul>
<li>Connecting to a server
<p>To <a href="#Connecting_Socket_Server">connect to a server</a>, you must create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface with the socket server URL as a mandatory parameter. The <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#parsing-websocket-urls" target="_blank">
-URL format has some restrictions</a>, for example, it must use the <span style="font-family: Courier New,Courier,monospace">ws</span> or <span style="font-family: Courier New,Courier,monospace">wss</span> protocol. If the URL is not valid or uses a wrong protocol, a syntax error occurs.</p>
+URL format has some restrictions</a>, for example, it must use the <code>ws</code> or <code>wss</code> protocol. If the URL is not valid or uses a wrong protocol, a syntax error occurs.</p>
</li>
<li>Sending data
-<p>By using the <span style="font-family: Courier New,Courier,monospace">send()</span> method of the<span style="font-family: Courier New,Courier,monospace">WebSocket</span> interface, you can <a href="#Sending_Data">send data to the server</a>. The data is transmitted using the established connection. If the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value is <span style="font-family: Courier New,Courier,monospace">CONNECTING</span>, the method throws an <span style="font-family: Courier New,Courier,monospace">InvalidStateError</span> exception.</p>
+<p>By using the <code>send()</code> method of the<code>WebSocket</code> interface, you can <a href="#Sending_Data">send data to the server</a>. The data is transmitted using the established connection. If the <code>readyState</code> attribute value is <code>CONNECTING</code>, the method throws an <code>InvalidStateError</code> exception.</p>
</li>
<li>Receiving data
-<p>You can <a href="#Receiving_Data">receive data from the server</a> through the <span style="font-family: Courier New,Courier,monospace">message</span> event.</p>
+<p>You can <a href="#Receiving_Data">receive data from the server</a> through the <code>message</code> event.</p>
</li>
<li>Closing a socket
-<p>When the connection is no longer needed, you can <a href="#Closing_Socket_Connection">close the connection</a> with the <span style="font-family: Courier New,Courier,monospace">close()</span> method.</p>
+<p>When the connection is no longer needed, you can <a href="#Closing_Socket_Connection">close the connection</a> with the <code>close()</code> method.</p>
</li>
</ul>
var webSocket = new WebSocket(webSocketURL);
</pre>
-<p>If the socket server URL is valid, the connection is created automatically. When the instance is created, the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance must be set to <span style="font-family: Courier New,Courier,monospace">0</span> (CONNECTING). </p>
+<p>If the socket server URL is valid, the connection is created automatically. When the instance is created, the <code>readyState</code> attribute of the <code>WebSocket</code> instance must be set to <code>0</code> (CONNECTING). </p>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">open</span> and <span style="font-family: Courier New,Courier,monospace">error</span> events to track the connection status:</p>
+<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)
+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)
+webSocket.onerror = function(e)
{
/* Error handling */
};
</pre>
-<p>If the connection is established, the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute is changed to <span style="font-family: Courier New,Courier,monospace">1</span> and the <span style="font-family: Courier New,Courier,monospace">open</span> event is triggered. If the connection fails, the attribute value is set to <span style="font-family: Courier New,Courier,monospace">3</span>, and the HTTP 503 error is returned.</p>
+<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>
</li>
</ol>
<h3>Source Code</h3>
var webSocket = new WebSocket(webSocketURL);
</pre>
</li>
-<li><p>Check the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value, which is <span style="font-family: Courier New,Courier,monospace">1</span> (OPEN), if the socket is connected. </p>
-<p>If the socket is connected, use the <span style="font-family: Courier New,Courier,monospace">send()</span> method to send the data.</p>
+<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)
+function sendMessage(msg)
{
- if (webSocket.readyState === 1)
+ if (webSocket.readyState === 1)
{
webSocket.send(msg);
}
var webSocket = new WebSocket(webSocketURL);
</pre>
</li>
-<li><p>Register the <span style="font-family: Courier New,Courier,monospace">message</span> event in the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance. The event is triggered when data is received from the server.</p>
+<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)
+webSocket.onmessage = function(e)
{
console.log('server message: ' + e.data);
};
var webSocket = new WebSocket(webSocketURL);
</pre>
</li>
-<li><p>Register a <span style="font-family: Courier New,Courier,monospace">close</span> event in the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance to be notified when the connection closes:</p>
+<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)
+webSocket.onclose = function(e)
{
console.log('connection close, readyState: ' + e.target.readyState);
};
</pre>
</li>
-<li><p>Check the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value, which is <span style="font-family: Courier New,Courier,monospace">1</span> (OPEN), if the socket is connected.</p>
-<p>If the socket is connected, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method to close the connection between the client and the server.</p>
+<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()
+function closeConnection()
{
- if (webSocket.readyState === 1)
+ if (webSocket.readyState === 1)
{
webSocket.close();
}
<ul>
<li>Supporting cross-origin request sharing (CORS)
<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the XMLHttpRequest Level 2 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
-<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <span style="font-family: Courier New,Courier,monospace">open()</span> method. Set the request URL method parameter as the cross-origin URL.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For the cross-origin request to work, <a href="../security/cors_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.</td>
- </tr>
- </tbody>
- </table>
+<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <code>open()</code> method. Set the request URL method parameter as the cross-origin URL.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ For the cross-origin request to work, <a href="../security/cors_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.
+</div>
</li>
<li>Supporting various response types
-<p>The older XMLHttpRequest API only supported the <span style="font-family: Courier New,Courier,monospace">text/html</span> format for sending requests. The XMLHttpRequest Level 2 API supports various response types, such as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span>, <span style="font-family: Courier New,Courier,monospace">blob</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">json</span>, and <span style="font-family: Courier New,Courier,monospace">text</span>.
+<p>The older XMLHttpRequest API only supported the <code>text/html</code> format for sending requests. The XMLHttpRequest Level 2 API supports various response types, such as <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>.
</p>
</li>
<li>Supporting form data
<p>The newly supported <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="#Uploading_Files">Uploading Files with Ajax</a>.</p>
</li>
<li>Receiving a more fragmented response state on the request progress status
-<p>The XMLHttpRequst Level 2 API provides more <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <
span style="font-family: Courier New,Courier,monospace">onprogress</span> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
+<p>The XMLHttpRequst Level 2 API provides more <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <
code>onprogress</code> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
</li>
</ul>
<ul>
<li>Supporting cross-origin request sharing (CORS)
<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the XMLHttpRequest Level 1 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
-<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <span style="font-family: Courier New,Courier,monospace">open()</span> method. Set the request URL method parameter as the cross-origin URL.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For the cross-origin request to work, <a href="../security/cors_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.</td>
- </tr>
- </tbody>
- </table>
+<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <code>open()</code> method. Set the request URL method parameter as the cross-origin URL.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ For the cross-origin request to work, <a href="../security/cors_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.
+</div>
</li>
<li>Supporting various response types
-<p>The older XMLHttpRequest API only supported the <span style="font-family: Courier New,Courier,monospace">text/html</span> format for sending requests. The XMLHttpRequest Level 1 API supports various response types, such as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span>, <span style="font-family: Courier New,Courier,monospace">blob</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">json</span>, and <span style="font-family: Courier New,Courier,monospace">text</span>.
+<p>The older XMLHttpRequest API only supported the <code>text/html</code> format for sending requests. The XMLHttpRequest Level 1 API supports various response types, such as <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>.
</p>
</li>
<li>Supporting form data
<p>The newly supported <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="#Uploading_Files">Uploading Files with Ajax</a>.</p>
</li>
<li>Receiving a more fragmented response state on the request progress status
-<p>The XMLHttpRequst Level 1 API provides more <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <
span style="font-family: Courier New,Courier,monospace">onprogress</span> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
+<p>The XMLHttpRequst Level 1 API provides more <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <
code>onprogress</code> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
</li>
</ul>
var client = new XMLHttpRequest();
</pre>
</li>
-<li><p>Open the connection with the <span style="font-family: Courier New,Courier,monospace">open()</span> method using the cross-domain URL as a parameter. Send the request with the <span style="font-family: Courier New,Courier,monospace">send()</span> method.</p>
+<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();
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Cross-domain access only works if <a href="../security/cors_w.htm#Using_Simple_Requests">the server allows the domain access of the client</a>. </td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ Cross-domain access only works if <a href="../security/cors_w.htm#Using_Simple_Requests">the server allows the domain access of the client</a>.
+</div>
</li>
</ol>
<h3>Source Code</h3>
<p>To use the XML HTTP request features in your application, you must learn to upload files on the background with Ajax:</p>
<ol>
-<li><p>Define the input elements for the file upload. Use the <span style="font-family: Courier New,Courier,monospace">upload()</span> method for the button click event to upload the file when the button is clicked.</p>
+<li><p>Define the input elements for the file upload. Use the <code>upload()</code> method for the button click event to upload the file when the button is clicked.</p>
<pre class="prettyprint">
-<input type="file" id="uploadfile" name="uploadfile" />
-<input type="button" value="upload" onclick="upload()" />
+<input type="file" id="uploadfile" name="uploadfile"/>
+<input type="button" value="upload" onclick="upload()"/>
</pre>
</li>
-<li><p>In the <span style="font-family: Courier New,Courier,monospace">upload()</span> method, create a <a href="http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <span style="font-family: Courier New,Courier,monospace">send()</span> method to send the <span style="font-family: Courier New,Courier,monospace">FormData</span> to the server.
+<li><p>In the <code>upload()</code> method, create a <a href="http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <code>send()</code> method to send the <code>FormData</code> to the server.
</p>
<pre class="prettyprint">
<script>
var client = new XMLHttpRequest();
-
- function upload()
+
+ function upload()
{
var file = document.getElementById("uploadfile");
-
+
/* Create a FormData instance */
var formData = new FormData();
- /* Add the file */
+ /* 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 */
+ client.send(formData); /* Send to server */
}
-
- /* Check the response status */
- client.onreadystatechange = function()
+
+ /* Check the response status */
+ client.onreadystatechange = function()
{
- if (client.readyState == 4 && client.status == 200)
+ if (client.readyState == 4 && client.status == 200)
{
alert(client.statusText);
}
var html = "";
var client = new XMLHttpRequest();
-
+
/* Event handlers */
client.onloadstart = onloadstarthandler;
client.onprogress = onprogresshandler;
client.ontimeout = ontimeouthandler;
client.onloadend = onloadendhandler;
client.onreadystatechange = onreadystatechangehandler;
-
- /* Assign request type and server path */
+
+ /* Assign request type and server path */
client.open("GET", "video_sample.mp4");
client.send();
</pre>
<li><p>Define the actions of each <a href="http://www.w3.org/TR/XMLHttpRequest/#event-handlers" target="_blank">event handler</a>:</p>
<pre class="prettyprint">
/* When the request begins */
- function onloadstarthandler(e)
+ function onloadstarthandler(e)
{
html += "onloadstart<br/>";
document.getElementById("divText").innerHTML = html;
}
- /* When the request is in progress */
- function onprogresshandler(e)
+ /* 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)
+ /* When the client cancels the request */
+ function onaborthandler(e)
{
html += "onabort<br/>";
document.getElementById("divText").innerHTML = html;
}
/* When server exception occurs */
- function onerrorhandler(e)
+ function onerrorhandler(e)
{
html += "onerror<br/>";
document.getElementById("divText").innerHTML = html;
}
-
- /* When the request is successfully terminated */
- function onloadhandler(e)
+
+ /* When the request is successfully terminated */
+ function onloadhandler(e)
{
html += "onload<br/>";
document.getElementById("divText").innerHTML = html;
}
-
+
/* When a timeout occurs */
- function ontimeouthandler(e)
+ function ontimeouthandler(e)
{
html += "ontimeout<br/>";
document.getElementById("divText").innerHTML = html;
}
-
- /* When request is terminated regardless of success or failure */
- function onloadendhandler(e)
+
+ /* 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)
+ function onreadystatechangehandler(e)
{
html += "onreadystate<br/>";
document.getElementById("divText").innerHTML = html;
<p>To use the XML HTTP request features in your application, you must learn to track download progress:</p>
<ol>
-<li><p>Define the input elements for managing a download. Use the <span style="font-family: Courier New,Courier,monospace">sendRequest()</span> and <span style="font-family: Courier New,Courier,monospace">abortRequest()</span> methods for the button click events to start and cancel a download.</p>
+<li><p>Define the input elements for managing a download. Use the <code>sendRequest()</code> and <code>abortRequest()</code> methods for the button click events to start and cancel a download.</p>
<pre class="prettyprint">
-<input type="button" value="Send XMLHttpRequest" onclick="sendRequest()" />
-<input type="button" value="Abort Sending" onclick="abortRequest()" />
+<input type="button" value="Send XMLHttpRequest" onclick="sendRequest()"/>
+<input type="button" value="Abort Sending" onclick="abortRequest()"/>
<div id="divText"></div>
</pre>
</li>
-<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define the handlers for the <span style="font-family: Courier New,Courier,monospace">onprogress</span> and <span style="font-family: Courier New,Courier,monospace">onabort</span> events to track the download progress and cancellation events:</p>
+<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#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();
-
+
client.onprogress = onprogresshandler;
client.onabort = onaborthandler;
</script>
</pre>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">send()</span> 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 <span style="font-family: Courier New,Courier,monospace">abort()</span> method to cancel the download.</p>
+<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()
+ function sendRequest()
{
client.send();
}
-
+
/* When Cancel download button is clicked */
- function abortRequest()
+ function abortRequest()
{
client.abort();
}
</pre>
</li>
-<li><p>During the download, use the <span style="font-family: Courier New,Courier,monospace">onprogresshandler</span> event handler to track the current and total download size, and calculate the download status. With the <span style="font-family: Courier New,Courier,monospace">onaborthandler</span> event handler, you can display the cancellation notification on the screen.</p>
+<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)
+ function onprogresshandler(e)
{
document.getElementById("divText").innerHTML = "DownLoading... (" + parseInt(e.loaded / e.totalSize * 100) + "%)";
}
-
- function onaborthandler(e)
+
+ function onaborthandler(e)
{
document.getElementById("divText").innerHTML = "Download has been cancelled by user.";
}
<p>You can use the attributes of the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface to <a href="#retrieve">check the battery status information</a>, such as battery charging status, remaining charging time (until fully charged), remaining battery life (until battery is empty), and battery level.</p></li>
<li>Detecting battery status changes
-<p>You can set event listeners with the <
span style="font-family: Courier New,Courier,monospace">BatteryManager</span> interface attributes to <a href="#detect">detect changes in the battery status</a>.</p>
+<p>You can set event listeners with the <
code>BatteryManager</code> interface attributes to <a href="#detect">detect changes in the battery status</a>.</p>
</li>
</ul>
<ol>
<li>
<p>Define the elements used to display the battery status information on the screen:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<div>charging: <span id="charging"></span></div>
<div>chargingTime: <span id="chargingTime"></span></div>
<div>dischargingTime: <span id="dischargingTime"></span></div>
<div>level: <span id="level"></span></div>
-</pre>
+</pre>
</li>
<li>
-<p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <span style="font-family: Courier New,Courier,monospace">battery</span> property:</p>
+<p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <code>battery</code> property:</p>
<pre class="prettyprint">
<script>
- /* As Tizen is webkit-based, it uses the webkit prefix */
- var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
-</script>
+ /* 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 charging time: seconds (for example, 3600) or Infinity */
- document.querySelector('#chargingTime').textContent = battery.chargingTime / 60;
-
- /* Battery life: seconds (for example, 3600) or Infinity */
- document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
-
- /* Battery.level: between 0 and 1 (for example, 0.50) */
- document.querySelector('#level').textContent = Math.floor(battery.level * 100) + '%';
- }, false);
-</script>
+<script>
+ window.addEventListener('load', function(e)
+ {
+ /* Charging status: true or false */
+ document.querySelector('#charging').textContent =
+ battery.charging ? 'charging' : 'not charging';
+
+ /* Battery charging time: seconds (for example, 3600) or Infinity */
+ document.querySelector('#chargingTime').textContent =
+ battery.chargingTime / 60;
+
+ /* Battery life: seconds (for example, 3600) or Infinity */
+ document.querySelector('#dischargingTime').textContent =
+ battery.dischargingTime / 60;
+
+ /* Battery.level: between 0 and 1 (for example, 0.50) */
+ document.querySelector('#level').textContent =
+ Math.floor(battery.level * 100) + '%';
+ }, false);
+</script>
</pre></li>
</ol>
-<p class="figure">Figure: Displaying battery status (in mobile applications only)</p>
+<p align="center"><strong>Figure: Displaying battery status (in mobile applications only)</strong></p>
<p align="center"><img alt="Displaying battery status (in mobile applications only)" src="../../../images/charging_battery.png" /></p>
<h3>Source Code</h3>
<ol>
<li>
<p>Define the elements used to display the battery status change information on the screen:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<div id="charging"></div>
<div>
- <progress id="progress" value="0" max="100" ></progress>
- <span id="level" ></span>
+ <progress id="progress" value="0" max="100"></progress>
+ <span id="level"></span>
</div>
<div id="message"></div>
-</pre>
+</pre>
</li>
-<li><p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <span style="font-family: Courier New,Courier,monospace">battery</span> property:</p>
+<li><p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <code>battery</code> property:</p>
<pre class="prettyprint">
<script>
/* As Tizen is webkit-based, it uses the webkit prefix */
- var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+ var battery = navigator.battery || navigator.mozBattery
+ || navigator.webkitBattery;
</script>
-
</pre>
</li>
<pre class="prettyprint">
<script>
- function getBatteryState()
+ function getBatteryState()
{
var message = "";
var dischargingTime = getTimeFormat(battery.dischargingTime);
var level = Math.floor(battery.level * 100);
- if (charging == false && level < 100)
- {
+ if (charging == false && level < 100)
+ {
/* Not charging */
- message = dischargingTime.hour + ":" + dischargingTime.minute + " remained.";
- if (battery.dischargingTime == "Infinity")
+ message = dischargingTime.hour + ":" + dischargingTime.minute +
+ " remained.";
+ if (battery.dischargingTime == "Infinity")
{
message = "";
}
}
- else if (charging && level < 100)
- {
+ else if (charging && level < 100)
+ {
/* Charging */
- message = "Charging is complete after "
+ message = "Charging is complete after "
+ chargingTime.hour + ":" + chargingTime.minute;
- if (battery.chargingTime == "Infinity")
+ if (battery.chargingTime == "Infinity")
{
message = "";
}
}
- else if (level == 100)
+ else if (level == 100)
{
message = "Charging is completed";
}
- document.querySelector('#charging').textContent = charging ? 'charging...' : 'Please connect the charger.';
+ 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;
}
/* Time is received in seconds, converted to hours and minutes, and returned */
- function getTimeFormat(time)
+ function getTimeFormat(time)
{
/* Time parameter is second */
var tempMinute = time / 60;
</li>
</ol>
-<p class="figure">Figure: Battery status (in mobile applications only)</p>
+<p align="center"><strong>Figure: Battery status (in mobile applications only)</strong></p>
<p align="center"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p>
<p>This feature is supported in mobile applications only.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">navigator.onLine</span> attribute returns <span style="font-family: Courier New,Courier,monospace">false</span>, if the browser cannot establish a connection to the network when a remote page is requested. To track the changes in the connection state, you must subscribe to the applicable events: <span style="font-family: Courier New,Courier,monospace">online</span> and <span style="font-family: Courier New,Courier,monospace">offline</span>. The events can be executed in the <span style="font-family: Courier New,Courier,monospace">Window</span> or <span style="font-family: Courier New,Courier,monospace">WorkerGlobalScope</span> object.</p>
+<p>The <code>navigator.onLine</code> attribute returns <code>false</code>, if the browser cannot establish a connection to the network when a remote page is requested. To track the changes in the connection state, you must subscribe to the applicable events: <code>online</code> and <code>offline</code>. The events can be executed in the <code>Window</code> or <code>WorkerGlobalScope</code> object.</p>
+<p align="center" class="Table"><strong>Table: Browser state attributes and events</strong></p>
<table>
-<caption>Table: Browser state attributes and events</caption>
-
<tbody>
<tr>
<th>Attribute or event</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">onLine</span></td>
+ <td><code>onLine</code></td>
<td>readonly Boolean </td>
- <td>If the browser is connected to the network, this attribute returns <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise <span style="font-family: Courier New,Courier,monospace">false</span>.</td>
+ <td>If the browser is connected to the network, this attribute returns <code>true</code>; otherwise <code>false</code>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">online</span></td>
+ <td><code>online</code></td>
<td>Event</td>
- <td>When the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute changes from <span style="font-family: Courier New,Courier,monospace">false</span> to <span style="font-family: Courier New,Courier,monospace">true</span>, a connection is established and this event is triggered.</td>
+ <td>When the return value of the <code>onLine</code> attribute changes from <code>false</code> to <code>true</code>, a connection is established and this event is triggered.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">offline</span></td>
+ <td><code>offline</code></td>
<td>Event</td>
- <td>When the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute changes from <span style="font-family: Courier New,Courier,monospace">true</span> to <span style="font-family: Courier New,Courier,monospace">false</span>, a connection is lost and this event is triggered.</td>
+ <td>When the return value of the <code>onLine</code> attribute changes from <code>true</code> to <code>false</code>, a connection is lost and this event is triggered.</td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The device can be connected to the network without access to the Internet.</td>
-</tr>
-</tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The device can be connected to the network without access to the Internet.
+</div>
<h2 id="Retrieving_Browser_State" name="Retrieving_Browser_State">Retrieving the Browser State</h2>
<p>To enhance the user interaction with the device, you must learn to retrieve the browser state:</p>
<ol>
-<li>The <span style="font-family: Courier New,Courier,monospace">updateIndicator()</span> method updates the browser connection state information on the screen to reflect the current state.
-<p>To retrieve the current state, use the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute of the <span style="font-family: Courier New,Courier,monospace">navigator</span> interface:</p>
+<li>The <code>updateIndicator()</code> method updates the browser connection state information on the screen to reflect the current state.
+<p>To retrieve the current state, use the return value of the <code>onLine</code> attribute of the <code>navigator</code> interface:</p>
<pre class="prettyprint lang-html">
<!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
- <script></pre><pre class="prettyprint lang-js">
- function updateIndicator()
+ <script>
+</pre>
+<pre class="prettyprint lang-js">
+ function updateIndicator()
{
var status = navigator.onLine ? 'online' : 'offline';
document.getElementById('indicator').textContent = status;
}
-</pre> </li>
+</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 */
/* 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>
+ window.onoffline = updateIndicator;
+</pre>
+<pre class="prettyprint lang-html">
+ </script>
</head>
<body>
<p>The network is: <span id="indicator">(state unknown)</span>
<p id="gamma"></p>
</div>
-<script></pre><pre class="prettyprint lang-js">
+<script>
+</pre>
+<pre class="prettyprint lang-js">
var alphaElem = document.getElementById("alpha");
- var betaElem =document.getElementById("beta");
+ 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);</pre><pre class="prettyprint lang-html">
+ 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>
</pre>
</li></ol>
<p id="thirElem"></p>
</div>
-<script></pre><pre class="prettyprint lang-js">
+<script>
+</pre>
+<pre class="prettyprint lang-js">
var firElem = document.getElementById("firElem");
- var secElem =document.getElementById("secElem");
+ 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:
<pre class="prettyprint lang-js">
- window.addEventListener("devicemotion", function(e)
+ 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) + ']';
+ 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/>"
+ + '[ 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/>"
+ + '[ 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">
+ }, true);
+</pre>
+<pre class="prettyprint lang-html">
</script>
</pre></li></ol>
<h3>Source Code</h3>
<div id="container"><div id="contents"><div class="content">\r
<h1>Screen Orientation</h1>\r
\r
-<p>You can <a href="#manage">manage the screen orientation state</a> through the <span style="font-family: Courier New,Courier,monospace">Screen</span> interface.</p>\r
+<p>You can <a href="#manage">manage the screen orientation state</a> through the <code>Screen</code> interface.</p>\r
\r
<p>This feature is supported in mobile applications only.</p> \r
\r
<p>You can use the current screen orientation information, for example, to define the visibility or dimensions of the HTML elements according to the orientation state. The orientation can be portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.</p></li>\r
\r
<li>Reacting to screen orientation changes\r
-<p>To receive notifications of the screen orientation changes, add an event listener to the <span style="font-family: Courier New,Courier,monospace">Screen</span> object, or assign a function reference to the <span style="font-family: Courier New,Courier,monospace">screen.onorientationchange</span> attribute:</p>\r
+<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
/* Or assign reference */\r
screen.onorientationchange = handleScreenOrientationFun;\r
</pre>\r
-<p>In the above example, the <span style="font-family: Courier New,Courier,monospace">handleScreenOrientationFun</span> is the event handler called when the screen orientation changes.</p></li>\r
+<p>In the above example, the <code>handleScreenOrientationFun</code> is the event handler called when the screen orientation changes.</p></li>\r
\r
<li>Locking the screen to a specified orientation\r
<p>Locking means that the rendering of the current browsing context is forced to be shown in the specified orientation. The screen remains in the selected orientation state until the lock is removed.</p></li>\r
\r
<p>The application implemented below consists of buttons used to either lock the screen orientation to a specific state or release the lock. The current orientation state is also displayed on the screen.</p>\r
\r
-<p class="figure">Figure: Screen orientation application</p> \r
+<p align="center"><strong>Figure: Screen orientation application</strong></p> \r
<p align="center"><img alt="Screen orientation application" src="../../../images/screen_orientation.png" /></p>\r
\r
<p>To enhance the user interaction with the device, learn to manage the screen orientation:</p>\r
<div class="main">\r
<p>Current orientation is:</p>\r
<p id="currentOrientation" class="current-orientation"></p>\r
- \r
+\r
<button id="portrait-primary" class="button">Portrait primary</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-secondary"\r
+ class="button">Landscape secondary</button><br/>\r
+ <button id="portrait-secondary"\r
+ 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
</body>\r
</pre></li>\r
\r
-<li>When the screen is loaded, the <span style="font-family: Courier New,Courier,monospace">onload()</span> method is called. Within the method, add an event listener to the <span style="font-family: Courier New,Courier,monospace">screen</span> object, and define the <span style="font-family: Courier New,Courier,monospace">updateCurrOrrTxt()</span> event handler to be called whenever the screen orientation changes. The event handler updates the text element containing the current screen orientation information on the screen, by retrieving the current state with the <span style="font-family: Courier New,Courier,monospace">screen.orientation</span> attribute.\r
+<li>When the screen is loaded, the <code>onload()</code> method is called. Within the method, add an event listener to the <code>screen</code> object, and define the <code>updateCurrOrrTxt()</code> event handler to be called whenever the screen orientation changes. The event handler updates the text element containing the current screen orientation information on the screen, by retrieving the current state with the <code>screen.orientation</code> attribute.\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
- function updateCurrOrrTxt() \r
+ function updateCurrOrrTxt()\r
{\r
document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
}\r
- \r
- window.onload = function() \r
+\r
+ window.onload = function()\r
{\r
document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
screen.addEventListener("orientationchange", updateCurrOrrTxt, false);\r
</pre></li>\r
\r
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">onclick</span> event handlers to react to the button clicks. For the first 4 buttons, use the <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method to lock the screen orientation in place, and for the final button, use the <span style="font-family: Courier New,Courier,monospace">unlockOrientation()</span> method to release the orientation lock.\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>\r
\r
-<p>The <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method accepts the following parameter values: <span style="font-family: Courier New,Courier,monospace">portrait-primary</span>, <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-primary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-secondary</span>, <span style="font-family: Courier New,Courier,monospace">portrait</span>, and <span style="font-family: Courier New,Courier,monospace">landscape</span>.</p>\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
+ document.getElementById("portrait-primary").onclick = function()\r
{\r
screen.lockOrientation('portrait-primary');\r
}\r
- \r
+\r
/* Other 3 orientation buttons are handled similarly */\r
- \r
- document.getElementById("unlock-orientation").onclick = function() \r
+\r
+ document.getElementById("unlock-orientation").onclick = function()\r
{\r
screen.unlockOrientation();\r
}\r
}\r
</script>\r
</pre>\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">When using the screen orientation lock:\r
- <ul><li>When the <span style="font-family: Courier New,Courier,monospace">portrait</span> value is used to lock the orientation, the orientation can change between <span style="font-family: Courier New,Courier,monospace">portrait-primary</span> and <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>. The <span style="font-family: Courier New,Courier,monospace">landscape</span> value behaves similarly.</li>\r
- <li>Depending on the browser, unlocking the screen orientation may have no visual effect.</li></ul></td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ When using the screen orientation lock:\r
+<ul><li>When the <code>portrait</code> value is used to lock the orientation, the orientation can change between <code>portrait-primary</code> and <code>portrait-secondary</code>. The <code>landscape</code> value behaves similarly.</li>\r
+<li>Depending on the browser, unlocking the screen orientation may have no visual effect.</li></ul>\r
+</div>\r
</li>\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
+ .main\r
{\r
font-size: 32px;\r
text-align: center;\r
margin-bottom: auto;\r
}\r
\r
- .button \r
+ .button\r
{\r
font-size: x-large;\r
margin-top: 25px;\r
height: 50px;\r
}\r
\r
- .current-orientation \r
+ .current-orientation\r
{\r
font-size: xx-large;\r
font-weight: bolder;\r
<p>The Compass sample application layout contains only 1 screen: the main screen that displays the compass and its current direction. The sample does not use the Web UI framework.</p>
<p>The following figure shows the main screen of the application.</p>
- <p class="figure">Figure: Compass screen</p>
+ <p align="center"><strong>Figure: Compass screen</strong></p>
<p align="center"><img alt="Compass screen" src="../../../images/compass.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<p>The main screen of the application displays the compass: the rotation section is a graphical representation of the compass, the shadow section shows certain graphical effects, and the direction and angle sections define the current angle to the north and the cardinal direction the device is currently facing.</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<div id="application">
<div id="rotation"></div>
<div id="shadow"></div>
<div id="direction"></div>
<div id="angle"></div>
</div>
-</pre> </li>
+</pre></li>
</ol>
<h2 id="configure" name="configure">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
- <li><p>The application uses the <span style="font-family: Courier New,Courier,monospace">ready</span> event to determine when it has been initialized, and to call the <span style="font-family: Courier New,Courier,monospace">init()</span> method.</p>
- <pre class="prettyprint">$(document).ready(init);</pre> </li>
+ <li><p>The application uses the <code>ready</code> event to determine when it has been initialized, and to call the <code>init()</code> method.</p>
+<pre class="prettyprint">
+$(document).ready(init);
+</pre></li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method start the motion sensor by registering a listener for capturing orientation change events.</p>
- <pre class="prettyprint">function init()
+ <li><p>The <code>init()</code> method start the motion sensor by registering a listener for capturing orientation change events.</p>
+<pre class="prettyprint">
+function init()
{
"use strict";
hdExitButton();
startSensor();
}
-function startSensor()
+function startSensor()
{
"use strict";
window.addEventListener("deviceorientation", onDeviceOrientation, false);
</pre></li></ol></li></ol>
<h2 id="needle" name="needle">Managing the Needle Movement</h2>
- <p>The orientation data interpretation and needle movement functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
-<li>Determining the Cardinal Direction
+ <p>The orientation data interpretation and needle movement functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+<li><strong>Determining the Cardinal Direction</strong>
<ol type="a">
-<li>The <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> event handler is called each time the device orientation changes. The new orientation details are received in the <span style="font-family: Courier New,Courier,monospace">dataEvent</span> parameter, and the <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
-<p>The <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute values range from 0 to 360, where 0 means the cardinal direction points to north, 90 to west, 180 to south, 270 to east.</p>
- <pre class="prettyprint">function onDeviceOrientation(dataEvent)
+<li>The <code>onDeviceOrientation()</code> event handler is called each time the device orientation changes. The new orientation details are received in the <code>dataEvent</code> parameter, and the <code>alpha</code> attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
+<p>The <code>alpha</code> attribute values range from 0 to 360, where 0 means the cardinal direction points to north, 90 to west, 180 to south, 270 to east.</p>
+<pre class="prettyprint">
+function onDeviceOrientation(dataEvent)
{
"use strict";
var angle = dataEvent.alpha,
</pre></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute value range is divided into 8 parts to identify also the intercardinal values of northwest, southwest, southeast, and northeast.</p>
+<li><p>The <code>alpha</code> attribute value range is divided into 8 parts to identify also the intercardinal values of northwest, southwest, southeast, and northeast.</p>
<p>This means that each cardinal or intercardinal direction is represented by 45 degrees (for example, north is 338 – 22 and northwest is 292 – 337). </p>
-<pre class="prettyprint">if (angle < 68 || angle > 292)
+<pre class="prettyprint">
+if (angle < 68 || angle > 292)
{
text += 'NORTH';
}
-else if (angle > 112 && angle < 248)
+else if (angle > 112 && angle < 248)
{
text += 'SOUTH';,
}
-if (angle > 22 && angle < 158)
+if (angle > 22 && angle < 158)
{
text += 'EAST';
-}
-else if (angle > 202 && angle < 338)
+}
+else if (angle > 202 && angle < 338)
{
text += 'WEST';
}
</pre>
</li></ol></li>
-<li>Updating the Compass Needle Position
+<li><strong>Updating the Compass Needle Position</strong>
<ol type="a">
<li><p>To update the compass needle position on the screen, the change required in the needle position is calculated based on the previous and new angle.</p>
-<pre class="prettyprint">deltaAngle = angleMemory - angle;
-if (Math.abs(deltaAngle) > 180)
+<pre class="prettyprint">
+deltaAngle = angleMemory - angle;
+if (Math.abs(deltaAngle) > 180)
{
- if (deltaAngle > 0)
+ if (deltaAngle > 0)
{
rotation -= ((360 - angleMemory) + angle);
- }
- else
+ }
+ else
{
rotation += (angleMemory + (360 - angle));
}
-}
-else
+}
+else
{
rotation += deltaAngle;
}
angleMemory = angle;
</pre></li>
-<li><p>The needle position is updated by rotating the needle with the <
span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../ui/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
+<li><p>The needle position is updated by rotating the needle with the <
code>rotate()</code> method of the <a href="../ui/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
-<pre class="prettyprint">$('#direction').text(text);
+<pre class="prettyprint">
+$('#direction').text(text);
$("#angle").html(Math.round(angle) + "<sup>o</sup>");
$('#rotation').css('-webkit-transform', 'rotate(' + rotation + 'deg)');
</pre></li>
<p>The following figure shows the main screen of the application.</p>
-<p class="figure">Figure: TouchPaint screen</p>
+<p align="center"><strong>Figure: TouchPaint screen</strong></p>
<p align="center"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
-<p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <
span style="font-family: Courier New,Courier,monospace;"><input></span> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
-
<pre class="prettyprint lang-html">
+ <li><strong>index.html Source File</strong>
+<p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <
code><input></code> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
+<pre class="prettyprint lang-html">
<body>
<h2>Touch paint</h2>
<canvas class="canvas addHeight">
This browser is not supported
</canvas>
<div class="desc">
- <label>Color: <input type="color" class="strokeColor"></label>
- <label>Line width:
- <input type="range" min="5" max="30" step="5" value="5" class="strokeWidth"/>
+ <label>Color:<input type="color" class="strokeColor"></label>
+ <label>Line width:
+ <input type="range" min="5" max="30" step="5"
+ value="5" class="strokeWidth"/>
</label>
</div>
<nav></nav>
<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<p>Define event listeners and handlers to manage the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events on the canvas.</p>
<pre class="prettyprint">
-window.onload = function()
+window.onload = function()
{
canvas = document.querySelector(".canvas");
var context = canvas.getContext("2d");
/* Canvas size setting */
canvas.width = document.width;
canvas.height = document.height - 130;
-
+
/* Touch event listeners */
canvas.addEventListener("touchstart", touchStartHandler, false);
canvas.addEventListener("touchmove", touchMoveHandler, false);
canvas.addEventListener("touchend", touchEndHandler, false);
-}
+}
</pre>
</li></ol>
<h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
-<li>Drawing based on Retrieved Event Coordinates
+<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+<li><strong>Drawing based on Retrieved Event Coordinates</strong>
<p>To draw an image with fingers, you must find out the coordinates of the triggered touch events.
-Retrieve the coordinates in the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler.</p>
+Retrieve the coordinates in the <code>touchMoveHandler()</code> event handler.</p>
<pre class="prettyprint">
-function touchMoveHandler(e)
+function touchMoveHandler(e)
{
touches = e.touches.item(0);
-
- log.innerHTML ='<strong>pageX:</strong> ' + touches.pageX +
- '<br/><strong>pageY:</strong> ' + touches.pageY;
-
+
+ log.innerHTML =
+ '<strong>pageX:</strong> ' + touches.pageX +
+ '<br/><strong>pageY:</strong> ' + touches.pageY;
+
context.fillStyle = "#f00";
-
+
/* For accurate coordinates, calculate minus offset(Left) from page(X) */
- context.fillRect(touches.pageX - this.offsetLeft,
+ context.fillRect(touches.pageX - this.offsetLeft,
touches.pageY - this.offsetTop, 5, 5);
}
</pre>
-<p>Every time a <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is fired, the pageX and pageY coordinates of the page are shown in the log, and a quadrangle of 5 x 5 pixels is created. However, since it is difficult to implement line drawing this way, use the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attribute instead, as shown below.</p>
+<p>Every time a <code>touchmove</code> event is fired, the pageX and pageY coordinates of the page are shown in the log, and a quadrangle of 5 x 5 pixels is created. However, since it is difficult to implement line drawing this way, use the <code>changedTouches</code> attribute instead, as shown below.</p>
</li>
-<li>Drawing based on Stored Event Coordinates
-<p>Create a <span style="font-family: Courier New,Courier,monospace">drawPath</span> array that remembers the order of the triggered touch events, and edit the <span style="font-family: Courier New,Courier,monospace">touchStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handlers to define the lines the user is drawing.</p>
+<li><strong>Drawing based on Stored Event Coordinates</strong>
+<p>Create a <code>drawPath</code> array that remembers the order of the triggered touch events, and edit the <code>touchStartHandler()</code> and <code>touchMoveHandler()</code> event handlers to define the lines the user is drawing.</p>
<ol type="a">
<li>
-<p>When a <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered, the event handler stores the initial position.</p>
+<p>When a <code>touchstart</code> event is triggered, the event handler stores the initial position.</p>
<pre class="prettyprint">
var touches;
-/* Remember the order of the touch events */
+/* Remember the order of the touch events */
var drawPath = new Array();
/* Flag for displaying the touching point */
var isMoved = false;
-
-function touchStartHandler(e)
+
+function touchStartHandler(e)
{
/* Store the current touch information (coordinates) */
touches = e.changedTouches;
- drawPath.push(touches[0]);
+ drawPath.push(touches[0]);
}
</pre>
</li>
<li>
-<p>When a <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is triggered, the coordinates of the previously triggered <span style="font-family: Courier New,Courier,monospace">touchmove</span> event stored in the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attribute are saved in the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array and assigned as a parameter value of the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. The coordinates of the current <span style="font-family: Courier New,Courier,monospace">touchmove</span> event are assigned as a parameter value of the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, and thus the connected line is indicated.</p>
+<p>When a <code>touchmove</code> event is triggered, the coordinates of the previously triggered <code>touchmove</code> event stored in the <code>changedTouches</code> attribute are saved in the <code>drawPath</code> array and assigned as a parameter value of the <code>moveTo()</code> method. The coordinates of the current <code>touchmove</code> event are assigned as a parameter value of the <code>lineTo()</code> method, and thus the connected line is indicated.</p>
<pre class="prettyprint">
-function touchMoveHandler(e)
+function touchMoveHandler(e)
{
isMoved = true;
touches = e.changedTouches;
-
- /* Assign the line style to be drawn */
+
+ /* Assign the line style to be drawn */
context.lineWidth = strokeWidth;
context.strokeStyle = strokeColor;
context.lineJoin = "round";
- for (var i = 0; i < touches.length; i++)
+ for (var i = 0; i < touches.length; i++)
{
var idx = drawPathSetting(touches[i].identifier);
-
+
/* Draw a line from the stored coordinates to the current coordinates */
context.beginPath();
- context.moveTo(drawPath[idx].pageX - this.offsetLeft,
+ context.moveTo(drawPath[idx].pageX - this.offsetLeft,
drawPath[idx].pageY - this.offsetTop);
- context.lineTo(touches[i].pageX - this.offsetLeft,
+ context.lineTo(touches[i].pageX - this.offsetLeft,
touches[i].pageY - this.offsetTop);
context.closePath();
context.stroke();
- /* Delete the stored coordinates and store the current ones */
- drawPath.splice(idx, 1, touches[i]);
+ /* Delete the stored coordinates and store the current ones */
+ drawPath.splice(idx, 1, touches[i]);
}
e.preventDefault();
}
</pre>
</li>
<li>
-<p>When a <span style="font-family: Courier New,Courier,monospace">touchend</span> event is triggered, it deletes the stored position.</p>
+<p>When a <code>touchend</code> event is triggered, it deletes the stored position.</p>
<pre class="prettyprint">
-function touchEndHandler()
+function touchEndHandler()
{
/* Display the touching point */
if (!isMoved)
var endPoint = (Math.PI/180)*360;
context.fillStyle = strokeColor;
context.beginPath();
- context.arc(touches[0].pageX - this.offsetLeft, touches[0].pageY - this.offsetTop,
+ context.arc(touches[0].pageX - this.offsetLeft,
+ touches[0].pageY - this.offsetTop,
strokeWidth/2, startPoint, endPoint, true);
context.closePath();
context.fill();
}
isMoved=false;
- drawPath.length = 0; /* Initialize the stored coordinates */
+ drawPath.length = 0; /* Initialize the stored coordinates */
}
</pre>
</li>
</ol></li>
-<li>Drawing based on Multi-point Touches
-<p>If the application is controlled with fingers, you must handle multi-point touches (a mouse-controlled application only create one touch at a time and only needs 2 events to handle it). To manage multi-touches, the index of the <span style="font-family: Courier New,Courier,monospace">touches[index]</span> array is used.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">drawPathSetting()</span> method allows the application to handle multi-point touches since the existing and current coordinates of the touch events are connected respectively.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler uses the <span style="font-family: Courier New,Courier,monospace">drawPathSetting()</span> method to return the index of the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array (which contains the touch event details saved so far). Since the information is similar to the <span style="font-family: Courier New,Courier,monospace">identifier</span> of the touch event which has been currently triggered, the array enables each touch event to have its own information.</p>
+<li><strong>Drawing based on Multi-point Touches</strong>
+<p>If the application is controlled with fingers, you must handle multi-point touches (a mouse-controlled application only create one touch at a time and only needs 2 events to handle it). To manage multi-touches, the index of the <code>touches[index]</code> array is used.</p>
+<p>The <code>drawPathSetting()</code> method allows the application to handle multi-point touches since the existing and current coordinates of the touch events are connected respectively.</p>
+<p>The <code>touchMoveHandler()</code> event handler uses the <code>drawPathSetting()</code> method to return the index of the <code>drawPath</code> array (which contains the touch event details saved so far). Since the information is similar to the <code>identifier</code> of the touch event which has been currently triggered, the array enables each touch event to have its own information.</p>
<pre class="prettyprint">
-function drawPathSetting(idx)
+function drawPathSetting(idx)
{
- for (var i = 0; i < drawPath.length; i++)
+ for (var i = 0; i < drawPath.length; i++)
{
var _idx = drawPath[i].identifier;
- if (_idx === idx)
+ if (_idx === idx)
{
return i;
}
}
return -1;
-}
+}
</pre>
<h3 id="initialize2" name="initialize2">Initializing Drawing</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<p>Variables are declared to store and display the color and line width selection of the user.</p>
-<pre class="prettyprint">var strokeColorSel, strokeWidthSel;
+<pre class="prettyprint">
+var strokeColorSel, strokeWidthSel;
var strokeColor;
var strokeWidth = 5;
</pre>
</li></ol>
<h3 id="stroke" name="stroke">Applying the Stroke Styles</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
<li>Add the color and line width values that the user has selected to the applicable variables, and define event handlers to track changes in the user selection.
<pre class="prettyprint">
-window.onload = function()
+window.onload = function()
{
strokeColorSel = document.querySelector(".strokeColor");
strokeWidthSel = document.querySelector(".strokeWidth");
-
+
/* Add event listeners */
strokeColorSel.addEventListener("change", changeStrokeColor, false);
strokeWidthSel.addEventListener("change", changeStrokeWidth, false);
</pre>
</li>
-<li>If the user changes the color or line width, the event handlers call the <span style="font-family: Courier New,Courier,monospace">changeStrokeColor()</span> or <span style="font-family: Courier New,Courier,monospace">changeStrokeWidth()</span> method to set the new style value.
+<li>If the user changes the color or line width, the event handlers call the <code>changeStrokeColor()</code> or <code>changeStrokeWidth()</code> method to set the new style value.
<pre class="prettyprint">
- function changeStrokeColor()
+ function changeStrokeColor()
{
strokeColor = this.value;
}
- function changeStrokeWidth()
+ function changeStrokeWidth()
{
strokeWidth = this.value;
}
}
</pre>
</li>
-<li>To use the style values, apply them in the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler, which draws the user's strokes on the canvas.
+<li>To use the style values, apply them in the <code>touchMoveHandler()</code> event handler, which draws the user's strokes on the canvas.
<pre class="prettyprint">
-function touchMoveHandler(e)
+function touchMoveHandler(e)
{
- context.lineWidth = strokeWidth; /* Selected line width */
- context.strokeStyle = strokeColor; /* Selected line color */
+ context.lineWidth = strokeWidth; /* Selected line width */
+ context.strokeStyle = strokeColor; /* Selected line color */
/* Draw the strokes */
-}
+}
</pre>
</li>
</ol>
<p>The following figure shows the main screens of the application.</p>
-<p class="figure">Figure: TouchPaint screens</p>
+<p align="center"><strong>Figure: TouchPaint screens</strong></p>
<p align="center"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
+ <li><strong>index.html Source File</strong>
<p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element and 2 buttons (for accessing the Options screen and for clearing the canvas area).</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<div class="ui-page ui-page-active" id="main">
<div class="ui-header" id="main-header" data-position="fixed">
<h2 class="ui-title">TouchPaint</h2>
</div>
</pre>
-<p>The above code snippet does not contain the canvas element, which is added to the <span style="font-family: Courier New,Courier,monospace;"><div id="main-content"></span> element by the JavaScript code after the application start.</p>
+<p>The above code snippet does not contain the canvas element, which is added to the <code><div id="main-content"></code> element by the JavaScript code after the application start.</p>
</li>
</ol>
<h3 id="option" name="option">Defining the Options Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
+ <li><strong>index.html Source File</strong>
<p>The Options screen displays a slider element, line preview, 4-color (white, red, green, and blue) picker and 2 buttons (<strong>Cancel</strong> and <strong>OK</strong>).</p>
<p>The slider allows the user to change the line width. Each slider position change results in a change in the line preview thickness. A tap action on the color picker results in a change in the line preview color. A tap action on the buttons moves the user to main screen without or with saving the changes.</p>
-
<pre class="prettyprint lang-html">
+<pre class="prettyprint lang-html">
<div class="ui-page" id="options">
<div class="ui-header" data-position="fixed">
<h2 class="ui-title">Options</h2>
<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<p>The canvas is initialized in JavaScript, and includes the size calculation, ID setting, and adding of the element to the main page content.</p>
<pre class="prettyprint">
-function initCanvas()
+function initCanvas()
{
canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
</li></ol>
<h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
-<li>main.js Source File
+<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+<li><strong>main.js Source File</strong>
<ol type="a"><li>
-<p>Define event listeners and handlers to manage the <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <span style="font-family: Courier New,Courier,monospace">touchmove</span>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> events on the canvas.</p>
+<p>Define event listeners and handlers to manage the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events on the canvas.</p>
<pre class="prettyprint">
-function addCanvasListeners()
+function addCanvasListeners()
{
canvas.addEventListener('touchstart', onCanvasTouchStart);
canvas.addEventListener('touchend', onCanvasTouchEnd);
<p>Handle the events:</p>
<ul><li>At touch start, an arc is drawn in case of a single tap performed by the user.</li>
<li>On touch move, a line is drawn trough the touch path with a given width and color.
-<p>The <span style="font-family: Courier New,Courier,monospace">drawPath</span> array stores the order of the triggered touch events, which are used to draw a line that follows the finger.</p></li>
-<li>At touch end, the touch event is removed from the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array, stopping the line drawing.</li></ul>
+<p>The <code>drawPath</code> array stores the order of the triggered touch events, which are used to draw a line that follows the finger.</p></li>
+<li>At touch end, the touch event is removed from the <code>drawPath</code> array, stopping the line drawing.</li></ul>
<pre class="prettyprint">
-function onCanvasTouchStart(ev)
+function onCanvasTouchStart(ev)
{
var touch = ev.changedTouches[0];
context.fillStyle = strokeColor;
context.beginPath();
context.arc(drawPath[touch.identifier].pageX - canvas.offsetLeft,
- drawPath[touch.identifier].pageY - canvas.offsetTop - header.offsetHeight,
- strokeWidth / 2,
- 0,
- Math.PI * 2,
- true);
+ drawPath[touch.identifier].pageY - canvas.offsetTop
+ - header.offsetHeight,
+ strokeWidth / 2, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
-function onCanvasTouchEnd(ev)
+function onCanvasTouchEnd(ev)
{
var touch = ev.changedTouches[0];
delete drawPath[touch.identifier];
}
-function onCanvasTouchMove(ev)
+function onCanvasTouchMove(ev)
{
var touches = ev.changedTouches,
touchesLength = touches.length,
context.strokeStyle = strokeColor;
context.lineJoin = 'round';
- for (i = 0; i < touchesLength; i += 1)
+ for (i = 0; i < touchesLength; i += 1)
{
currentDrawPath = drawPath[touches[i].identifier];
- if (currentDrawPath !== undefined)
+ if (currentDrawPath !== undefined)
{
context.beginPath();
context.moveTo(currentDrawPath.pageX - canvas.offsetLeft + HALF_PIXEL,
- currentDrawPath.pageY - canvas.offsetTop + HALF_PIXEL - header.offsetHeight);
+ currentDrawPath.pageY - canvas.offsetTop
+ + HALF_PIXEL - header.offsetHeight);
context.lineTo(touches[i].pageX - canvas.offsetLeft + HALF_PIXEL,
- touches[i].pageY - canvas.offsetTop + HALF_PIXEL - header.offsetHeight);
+ touches[i].pageY - canvas.offsetTop
+ + HALF_PIXEL - header.offsetHeight);
context.closePath();
context.stroke();
<h3 id="thick" name="thick">Changing the Line Thickness</h3>
- <ol class="tutorstep">
- <li>options.js Source File
-<p>The user changes the line thickness using a slider. The new slider value is set as the width of the <span style="font-family: Courier New,Courier,monospace">preview</span> element, as well as a value in the <span style="font-family: Courier New,Courier,monospace">options</span> object.</p>
-<pre class="prettyprint">function onRangeChange(ev)
+ <ol>
+ <li><strong>options.js Source File</strong>
+<p>The user changes the line thickness using a slider. The new slider value is set as the width of the <code>preview</code> element, as well as a value in the <code>options</code> object.</p>
+<pre class="prettyprint">
+function onRangeChange(ev)
{
setPreviewHeight(ev.target.value);
}
-function setPreviewHeight(value)
+function setPreviewHeight(value)
{
preview.style.height = value + 'px';
}
-function setOptionValues()
+function setOptionValues()
{
options.setStrokeWidth(range.value);
}
</pre>
</li>
-<li>main.js Source File
+<li><strong>main.js Source File</strong>
<p>During drawing, the selected thickness is applied to the line being drawn.</p>
<pre class="prettyprint">
-function getOptionValues()
+function getOptionValues()
{
strokeWidth = options.getStrokeWidth();
}
</li></ol>
<h3 id="color" name="color">Changing the Line Color</h3>
- <ol class="tutorstep">
- <li>options.js Source File
-<p>The user changes the line color by selecting it from the color picker. The new color is set as the <span style="font-family: Courier New,Courier,monospace">preview</span> element background, as well as a value in the <span style="font-family: Courier New,Courier,monospace">options</span> object.</p>
+ <ol>
+ <li><strong>options.js Source File</strong>
+<p>The user changes the line color by selecting it from the color picker. The new color is set as the <code>preview</code> element background, as well as a value in the <code>options</code> object.</p>
<pre class="prettyprint">
-function onWhiteTap()
+function onWhiteTap()
{
preview.style.backgroundColor = '#fff';
}
-function setOptionValues()
+function setOptionValues()
{
o.setStrokeColor(preview.style.backgroundColor);
}
</pre>
</li>
-<li>main.js Source File
+<li><strong>main.js Source File</strong>
<p>During drawing, the selected color is applied to the line being drawn.</p>
<pre class="prettyprint">
-function getOptionValues()
+function getOptionValues()
{
strokeColor = o.getStrokeColor();
}
<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> handles an event which occurs when a finger is removed from the screen.</li>
<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> handles an event which occurs when a touch is cancelled.</li>
</ul>
-<p>These events are similar to the <span style="font-family: Courier New,Courier,monospace">mousedown</span>, <span style="font-family: Courier New,Courier,monospace">mousemove</span>, and <span style="font-family: Courier New,Courier,monospace">mouseup</span> mouse events.</p>
+<p>These events are similar to the <code>mousedown</code>, <code>mousemove</code>, and <code>mouseup</code> mouse events.</p>
</li>
<li>Touch point coordinate
<p>When a touch event occurs, you can <a href="#retrieve">retrieve the coordinate of the event point occurrence</a>. Because the finger, and consequently the contact area of the screen, is quite large, the retrieved coordinate is the average value of the contact area.</p>
-<p>Since a mobile device has no sub-devices to provide event inputs, you can use gesture events, such as the page turning effect or image drawing, based on the finger movement coordinates of the <span style="font-family: Courier New,Courier,monospace">touchmove</span> event.</p></li>
+<p>Since a mobile device has no sub-devices to provide event inputs, you can use gesture events, such as the page turning effect or image drawing, based on the finger movement coordinates of the <code>touchmove</code> event.</p></li>
<li>Multi-point touch control
-<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <span style="font-family: Courier New,Courier,monospace">touches</span>, <span style="font-family: Courier New,Courier,monospace">targetTouches</span>, and <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attributes). The status stored in the <span style="font-family: Courier New,Courier,monospace">TouchList</span> instance is renewed every time a new touch event occurs.</p></li>
+<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <code>touches</code>, <code>targetTouches</code>, and <code>changedTouches</code> attributes). The status stored in the <code>TouchList</code> instance is renewed every time a new touch event occurs.</p></li>
</ul>
<p>For a practical example of drawing a simple image by using touch events and canvas elements, see the Touch Paint sample task (in <a href="task_touch_paint_mw.htm">mobile</a> and <a href="task_touch_paint_ww.htm">wearable</a> applications).</p>
<ul>
<li>When the user first touches the element and removes their finger from the screen, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events occur.
-<p class="figure">Figure: Simple touch (in mobile applications only)</p>
+<p align="center"><strong>Figure: Simple touch (in mobile applications only)</strong></p>
<p align="center"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p>
</li>
-<li>When the user moves their finger across the element, and then removes their finger, the <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> events occur.
+<li>When the user moves their finger across the element, and then removes their finger, the <code>touchstart</code>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <code>touchend</code> events occur.
-<p class="figure">Figure: Moving touch (in mobile applications only)</p>
+<p align="center"><strong>Figure: Moving touch (in mobile applications only)</strong></p>
<p align="center"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p>
</li>
-<li>When the user long-presses the DOM element, such as text or image, in the element, the <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
-
-<p class="figure">Figure: Cancelling touch with a long press (in mobile applications only)</p>
-<p align="center"><img alt="Cancelling touch with a long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In Tizen, the <span style="font-family: Courier New,Courier,monospace">touchcancel</span> event occurs when a context menu is activated by a long press of a DOM element, such as text or image.</td>
- </tr>
- </tbody>
- </table>
+<li>When the user long-presses the DOM element, such as text or image, in the element, the <code>touchstart</code> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
+
+<p align="center"><strong>Figure: Canceling touch with a long press (in mobile applications only)</strong></p>
+<p align="center"><img alt="Canceling touch with a long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
+
+<div class="note">
+ <strong>Note</strong>
+ In Tizen, the <code>touchcancel</code> event occurs when a context menu is activated by a long press of a DOM element, such as text or image.
+</div>
</li>
</ul>
<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>
+</pre>
</li>
<li>Add event handlers for the defined element:
var touchable = document.querySelector("touchable");
/* touchstart event */
- touchable.addEventListener("touchstart", function(e)
- {
- log.innerHTML = "<p>Touch Event: touchstart</p>";
- }, false);
-
+ 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);
-
+ 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);
-
+ 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);
+ touchable.addEventListener("touchcancel", function(e)
+ {
+ log.innerHTML += "<p>Touch Event: touchcancel</p>";
+ }, false);
</script>
</pre>
</li></ol>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">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 <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method to prevent the basic browser events:
- <pre class="prettyprint">
+<div class="note">
+ <strong>Note</strong>
+ 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)
+ touchable.addEventListener("touchmove", function(e)
{
- log.innerHTML += "<p>Touch Event: touchmove</p>";
- e.preventDefault(); /* Prevent default scroll action */
- }
- }, false);
+ if (event.touches.length >= 1)
+ {
+ log.innerHTML += "<p>Touch Event: touchmove</p>";
+ e.preventDefault(); /* Prevent default scroll action */
+ }
+ }, false);
</script>
-</pre></td>
-</tr>
-</tbody>
-</table>
+</pre>
+</div>
+
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<ul>
/* touchmove event */
touchable.addEventListener("touchmove", phaseCalcul, false);
-
- function phaseCalcul(e)
+
+ 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 +
+ '<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>
-<p>Each time the <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <span style="font-family: Courier New,Courier,monospace">touchmove</span> events to determine the movement direction.
+<p>Each time the <code>touchmove</code> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <code>touchmove</code> events to determine the movement direction.
</p>
</li>
</ol>
<pre class="prettyprint">
<script>
var touchable = document.getElementById("touchable");
-
+
/* touchstart event */
touchable.addEventListener("touchstart", touchStartHandler, false);
-
- function touchStartHandler(e)
+
+ 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 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");
+
+ /* 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";
-
+ 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>
-<p>When a touch events is triggered, its details, such as the event coordinates, identification number, and the subject of the touch, are stored in the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface instance. To access the details, the <span style="font-family: Courier New,Courier,monospace">touches.item()</span> method can be used in an array format.</p>
-<p>A multi-point touch event refers to additional instances being pushed to the <span style="font-family: Courier New,Courier,monospace">touches.item(index)</span> array. For example, the first touch event is pushed to <span style="font-family: Courier New,Courier,monospace">touches.item(0)</span>, and if a second touch event is triggered without removing the first finger from the screen, the second event is pushed to <span style="font-family: Courier New,Courier,monospace">touches.item(1)</span>.
+<p>When a touch events is triggered, its details, such as the event coordinates, identification number, and the subject of the touch, are stored in the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface instance. To access the details, the <code>touches.item()</code> method can be used in an array format.</p>
+<p>A multi-point touch event refers to additional instances being pushed to the <code>touches.item(index)</code> array. For example, the first touch event is pushed to <code>touches.item(0)</code>, and if a second touch event is triggered without removing the first finger from the screen, the second event is pushed to <code>touches.item(1)</code>.
</p>
</li>
</ol>
<ul>
<li>Make a page unscalable:
- <p>If a page is made unscalable, the double-tap gesture is not required for zooming, so the single tap gesture can be processed without delay. To make a page unscalable, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag:</p>
- <pre class="prettyprint"><meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
- maximum-scale=1.0, user-scalable=0"></pre></li>
+ <p>If a page is made unscalable, the double-tap gesture is not required for zooming, so the single tap gesture can be processed without delay. To make a page unscalable, use the <code>viewport</code> meta tag:</p>
+<pre class="prettyprint">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
+ maximum-scale=1.0, user-scalable=0">
+</pre></li>
<li>Modify touch responses
<p>A touch event occurs immediately when the touched point is released, making it faster than the tap event. However, the touch event occurs even though the touched point is moved before releasing.</p>
<ul>
- <li> To avoid processing the gesture when the touched point is moved, check whether the touched point is moved by setting a flag in the <span style="font-family: Courier New,Courier,monospace">touchmove()</span> event handler:
- <pre class="prettyprint"><a id="test" href="#">Click test using touch event</a>
+ <li> To avoid processing the gesture when the touched point is moved, check whether the touched point is moved by setting a flag in the <code>touchmove()</code> event handler:
+<pre class="prettyprint">
+<a id="test" href="#">Click test using touch event</a>
<div id="log"></div>
<script>
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!";
-
- return false;
- });
-</script></pre>
-<p>To avoid activating the click event after the touch event, set the return type to <span style="font-family: Courier New,Courier,monospace">false</span>.</p></li>
-<li> You can also use the <span style="font-family: Courier New,Courier,monospace">vclick</span> event provided by jQuery Mobile. The <span style="font-family: Courier New,Courier,monospace">vclick</span> event is based on the touch event and generated only if the touched point is not moved.
-<pre class="prettyprint"><a id="test" href="#">Click test using touch event</a>
+ $('#test').on('touchend', function(e)
+ {
+ if (!moved)
+ $('#log').innerHTML = "Test link is clicked!";
+
+ 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>
+<li> You can also use the <code>vclick</code> event provided by jQuery Mobile. The <code>vclick</code> event is based on the touch event and generated only if the touched point is not moved.
+<pre class="prettyprint">
+<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;
- });
-</script></pre>
+ return false;
+ });
+</script>
+</pre>
</li>
</ul></li></ul>
<p>This feature is supported in mobile and wearable applications only.</p>
-<p>The vibration interface is implemented by all <span style="font-family: Courier New,Courier,monospace">Navigator</span> instances. With the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method parameters, you can define different vibration types:</p>
+<p>The vibration interface is implemented by all <code>Navigator</code> instances. With the <code>vibrate()</code> method parameters, you can define different vibration types:</p>
<ul>
<li>Continuous vibration for a given length of time
-<p>The <span style="font-family: Courier New,Courier,monospace">time</span> parameter defines the vibration time in milliseconds.</p></li>
+<p>The <code>time</code> parameter defines the vibration time in milliseconds.</p></li>
<li>Vibration in a given pattern
-<p>The <span style="font-family: Courier New,Courier,monospace">pattern</span> parameter defines a vibration pattern as a list of time entries. Odd entries represent the vibration time in milliseconds, and even entries represent still periods in milliseconds between the vibrations.</p></li>
+<p>The <code>pattern</code> parameter defines a vibration pattern as a list of time entries. Odd entries represent the vibration time in milliseconds, and even entries represent still periods in milliseconds between the vibrations.</p></li>
</ul>
<h2 id="manage" name="manage">Managing Vibrations</h2>
<p>To enhance the user interaction with the device, learn to manage vibrations:</p>
<ol>
-<li>To launch a vibration for a given length of time, call the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method, which is implemented by all <span style="font-family: Courier New,Courier,monospace">Navigator</span> instances:
+<li>To launch a vibration for a given length of time, call the <code>vibrate()</code> method, which is implemented by all <code>Navigator</code> instances:
<pre class="prettyprint lang-html">
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8" />
- <meta name="viewport"
+ <meta charset="utf-8"/>
+ <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Tizen Vibration API Example code</title>
-
- <script></pre><pre class="prettyprint lang-js">
+
+ <script>
+</pre>
+<pre class="prettyprint lang-js">
function singleVibration()
{
/* Vibrate for 2 seconds */
}
</pre>
</li>
-<li>To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method parameter:
+<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]);
- }
+ }
</pre>
</li>
-<li>To stop the vibration before it ends naturally, use the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method with <span style="font-family: Courier New,Courier,monospace">0</span> or <span style="font-family: Courier New,Courier,monospace">[]</span> as a parameter. The method call cancels all existing vibrations.
+<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);
- }
+ }
</pre>
</li>
<li>Create the buttons used to manage the vibrations:
<nav style="width: 100%; text-align: center;">
<!--Button click calls singleVibration()-->
- <button onclick="singleVibration();"
+ <button onclick="singleVibration();"
style="width: 200px; height: 50px; margin-bottom: 10px">
Single vibration
</button>
<!--Button click calls patternVibration()-->
- <button onclick="patternVibration();"
+ <button onclick="patternVibration();"
style="width: 200px; height: 50px; margin-bottom: 10px">
Pattern vibration
</button>
<!--Button click calls stopVibration()-->
- <button onclick="stopVibration();"
+ <button onclick="stopVibration();"
style="width: 200px; height: 50px">
Stop vibration
</button>
<p>You can use a canvas to <a href="#text">create text or lines</a> other than images and shapes.</p>
</li>
</ul>
-<p>For all canvas objects (images, shapes, text, and lines), you can define colors (the <span style="font-family: Courier New,Courier,monospace">fillStyle</span> and <span style="font-family: Courier New,Courier,monospace">strokeStyle</span> attributes), shadows (the <span style="font-family: Courier New,Courier,monospace">shadowColor</span> and <span style="font-family: Courier New,Courier,monospace">shadowBlur</span> attributes), and gradation (the <span style="font-family: Courier New,Courier,monospace">createLinearGradient()</span> method). You can also use the transformation methods, such as <span style="font-family: Courier New,Courier,monospace">scale()</span>, <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">transform()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate()</span>, to implement, for example, transparency or shape gradient transformations.</p>
+<p>For all canvas objects (images, shapes, text, and lines), you can define colors (the <code>fillStyle</code> and <code>strokeStyle</code> attributes), shadows (the <code>shadowColor</code> and <code>shadowBlur</code> attributes), and gradation (the <code>createLinearGradient()</code> method). You can also use the transformation methods, such as <code>scale()</code>, <code>translate()</code>, <code>transform()</code>, and <code>rotate()</code>, to implement, for example, transparency or shape gradient transformations.</p>
<p>In mobile applications only, in HTML5, the HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.
</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL</a>.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL</a>.
+</div>
<p>For a practical example of using canvas contexts to create and display a clock on the canvas, see the <a href="task_basicwatch_w.htm">Basic Watch</a> wearable sample task.</p>
<p>To create a canvas in your application:</p>
<ol>
-<li>Create a <span style="font-family: Courier New,Courier,monospace"><canvas></span> element with the HTML5 Canvas Element API.
+<li>Create a <code><canvas></code> element with the HTML5 Canvas Element API.
<p>The canvas assigns the region (canvas context) where images are drawn with JavaScript.</p>
<pre class="prettyprint">
-<canvas width="300" height="300" id="canvas">
+<canvas width="300" height="300" id="canvas">
This browser is not supported
</canvas>
</pre>
-<p>If no <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> attributes are inserted, the default value is <span style="font-family: Courier New,Courier,monospace">width: 300px, height: 150px</span>.</p>
+<p>If no <code>width</code> and <code>height</code> attributes are inserted, the default value is <code>width: 300px, height: 150px</code>.</p>
</li>
-<li>To check the information of the image connected to the canvas, use the <span style="font-family: Courier New,Courier,monospace">toDataURL([Optional], [Variadic])</span> method to restore the URL of the image used in the canvas. To create a blob object of the image file, use the <span style="font-family: Courier New,Courier,monospace">getContext(contextId)</span> method.
+<li>To check the information of the image connected to the canvas, use the <code>toDataURL([Optional], [Variadic])</code> method to restore the URL of the image used in the canvas. To create a blob object of the image file, use the <code>getContext(contextId)</code> method.
</li>
<li>Use the <a href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/#canvasrenderingcontext2d" target="_blank">CanvasRenderingContext2D</a> interface to connect to the canvas and get the canvas context:
<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:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">save()</span>: Pushes the current state onto the stack.</li>
-<li><span style="font-family: Courier New,Courier,monospace">restore()</span>: Pops the top state on the stack, restoring the context to that state.</li>
+<li><code>save()</code>: Pushes the current state onto the stack.</li>
+<li><code>restore()</code>: Pops the top state on the stack, restoring the context to that state.</li>
</ul>
</li>
</ol>
-<p>There is a need to separately check whether the canvas 2D context can be used by using the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method:</p>
+<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))
+if (!(canvas.getContext))
{
alert("This browser is not supported");
}
</ul>
<h2 id="image" name="image">Using Images on the Canvas</h2>
-<p>To use images in the canvas, use the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method of the HTML Canvas 2D Context API. The method receives information, such as the image URL and position, and where it is indicated, and then creates the image in the canvas. The created image is pixel-based.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To edit the created image, you must comply with the same-origin policy.</td>
- </tr>
- </tbody>
-</table>
+<p>To use images in the canvas, use the <code>drawImage()</code> method of the HTML Canvas 2D Context API. The method receives information, such as the image URL and position, and where it is indicated, and then creates the image in the canvas. The created image is pixel-based.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ To edit the created image, you must comply with the same-origin policy.
+</div>
<p>To use images on a canvas:</p>
<ol><li>
- <p>Use the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method to express an image in the canvas.</p>
+ <p>Use the <code>drawImage()</code> method to express an image in the canvas.</p>
<p>When you define the URL of the image to be imported and its coordinates, the original image is imported as it is. You can hide certain parts of the image by assigning its size accordingly.</p>
-<pre class="prettyprint">/* Draw the image by setting its size */
+<pre class="prettyprint">
+/* Draw the image by setting its size */
context.drawImage(image, 30, 130, 130, 30);
context.drawImage(image, 200, 100, 80, 60);
context.drawImage(image, 0, 10, 40, 60, 190, 205, 40, 60);
</pre></li>
-<li><p>When the image is connected to the canvas, extract the color value through the <span style="font-family: Courier New,Courier,monospace">getImageData()</span> method. Re-input the transformed values with the <span style="font-family: Courier New,Courier,monospace">putImageData()</span> method.</p>
+<li><p>When the image is connected to the canvas, extract the color value through the <code>getImageData()</code> method. Re-input the transformed values with the <code>putImageData()</code> method.</p>
<pre class="prettyprint">
/* Import the image with the required coordinates */
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)
+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 */
+/* Insert the converted image back to the canvas */
context.putImageData(transImage, 30, 20);
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">CanvasTransformation</span> interface to transform the selected object, for example, its size, angle, or position. By connecting to the image used in the canvas, you can also rotate it. (The following figure applies to mobile applications only.)
+<li><p>Use the <code>CanvasTransformation</code> interface to transform the selected object, for example, its size, angle, or position. By connecting to the image used in the canvas, you can also rotate it. (The following figure applies to mobile applications only.)
</p>
<pre class="prettyprint">
context.drawImage(image, 30, 20);
context.restore();
-/* Move the (0, 0) reference axis coordinates of the canvas */
+/* Move the (0, 0) reference axis coordinates of the canvas */
context.beginPath();
context.translate(50, 100);
context.drawImage(image, 30, 20);
context.beginPath();
context.rotate(45 * Math.PI/180);
context.drawImage(image, 70, 20);
-context.restore();</pre>
+context.restore();
+</pre>
<p align="center"><img alt="Using images on the canvas (in mobile applications only)" src="../../../images/canvas_using_images.png" /></p>
</li></ol>
<h3>Source Code</h3>
</ul>
<h2 id="shape" name="shape">Drawing Shapes to the Canvas</h2>
-<p>With the HTML Canvas 2D Context API, you can draw various shapes, such as rectangles (<span style="font-family: Courier New,Courier,monospace">rect()</span>), circles (<span style="font-family: Courier New,Courier,monospace">arc()</span> and <span style="font-family: Courier New,Courier,monospace">arcTo()</span>), and lines (<span style="font-family: Courier New,Courier,monospace">lineTo()</span> and <span style="font-family: Courier New,Courier,monospace">bezierCurveTo()</span>), to a canvas. You can define the position and size of the shapes, and also merge shapes with other shape objects.</p>
+<p>With the HTML Canvas 2D Context API, you can draw various shapes, such as rectangles (<code>rect()</code>), circles (<code>arc()</code> and <code>arcTo()</code>), and lines (<code>lineTo()</code> and <code>bezierCurveTo()</code>), to a canvas. You can define the position and size of the shapes, and also merge shapes with other shape objects.</p>
<p>To create and draw shapes on a canvas:</p>
<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">rect()</span> method to create a rectangle.
+<li>Use the <code>rect()</code> method to create a rectangle.
<p>Use the canvas context to assign the rectangle attributes, such as position and size. (The following figure applies to mobile applications only.)</p>
<pre class="prettyprint">
<p align="center"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">arc()</span> method to create a circle.
+<li>Use the <code>arc()</code> method to create a circle.
<p>Use the canvas context to assign the circle attributes, such as position and radius. (The following figure applies to mobile applications only.)</p>
<pre class="prettyprint">
-/* Create a circle */
+/* Create a circle */
context.beginPath();
context.arc(80, 80, 50, 0, 1.5 * Math.PI);
context.fill();
context.arc(230, 80, 50, 0, 1 * Math.PI);
context.stroke();
-/* Create line A */
+/* Create line A */
context.moveTo(20, 300);
context.lineTo(100, 200);
/* Connect the line A end coordinates to the line B start coordinates */
context.arcTo(150, 50, 100, 100, 50);
-/* Draw line B */
+/* Draw line B */
context.lineTo(300, 200);
-context.stroke();</pre>
+context.stroke();
+</pre>
<p align="center"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">CanvasTransformation</span> interface to transform the created shapes. With compositing, a certain part of the shape can be made transparent. (The following figure applies to mobile applications only.)</p>
+<li><p>Use the <code>CanvasTransformation</code> interface to transform the created shapes. With compositing, a certain part of the shape can be made transparent. (The following figure applies to mobile applications only.)</p>
<pre class="prettyprint">
-/* Display the relevant area */
+/* Display the relevant area */
context.rect(50, 20, 100, 120);
context.stroke();
context.clip();
context.beginPath();
context.arc(150, 150, 100, 0, 2 * Math.PI);
-/* Fill the shape */
+/* Fill the shape */
context.fillStyle = 'tomato';
</pre>
<p align="center"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p>
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For a canvas, the rendering occurs in the order from the back of the input source.</td>
- </tr>
- </tbody>
- </table>
- <h3>Source Code</h3>
+<div class="note">
+ <strong>Note</strong>
+ For a canvas, the rendering occurs in the order from the back of the input source.
+</div>
+
+<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial3.html</a></li>
<pre class="prettyprint">
<canvas id="canvas" width="600" height="300"></canvas>
<input type="button" value="Small brush" id="smallBrush"/>
-<input type="button" value="Big brush" id="bigBrush"/></pre>
+<input type="button" value="Big brush" id="bigBrush"/>
+</pre>
</li>
<li>Define the CSS style for the background image:
</pre>
</li>
-<li>Declare the JavaScript variables needed in the application. The <span style="font-family: Courier New,Courier,monospace">lastX</span> and <span style="font-family: Courier New,Courier,monospace">lastX</span> variables indicate the last position of a user event. The <span style="font-family: Courier New,Courier,monospace">mouseBtn</span> variable indicates whether a button or touch event has occurred, and the <span style="font-family: Courier New,Courier,monospace">brushSize</span> variable indicates the current brush size.
+<li>Declare the JavaScript variables needed in the application. The <code>lastX</code> and <code>lastX</code> variables indicate the last position of a user event. The <code>mouseBtn</code> variable indicates whether a button or touch event has occurred, and the <code>brushSize</code> variable indicates the current brush size.
<pre class="prettyprint">
-var lastX = 0,
- lastX = 0,
- mouseBtn = false,
+var lastX = 0,
+ lastX = 0,
+ mouseBtn = false,
brushSize = 4;
var canvas, context;
</pre>
</li>
<li>Initialize the canvas:
-<pre class="prettyprint">window.onload = function()
+<pre class="prettyprint">
+window.onload = function()
{
canvas = document.getElementById('canvas');
context = canvas.getContext("2d");
{
return;
}
-}</pre>
+}
+</pre>
</li>
-<li>Draw an image on the canvas using the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method. The user is able to replace the image with another using a brush.
-<p>Create a new <span style="font-family: Courier New,Courier,monospace">Image</span> object, including the path of the image file. Define the line width to be based on the brush size selected by the user.</p>
+<li>Draw an image on the canvas using the <code>drawImage()</code> method. The user is able to replace the image with another using a brush.
+<p>Create a new <code>Image</code> object, including the path of the image file. Define the line width to be based on the brush size selected by the user.</p>
<pre class="prettyprint">
var img = new Image();
img.addEventListener('load', function()
-{
- context.drawImage(img, 0, 0);
-});
+ {
+ context.drawImage(img, 0, 0);
+ });
img.src = "images/TizenPinwheelArrows.png";
context.lineWidth = brushSize;
-context.lineCap = 'round';</pre>
+context.lineCap = 'round';
+</pre>
</li>
<li>Define the button events and brushes:
<pre class="prettyprint">
/* Define the big brush similarly */
</pre></li>
<li>Add event listeners to detect touch and mouse events:
-<pre class="prettyprint">canvas.addEventListener('touchstart', startDraw);
+<pre class="prettyprint">
+canvas.addEventListener('touchstart', startDraw);
canvas.addEventListener('touchmove', drawStep);
-canvas.addEventListener('touchend', stopDraw);
+canvas.addEventListener('touchend', stopDraw);
canvas.addEventListener('mouseout', stopDraw);
/* Event listeners for mouse events */
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <span style="font-family: Courier New,Courier,monospace">mousedown</span> events only store the event coordinates, the <span style="font-family: Courier New,Courier,monospace">touchmove</span> and <span style="font-family: Courier New,Courier,monospace">mousemove</span> events define the position and direction of the drawing, and the <span style="font-family: Courier New,Courier,monospace">touchend</span> and <span style="font-family: Courier New,Courier,monospace">mouseup</span> events indicate that the user event ends, as illustrated in the following figure.</p>
+<p>The <code>touchstart</code> and <code>mousedown</code> events only store the event coordinates, the <code>touchmove</code> and <code>mousemove</code> events define the position and direction of the drawing, and the <code>touchend</code> and <code>mouseup</code> events indicate that the user event ends, as illustrated in the following figure.</p>
<p align="center"><img alt="Drawing events" src="../../../images/drawing_line_sequence.png" /></p>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">updateLastPos()</span> method to update the <span style="font-family: Courier New,Courier,monospace">lastX</span> and <span style="font-family: Courier New,Courier,monospace">lastY</span> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <span style="font-family: Courier New,Courier,monospace">'touch'</span> string indicates that the event is a touch event.
+<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)
{
</pre>
</li>
-<li>When the user starts drawing, the <span style="font-family: Courier New,Courier,monospace">touchstart</span> or <span style="font-family: Courier New,Courier,monospace">mousedown</span> event calls the <span style="font-family: Courier New,Courier,monospace">startDraw()</span> 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 <span style="font-family: Courier New,Courier,monospace">true</span>.
-<pre class="prettyprint">function startDraw(e)
+<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';
</pre>
</li>
-<li>While the user is drawing, the <span style="font-family: Courier New,Courier,monospace">touchmove</span> and <span style="font-family: Courier New,Courier,monospace">mousemove</span> events are handled with the <span style="font-family: Courier New,Courier,monospace">drawStep()</span> method based on the button state retrieved from the <span style="font-family: Courier New,Courier,monospace">mouseBtn</span> variable. The <span style="font-family: Courier New,Courier,monospace">drawStep()</span> method calls the <span style="font-family: Courier New,Courier,monospace">updateLastPos()</span> method only when the mouse or finger is being moved. Use the <span style="font-family: Courier New,Courier,monospace">stroke()</span> method to make the drawn line visible.
-<pre class="prettyprint">function drawStep(e)
+<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)
{
}
</pre>
</li>
-<li>When the touch event ends or the mouse button is released, use the <span style="font-family: Courier New,Courier,monospace">stopDraw()</span> method to stop drawing:
-<pre class="prettyprint">function stopDraw(e)
-{
+<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;
}
<ol>
-<li><p>To draw a line, use the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method to assign the beginning point of the line, and the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method to assign the end point of the line. The <span style="font-family: Courier New,Courier,monospace">stroke()</span> method draws the full line. </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";
</pre></li>
<li>
<p>When adding text on the canvas, use various attributes and methods to define how the text looks and where it is located. </p>
-<p>The <span style="font-family: Courier New,Courier,monospace">font</span> attribute defines the font style, and the <span style="font-family: Courier New,Courier,monospace">textBaseline</span> attribute the vertical alignment of the text.</p>
+<p>The <code>font</code> attribute defines the font style, and the <code>textBaseline</code> attribute the vertical alignment of the text.</p>
<pre class="prettyprint">
context.font = 'italic 400 22px/2 sans-serif';
context.stroke();
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">textAlign</span> attribute and the <span style="font-family: Courier New,Courier,monospace">fillText()</span> method to position the text in the assigned location:</p>
+<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";
</pre></li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When drawing multiple images in a canvas, indicate the starting point with the <span style="font-family: Courier New,Courier,monospace">beginPath()</span> method to prevent unforeseen errors. </td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ When drawing multiple images in a canvas, indicate the starting point with the <code>beginPath()</code> method to prevent unforeseen errors.
+</div>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
<li>Create the applications with the following logic:
<ol type="a"><li>Load an image.</li>
<li>Render the loaded image in the random location of the canvas.</li>
-<li>Use the <
span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>
+<li>Use the <
code>requestAnimationFrame()</code> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>
<li>Create a logic that measures FPS (frames per second) in order to check the performance.</li></ol></li>
<li>Execute the applications and measure the FPS.</li>
<li>Increase only the number of objects so that the same 1~N images, under the same conditions, are shown repeatedly based on 1~N.</li>
<p>The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases when compared to WebGL (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL than the Canvas 2D Context API.</p>
- <p class="figure">Figure: Test result</p>
+ <p align="center"><strong>Figure: Test result</strong></p>
<p align="center"><img alt="Test result" src="../../../images/comp_test_result.png" /></p>
<p>There is one problem with using WebGL; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p>
- <p class="figure">Figure: WebGL support in computer and mobile browsers</p>
+ <p align="center"><strong>Figure: WebGL support in computer and mobile browsers</strong></p>
<p align="center"><img alt="WebGL support in computer and mobile browsers" src="../../../images/comp_test_support.png" /></p>
<p>Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 SVG</h1>
-<p>The SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an <span style="font-family: Courier New,Courier,monospace">svg</span> tag is used in the XML format, and can be added as an inline element in HTML.</p>
+<p>The SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an <code>svg</code> tag is used in the XML format, and can be added as an inline element in HTML.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>For more information on using SVG, see <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/" target="_blank">Scalable Vector Graphics (SVG) Tiny 1.2 Specification</a>.</p>
<h2 id="svg_tag">Creating Text and Images</h2>
-<p>To create text and images, use the <span style="font-family: Courier New,Courier,monospace">svg</span> tag in HTML <span style="font-family: Courier New,Courier,monospace"><body></span> element:</p>
+<p>To create text and images, use the <code>svg</code> tag in HTML <code><body></code> element:</p>
<ul>
<li>Text
<p>Define the textual content and the location on the screen:</p>
<p>Define the image file, the image location on the screen, and the image size:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg">
- <image xlink:href="http://developer.tizen.org/sites/all/themes/tizen_theme/logo.png"
- x="10" y="10" width="224" height="74" />
-</svg></pre>
+ <image xlink:href="http://developer.tizen.org/sites/all/themes/tizen_theme/logo.png"
+ x="10" y="10" width="224" height="74"/>
+</svg>
+</pre>
</li>
</ul>
<p>To create shapes as inline SVG elements:</p>
<ol>
-<li>Create the SVG element with the <span style="font-family: Courier New,Courier,monospace">svg</span> tag.</li>
+<li>Create the SVG element with the <code>svg</code> tag.</li>
<li>Use the graphic elements to create various shapes. The absolute coordinates of the graphics element determine the size of the SVG. You can define the shape, size, location on the screen, line width, and the line and fill colors for the shapes.
<ul>
-<li><p>To create a line between 2 assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace"><line></span> element:</p>
+<li><p>To create a line between 2 assigned coordinates, use the <code><line></code> element:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <line x1="20" y1="20" x2="220" y2="120" stroke="blue" stroke-width="5" />
+ <line x1="20" y1="20" x2="220" y2="120" stroke="blue" stroke-width="5"/>
</svg>
</pre></li>
-<li><p>To create a rectangle at the assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace"><rect></span> element:</p>
+<li><p>To create a rectangle at the assigned coordinates, use the <code><rect></code> element:</p>
<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" />
+ <rect x="1" y="1" width="120" height="40"
+ fill="blue" stroke="red" stroke-width="2"/>
</svg>
</pre></li>
-<li><p>To create a circle with the assigned barycentric coordinate and radius, use the <span style="font-family: Courier New,Courier,monospace"><circle></span> element:</p>
+<li><p>To create a circle with the assigned barycentric coordinate and radius, use the <code><circle></code> element:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <circle cx="150" cy="100" r="50" fill="blue" stroke="red" stroke-width="3" />
+ <circle cx="150" cy="100" r="50" fill="blue" stroke="red" stroke-width="3"/>
</svg>
</pre></li>
-<li><p>To create an ellipse with the assigned barycentric coordinate and the X and Y axis radius, use the <span style="font-family: Courier New,Courier,monospace"><ellipse></span> element:</p>
+<li><p>To create an ellipse with the assigned barycentric coordinate and the X and Y axis radius, use the <code><ellipse></code> element:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <ellipse cx="130" cy="80" rx="125" ry="50" fill="blue" />
+ <ellipse cx="130" cy="80" rx="125" ry="50" fill="blue"/>
</svg>
</pre></li>
-<li><p>To create a polygon comprised of a set of assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace"><polygon></span> element:</p>
+<li><p>To create a polygon comprised of a set of assigned coordinates, use the <code><polygon></code> element:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <polygon fill-rule="evenodd" fill="blue" stroke="black"
- points="148,16 116,96 196,48 100,48 180,96" />
+ <polygon fill-rule="evenodd" fill="blue" stroke="black"
+ points="148,16 116,96 196,48 100,48 180,96"/>
</svg>
</pre></li></ul></li></ol>
<h3>Source Code</h3>
<p>To group inline SVG elements:</p>
<ol>
-<li><p>Combine various SVG elements in a group using the <span style="font-family: Courier New,Courier,monospace"><g></span> container element, whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute must be defined.</p>
+<li><p>Combine various SVG elements in a group using the <code><g></code> container element, whose <code>id</code> attribute must be defined.</p>
<p>If you assign a presentation attribute to the group, all the child elements inherit it. For example, in the example below, the stroke color black is defined for the group, which means that both the rectangle and circle elements within the group use the black stroke color.</p>
<pre class="prettyprint">
</g>
</pre></li>
<li>
-<p>You can reference the group using the <span style="font-family: Courier New,Courier,monospace">id</span> attribute:</p>
+<p>You can reference the group using the <code>id</code> attribute:</p>
<pre class="prettyprint">
<use xlink:href="#shape-group" x="20" y="40"/>
</svg>
</pre></li>
-<li><p>If you have multiple groups, use the <span style="font-family: Courier New,Courier,monospace"><defs></span> element as a container for them:</p>
+<li><p>If you have multiple groups, use the <code><defs></code> element as a container for them:</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px">
<ol>
<li>
-<p>To animate a specific element attribute based on time, use the <span style="font-family: Courier New,Courier,monospace"><animate></span> element:</p>
+<p>To animate a specific element attribute based on time, use the <code><animate></code> element:</p>
<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>
-<li><p>To change the (fill or line) color of the element, use the <span style="font-family: Courier New,Courier,monospace"><animateColor></span> element:</p>
+<li><p>To change the (fill or line) color of the element, use the <code><animateColor></code> element:</p>
<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>
-<li><p>To create a motion animation, use the <span style="font-family: Courier New,Courier,monospace"><animateMotion></span> element. The element assigns the parent element to the <span style="font-family: Courier New,Courier,monospace"><mpath></span> as reference element, and animates according to the shape of the <span style="font-family: Courier New,Courier,monospace"><mpath></span> element.</p>
+<li><p>To create a motion animation, use the <code><animateMotion></code> element. The element assigns the parent element to the <code><mpath></code> as reference element, and animates according to the shape of the <code><mpath></code> element.</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <path d="M-12.5, -6.75 L12.5, -6.75 L0, -43.75 z"
+ <path d="M-12.5, -6.75 L12.5, -6.75 L0, -43.75 z"
fill="blue" stroke="gray" stroke-width="3">
- <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+ <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
- <path id="path1" d="M25, 100 Q50, 20 75, 70 T135, 70 T185, 70 T235, 70 T275, 70"
- fill="none" stroke="blue" stroke-width="3" />
+ <path id="path1" d="M25, 100 Q50, 20 75, 70 T135, 70 T185, 70 T235, 70 T275, 70"
+ fill="none" stroke="blue" stroke-width="3"/>
</svg>
</pre></li></ol>
<h3>Source Code</h3>
<li>Define an SVG element:
<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" />
+ <rect x="1" y="1" width="120" height="40" fill="blue"
+ stroke="red" stroke-width="2"/>
</svg>
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace"><script></span> element to handle events related to the SVG elements.</p>
-<p>The script usage is similar to handling DOM as a script. The following example controls the SVG element's <span style="font-family: Courier New,Courier,monospace">width</span> attribute through the click event.
+<li><p>Use the <code><script></code> element to handle events related to the SVG elements.</p>
+<p>The script usage is similar to handling DOM as a script. The following example controls the SVG element's <code>width</code> attribute through the click event.
</p>
<pre class="prettyprint">
var rectElemt = document.getElementById('rect')
rectElemt].addEventListener('click', rect_click);
- function rect_click(event)
+ function rect_click(event)
{
var target = event.target
var targetWidth = target.getAttribute("width");
- if (targetWidth == 120)
+ if (targetWidth == 120)
{
target.setAttribute("width", targetWidth * 2);
- }
- else
+ }
+ else
{
target.setAttribute("width", targetWidth * 0.5);
};
<p>The BasicWatch sample application layout contains only 1 screen: the main screen that displays the clock.</p>
<p>The following figure shows the main screen of the application.</p>
- <p class="figure">Figure: BasicWatch screen</p>
+ <p align="center"><strong>Figure: BasicWatch screen</strong></p>
<p align="center"><img alt="BasicWatch screen" src="../../../images/basicwatch_sd.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
+ <ol>
+ <li><strong>index.html Source File</strong>
<p>The main screen displays a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element on which the watch face and needles are placed.</p>
<pre class="prettyprint lang-html">
<head>
<title>Canvas Clock - Canvas API Tutorial</title>
- <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<canvas class="canvas"></canvas>
<script src="js/main.js"></script>
</body>
</pre> </li>
-<li>main.js Source File
+<li><strong>main.js Source File</strong>
<ol type="a">
<li>
<p>Create the clock in the middle of the canvas. Define the watch face style.</p>
<pre class="prettyprint">
-function renderDots()
+function renderDots()
{
'use strict';
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.beginPath();
- context.fillStyle = '#999999';
+ context.fillStyle = '#999999';
</pre></li>
-<li><p>Create 4 dots on the sides of the watch face and use the <span style="font-family: Courier New,Courier,monospace">fill()</span> method to style the dots.</p>
+<li><p>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots.</p>
<pre class="prettyprint">
- for (i = 1; i <= 4; i++)
+ for (i = 1; i <= 4; i++)
{
angle = (i - 3) * (Math.PI * 2) / 4;
dx = clockRadius * 0.9 * Math.cos(angle);
<h2 id="initialize" name="initialize">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File
+ <ol>
+ <li><strong>config.xml Source File</strong>
<p>Define the application category.</p>
-
<pre class="prettyprint">
-<tizen:category name="http://tizen.org/category/wearable_clock" />
+<pre class="prettyprint">
+<tizen:category name="http://tizen.org/category/wearable_clock"/>
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">
- <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <span style="font-family: Courier New,Courier,monospace"><tizen:category name="com.samsung.wmanager.WATCH_CLOCK" /></span> instead of <span style="font-family: Courier New,Courier,monospace"><tizen:category name="http://tizen.org/category/wearable_clock" /></span>.</p></td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code><tizen:category name="com.samsung.wmanager.WATCH_CLOCK"/></code> instead of <code><tizen:category name="http://tizen.org/category/wearable_clock"/></code>.
+</div>
</li>
- <li>main.js Source File
+ <li><strong>main.js Source File</strong>
<ol type="a">
<li>
- <p>Modify the <span style="font-family: Courier New,Courier,monospace">window.requestAnimationFrame()</span> method to make the application compatible with the main browsers.</p>
-
<pre class="prettyprint">
+ <p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers.</p>
+<pre class="prettyprint">
window.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
- function(callback)
+ function(callback)
{
'use strict';
window.setTimeout(callback, 1000 / 60);
- };</pre>
+ };
+</pre>
</li>
<li>
<p>Initialize the canvas context and define the canvas area.</p>
-
<pre class="prettyprint">
-window.onload = function()
+<pre class="prettyprint">
+window.onload = function()
{
'use strict';
clockRadius = document.width / 2;
canvas.width = document.width;
- canvas.height = canvas.width;</pre>
+ canvas.height = canvas.width;
+</pre>
</li>
<li>
<p>Define an event listener to detect back key events.</p>
- <pre class="prettyprint">
- window.addEventListener('tizenhwkey', function(e)
- {
- if (e.keyName == 'back')
+<pre class="prettyprint">
+ window.addEventListener('tizenhwkey', function(e)
{
- tizen.application.getCurrentApplication().exit();
- }
- });
+ if (e.keyName == 'back')
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ });
window.requestAnimationFrame(watch);
-};</pre>
+};
+</pre>
</li>
</ol>
</li>
<h3 id="needle" name="needle">Creating the Clock Needles</h3>
-The clock needles are rendered in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.
- <ol class="tutorstep">
- <li>Rendering the Clock Needles
-<p>The needles can be created using the <span style="font-family: Courier New,Courier,monospace">renderNeedle()</span> method.</p>
- <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. To assign the rest of the points of the triangle or polygon, use the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method.</p>
+The clock needles are rendered in the <code>main.js</code> file.
+ <ol>
+ <li><strong>Rendering the Clock Needles</strong>
+<p>The needles can be created using the <code>renderNeedle()</code> method.</p>
+ <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
<pre class="prettyprint">
-function renderNeedle(angle, radius)
+function renderNeedle(angle, radius)
{
'use strict';
context.save();
context.restore();
}
</pre></li>
- <li>Creating the Hour Needle
-<p>To create the hour needle, use the <span style="font-family: Courier New,Courier,monospace">renderHourNeedle()</span> method.</p>
+ <li><strong>Creating the Hour Needle</strong>
+<p>To create the hour needle, use the <code>renderHourNeedle()</code> method.</p>
<pre class="prettyprint">
-function renderHourNeedle(hour)
+function renderHourNeedle(hour)
{
'use strict';
renderNeedle(angle, radius);
}
</pre></li>
- <li>Creating the Minute Needle
-<p>To create the minute needle, use the <span style="font-family: Courier New,Courier,monospace">renderMinuteNeedle()</span> method.</p>
+ <li><strong>Creating the Minute Needle</strong>
+<p>To create the minute needle, use the <code>renderMinuteNeedle()</code> method.</p>
<pre class="prettyprint">
function renderMinuteNeedle(minute)
{
</ol>
<h3 id="current" name="current">Indicating the Current Time</h3>
-<p>The time displaying functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
- <li>Determining the Time
-<p>Use the <span style="font-family: Courier New,Courier,monospace">new Date()</span> method to find out the current time. To point the needles accurately, define variables for the current hour and minute.</p>
+<p>The time displaying functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+ <li><strong>Determining the Time</strong>
+<p>Use the <code>new Date()</code> method to find out the current time. To point the needles accurately, define variables for the current hour and minute.</p>
<pre class="prettyprint">
-function watch()
+function watch()
{
'use strict';
minute = minutes + seconds / 60;
nextMove = 1000 - date.getMilliseconds();
</pre></li>
-<li>Erasing the Previous Time
-<p>Use the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> method to delete the previous time (the previously positioned needles) every time a new time is indicated. </p>
+<li><strong>Erasing the Previous Time</strong>
+<p>Use the <code>clearRect()</code> method to delete the previous time (the previously positioned needles) every time a new time is indicated. </p>
<pre class="prettyprint">
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
</pre></li>
-<li>Pointing the Clock Needles
+<li><strong>Pointing the Clock Needles</strong>
<p>Display the current time.</p>
<pre class="prettyprint">
renderMinuteNeedle(minute);
context.restore();
- setTimeout(function()
- {
- window.requestAnimationFrame(watch);
- }, nextMove);
-}</pre></li></ol>
+ setTimeout(function()
+ {
+ window.requestAnimationFrame(watch);
+ }, nextMove);
+}
+</pre></li></ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1>Geolocation API Specification</h1>
-<p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <span style="font-family: Courier New,Courier,monospace">Navigator</span> object instances. The location information is represented by the latitude and longitude coordinates.</p>
+<p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <code>Navigator</code> object instances. The location information is represented by the latitude and longitude coordinates.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-<p>Using the <span style="font-family: Courier New,Courier,monospace">Geolocation</span> interface, you can <a href="#Retrieving_Location_Info">retrieve position information</a> with "one-shot" position requests (with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method) or repeated position updates (with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method). Both methods take the following parameters:</p>
+<p>Using the <code>Geolocation</code> interface, you can <a href="#Retrieving_Location_Info">retrieve position information</a> with "one-shot" position requests (with the <code>getCurrentPosition()</code> method) or repeated position updates (with the <code>watchPosition()</code> method). Both methods take the following parameters:</p>
<ul>
<li>Success event handler, which is a function invoked when an attempt to obtain the current location is successful.</li>
<li>Error event handler, which is a function invoked when an attempt to obtain the current location fails (optional).</li>
<li>Options object, which holds additional properties (optional):
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">enableHighAccuracy</span> enables high accuracy of the location information.</li>
-<li><span style="font-family: Courier New,Courier,monospace">timeout</span> defines the maximum length of time that is allowed to pass from the call until the corresponding success event handler is invoked.</li>
-<li><span style="font-family: Courier New,Courier,monospace">maximumAge</span> indicates that the application can accept cached location information whose age is no greater than the specified time.</li>
+<li><code>enableHighAccuracy</code> enables high accuracy of the location information.</li>
+<li><code>timeout</code> defines the maximum length of time that is allowed to pass from the call until the corresponding success event handler is invoked.</li>
+<li><code>maximumAge</code> indicates that the application can accept cached location information whose age is no greater than the specified time.</li>
</ul>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In almost all cases, the location information reveals the location of the device user. To provide privacy for the user, a confirmation mechanism is provided for the geolocation features.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ In almost all cases, the location information reveals the location of the device user. To provide privacy for the user, a confirmation mechanism is provided for the geolocation features.
+</div>
<h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info">Retrieving Location Information</h2>
<p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>
<ol>
<li>Create event handlers for the location requests.
- <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#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 <span style="font-family: Courier New,Courier,monospace">position</span> parameter that hold the actual position information.</p>
+ <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#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)
+<pre class="prettyprint">
+function successCallback(position)
{
- document.getElementById("locationInfo").innerHTML = "Latitude: " +
- position.coords.latitude + "<br/>Longitude: " + position.coords.longitude;
+ document.getElementById("locationInfo").innerHTML =
+ "Latitude: " + position.coords.latitude
+ + "<br/>Longitude: " + position.coords.longitude;
}
-function errorCallback(error)
+function errorCallback(error)
{
var errorInfo = document.getElementById("locationInfo");
- switch (error.code)
+ switch (error.code)
{
- case error.PERMISSION_DENIED:
+ case error.PERMISSION_DENIED:
errorInfo.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
errorInfo.innerHTML = "An unknown error occurred.";
break;
}
-}</pre>
+}
+</pre>
</li>
- <li>Create a "one-shot" position request with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method.
- <p>The <span style="font-family: Courier New,Courier,monospace">maximumAge</span> 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()
+ <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)
+ if (navigator.geolocation)
{
- navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
+ navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{maximumAge: 60000});
- }
- else
+ }
+ else
{
- document.getElementById("locationInfo").innerHTML = "Geolocation is not supported.";
+ 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 <span style="font-family: Courier New,Courier,monospace">maximumAge</span> and <span style="font-family: Courier New,Courier,monospace">timeout</span> parameters together (<span style="font-family: Courier New,Courier,monospace">{maximumAge: Infinity, timeout: 0}</span>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>
+}
+</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 <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method:
-
<pre class="prettyprint">
-function watchFunc()
+ <li>Create a repeated position update request with the <code>watchPosition()</code> method:
+<pre class="prettyprint">
+function watchFunc()
{
- if (navigator.geolocation)
+ if (navigator.geolocation)
{
watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
- }
- else
+ }
+ else
{
- document.getElementById("locationInfo").innerHTML = "Geolocation is not supported.";
+ document.getElementById("locationInfo").innerHTML =
+ "Geolocation is not supported.";
}
-}</pre>
+}
+</pre>
</li>
- <li>The repeated position update request continues until the <span style="font-family: Courier New,Courier,monospace">clearWatch()</span> method is called with the corresponding identifier:
-
<pre class="prettyprint">
-function stopWatchFunc()
+ <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)
+ if (navigator.geolocation)
{
navigator.geolocation.clearWatch(watchId);
- }
- else
+ }
+ else
{
- document.getElementById("locationInfo").innerHTML = "Geolocation is not supported.";
+ document.getElementById("locationInfo").innerHTML =
+ "Geolocation is not supported.";
}
-}</pre>
+}
+</pre>
</li>
</ol>
<p>The following figure illustrates the GPS application.</p>
- <p class="figure">Figure: GPS application (in mobile applications only)</p>
+ <p align="center"><strong>Figure: GPS application (in mobile applications only)</strong></p>
<p align="center"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
<h3>Source Code</h3>
<p>The main features of the getUserMedia API include:</p>\r
<ul>\r
<li>Retrieving multimedia streams\r
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to request user access to <a href="#access">retrieve the multimedia streams</a> of local devices, such as camera. The method returns the media as a JSON object.</p> </li>
\r+<p>You can use the <
code>navigator.webkitGetUserMedia()</code> method to request user access to <a href="#access">retrieve the multimedia streams</a> of local devices, such as camera. The method returns the media as a JSON object.</p> </li>
\r <li>Capturing media\r
<p>You can <a href="#capture">capture media content</a> and transform it to various formats.</p>\r
-\r
</li>\r
</ul>\r
\r
-<table class="note">\r
- <tbody>\r
- <tr>\r
- <th class="note">Note</th>\r
- </tr>\r
- <tr>\r
- <td class="note">Tizen supports a WebKit-based <span style="font-family: Courier New,Courier,monospace">GetUserMedia()</span> method, so always use it in the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> format.</td>\r
- </tr>\r
- </tbody>\r
- </table>\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Tizen supports a WebKit-based <code>GetUserMedia()</code> method, so always use it in the <code>webkitGetUserMedia()</code> format.\r
+</div>\r
\r
<p>For a practical example of displaying a camera video stream and capturing images from it, see the <a href="task_selfcamera_w.htm">Self Camera</a> mobile sample task.</p>\r
\r
<li>Create the HTML5 video element (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">wearable</a> applications) and a button used to control audio stream access:\r
<pre class="prettyprint">\r
<body>\r
- <video id="videoPlay" src="" autoplay controls></video><br/>\r
+ <video id="videoPlay" src="" autoplay controls ></video><br/>\r
<input type="button" value="START" onclick="getVideoStream();" id="btnStart"/>\r
</body>\r
</pre>\r
</li>\r
-<li>Use the <span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to derive audio streams:\r
+<li>Use the <code>navigator.webkitGetUserMedia()</code> method to derive audio streams:\r
<pre class="prettyprint">\r
-<script> \r
- function getVideoStream() \r
+<script>\r
+ function getVideoStream()\r
{\r
- navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack); \r
+ navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);\r
}\r
</script>\r
</pre>\r
</li>\r
\r
<li>Retrieve audio stream information and create stream URL: \r
-
<pre class="prettyprint">
\r+<pre class="prettyprint">\r
<script>\r
- function SuccessCallback(stream) \r
- { \r
+ function SuccessCallback(stream)\r
+ {\r
var URL = window.webkitURL;\r
- document.getElementById("videoPlay").src = URL.createObjectURL(stream); \r
- } \r
+ document.getElementById("videoPlay").src = URL.createObjectURL(stream);\r
+ }\r
</script>\r
</pre>\r
</li>\r
\r
<p>Learning how to capture a frame and display it in a video element is a basic user media management skill:</p>\r
<ol>\r
-<li><p>Create a <a href="../graphics/canvas_w.htm">canvas</a> element and use the <span style="font-family: Courier New,Courier,monospace">getCapture()</span> method to capture a frame:</p>\r
+<li><p>Create a <a href="../graphics/canvas_w.htm">canvas</a> element and use the <code>getCapture()</code> method to capture a frame:</p>\r
\r
<pre class="prettyprint">\r
<body>\r
<video id="videoView" src="" autoplay></video><br/>\r
<img id="imgView" src="">\r
- <canvas id="canvasView" style="display: none;" width="300" height="225"></canvas><br/>\r
- <input type="button" value="WebCamStart" onclick="getVideoStream();" id="btnPlay"/>\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
<input type="button" value="Capture" onclick="getCapture();" id="btnCapture"/>\r
</body>\r
</pre>\r
</li>\r
\r
-<li><p>Enable rendering of the retrieved media stream by calling the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> method:</p>\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
+ function getVideoStream()\r
{\r
navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);\r
}\r
- function SuccessCallBack(stream) \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
+ function ErrorCallBack(e)\r
{\r
/* Error handling */\r
- } \r
+ }\r
</script>\r
</pre>\r
</li>\r
\r
-<li><p>Display the captured frame in a <a href="video_audio_w.htm">video</a> element using the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method: </p>\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
+ var localStream = "";\r
+ function getCapture()\r
{\r
- if (localStream) \r
+ if (localStream)\r
{\r
var canvas = document.getElementById("canvasView");\r
var context = canvas.getContext('2d');\r
<div id="container"><div id="contents"><div class="content">\r
<h1>HTML Media Capture</h1>\r
\r
-<p>Media capture uses the <
span style="font-family: Courier New,Courier,monospace">capture</span> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>
\r+<p>Media capture uses the <
code>capture</code> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>
\r \r
<p>This feature is supported in mobile applications only.</p> \r
\r
-<p>The following media formats can be used with the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute:</p>\r
+<p>The following media formats can be used with the <code>capture</code> attribute:</p>\r
<ul>\r
-<li><
span style="font-family: Courier New,Courier,monospace">filesystem</span> <p>Activates the device file picker.</p></li>
\r-<li><
span style="font-family: Courier New,Courier,monospace">camera</span> <p>Activates the device camera.</p></li>
\r-<li><
span style="font-family: Courier New,Courier,monospace">camcorder</span> <p>Activates the device video camera.</p></li>
\r-<li><
span style="font-family: Courier New,Courier,monospace">microphone</span><p>Activates the device sound recorder.</p></li>
\r+<li><
code>filesystem</code> <p>Activates the device file picker.</p></li>
\r+<li><
code>camera</code> <p>Activates the device camera.</p></li>
\r+<li><
code>camcorder</code> <p>Activates the device video camera.</p></li>
\r+<li><
code>microphone</code><p>Activates the device sound recorder.</p></li>
\r </ul>\r
\r
<h2 id="activate" name="Creating_Web_Worker">Activating the Media Capture</h2>\r
<p>To provide users with the HTML media capture feature, you must learn to activate the media capture feature by selecting the file type during file upload:</p>\r
\r
<ol>\r
-<li><p>Activate the media capture feature by adding the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute to the <span style="font-family: Courier New,Courier,monospace"><input></span> element: \r
+<li><p>Activate the media capture feature by adding the <code>capture</code> attribute to the <code><input></code> element: \r
</p>\r
\r
<pre class="prettyprint">\r
<p align="center"><img alt="File types" src="../../../images/media_capture_file_types.png" /></p>\r
</li>\r
<li>\r
-<p>Assign format, such as <span style="font-family: Courier New,Courier,monospace">filesystem</span>, <span style="font-family: Courier New,Courier,monospace">camera</span>, or <span style="font-family: Courier New,Courier,monospace">camcorder</span>:</p>\r
+<p>Assign format, such as <code>filesystem</code>, <code>camera</code>, or <code>camcorder</code>:</p>\r
\r
<pre class="prettyprint">\r
<input type="file" accept="audio/*" capture="camera"/>\r
</pre>\r
\r
<p>\r
- If the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute does not exist or the value has not been entered, the <span style="font-family: Courier New,Courier,monospace">filesystem</span> format is activated. If the <span style="font-family: Courier New,Courier,monospace">camera</span> or <span style="font-family: Courier New,Courier,monospace">camcorder</span> format is selected, the device camera is activated.</p>\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">In the current version of the Tizen Studio, the <span style="font-family: Courier New,Courier,monospace">microphone</span> format for the capture attribute is not available as the voice recorder application is not included.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+ If the <code>capture</code> attribute does not exist or the value has not been entered, the <code>filesystem</code> format is activated. If the <code>camera</code> or <code>camcorder</code> format is selected, the device camera is activated.</p>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ In the current version of the Tizen Studio, the <code>microphone</code> format for the capture attribute is not available as the voice recorder application is not included.\r
+</div>\r
+\r
<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#attr-input-accept" target="_blank">accept</a> attribute indicates which file types are appropriate. If used with a device that has a camera, it activates the device camera. With a device without a camera, it activates the My photo folder.</p>\r
<p align="center"><img alt="Activating media features" src="../../../images/media_capture_activating_features.png" /></p>\r
\r
<li><a href="getusermedia_w.htm">getUserMedia</a> <strong>in mobile and wearable applications only</strong>\r
<p>Enables you to access a local device to generate a multimedia stream.</p></li> \r
<li><a href="video_audio_w.htm">HTML5 video and audio element</a> <strong>in mobile and wearable applications only</strong>\r
- <p>Enables you to control multimedia playback, retrieve information about playback duration and media content downloading progress, and check supported media formats using the HTML5 <span style="font-family: Courier New,Courier,monospace"><audio></span> and <span style="font-family: Courier New,Courier,monospace"><video></span> elements.</p></li>\r
+ <p>Enables you to control multimedia playback, retrieve information about playback duration and media content downloading progress, and check supported media formats using the HTML5 <code><audio></code> and <code><video></code> elements.</p></li>\r
<li><a href="media_capture_w.htm">HTML Media Capture</a> <strong>in mobile applications only</strong>\r
- <p>Enables you to easily access the media capture capabilities, such as a camera or microphone, based on their type using the HTML <span style="font-family: Courier New,Courier,monospace">capture</span> attribute.</p></li> \r
+ <p>Enables you to easily access the media capture capabilities, such as a camera or microphone, based on their type using the HTML <code>capture</code> attribute.</p></li> \r
<li><a href="webaudio_w.htm">Web Audio</a> <strong>in mobile applications only</strong>\r
- <p>Enables you to play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace"><audio></span> element.</p></li>\r
+ <p>Enables you to play audio content using the HTML5 <code><audio></code> element.</p></li>\r
</ul>\r
\r
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
<li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
<li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
<li><a href="#handle">Handling the Keys</a> defines how to create the piano object.</li>
- <li><a href="#play">Playing Sounds</a> defines how to use the <span style="font-family: Courier New,Courier,monospace;">audio</span> element to play sounds.</li>
+ <li><a href="#play">Playing Sounds</a> defines how to use the <code>audio</code> element to play sounds.</li>
</ul>
<p>This sample is a fully functional application for playing a piano. The user can use multi-touch to play a combination of sounds from a single octave.</p>
<p>The Piano sample application layout contains only 1 screen: the main screen that displays the piano keyboard.</p>
<p>The following figure shows the main screen of the application.</p>
- <p class="figure">Figure: Piano screen</p>
+ <p align="center"><strong>Figure: Piano screen</strong></p>
<p align="center"><img alt="Piano screen" src="../../../images/piano.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
-<p>The main screen displays a piano keyboard. The keys are defined as <span style="font-family: Courier New,Courier,monospace;"><div></span> elements whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">button</span>.</p>
+ <ol>
+ <li><strong>index.html Source File</strong>
+<p>The main screen displays a piano keyboard. The keys are defined as <code><div></code> elements whose <code>class</code> attribute is set to <code>button</code>.</p>
<pre class="prettyprint lang-html">
<body ondragstart="return false" onselectstart="return false">
<div class="button black_btn" style="left: 95%" id="play13"></div>
</body>
-</pre> </li>
-<li>style.css Source File
+</pre></li>
+<li><strong>style.css Source File</strong>
<p>The appearance of the key buttons is defined in the CSS file.</p>
<pre class="prettyprint">
-.white_btn
+.white_btn
{
background: url('../white.png') bottom center no-repeat transparent;
height: 100%;
margin: 0;
}
-.white_btn.pressed
+.white_btn.pressed
{
background-image: url('../white_pressed.png');
}
-.black_btn
+.black_btn
{
float: left;
background: url('../black.png') bottom center no-repeat transparent;
top: 0px;
}
-.black_btn.pressed
+.black_btn.pressed
{
background-image: url('../black_pressed.png');
}
-</pre> </li>
+</pre></li>
</ol>
<h2 id="initialize" name="initialize">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
<li>
- <p>The <
span style="font-family: Courier New,Courier,monospace;">piano</span> variable is declared to create the <span style="font-family: Courier New,Courier,monospace;">Piano</span> object. A keyword is determined for optimizing browser performance and validating JavaScript. Elements are defined for storing the piano key element object IDs and corresponding <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> elements.</p>
-
<pre class="prettyprint">
+ <p>The <
code>piano</code> variable is declared to create the <code>Piano</code> object. A keyword is determined for optimizing browser performance and validating JavaScript. Elements are defined for storing the piano key element object IDs and corresponding <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> elements.</p>
+<pre class="prettyprint">
var piano;
-function Piano()
+function Piano()
{
- "use strict";
+ "use strict";
}
-function()
+function()
{
"use strict";
- Piano.prototype =
+ Piano.prototype =
{
touchPianoKey: [],
lockIds: {},
blackCache: null
}
};
- </pre>
+</pre>
</li>
<li>
- <p>The <
span style="font-family: Courier New,Courier,monospace;">audioInit()</span> method is used to create and initialize the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> element for each keyboard button. The element contains an event listener to detect button events.</p>
-
<pre class="prettyprint">
-Piano.prototype.audioInit = function audioInit()
+ <p>The <
code>audioInit()</code> method is used to create and initialize the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> element for each keyboard button. The element contains an event listener to detect button events.</p>
+<pre class="prettyprint">
+Piano.prototype.audioInit = function audioInit()
{
var i, self = this;
- for (i = 0; i <= 13; i += 1)
+ for (i = 0; i <= 13; i += 1)
{
this.audio[i] = document.createElement('audio');
this.audio[i].name = i;
});
}
};
- </pre>
+</pre>
</li>
</ol>
</li>
</ol>
<h2 id="handle" name="handle">Handling the Keys</h2>
- <p>The event handling functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating Event Listeners
+ <p>The event handling functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+ <li><strong>Creating Event Listeners</strong>
<ol type="a"><li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">onPianoKeyTouchDown()</span> event listener is created to detect the touch event, when the user presses a piano key.</p>
+<p>The <code>onPianoKeyTouchDown()</code> event listener is created to detect the touch event, when the user presses a piano key.</p>
<pre class="prettyprint">
-Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data)
+Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data)
{
data.originalEvent.preventDefault();
var element, touch, i, len;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
+ for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
{
touch = data.originalEvent.changedTouches[i];
element = document.elementFromPoint(touch.clientX, touch.clientY);
- if (element)
+ if (element)
{
- if (this.touchPianoKey[touch.identifier] !== element.id)
+ if (this.touchPianoKey[touch.identifier] !== element.id)
{
- $('#' + this.touchPianoKey[touch.identifier]).removeClass('pressed');
- this.playAudioByElement(element, touch.identifier, function()
+ $('#' +
+ this.touchPianoKey[touch.identifier]).removeClass('pressed');
+ this.playAudioByElement(element, touch.identifier, function()
{
this.lockIds[element.id] = true;
});
}
}
};
-</pre> </li>
+</pre></li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">onPianoKeyTouchUp()</span> event listener is created to detect the touch event, when the user releases a piano key.</p>
+<p>The <code>onPianoKeyTouchUp()</code> event listener is created to detect the touch event, when the user releases a piano key.</p>
<pre class="prettyprint">
-Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data)
+Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data)
{
var i, touchId, len, buttonId;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
+ for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
{
/* Get the number assigned to the finger touching the screen */
touchId = data.originalEvent.changedTouches[i].identifier;
buttonId = this.touchPianoKey[touchId];
- setTimeout(function()
- {
- (function(id)
+ setTimeout(function()
{
- $('#' + id).removeClass('pressed');
- })
- (buttonId);
- }, 100);
+ (function(id) {$('#' + id).removeClass('pressed');})
+ (buttonId);
+ }, 100);
this.touchPianoKey[touchId] = undefined;
}
};
-</pre> </li>
+</pre></li>
</ol>
</li>
- <li>Binding Events
-<p>The <span style="font-family: Courier New,Courier,monospace;">bindEvents()</span> method is used to register event handlers to the corresponding events.</p>
+ <li><strong>Binding Events</strong>
+<p>The <code>bindEvents()</code> method is used to register event handlers to the corresponding events.</p>
<pre class="prettyprint">
-Piano.prototype.bindEvents = function bindEvents()
+Piano.prototype.bindEvents = function bindEvents()
{
var self = this;
- $(".button").bind('touchstart touchmove', function(e)
- {
- self.onPianoKeyTouchDown(e);
- });
- $(".button").bind('touchend', function(e)
- {
- self.onPianoKeyTouchUp(e);
- });
- $('#back').bind('touchstart', function(event)
- {
- event.preventDefault();
- event.stopPropagation();
- /* Apply CSS style dynamically */
- $(this).addClass('active');
- tizen.application.getCurrentApplication().exit();
- });
+ $(".button").bind('touchstart touchmove', function(e)
+ {
+ self.onPianoKeyTouchDown(e);
+ });
+ $(".button").bind('touchend', function(e)
+ {
+ self.onPianoKeyTouchUp(e);
+ });
+ $('#back').bind('touchstart', function(event)
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ /* Apply CSS style dynamically */
+ $(this).addClass('active');
+ tizen.application.getCurrentApplication().exit();
+ });
- $('#back').bind('touchend', function(event)
- {
- /* Cancel the applied CSS style */
- $(this).removeClass('active');
- });
+ $('#back').bind('touchend', function(event)
+ {
+ /* Cancel the applied CSS style */
+ $(this).removeClass('active');
+ });
- document.addEventListener('webkitvisibilitychange', function()
- {
- if (document.webkitVisibilityState === 'visible')
+ document.addEventListener('webkitvisibilitychange', function()
{
- self.audioInit()
- }
- })
+ if (document.webkitVisibilityState === 'visible')
+ {
+ self.audioInit()
+ }
+ })
};
-</pre> </li>
+</pre></li>
</ol>
<h2 id="play" name="play">Playing Sounds</h2>
<p>This section builds upon the elements described in <a href="video_audio_w.htm#play">Playing Media Files</a>.</p>
- <ol class="tutorstep">
- <li>main.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">playAudioByElement()</span> method is used to play the sound determined in the <span style="font-family: Courier New,Courier,monospace;">audio</span> element, when a given key button is pressed.</p>
+ <ol>
+ <li><strong>main.js Source File</strong>
+<p>The <code>playAudioByElement()</code> method is used to play the sound determined in the <code>audio</code> element, when a given key button is pressed.</p>
<pre class="prettyprint">
-Piano.prototype.playAudioByElement = function playAudioByElement(element, touchId, callback)
+Piano.prototype.playAudioByElement =
+ function playAudioByElement(element, touchId, callback)
{
var audio = this.audio[element.id.substr(4)];
$(element).addClass('pressed');
this.touchPianoKey[touchId] = element.id;
- if (audio)
+ if (audio)
{
- if (audio.paused)
+ if (audio.paused)
{
audio.play();
}
- if (audio.currentTime !== 0)
+ if (audio.currentTime !== 0)
{
audio.currentTime = 0;
}
- if (callback instanceof Function)
+ if (callback instanceof Function)
{
callback.call(this);
}
}
};
-</pre> </li>
+</pre></li>
</ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>The following figure shows the main screen of the application.</p>
- <p class="figure">Figure: SelfCamera screen</p>
+ <p align="center"><strong>Figure: SelfCamera screen</strong></p>
<p align="center"><img alt="SelfCamera screen" src="../../../images/selfcamera.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
- <li>index.html Source File
- <p>The <span style="font-family: Courier New,Courier,monospace">
-<div></span> elements are used to define the camera elements for the screen.</p>
- <pre class="prettyprint">
+ <ol>
+ <li><strong>index.html Source File</strong>
+ <p>The <code><div></code> elements are used to define the camera elements for the screen.</p>
+<pre class="prettyprint">
<body>
<div id="camera"></div>
<div id="shutter-container">
<div id="shutter"></div>
</div>
-</body></pre> </li>
-<li> css/style.css Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">
-style.css</span> file defines the positions and styles of the camera elements.</p>
+</body>
+</pre></li>
+<li><strong>css/style.css Source File</strong>
+<p>The <code>
+style.css</code> file defines the positions and styles of the camera elements.</p>
<pre class="prettyprint">
#camera
{
</pre></li></ol>
<h2 id="configure" name="configure">Initializing the Application</h2>
- <ol class="tutorstep">
- <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. </p> <pre class="prettyprint"><!--Configuration file content-->
+ <ol>
+ <li><strong>config.xml Source File</strong>
+ <p>The required privileges are declared in the <code>config.xml</code> file. </p>
+<pre class="prettyprint">
+<!--Configuration file content-->
<widget ...>
<!--Other configuration details-->
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
<tizen:privilege name="http://tizen.org/privilege/content.read"/>
<tizen:privilege name="http://tizen.org/privilege/content.write"/>
-</widget></pre> </li>
+</widget>
+</pre></li>
</ol>
<h2 id="stream" name="stream">Accessing the Camera Stream</h2>
<h3 id="app" name="app">Managing the Application Object</h3>
- <p>The application object functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
- <ol class="tutorstep">
- <li>Creating and Initializing the Application Object
+ <p>The application object functionality is implemented in the <code>main.js</code> file.</p>
+ <ol>
+ <li><strong>Creating and Initializing the Application Object</strong>
<ol type="a">
-<li>The <span style="font-family: Courier New,Courier,monospace">SelfCamera</span> object represents the entire application entity, and by using the prototype, the member methods are registered in the object.
+<li>The <code>SelfCamera</code> object represents the entire application entity, and by using the prototype, the member methods are registered in the object.
-
<pre class="prettyprint">
+<pre class="prettyprint">
var selfCamera;
function SelfCamera()
{
isMediaWorking: false
previewLock: false
};
-}</pre></li>
+}
+</pre></li>
- <li>The <span style="font-family: Courier New,Courier,monospace">SelfCamera</span> object is created and initialized.
+ <li>The <code>SelfCamera</code> object is created and initialized.
-
<pre class="prettyprint">
+<pre class="prettyprint">
selfCamera = new SelfCamera();
$(document).ready(function()
{
"use strict";
selfCamera.init();
-}); </pre></li>
+});
+</pre></li>
</ol></li>
-<li>Binding Events to the Application Object
+<li><strong>Binding Events to the Application Object</strong>
<ol type="a">
-<li><p>To bind video events to the application object, call the <span style="font-family: Courier New,Courier,monospace">bindVideoEvents()</span> method, which registers the event handlers to the corresponding events using the <span style="font-family: Courier New,Courier,monospace">bind()</span> method.</p>
-
<pre class="prettyprint">
+<li><p>To bind video events to the application object, call the <code>bindVideoEvents()</code> method, which registers the event handlers to the corresponding events using the <code>bind()</code> method.</p>
+<pre class="prettyprint">
SelfCamera.prototype.bindVideoEvents = function()
{
var self = this;
};
</pre></li>
-<li><p>To bind button and hardware key events to the application object, call the <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> method, which register the event handlers to the corresponding events using the <span style="font-family: Courier New,Courier,monospace">bind()</span> method.</p>
-
<pre class="prettyprint">
+<li><p>To bind button and hardware key events to the application object, call the <code>bindEvents()</code> method, which register the event handlers to the corresponding events using the <code>bind()</code> method.</p>
+<pre class="prettyprint">
SelfCamera.prototype.bindEvents = function bindEvents()
{
var self = this;
$('shutter').mousedown(function(ev) {$('shutter').addClass('active');})
.mouseup(function(ev) {$('shutter').removeClass('active');})
- .on('touchstart', function(ev) {$('shutter').addClass('active');})
- .on('touchend', function(ev) {$('shutter').removeClass('active');});
+ .on('touchstart',
+ function(ev) {$('shutter').addClass('active');})
+ .on('touchend',
+ function(ev) {$('shutter').removeClass('active');});
$(window).on('tizenhwkey', function(e)
{
$('#thumbnail').on('click', this.launchPreview.bind(this));
$('#shutter').on('touchstart', this.shutterTouched.bind(this));
-};</pre>
+};
+</pre>
</li></ol></li></ol>
<h3 id="access" name="access">Accessing the Camera Stream</h3>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
- <li> The <span style="font-family: Courier New,Courier,monospace">startPreview()</span> method requests the video stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method of the navigator.
-
<pre class="prettyprint">
+ <li> The <code>startPreview()</code> method requests the video stream using the <code>getUserMedia()</code> method of the navigator.
+<pre class="prettyprint">
navigator.getUserMedia(options, this.onCaptureVideoSuccess.bind(this),
this.onCaptureVideoError.bind(this));
</pre></li>
-<li>The <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess()</span> event handler obtains the stream URL and creates the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">video element</a> with the <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> method.
-
<pre class="prettyprint">
+<li>The <code>onCaptureVideoSuccess()</code> event handler obtains the stream URL and creates the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">video element</a> with the <code>createVideoElement()</code> method.
+<pre class="prettyprint">
SelfCamera.prototype.onCaptureVideoSuccess = function onCaptureVideoSuccess(stream)
{
var urlStream;
urlStream = window.webkitURL.createObjectURL(stream); /* Create stream */
this.isMediaWorking = true;
- this.createVideoElement(urlStream); /* Create video element with stream handler */
+ /* Create video element with stream handler */
+ this.createVideoElement(urlStream);
this.setTimer(DELAY_2_SECOND); /* Initialize timer button options */
};
</pre></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> method defines the video element, except for the <span style="font-family: Courier New,Courier,monospace">
-src</span> attribute, which is already defined by the <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess()</span> event handler.</p>
- <pre class="prettyprint">SelfCamera.prototype.createVideoElement = function(src)
+<li><p>The <code>createVideoElement()</code> method defines the video element, except for the <code>
+src</code> attribute, which is already defined by the <code>onCaptureVideoSuccess()</code> event handler.</p>
+<pre class="prettyprint">
+SelfCamera.prototype.createVideoElement = function(src)
{
this.video = $('<video/>',
{
}).appendTo("#camera").get(0);
this.bindVideoEvents();
-};</pre>
+};
+</pre>
</li>
</ol></li> </ol>
<h2 id="capture" name="capture">Capturing Pictures from Video</h2>
- <ol class="tutorstep">
- <li>main.js Source File
+ <ol>
+ <li><strong>main.js Source File</strong>
<ol type="a">
<li>Capture a video frame with canvas.
-
<pre class="prettyprint">
+<pre class="prettyprint">
SelfCamera.prototype.captureImage = function captureImage(video)
{
var sourceWidth = window.innerWidth,
this.img.getContext('2d').drawImage(video, sourceX, sourceY,
$(video).width(), $(video).height());
- /* For the best available dimension, use the following: */
- /* this.img.width = video.videoWidth; */
- /* this.img.height = video.videoHeight; */
- /* this.img.getContext('2d').drawImage(video, 0, 0); */
+ /*
+ For the best available dimension, use the following:
+ this.img.width = video.videoWidth;
+ this.img.height = video.videoHeight;
+ this.img.getContext('2d').drawImage(video, 0, 0);
+ */
};
-</pre> </li>
+</pre></li>
<li>Extract the image data from the canvas.
-
<pre class="prettyprint">
+<pre class="prettyprint">
SelfCamera.prototype.saveCanvas = function saveCanvas(canvas, fileName)
{
var data, self = this,
function() {/* Error handling */});
}.bind(this);
- data = canvas.toDataURL().replace('data:image/png;base64,', '').replace('data:,', '');
+ data = canvas.toDataURL().replace('data:image/png;base64,', '')
+ .replace('data:,', '');
this.systemIO.saveFileContent(fileName, data, onSuccess, 'base64');
-};</pre></li>
+};
+</pre></li>
<li>Save the image.
-
<pre class="prettyprint">
+<pre class="prettyprint">
saveFileContent: function SystemIO_saveFileContent(filePath, fileContent,
onSaveSuccess, fileEncoding)
{
if (fileHandle !== false)
{
/* Save data into the file */
- self.writeFile(fileHandle, fileContent, onSaveSuccess, false, fileEncoding);
+ self.writeFile(fileHandle, fileContent, onSaveSuccess,
+ false, fileEncoding);
}
}
/* Open the directory */
this.openDir(pathData.dirName, onOpenDirSuccess);
-};</pre>
+};
+</pre>
</li></ol></li></ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<div id="container"><div id="contents"><div class="content">\r
<h1>HTML5 video and audio element</h1>\r
\r
-<p>You can use the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements to play multimedia files streaming, without a separate plug-in.</p>\r
+<p>You can use the HTML5 <code>audio</code> and <code>video</code> elements to play multimedia files streaming, without a separate plug-in.</p>\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
<li>Creating a player\r
<p>You can <a href="#create">create a simple audio and video player</a>.</p></li>\r
<li>Controlling the playback\r
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">Play()</span> and <span style="font-family: Courier New,Courier,monospace">Pause()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r+<p>You can use the <
code>Play()</code> and <code>Pause()</code> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r </li>\r
<li>Retrieving duration and play time\r
<p>You can <a href="#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration, and video's width and height) is loaded.</p>\r
</li>\r
<li>Playing from a random position\r
-<p>You can indicate the playback time by <a href="#move">playing the media file from a random position</a>. To do this, you must change the <
span style="font-family: Courier New,Courier,monospace">currentTime</span> value of the <span style="font-family: Courier New,Courier,monospace">Media</span> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>
\r+<p>You can indicate the playback time by <a href="#move">playing the media file from a random position</a>. To do this, you must change the <
code>currentTime</code> value of the <code>Media</code> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>
\r </li>\r
<li>Retrieving progress state\r
-<p>You can <a href="#display">retrieve and display the download progress state</a> using the <span style="font-family: Courier New,Courier,monospace">Progress</span> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>\r
+<p>You can <a href="#display">retrieve and display the download progress state</a> using the <code>Progress</code> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>\r
<li>Resizing the video screen\r
<p>You can <a href="#resize">resize the video screen</a> to offer different viewing options for the user.</p></li>\r
<li>Checking supported media formats\r
-<p>You can <a href="#check">check whether the media data can be played</a> using the <
span style="font-family: Courier New,Courier,monospace">canPlayType()</span> method. Basically, the MIME type must be set in the Web server in a format that is supported in Tizen. If a non-supported MIME type is used, you can <a href="#handle">handle exceptions</a> in advance.</p>
\r+<p>You can <a href="#check">check whether the media data can be played</a> using the <
code>canPlayType()</code> method. Basically, the MIME type must be set in the Web server in a format that is supported in Tizen. If a non-supported MIME type is used, you can <a href="#handle">handle exceptions</a> in advance.</p>
\r </li>\r
</ul>\r
\r
</p>\r
<ol>\r
<li>\r
-<p>To create an audio player, create an <span style="font-family: Courier New,Courier,monospace">audio</span> element including the necessary attributes:</p>\r
+<p>To create an audio player, create an <code>audio</code> element including the necessary attributes:</p>\r
<pre class="prettyprint">\r
<audio id="audio" src="media/audio_sample.mp3"\r
preload="auto" controls muted loop autoplay>\r
<p align="center"><img alt="Audio player" src="../../../images/video_audio3.png" /></p>\r
</li>\r
<li>\r
-<p>To create a video player, create a <span style="font-family: Courier New,Courier,monospace">video</span> element including the necessary attributes. In addition to the attributes available for the <span style="font-family: Courier New,Courier,monospace">audio</span> element, you can also use the <span style="font-family: Courier New,Courier,monospace">width</span>, <span style="font-family: Courier New,Courier,monospace">height</span>, and <span style="font-family: Courier New,Courier,monospace">poster</span> attributes.</p>\r
+<p>To create a video player, create a <code>video</code> element including the necessary attributes. In addition to the attributes available for the <code>audio</code> element, you can also use the <code>width</code>, <code>height</code>, and <code>poster</code> attributes.</p>\r
<pre class="prettyprint">\r
<video id="video" src="media/video_sample.mp4"\r
- width="400" height="220" poster="media/poster_sample.png" \r
+ width="400" height="220" poster="media/poster_sample.png"\r
preload="auto" controls muted loop>\r
</video>\r
</pre>\r
-<p>A player with a play control (built-in control provided in the \r
-browser) is created. The control is visible only when the <span style="font-family: Courier New,Courier,monospace">controls</span> attribute is added. If the <span style="font-family: Courier New,Courier,monospace">poster</span> attribute is not defined, the video's first frame is shown on the screen before the playback. The following figure shows the video player before and during playback.\r
+<p>A player with a play control (built-in control provided in the browser) is created. The control is visible only when the <code>controls</code> attribute is added. If the <code>poster</code> attribute is not defined, the video's first frame is shown on the screen before the playback. The following figure shows the video player before and during playback.\r
</p>\r
<p align="center"><img alt="Video player before playback" src="../../../images/video_audio1.png" /> <img alt="Video player during playback" src="../../../images/video_audio2.png" /></p>\r
</li>\r
</ol> \r
\r
-\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">preload</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">auto</span> by default, meaning that the media metadata is automatically loaded. If you do not want to load the metadata, set the attribute value as <span style="font-family: Courier New,Courier,monospace">metadata</span> or <span style="font-family: Courier New,Courier,monospace">none</span>.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ The <code>preload</code> attribute is set to <code>auto</code> by default, meaning that the media metadata is automatically loaded. If you do not want to load the metadata, set the attribute value as <code>metadata</code> or <code>none</code>.\r
+</div>\r
\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Carefully consider before using the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-media-autoplay" target="_blank">autoplay</a> feature, which plays content automatically in the mobile environment without user interaction. The user can face unintended Internet packet fees or interfering factors, such as playback being stopped unintentionally.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Carefully consider before using the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-media-autoplay" target="_blank">autoplay</a> feature, which plays content automatically in the mobile environment without user interaction. The user can face unintended Internet packet fees or interfering factors, such as playback being stopped unintentionally.\r
+</div>\r
+\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following files:</p>\r
<ul>\r
<p>To provide users with HTML5 audio and video features, you must learn to play and pause media files using custom controls:</p>\r
\r
<ol>\r
-<li>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the play and pause:\r
+<li>Create the <code>video</code> element and buttons used to control the play and pause:\r
<pre class="prettyprint lang-html">\r
<div class="media">\r
<video id="video" src="media/video_sample.mp4"></video>\r
<div>\r
<button id="v-play" type="button">play</button>\r
- <button id="v-pause" type="button" disabled>pause</button> \r
+ <button id="v-pause" type="button" disabled >pause</button>\r
</div>\r
</div>\r
</pre>\r
<p>The <strong>Pause</strong> button is disabled until the play event occurs.</p>\r
</li>\r
-<li>Define the button functions. Play and pause the media file using the <
span style="font-family: Courier New,Courier,monospace">play()</span> and <span style="font-family: Courier New,Courier,monospace">pause()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.
\r+<li>Define the button functions. Play and pause the media file using the <
code>play()</code> and <code>pause()</code> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.
\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
+\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
</pre>\r
</li>\r
\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
+\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
</script>\r
</pre>\r
\r
-<p class="figure">Figure: Playing files (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: Playing files (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Playing files (in mobile applications only)" src="../../../images/video_audio4.png" /></p> \r
</li>\r
</ol>\r
\r
\r
<p>To provide users with HTML5 audio and video features, you must learn to retrieve the total duration and playing time of a media file:</p>\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">The media file metadata can only be retrieved, if it is loaded in the application. The <span style="font-family: Courier New,Courier,monospace">preload</span> attribute is must be set to <span style="font-family: Courier New,Courier,monospace">auto</span>, or the <span style="font-family: Courier New,Courier,monospace">autoplay</span> attribute be set as <span style="font-family: Courier New,Courier,monospace">true</span>.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ The media file metadata can only be retrieved, if it is loaded in the application. The <code>preload</code> attribute is must be set to <code>auto</code>, or the <code>autoplay</code> attribute be set as <code>true</code>.\r
+</div>\r
<ol>\r
-<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and the elements to display the total duration and playing time of the file:</p>\r
+<li><p>Create the <code>video</code> element and the elements to display the total duration and playing time of the file:</p>\r
<pre class="prettyprint">\r
<div class="media">\r
<h1>Play Time Example</h1>\r
<video id="video" src="media/video_sample.mp4" controls preload="auto"></video>\r
<div class="log">Current Play Time: <span id="currentTime"></span></div>\r
<div class="log">Total Play Time: <span id="totalTime"></span></div>\r
-</div></pre>\r
+</div>\r
+</pre>\r
</li>\r
<li>\r
-<p>Apply the <span style="font-family: Courier New,Courier,monospace">loadedmetadata</span> <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media event</a> to the <span style="font-family: Courier New,Courier,monospace">video</span> object to get the total duration of the file:</p>\r
+<p>Apply the <code>loadedmetadata</code> <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media event</a> to the <code>video</code> object to get the total duration of the file:</p>\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
+\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
+ 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
</pre>\r
</li>\r
<li>\r
-<p>Apply the <span style="font-family: Courier New,Courier,monospace">timeupdate</span> media event to the <span style="font-family: Courier New,Courier,monospace">video</span> object to get the playing time:</p>\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
+ {\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
</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
+ /* Change seconds to time (HH:MM:SS) format */\r
+ function secondsToTime(secs)\r
+ {\r
var hours = Math.floor(secs / (60 * 60));\r
- \r
+\r
var divisor_for_minutes = secs % (60 * 60);\r
var minutes = Math.floor(divisor_for_minutes / 60);\r
- \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
+ /* 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
+\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
+ function intToString(time)\r
+ {\r
+ return (parseInt(time) < 10 ? ("0" + time) : time);\r
}\r
</script>\r
</pre>\r
-<p class="figure">Figure: Displaying the duration and play time (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: Displaying the duration and play time (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Displaying the duration and play time (in mobile applications only)" src="../../../images/video_audio5.png" /></p> \r
</li>\r
</ol>\r
\r
<ol>\r
<li>\r
-<p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the timeline:</p>\r
+<p>Create the <code>video</code> element and buttons used to control the timeline:</p>\r
\r
<pre class="prettyprint">\r
<div class="media">\r
- <video id="video" src="media/video_sample.mp4" controls></video> \r
+ <video id="video" src="media/video_sample.mp4" controls ></video>\r
<div>\r
<button id="v-back">5 Sec Backward</button>\r
<button id="v-forw">5 Sec Forward</button>\r
</div>\r
</pre>\r
</li>\r
-<li><p>Add event listeners to change the <span style="font-family: Courier New,Courier,monospace">currentTime</span> value when a <span style="font-family: Courier New,Courier,monospace">click</span> event occurs in the button elements:</p>\r
+<li><p>Add event listeners to change the <code>currentTime</code> value when a <code>click</code> event occurs in the button elements:</p>\r
\r
<pre class="prettyprint">\r
<script>\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
+\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
</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
-<p class="figure">Figure: Moving the timeline position (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: Moving the timeline position (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Moving the timeline position (in mobile applications only)" src="../../../images/video_audio6.png" /></p> \r
</li>\r
</ol>\r
<p>To provide users with HTML5 audio and video features, you must learn to check the download progress status of media content:</p>\r
\r
<ol>\r
-<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and the elements to display the download progress status of the media file:</p>\r
+<li><p>Create the <code>video</code> element and the elements to display the download progress status of the media file:</p>\r
\r
<pre class="prettyprint">\r
<div class="media">\r
- <video id="video" src="media/video_sample.mp4" controls poster="media/poster_sample.png"></video>\r
+ <video id="video" src="media/video_sample.mp4" controls\r
+ poster="media/poster_sample.png"></video>\r
<div>Progress: <span id="state"></span></div>\r
-</div> \r
+</div>\r
</pre>\r
-<p>While the download is in progress, the <span style="font-family: Courier New,Courier,monospace">poster1.png</span> image is shown.</p>\r
+<p>While the download is in progress, the <code>poster1.png</code> image is shown.</p>\r
</li>\r
\r
-<li>The <span style="font-family: Courier New,Courier,monospace">buffered</span> attribute of the <span style="font-family: Courier New,Courier,monospace">video</span> object returns a <a href="http://www.w3.org/TR/html5/embedded-content-0.html#timeranges" target="_blank">TimeRanges</a> object that represents the downloaded buffering range. Use the <span style="font-family: Courier New,Courier,monospace">end</span> property of the <span style="font-family: Courier New,Courier,monospace">TimeRanges</span> object to find out the end time (in seconds) of the buffered range: \r
+<li>The <code>buffered</code> attribute of the <code>video</code> object returns a <a href="http://www.w3.org/TR/html5/embedded-content-0.html#timeranges" target="_blank">TimeRanges</a> object that represents the downloaded buffering range. Use the <code>end</code> property of the <code>TimeRanges</code> object to find out the end time (in seconds) of the buffered range: \r
\r
<pre class="prettyprint lang-js">\r
<script>\r
var video = document.getElementById("video")\r
- \r
+\r
/* Progress event */\r
- video.addEventListener("progress", function() \r
- {\r
- /* Returns a TimeRanges object */\r
- var buffered = video.buffered;\r
- \r
- /* Returns time in seconds */\r
- var buffered_end = buffered.end();\r
+ video.addEventListener("progress", function()\r
+ {\r
+ /* Returns a TimeRanges object */\r
+ var buffered = video.buffered;\r
+\r
+ /* Returns time in seconds */\r
+ var buffered_end = buffered.end();\r
</pre>\r
</li>\r
<li>\r
-<p>Use the <
span style="font-family: Courier New,Courier,monospace">progress</span> <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+<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
- \r
- /* Display the progress state */ \r
- document.getElementById("state").innerHTML = parseInt(progress) + "%" \r
- }, false); \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
</script>\r
</pre>\r
- <p class="figure">Figure: Displaying the progress state (in mobile applications only)</p>\r
+ <p align="center"><strong>Figure: Displaying the progress state (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Displaying progress state (in mobile applications only)" src="../../../images/video_audio7.png" /></p> \r
</li>\r
</ol>\r
<h2 id="resize" name="resize">Resizing the Video Screen</h2>\r
\r
<p>To provide users with HTML5 audio and video features, you must learn to resize the video screen:</p>\r
- \r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">If the screen size is reduced, the basic <span style="font-family: Courier New,Courier,monospace">play</span> control can be wrongly positioned. Therefore, do not use the <span style="font-family: Courier New,Courier,monospace">controls</span> attribute when providing the resizing custom control.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ If the screen size is reduced, the basic <code>play</code> control can be wrongly positioned. Therefore, do not use the <code>controls</code> attribute when providing the resizing custom control.\r
+</div>\r
<ol>\r
- <li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the screen size:</p>\r
+ <li><p>Create the <code>video</code> element and buttons used to control the screen size:</p>\r
\r
- <pre class="prettyprint"><video id="video" src="media/video_sample.mp4" controls></video>\r
+<pre class="prettyprint">\r
+<video id="video" src="media/video_sample.mp4" controls ></video>\r
<div>\r
<button id="size_big">600 * 410</button>\r
<button id="size_middle">320 * 220</button>\r
</pre>\r
</li>\r
\r
- <li><p>Add event listeners to change the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> values when a <span style="font-family: Courier New,Courier,monospace">click</span> event occurs in the button elements:</p>\r
+ <li><p>Add event listeners to change the <code>width</code> and <code>height</code> values when a <code>click</code> event occurs in the button elements:</p>\r
\r
<pre class="prettyprint">\r
<script>\r
var video = document.getElementById("video")\r
- \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
+ 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
+ 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
-</script></pre>\r
- <p class="figure">Figure: Resizing the video screen (in mobile applications only)</p> \r
+ document.getElementById("size_small").addEventListener("click", function()\r
+ {\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
<p align="center"><img alt="Resizing the video screen (in mobile applications only)" src="../../../images/video_audio8.png" /></p> \r
</li>\r
\r
<p>To provide users with HTML5 audio and video features, you must learn to check whether the media data of the assigned MIME type can be played:</p>\r
\r
<ol>\r
-<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and determine the media files you want to check:</p>\r
+<li><p>Create the <code>video</code> element and determine the media files you want to check:</p>\r
<pre class="prettyprint">\r
<div class="media">\r
<video id="video1" src="media/video_sample_001.ogv" controls ></video>\r
var video1 = document.getElementById("video1");\r
var video2 = document.getElementById("video2");\r
var videoElem03 = document.getElementById("video3");\r
- \r
+\r
/* Check the ogg format */\r
document.getElementById("vlog1").innerHTML = video1.canPlayType('video/ogg');\r
- \r
+\r
/* Check the webm format */\r
- document.getElementById("vlog2").innerHTML = video2.canPlayType('audio/acc'); \r
+ document.getElementById("vlog2").innerHTML = video2.canPlayType('audio/acc');\r
</script>\r
</pre>\r
</li>\r
<script>\r
var video = document.getElementById("video")\r
\r
- /* Button event: induce error */ \r
- document.getElementById("btn01").addEventListener("click", function() \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
+ video.addEventListener("error", function()\r
{\r
- case 1:\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
- case 3:\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
+ /* Video playback failed: show a message saying why */\r
+ switch (video.error.code)\r
+ {\r
+ case 1:\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
+ case 3:\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
</script>\r
</pre>\r
</li>\r
<h2 id="codecs">Supported Codecs</h2>\r
\r
<p>The following table lists the codecs supported in Tizen.</p>\r
+\r
+<p align="center" class="Table"><strong>Table: Supported codecs</strong></p>\r
<table>\r
-<caption>Table: Supported codecs</caption>\r
<colgroup>\r
<col width="20%" />\r
<col width="40%" />\r
<li>Modular routing\r
<p><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#ModularRouting-section" target="_blank">Modular routing</a> means <a href="#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>\r
<li>Playing sound\r
-<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOn(time)</span> or <span style="font-family: Courier New,Courier,monospace">start(time)</span> method to <a href="#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies playing the audio immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio is played after 0.75 seconds.</p>\r
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">noteOff(time)</span> or <span style="font-family: Courier New,Courier,monospace">stop(time)</span> methods similarly to stop the sound. After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>
\r+<p>Use the <code>noteOn(time)</code> or <code>start(time)</code> method to <a href="#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <code>0</code> time value implies playing the audio immediately and the <code>currentTime + 0.75</code> time value implies that the audio is played after 0.75 seconds.</p>\r
+<p>You can use the <
code>noteOff(time)</code> or <code>stop(time)</code> methods similarly to stop the sound. After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>
\r </ul>\r
\r
<h2 id="load" name="load">Loading Data and Creating Audio Context</h2>\r
<ol>\r
<li>To load source audio data:\r
<ol type="a">\r
-<li><p>Load a source audio file using XMLHttpRequest. Set the <span style="font-family: Courier New,Courier,monospace">responseType</span> to <span style="font-family: Courier New,Courier,monospace">arraybuffer</span> to receive binary response:</p>\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
</pre>\r
</li>\r
\r
-<li><p>The <span style="font-family: Courier New,Courier,monospace">onload</span> event is triggered. Retrieve the decoded audio data:</p>\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
+ request.onload = function()\r
{\r
- /* Put the modulated audio data into the audioData variable */ \r
+ /* Put the modulated audio data into the audioData variable */\r
var audioData = request.response;\r
};\r
</script>\r
</ol>\r
</li>\r
<li>To create an audio context:\r
-<p>Create a WebKit-based <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance, which plays and manages the audio data:</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
</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
-<p>The majority of the Web Audio API features, such as creating audio file data, decoding it, and creating <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> are managed using the methods of the <span style="font-family: Courier New,Courier,monospace">AudioContext</span> interface.</p>\r
+<p>The majority of the Web Audio API features, such as creating audio file data, decoding it, and creating <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> are managed using the methods of the <code>AudioContext</code> interface.</p>\r
</li>\r
\r
<li>To create an audio buffer:\r
-<p>Create an <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method. Select from the following options:</p>\r
+<p>Create an <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <code>XMLHttpRequest()</code> method. Select from the following options:</p>\r
<ul>\r
-<li><p>Create the audio buffer using the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method:</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
soundSource.buffer = soundBuffer;\r
};\r
request.send();\r
- } \r
+ }\r
</script>\r
</pre>\r
-<p>The <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method is used as a synchronous decoding method to create an audio buffer of the required size.</p>\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>\r
\r
-<li><p>Create the audio buffer using the <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> method:</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
{\r
/* Create the sound source */\r
soundSource = context.createBufferSource();\r
- \r
- /* Import a callback that provides PCM audio data decoded as an audio buffer */\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
- }, this.onDecodeError);\r
+ {\r
+ bufferData = buffer;\r
+ soundSource.buffer = bufferData;\r
+ }, this.onDecodeError);\r
};\r
request.send();\r
}\r
</script>\r
</pre>\r
-<p>The <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> 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 <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method.</p>\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>\r
</ul>\r
-<p>To use an audio buffer created with the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> or <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> method, the buffer must be allocated to the <span style="font-family: Courier New,Courier,monospace">audioBufferSourceNode</span> buffer.</p>\r
+<p>To use an audio buffer created with the <code>createBuffer()</code> or <code>decodeAudioData()</code> method, the buffer must be allocated to the <code>audioBufferSourceNode</code> buffer.</p>\r
</li>\r
</ol>\r
\r
<pre class="prettyprint">\r
var soundSource;\r
\r
- function startSound(audioData) \r
+ function startSound(audioData)\r
{\r
soundSource = context.createBufferSource();\r
soundSource.buffer = soundBuffer;\r
\r
- /* Direct routing to speaker */ \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 <
span style="font-family: Courier New,Courier,monospace">AudioContext</span> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>
\r+<p>All routing occurs within an <
code>AudioContext</code> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>
\r \r
<p align="center"><img alt="Direct routing" src="../../../images/web_audio1.png" /></p>\r
</li>\r
</ol>\r
</li>\r
\r
-<li><p>To route to the sound destination using <span style="font-family: Courier New,Courier,monospace">AudioNodes</span>:</p>\r
+<li><p>To route to the sound destination using <code>AudioNodes</code>:</p>\r
<ol type="a">\r
-<li><p>Create an <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance:</p>\r
+<li><p>Create an <code>AudioContext</code> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
var context;\r
</li>\r
<li><p>Create the sound source:</p>\r
<pre class="prettyprint lang-js">\r
- function startSound(audioData) \r
+ function startSound(audioData)\r
{\r
soundSource = context.createBufferSource();\r
soundBuffer = context.createBuffer(audioData, true);\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"> soundSource.connect(volumeNode);\r
+<pre class="prettyprint lang-js">\r
+ soundSource.connect(volumeNode);\r
volumeNode.connect(filter);\r
filter.connect(audioAnalyser);\r
audioAnalyser.connect(context.destination);\r
</script>\r
</pre>\r
\r
-<p>The figure below illustrates using 3 sources and a convolution reverb sent with a dynamics compressor at the final output stage.</p>\r
+<p>The following figure illustrates using 3 sources and a convolution reverb sent with a dynamics compressor at the final output stage.</p>\r
\r
<p align="center"><img alt="Routing from multiple sources" src="../../../images/web_audio2.png" /></p> \r
</li>\r
</ol>\r
</li>\r
</ol>\r
-<p><
span style="font-family: Courier New,Courier,monospace">AudioNodes</span> can be used to activate sound effects, and create tweaks, audio parameters, and audio graphs using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#GainNode-section" target="_blank">GainNode</a> interface, or filter sounds using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#BiquadFilterNode" target="_blank">BiquadFilterNode</a> interface.</p>
\r+<p><
code>AudioNodes</code> can be used to activate sound effects, and create tweaks, audio parameters, and audio graphs using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#GainNode-section" target="_blank">GainNode</a> interface, or filter sounds using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#BiquadFilterNode" target="_blank">BiquadFilterNode</a> interface.</p>
\r \r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following file:</p>\r
<pre class="prettyprint">\r
<script>\r
var context;\r
- context = new webkitAudioContext();</pre>\r
+ context = new webkitAudioContext();\r
+</pre>\r
</li>\r
-<li><p>Play audio through direct sound destination using the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method:</p>\r
+<li><p>Play audio through direct sound destination using the <code>noteOn()</code> method:</p>\r
<pre class="prettyprint">\r
- function playSound() \r
+ function playSound()\r
{\r
var soundSource = context.createBufferSource();\r
soundSource.buffer = soundBuffer;\r
- soundSource.connect(context.destination); \r
+ soundSource.connect(context.destination);\r
soundSource.noteOn(context.currentTime);\r
- } \r
+ }\r
</script>\r
</pre>\r
-<p>Use time as parameter of the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method. Time is based on the <span style="font-family: Courier New,Courier,monospace">currentTime</span> property of the <span style="font-family: Courier New,Courier,monospace">AudioContext</span>, and expressed in seconds. If you set the value as '0', the playback begins immediately.</p>\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
\r
-<p>You can also use time as parameter of the <span style="font-family: Courier New,Courier,monospace">noteOff()</span> method. If you set the value as '0', the playback stops immediately.</p>\r
+<p>You can also use time as parameter of the <code>noteOff()</code> method. If you set the value as '0', the playback stops immediately.</p>\r
</li>\r
</ol>\r
\r
-<p>The <
span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance digitally modulates the audio source file into audio data. After creating the sound source, playback is implemented by processing audio data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> either directly to the speaker, or in the middle.</p>
\r+<p>The <
code>AudioContext</code> instance digitally modulates the audio source file into audio data. After creating the sound source, playback is implemented by processing audio data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> either directly to the speaker, or in the middle.</p>
\r \r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following file:</p>\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
<p>The following example HTML code has been used as a basis when describing the techniques:</p>\r
-<pre class="prettyprint"><div id="contents">\r
+<pre class="prettyprint">\r
+<div id="contents">\r
<h3>Selector Test</h3>\r
<ul id="contents_list">\r
<li>List 1</li>\r
<li>List 2</li>\r
<li>List 3</li>\r
</ul>\r
- <button id="search_dom" class="blue">Search DOM</button> \r
+ <button id="search_dom" class="blue">Search DOM</button>\r
</div>\r
<div id="contents1">\r
<h3>Selector Test</h3>\r
<li>List 3</li>\r
</ul>\r
<button id="search_dom5" class="blue">Search DOM</button>\r
-</div></pre>\r
+</div>\r
+</pre>\r
<h2 id="selector" name="selector">Using Selectors</h2>\r
<p> When navigating a specific element, use an ID selector prior to other selectors, such as tags and classes. The following example shows how using an ID selector improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
-var search_button = $('button');</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
-var search_button = $('#contents button');</pre>\r
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<pre class="prettyprint">\r
+/* Code#1 */\r
+var search_button = $('button');\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
+var search_button = $('#contents button');\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_selector1.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: jQuery performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: jQuery performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
</tbody>\r
</table>\r
<p> When using a class selector, apply a tag preceded by the class name. The following example shows how using a tag improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
-var search_button = $('.blue');</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
-var search_button = $('button.blue');</pre>\r
-<pre class="prettyprint">/*Code#3*/\r
-var search_button = $('#contents button.blue');</pre>\r
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<pre class="prettyprint">\r
+/* Code#1 */\r
+var search_button = $('.blue');\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
+var search_button = $('button.blue');\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#3 */\r
+var search_button = $('#contents button.blue');\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_selector2.png" /></p>\r
- <table>\r
- <caption>Table: jQuery performance improvement result</caption>\r
+\r
+<p align="center" class="Table"><strong>Table: jQuery performance improvement result</strong></p>\r
+<table>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
<p> When referring to a DOM object, you can first create a cache for it.</p>\r
<p>Without doing this, every time a DOM object is called, DOM is searched to return a new jQuery object, which degrades performance.</p>\r
<p>The following example shows how using a cache improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<pre class="prettyprint">\r
+/* Code#1 */\r
$("#search_dom").on('click', function() {});\r
$("#search_dom").removeClass('blue');\r
-$("#search_dom").addClass('red');</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
+$("#search_dom").addClass('red');\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
var $search_button = $("#search_dom");\r
$search_button.on('click', function() {});\r
$search_button.removeClass('blue');\r
-$search_button.addClass('red');</pre>\r
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+$search_button.addClass('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_cache.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: jQuery performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: jQuery performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
<h2 id="chaining" name="chaining">Using Chaining</h2>\r
<p> Chaining makes the code lighter and reduces repeated operations, such as reflow and repaint.</p>\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">/* Code#1 */\r
+<pre class="prettyprint">\r
+/* Code#1 */\r
$("#contents").addClass('active');\r
$("#contents").css('border', '1px solid');\r
-$("#contents").('background-color', 'red');</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
-$("#contents").addClass('active').css('border', '1px solid').('background-color', 'red');</pre>\r
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \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
+</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
+\r
+<p align="center" class="Table"><strong>Table: jQuery performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: jQuery performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
</tbody>\r
</table>\r
<h2 id="dom" name="dom">Managing DOM Control</h2>\r
-<p>Minimizing direct DOM manipulation improves jQuery performance. Every time an element is created and inserted, time and capacity is needed. Using a cached selector with the <span style="font-family: Courier New,Courier,monospace">append()</span> method reduces the need for capacity.</p>\r
+<p>Minimizing direct DOM manipulation improves jQuery performance. Every time an element is created and inserted, time and capacity is needed. Using a cached selector with the <code>append()</code> method reduces the need for capacity.</p>\r
<p>The following example shows how applying DOM control improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<pre class="prettyprint">\r
+/* Code#1 */\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
-}</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
+}\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
var $contents_list = $('#contents_list'),\r
array_list = [...],\r
list = '';\r
{\r
list += '<li>' + array_list[i] + '</li>';\r
}\r
-$contents_list.append(list);</pre>\r
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+$contents_list.append(list);\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_jquery_dom.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: jQuery performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: jQuery performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
<h2 id="debugging" name="debugging">Removing the Debugging Statement</h2>\r
-<p> The <span style="font-family: Courier New,Courier,monospace">console.log</span> statement, which is frequently used in JavaScript debugging, can cause poor performance. The following example shows how deleting the statement improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<p> The <code>console.log</code> statement, which is frequently used in JavaScript debugging, can cause poor performance. The following example shows how deleting the statement improves performance.</p>\r
+<pre class="prettyprint">\r
+/* Code#1 */\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
new_array_list = [];\r
\r
{\r
new_array_list.push(array_list[i]);\r
console.log(array_list[i]);\r
-}</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
+}\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\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
-}</pre>\r
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+}\r
+</pre>\r
+<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: JavaScript performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: JavaScript performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
</tbody>\r
</table>\r
<h2 id="loops" name="loops">Removing Slow Loop Statements</h2>\r
-<p> The <span style="font-family: Courier New,Courier,monospace">for - in</span> loop is relatively slower than the other loops, such as <span style="font-family: Courier New,Courier,monospace">for</span>, <span style="font-family: Courier New,Courier,monospace">while</span>, and <span style="font-family: Courier New,Courier,monospace">do - while</span>, as it assigns object properties to the variable (<span style="font-family: Courier New,Courier,monospace">idx</span> in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<p> The <code>for - in</code> loop is relatively slower than the other loops, such as <code>for</code>, <code>while</code>, and <code>do - while</code>, as it assigns object properties to the variable (<code>idx</code> in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>\r
+<pre class="prettyprint">\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
-}</pre>\r
+}\r
+</pre>\r
\r
-<pre class="prettyprint">/* Code#2 */\r
+<pre class="prettyprint">\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
-}</pre>\r
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+}\r
+</pre>\r
+<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p> \r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">By caching the <span style="font-family: Courier New,Courier,monospace">array_list.length</span> before using it, as shown in the second example above, better performance is achieved. For more information, see <a href="#arraylength">Using cached array length</a>.</td> \r
- </tr> \r
- </tbody>\r
-</table>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ By caching the <code>array_list.length</code> before using it, as shown in the second example above, better performance is achieved. For more information, see <a href="#arraylength">Using cached array length</a>.\r
+</div>\r
+\r
+<p align="center" class="Table"><strong>Table: JavaScript performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: JavaScript performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
</table>\r
<h2 id="arraylength" name="arraylength">Using Cached Array Length</h2>\r
<p>In a loop statement, you can cache the length of an array before using it instead of using it directly in the loop. Minimizing the steps taken to search for the scope chain activation object speeds up the response performance. The following example shows how caching the array list improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<pre class="prettyprint">\r
+/* Code#1 */\r
var array_list = [],\r
new_array_list = [],\r
i = 0;\r
for (i = 0; i < array_list.length; i++)\r
{\r
new_array_list.push(array_list[i]);\r
-}</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
+}\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
var array_list = [],\r
new_array_list = [],\r
i = 0,\r
for (i = 0, arrayLen = array_list.length; i < arrayLen; i++)\r
{\r
new_array_list.push(array_list[i]);\r
-}</pre>\r
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+}\r
+</pre>\r
+<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: JavaScript performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: JavaScript performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
</table>\r
<h2 id="literal" name="literal">Using Literal Expressions</h2>\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">/* Code#1 */\r
-var str = ""; \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
-}</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
-var str = ""; \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
-}</pre>\r
+}\r
+</pre>\r
\r
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: JavaScript performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: JavaScript performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
<p> Rendering performance can be improved by minimizing direct DOM manipulation and creating a new instance of a cached DOM object.</p>\r
<p>When referring to variables, JavaScript revolves around a scope chain (variable object set that can be accessed in the current scope). The deeper the scope chain, the more execution time is needed.</p>\r
<p>The following example shows how applying DOM control improves performance.</p>\r
-<pre class="prettyprint">/* Code#1 */\r
+<pre class="prettyprint">\r
+/* Code#1 */\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
id = document.getElementById('contents_list').getAttribute('id');\r
name = document.getElementById('contents_list').getAttribute('name');\r
style = document.getElementById('contents_list').getAttribute('style');\r
-}</pre>\r
-<pre class="prettyprint">/* Code#2 */\r
+}\r
+</pre>\r
+<pre class="prettyprint">\r
+/* Code#2 */\r
var contents_list = document.getElementById('contents_list');\r
var id = contents_list.getAttribute('id');\r
var name = contents_list.getAttribute('name');\r
id = contents_list.getAttribute('id');\r
name = contents_list.getAttribute('name');\r
style = contents_list.getAttribute('style');\r
-}</pre>\r
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+}\r
+</pre>\r
+<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p> \r
+\r
+<p align="center" class="Table"><strong>Table: JavaScript performance improvement result</strong></p>\r
<table border="1">\r
- <caption>Table: JavaScript performance improvement result</caption>\r
<tbody>\r
<tr>\r
<th>Browser</th>\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
<p>Minifying tools, such as <a href="https://developers.google.com/closure/compiler/" target="_blank">Closure Compiler</a> and <a href="http://gruntjs.com/" target="_blank">Grunt</a>, include features that can combine and reduce JavaScript file. The following table shows Closure Compiler and Grunt features in comparison.</p>\r
+\r
+<p align="center" class="Table"><strong>Table: Comparison of minifying tools</strong></p>\r
<table>\r
- <caption>Table: Comparison of minifying tools</caption>\r
<tbody>\r
<tr>\r
<th>Item</th>\r
<tr>\r
<td>Usage</td>\r
<td><ul>\r
- <li>Java applications<p>Provided as a <span style="font-family: Courier New,Courier,monospace">.jar</span> file, used as a command line.</p></li>\r
+ <li>Java applications<p>Provided as a <code>.jar</code> file, used as a command line.</p></li>\r
<li><a href="http://closure-compiler.appspot.com/home" target="_blank">Web application</a></li>\r
<li>RESTful API</li>\r
</ul></td>\r
<td><ul>\r
- <li><span style="font-family: Courier New,Courier,monospace">Node.js</span> installation</li>\r
- <li><span style="font-family: Courier New,Courier,monospace">grunt-cli</span> installation</li>\r
- <li><span style="font-family: Courier New,Courier,monospace">package.json</span> must be inserted to the project root</li>\r
- <li>Task definition in the <span style="font-family: Courier New,Courier,monospace">gruntfile.js</span> file</li>\r
+ <li><code>Node.js</code> installation</li>\r
+ <li><code>grunt-cli</code> installation</li>\r
+ <li><code>package.json</code> must be inserted to the project root</li>\r
+ <li>Task definition in the <code>gruntfile.js</code> file</li>\r
</ul></td>\r
</tr>\r
</tbody>\r
<ol>\r
<li>Install the <a href="http://www.nodejs.org/" target="_blank">Node.js</a> platform. The platform includes the Node.js package manager, npm, which is used to install Grunt CLI (command line interface).</li>\r
<li>Install Grunt CLI: \r
- <pre class="prettyprint">npm install -g grunt-cli /* -g: global type */</pre></li>\r
+<pre class="prettyprint">\r
+npm install -g grunt-cli /* -g: global type */\r
+</pre></li>\r
</ol>\r
<h3 id="use" name="use">Using Grunt</h3>\r
<ol>\r
<li>Change to the root directory of the project:\r
- <pre class="prettyprint">cd <Project root></pre></li>\r
- <li>Install Grunt and create the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file:\r
- <pre class="prettyprint">npm install grunt --save-dev</pre></li>\r
- <li>Create the <span style="font-family: Courier New,Courier,monospace">package.json</span> file: <p>When executing the following command, interactive prompt that receives information on the project is executed. Through the information entered, the <span style="font-family: Courier New,Courier,monospace">package.json</span> file is created.</p>\r
- <pre class="prettyprint">npm init</pre></li>\r
+<pre class="prettyprint">\r
+cd <Project root>\r
+</pre></li>\r
+ <li>Install Grunt and create the <code>Gruntfile.js</code> file:\r
+<pre class="prettyprint">\r
+npm install grunt --save-dev\r
+</pre></li>\r
+ <li>Create the <code>package.json</code> file: <p>When executing the following command, interactive prompt that receives information on the project is executed. Through the information entered, the <code>package.json</code> file is created.</p>\r
+<pre class="prettyprint">\r
+npm init\r
+</pre></li>\r
<li>Install Grunt plug-in:\r
- <pre class="prettyprint">/* Install grunt concat */\r
+<pre class="prettyprint">\r
+/* Install grunt concat */\r
npm install grunt-contrib-concat --save-dev\r
\r
/* Install grunt contrib uglify */\r
npm install grunt-contrib-cssmin --save-dev\r
</pre></li>\r
<li>Run the Grunt plug-in:\r
- <pre class="prettyprint">grunt</pre>\r
- <p>Using the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file, tasks, such as <span style="font-family: Courier New,Courier,monospace">concat</span>, <span style="font-family: Courier New,Courier,monospace">uglify</span>, and <span style="font-family: Courier New,Courier,monospace">cssmin</span>, are registered.</p></li>\r
+<pre class="prettyprint">\r
+grunt\r
+</pre>\r
+ <p>Using the <code>Gruntfile.js</code> file, tasks, such as <code>concat</code>, <code>uglify</code>, and <code>cssmin</code>, are registered.</p></li>\r
</ol>\r
<h2 id="improvement" name="improvement">Improvement through Grunt</h2>\r
<p>After running the Grunt plug-in, the below comparison result is shown through Chrome inspector. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">For the sake of comparing improvement, in the following examples, 2 Web applications have been arbitrarily chosen and named App#1 and App#2.</td> \r
- </tr> \r
- </tbody>\r
-</table>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ For the sake of comparing improvement, in the following examples, 2 Web applications have been arbitrarily chosen and named App#1 and App#2.\r
+</div>\r
+\r
+<p align="center" class="Table"><strong>Table: Result for App #01</strong></p>\r
<table border="1">\r
- <caption>Table: Result for App #01</caption>\r
<tbody>\r
<tr>\r
<th colspan="2" rowspan="2">Item</th>\r
</tr>\r
<tr>\r
<td rowspan="3" align="center">Minification applied (accumulated result)</td>\r
- <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>\r
+ <td><code>#01_grunt_concat</code></td>\r
<td><strong>68</strong></td>\r
<td><strong>-186</strong></td>\r
<td>6.62</td>\r
<td><strong>-0.85</strong></td>\r
</tr>\r
<tr>\r
- <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>\r
+ <td><code>#02_grunt_uglify</code></td>\r
<td>68</td>\r
<td>-</td>\r
<td><strong>1.90</strong></td>\r
<td><strong>-0.85</strong></td>\r
</tr>\r
<tr>\r
- <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>\r
+ <td><code>#03_grunt_cssmin</code></td>\r
<td>68</td>\r
<td>-</td>\r
<td><strong>1.87</strong></td>\r
</tr>\r
</tbody>\r
</table>\r
+\r
+<p align="center" class="Table"><strong>Table: Result for App #02</strong></p>\r
<table border="1">\r
- <caption>Table: Result for App #02</caption>\r
<tbody>\r
<tr>\r
<th colspan="2" rowspan="2">Item</th>\r
</tr>\r
<tr>\r
<td rowspan="3" align="center">Minification applied (accumulated result)</td>\r
- <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>\r
+ <td><code>#01_grunt_concat</code></td>\r
<td><strong>106</strong></td>\r
<td><strong>-129</strong></td>\r
<td>7.87</td>\r
<td><strong>-0.65</strong></td>\r
</tr>\r
<tr>\r
- <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>\r
+ <td><code>#02_grunt_uglify</code></td>\r
<td>106</td>\r
<td>-</td>\r
<td><strong>5.85 </strong></td>\r
<td><strong>-0.19</strong></td>\r
</tr>\r
<tr>\r
- <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>\r
+ <td><code>#03_grunt_cssmin</code></td>\r
<td>106</td>\r
<td>-</td>\r
<td><strong>5.84</strong></td>\r
<li>Retrieving the page visibility status\r
<p>You can use 2 properties to <a href="#Retrieving_Page_Visibility">detect the visibility status of the page</a>:</p>\r
<ul>\r
- <li><p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns a boolean value indicating whether the page is visible.</p></li>\r
- <li><p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns a DOMString type indicating whether the page is visible.</p></li>\r
+ <li><p>The <code>hidden</code> property returns a boolean value indicating whether the page is visible.</p></li>\r
+ <li><p>The <code>visibilityState</code> property returns a DOMString type indicating whether the page is visible.</p></li>\r
</ul></li> \r
<li>Tracking changes in page visibility\r
- <p>You can use the <
span style="font-family: Courier New,Courier,monospace">visibilitychange</span> event to be able to <a href="#Retrieving_Notifications_Visibility">respond to changes in the page visibility status</a>.</p>
\r+ <p>You can use the <
code>visibilitychange</code> event to be able to <a href="#Retrieving_Notifications_Visibility">respond to changes in the page visibility status</a>.</p>
\r <p>For example, in a video player application, you can change the play status of the application based on the event: pause the playback when the page becomes hidden, and continue playing when the page becomes visible again.</p>\r
</li> \r
</ul>\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Tizen supports the WebKit-based Page Visibility API. When using the Page Visibility API, you must include the webkit prefix.</td> \r
- </tr> \r
- </tbody>\r
-</table>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Tizen supports the WebKit-based Page Visibility API. When using the Page Visibility API, you must include the webkit prefix.\r
+</div>\r
\r
<h2 id="Retrieving_Page_Visibility" name="Retrieving_Page_Visibility">Retrieving the Page Visibility Status</h2>\r
<p>To optimize the performance of your application, you must learn to retrieve the page visibility status:</p>\r
\r
<ol>\r
- <li><p>Retrieve the page visibility status with the <span style="font-family: Courier New,Courier,monospace">hidden</span> property: </p>\r
-
<pre class="prettyprint lang-js">
\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
- \r
- function pageVisibilityHandler() \r
+\r
+ function pageVisibilityHandler()\r
{\r
- logText.innerHTML += '<p>Hidden: <span>' + document.webkitHidden; +\r
- '</span></p>';\r
+ logText.innerHTML +=\r
+ '<p>Hidden: <span>' + document.webkitHidden; + '</span></p>';\r
</pre>\r
- <p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns <span style="font-family: Courier New,Courier,monospace">true</span> 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 <span style="font-family: Courier New,Courier,monospace">false</span>.</p> \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 <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property:</p> \r
- <pre class="prettyprint lang-js">\r
- logText.innerHTML += '<p>VisibilityState: <span>' \r
- + document.webkitVisibilityState; + '</span></p>';\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
</script>\r
</pre>\r
- <p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns one of the following DOMString types:</p>\r
+ <p>The <code>visibilityState</code> property returns one of the following DOMString types:</p>\r
<ul>\r
- <li><p><span style="font-family: Courier New,Courier,monospace">hidden</span>: Document cannot be seen at all</p></li>\r
- <li><p><span style="font-family: Courier New,Courier,monospace">visible</span>: Document can be at least partly seen</p></li>\r
- <li><p><span style="font-family: Courier New,Courier,monospace">prerender</span>: Document is loaded, but cannot be seen on the screen</p></li>\r
- <li><p><span style="font-family: Courier New,Courier,monospace">unloaded</span>: Document is not loaded</p></li>\r
+ <li><p><code>hidden</code>: Document cannot be seen at all</p></li>\r
+ <li><p><code>visible</code>: Document can be at least partly seen</p></li>\r
+ <li><p><code>prerender</code>: Document is loaded, but cannot be seen on the screen</p></li>\r
+ <li><p><code>unloaded</code>: Document is not loaded</p></li>\r
</ul>\r
- <p>Tizen does not currently support the <span style="font-family: Courier New,Courier,monospace">prerender</span> and <span style="font-family: Courier New,Courier,monospace">unloaded</span> types.</p>\r
+ <p>Tizen does not currently support the <code>prerender</code> and <code>unloaded</code> types.</p>\r
</li>\r
</ol>\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Since Tizen supports the WebKit-based page visibility, you must include the webkit prefix in the attributes.</td> \r
- </tr> \r
- </tbody>\r
- </table>\r
-\r
- <p class="figure">Figure: Page visibility (in mobile applications only)</p> \r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Since Tizen supports the WebKit-based page visibility, you must include the webkit prefix in the attributes.\r
+</div>\r
+\r
+ <p align="center"><strong>Figure: Page visibility (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Page visibility (in mobile applications only)" src="../../../images/page_visibility_get.png" /></p> \r
\r
<h3>Source Code</h3>\r
\r
<ol>\r
<li><p>Define the elements used to play video on the screen:</p>\r
-
<pre class="prettyprint">
\r+<pre class="prettyprint">\r
<!--video control-->\r
<div class="media">\r
<video id="video" src="video_sample.mp4" width="360" height="220"></video>\r
<div>\r
<!--video control buttons-->\r
<button id="v-play" type="button">play</button>\r
- <button id="v-pause" type="button" disabled>pause</button>\r
+ <button id="v-pause" type="button" disabled >pause</button>\r
</div>\r
</div>\r
</pre>\r
</li>\r
<li><p>Add event listeners to play and pause the video based on the button clicks:</p>\r
-
<pre class="prettyprint">
\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
+ 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
+ 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
+ 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
+ video.addEventListener("pause", function()\r
+ {\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 <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is triggered, use the <span style="font-family: Courier New,Courier,monospace">hidden</span> property to check whether the page is hidden or visible, and to play or pause the video accordingly.</p>\r
-
<pre class="prettyprint">
\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
+ function pageVisibilityHandler()\r
{\r
- /* Check whether the page is hidden */ \r
- if (!(document.webkitHidden)) \r
+ /* Check whether the page is hidden */\r
+ if (!(document.webkitHidden))\r
{\r
- video.play(); /* Play video */\r
- } \r
- else \r
+ video.play(); /* Play video */\r
+ }\r
+ else\r
{\r
video.pause(); /* Pause video */\r
}\r
</li>\r
</ol>\r
<p>If the video page becomes hidden with a tab screen transition, the playback is paused. When the video page is visible again, the playback resumes.</p>\r
- <p class="figure">Figure: Video player (in mobile applications only)</p> \r
+ <p align="center"><strong>Figure: Video player (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Video player (in mobile applications only)" src="../../../images/page_visibility_change.png" /></p> \r
\r
<h3>Source Code</h3>\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
-<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> (or <span style="font-family: Courier New,Courier,monospace">webkitRequestAnimationFrame()</span>) method of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen 2.2, it is about 60 fps.</p>\r
-\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">In mobile applications, when using the Emulator, you must include the <span style="font-family: Courier New,Courier,monospace">webkit</span> prefix in method names, such as <span style="font-family: Courier New,Courier,monospace">window.performance.webkitNow()</span>. 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 = window.performance.now || window.performance.webkitNow || Date.now;\r
+<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <code>requestAnimationFrame()</code> (or <code>webkitRequestAnimationFrame()</code>) method of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen 2.2, it is about 60 fps.</p>\r
+\r
+<div class="note">\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();\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
+<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 = window.performance.now || window.performance.webkitNow || Date.now;\r
+window.performance.windowNow =\r
+ window.performance.now || window.performance.webkitNow || Date.now;\r
window.performance.windowNow();\r
</pre>\r
-</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+</div>\r
\r
<h2 id="Creating_App" name="Creating_App">Creating an Application with a Controllable Animation</h2>\r
\r
<p>To optimize the performance of your application, you must learn to create a simple controllable DOM animation.</p>\r
<p>This example creates a screen with a Tizen pinwheel rotating on it, and buttons to increase or decrease the rotation speed and start or stop the animation.</p>\r
- <p class="figure">Figure: Controllable animation (in mobile applications only)</p> \r
+ <p align="center"><strong>Figure: Controllable animation (in mobile applications only)</strong></p> \r
<p align="center"><img alt="Controllable animation (in mobile applications only)" src="../../../images/timing.png" /></p>\r
<ol>\r
- <li><p>Create the HTML layout, including a <span style="font-family: Courier New,Courier,monospace"><nav></span> element with 3 buttons and <span style="font-family: Courier New,Courier,monospace"><div></span> elements for the pinwheel image and text:</p>\r
-
<pre class="prettyprint">
\r+ <li><p>Create the HTML layout, including a <code><nav></code> element with 3 buttons and <code><div></code> elements for the pinwheel image and text:</p>\r
+<pre class="prettyprint">\r
<nav>\r
<a href="#" id="leftBtn" class="btn">Left</a>\r
<a href="#" id="playstopBtn" class="btn">Stop</a>\r
<div id="rotateBackground"></div>\r
TIZEN OS\r
</div>\r
- </pre>\r
+</pre>\r
</li>\r
<li>Set the CSS properties: \r
<ol type="a">\r
- <li><p>Define properties for a flexible vertical layout for the content area, and the <span style="font-family: Courier New,Courier,monospace">nav</span> container:</p>\r
-
<pre class="prettyprint">
\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
display: -webkit-flex;\r
-webkit-align-content: stretch;\r
width: 100%;\r
}\r
- </pre></li>\r
- <li><p>To enable the rotation of the background, define the <span style="font-family: Courier New,Courier,monospace">pinwheel</span> element in relation to its children, and set its size to change according to the display size. Define the <span style="font-family: Courier New,Courier,monospace">rotateBackground</span> element to have a fixed size depending on the display size:</p>\r
-
<pre class="prettyprint">
\r-#pinwheel \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
width: 90vw;\r
height: 80vh;\r
text-align: center;\r
}\r
\r
-#rotateBackground \r
+#rotateBackground\r
{\r
background: url(images/Tizen-Pinwheel-On-Dark-RGB.png) no-repeat center;\r
background-size: 90vw;\r
height: 90vh;\r
z-index: -1;\r
}\r
- </pre></li>\r
+</pre></li>\r
</ol>\r
</li>\r
<li><p>Declare the variables used in the application:</p>\r
-
<pre class="prettyprint lang-js">
\r+<pre class="prettyprint lang-js">\r
<script type="text/javascript">\r
- var leftDiv, rightDiv, playstopDiv, \r
+ var leftDiv, rightDiv, playstopDiv,\r
handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;\r
</script>\r
- </pre>\r
- <p>The <span style="font-family: Courier New,Courier,monospace">leftDiv</span>, <span style="font-family: Courier New,Courier,monospace">rightDiv</span>, <span style="font-family: Courier New,Courier,monospace">playstopDiv</span>, and <span style="font-family: Courier New,Courier,monospace">rotateBackgroundDiv</span> variables contain DOM elements from the application UI. The <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> variable handles the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> requests. The <span style="font-family: Courier New,Courier,monospace">rotation</span> variable is the current angle of the pinwheel, and the <span style="font-family: Courier New,Courier,monospace">speed</span> variable is the rotation speed in degrees per frame.</p>\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+<pre class="prettyprint">\r
playstopDiv = document.getElementById("playstopBtn");\r
\r
-playstopDiv.onclick = function() \r
+playstopDiv.onclick = function()\r
{\r
- if (handlerRequest) \r
+ if (handlerRequest)\r
{\r
window.webkitCancelRequestAnimationFrame(handlerRequest);\r
handlerRequest = 0;\r
playstopDiv.innerHTML = "Play";\r
- } \r
- else \r
+ }\r
+ else\r
{\r
handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
playstopDiv.innerHTML = "Stop";\r
}\r
}\r
- </pre>\r
- <p>When the <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> variable returns <span style="font-family: Courier New,Courier,monospace">true</span>, the animation is played. Clicking the button calls the <span style="font-family: Courier New,Courier,monospace">cancelRequestAnimationFrame()</span> method to stop the animation. The <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> is reset to value 0, and the button text changes from <strong>Stop</strong> to <strong>Play</strong>.</p> \r
- <p>If the <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> value is undefined or 0, the animation is not played. Clicking the button calls the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method to play the animation, and the button text changes from <strong>Play</strong> to <strong>Stop</strong>. The parameter of the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method defines the callback.</p>\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 <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> 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 <span style="font-family: Courier New,Courier,monospace">rotate()</span> method, and use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method to update the next frame of the animation:</p>\r
-
<pre class="prettyprint">
\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
+ if (rotation > 360)\r
{\r
rotation -= 360;\r
- } \r
- else if (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
+ 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 <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> 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
+</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+<pre class="prettyprint">\r
leftDiv = document.getElementById("leftBtn");\r
-leftDiv.onclick = function() \r
+leftDiv.onclick = function()\r
{\r
speed -= 0.5;\r
}\r
rightDiv = document.getElementById("rightBtn");\r
-rightDiv.onclick = function() \r
+rightDiv.onclick = function()\r
{\r
speed += 0.5;\r
}\r
handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
- </pre>\r
+</pre>\r
</li>\r
</ol>\r
\r
<ul>\r
<li><a href="#Creating_Web_Worker">Creating workers</a>\r
<p>\r
-The worker creates a new thread, and only runs when it is executed. It does not communicate with the UI thread or other same-level workers, and therefore, you cannot assign a work priority order. However, you can create subworkers using the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method to divide tasks.</p>\r
+The worker creates a new thread, and only runs when it is executed. It does not communicate with the UI thread or other same-level workers, and therefore, you cannot assign a work priority order. However, you can create subworkers using the <code>importScripts()</code> method to divide tasks.</p>\r
</li>\r
\r
<li><a href="#Sending_Messages">Messaging between workers</a>\r
-<p>A subworker can communicate with the host worker using the <
span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the HTML5 Web Messaging API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">wearable</a> applications). This process is normally used to give work orders to workers or subworkers, or deliver an operation result.</p>
\r+<p>A subworker can communicate with the host worker using the <
code>postMessage()</code> method of the HTML5 Web Messaging API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">wearable</a> applications). This process is normally used to give work orders to workers or subworkers, or deliver an operation result.</p>
\r <p>\r
-If a worker triggers a message event, the <span style="font-family: Courier New,Courier,monospace">onmessage()</span> event handler can be used to check the sent message.</p>\r
+If a worker triggers a message event, the <code>onmessage()</code> event handler can be used to check the sent message.</p>\r
</li>\r
\r
<li><a href="#multi">Multi-threading</a>\r
\r
<p>Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.</p>\r
\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> \r
- </tr> \r
- </tbody>\r
-</table>\r
-\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Workers use a same-origin policy and therefore using some of the browser resources, such as <code>DOM</code>, <code>document</code>, <code>window</code>, and <code>parent</code>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <code>postMessage()</code>, <code>location</code>, <code>navigator</code>, and <code>importScripts()</code> can be used. The <code>self</code> and <code>location</code> attributes are also supported.\r
+</div>\r
\r
<h2 id="Creating_Web_Worker" name="Creating_Web_Worker">Creating a Web Worker and Handling Errors</h2>\r
\r
<li>To create and execute a Web worker:\r
<ol type="a">\r
<li><p>Create JavaScript code for a simple Boolean operation:</p>\r
-
<pre class="prettyprint">
\r+<pre class="prettyprint">\r
var n = 1;\r
-index: while (true) \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
-}</pre>\r
- <p>This JavaScript operation delivers the calculated value of the <span style="font-family: Courier New,Courier,monospace">Math.sqrt(n)</span> method to the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method. It cannot be used for continuous posting of the Boolean operation.</p>\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
</li>\r
<li>\r
<p>Create a Web worker to be activated in the background. The JavaScript URL defining the worker needs to be delivered when creating the worker object:</p>\r
-
<pre class="prettyprint lang-html">
\r+<pre class="prettyprint lang-html">\r
<button type="button" onclick="workerStart()">Start</button>\r
<button type="button" onclick="worker.terminate()">Stop</button>\r
<output></output>\r
-</pre><pre class="prettyprint lang-js">\r
+</pre>\r
+<pre class="prettyprint lang-js">\r
<script>\r
var worker = new Worker("worker3.js");\r
\r
- function workerStart() \r
+ function workerStart()\r
{\r
- worker.onmessage = function(e) \r
+ worker.onmessage = function(e)\r
{\r
document.querySelector("output").textContent = e.data;\r
};\r
}\r
-</script></pre>\r
- <p>When the <strong>Start</strong> button is clicked, message data is received from the worker and displayed in the <span style="font-family: Courier New,Courier,monospace"><output></span> element. When the <strong>Stop</strong> button is clicked, the worker is terminated.</p>\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
<p>Simple operations can be sufficiently handled with a single worker, however, in order to execute a more complex operations, more workers are needed.</p>\r
</li>\r
</ol>\r
</li>\r
- <li>To create a subworker, use the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method:\r
-
<pre class="prettyprint">
\r+ <li>To create a subworker, use the <code>importScripts()</code> method:\r
+<pre class="prettyprint">\r
importScripts('worker1.js');\r
-importScripts('worker1.js', 'worker2.js');</pre>\r
+importScripts('worker1.js', 'worker2.js');\r
+</pre>\r
<p>The subworker creates its own independent thread, and is activated in it, so it has the same restrictions as a host worker. This means that communication between subworkers is impossible, but a host worker can communicate with subworkers within the same object.</p>\r
</li>\r
<li>To handle errors:\r
<ul>\r
- <li><p>If an error occurs when the worker is being executed, the <span style="font-family: Courier New,Courier,monospace">onerror()</span> event is triggered. It takes <span style="font-family: Courier New,Courier,monospace">filename</span>, <span style="font-family: Courier New,Courier,monospace">lineno</span>, and <span style="font-family: Courier New,Courier,monospace">message</span> attributes, and displays an error message:</p>\r
-
<pre class="prettyprint">
\r-worker.onerror = function(e) \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 = ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message].join(' ');\r
-};</pre>\r
+ document.querySelectorAll("output")[1].textContent =\r
+ ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
+ .join(' ');\r
+};\r
+</pre>\r
</li>\r
- <li><p>The <span style="font-family: Courier New,Courier,monospace">addEventListener</span> can be used instead of the <span style="font-family: Courier New,Courier,monospace">onerror</span> event to detect errors and display an error message:</p>\r
-
<pre class="prettyprint">
\r-function errorMessage(e) \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 = ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message].join(' ');\r
+ document.querySelectorAll("output")[1].textContent =\r
+ ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
+ .join(' ');\r
}\r
\r
-worker.addEventListener('error', errorMessage, false);</pre></li>\r
+worker.addEventListener('error', errorMessage, false);\r
+</pre></li>\r
</ul>\r
</li>\r
</ol> \r
<li>Send a message in one of the following ways:\r
<ul>\r
<li>\r
- <p>Use the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method to send a "Hello" message to a Web worker:</p>\r
-<pre class="prettyprint">var worker = new Worker('worker1.js');\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
</pre>\r
</li>\r
</ul></li>\r
<li><p>Receive a message in one of the following ways:</p>\r
<ul>\r
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">onMessage</span> event handler to respond to receiving a message:</p>\r
-<pre class="prettyprint">worker.onmessage = function(e) \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
-};</pre>\r
+};\r
+</pre>\r
</li>\r
- <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addEventListener()</span> method to listen to the event of receiving a message:</p>\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);</pre>\r
+worker.addEventListener("message", function(e)\r
+ {\r
+ alert(e.data);\r
+ }, false);\r
+</pre>\r
</li>\r
</ul>\r
</li>\r
<li><p>Use the workers to execute threads:</p>\r
<ul>\r
- <li><p>Use <span style="font-family: Courier New,Courier,monospace">worker1.js</span>:</p>\r
-<pre class="prettyprint">self.onmessage = function(e)\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
-};</pre>\r
+};\r
+</pre>\r
</li>\r
- <li><p>Use <span style="font-family: Courier New,Courier,monospace">worker2.js</span>:</p>\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
+ if (b === "Tizen")\r
{\r
self.postMessage(e.data.b + " say: " + e.data.a);\r
- } \r
- else \r
+ }\r
+ else\r
{\r
self.postMessage("You say: " + e.data.a);\r
}\r
-};</pre>\r
+};\r
+</pre>\r
</li>\r
\r
</ul>\r
-<p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method can also execute the worker and respond to a message simultaneously.</p> \r
+<p>The <code>postMessage()</code> method can also execute the worker and respond to a message simultaneously.</p> \r
</li>\r
</ol>\r
\r
<li><a href="#multithread">Advantages of using multi-thread Web workers</a> </li></ul>\r
\r
<h3 id="uithread" name="uithread">Using UI Threads</h3>\r
-<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <span style="font-family: Courier New,Courier,monospace">colorFilter()</span> method, the execution time is high (16218 milliseconds).</p>\r
+<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <code>colorFilter()</code> method, the execution time is high (16218 milliseconds).</p>\r
\r
-<p class="figure">Figure: Color filter application using UI thread (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: Color filter application using UI thread (in mobile applications only)</strong></p> \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">function colorFilterStart()\r
+<pre class="prettyprint">\r
+function colorFilterStart()\r
{\r
var picture = document.getElementById('picture');\r
var canvas = document.querySelector('canvas');\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] = 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
+ 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
</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
\r
-<p class="figure">Figure: UI thread application event performance</p> \r
+<p align="center"><strong>Figure: UI thread application event performance</strong></p> \r
<p align="center"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>\r
\r
-<p class="figure">Figure: UI thread application memory performance</p> \r
+<p align="center"><strong>Figure: UI thread application memory performance</strong></p> \r
<p align="center"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>\r
\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.</td> \r
- </tr> \r
- </tbody> \r
- </table> \r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.\r
+</div>\r
\r
<h3 id="multithread" name="multithread">Using Multi-thread Web Workers</h3>\r
<p>The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).</p>\r
\r
-<p class="figure">Figure: Color filter application using multi-thread Web workers (in mobile applications only)</p> \r
+<p align="center"><strong>Figure: Color filter application using multi-thread Web workers (in mobile applications only)</strong></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">function colorFilterStart()\r
+<pre class="prettyprint">\r
+function colorFilterStart()\r
{\r
var picture = document.getElementById('picture');\r
var canvas = document.querySelector('canvas');\r
for (var i = 0; i < workerNember; i++)\r
{\r
var worker = new Worker("js/worker.js");\r
- var canvasData = tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\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
/* Send data to the host worker */\r
worker.postMessage(\r
- { \r
- "data": canvasData, \r
- "length": pixelLength, \r
- "count": i \r
+ {\r
+ "data": canvasData,\r
+ "length": pixelLength,\r
+ "count": i\r
});\r
}\r
}\r
</pre>\r
\r
-<p>The <span style="font-family: Courier New,Courier,monospace">worker.js</span> file contains code to perform calculations for all 4 Web workers simultaneously.</p>\r
-<pre class="prettyprint">onmessage = function(e)\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 colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
for (var i = 0; i < pixels; i += .5)\r
{\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
+ 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
</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
\r
-<p class="figure">Figure: Multi-thread application event performance</p> \r
+<p align="center"><strong>Figure: Multi-thread application event performance</strong></p> \r
<p align="center"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>\r
\r
-<p class="figure">Figure: Multi-thread application memory performance</p> \r
+<p align="center"><strong>Figure: Multi-thread application memory performance</strong></p> \r
<p align="center"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>\r
\r
<p>The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.</p>\r
- <table> \r
- <caption>\r
- Table: Speed and memory performance\r
- </caption> \r
+\r
+<p align="center" class="Table"><strong>Table: Speed and memory performance</strong></p> \r
+<table>\r
<tbody> \r
<tr> \r
<th>Number of threads</th> \r
</tbody>\r
</table>\r
\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">The Web worker support depends on the type and version of the operating system. If the system does not support multiple processors, using multiple Web workers does not greatly improve the application performance. However, since Web workers are based on HTML5 Web optimization and can use multiple cores, they provide much better performance in Tizen as in other operating systems.</td> \r
- </tr> \r
- </tbody> \r
- </table> \r
+<div class="note">\r
+ <strong>Note</strong>\r
+ The Web worker support depends on the type and version of the operating system. If the system does not support multiple processors, using multiple Web workers does not greatly improve the application performance. However, since Web workers are based on HTML5 Web optimization and can use multiple cores, they provide much better performance in Tizen as in other operating systems.\r
+</div>\r
\r
<h2 id="js_performance" name="js_performance">JavaScript Performance</h2>\r
<p> JavaScript was originally used for simple inspections and request handling. Therefore, the execution time was not an issue. However, with more advanced UI usage, the use of JavaScript code has been increased and become more complicated, significantly influencing the application performance.</p>\r
<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#origin-request-header" target="blank">Origin</a> request header\r
<p>Includes the domain information which has incurred the COR, and is used for the purpose of checking the source of the domain side that has received the relevant request. In addition, this header is protected in the browser side and cannot be changed from the application side.</p></li>\r
<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header\r
-<p>Allows a relevant response only when the information in the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header matches. If the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header is a wildcard (*), it unconditionally allows the response regardless of the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header information.</p>\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.</td> \r
- </tr> \r
- </tbody> \r
- </table>\r
+<p>Allows a relevant response only when the information in the <code>Origin</code> request header matches. If the <code>Access-Control-Allow-Origin</code> header is a wildcard (*), it unconditionally allows the response regardless of the <code>Origin</code> request header information.</p>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.\r
+</div>\r
</li>\r
</ul>\r
\r
<h2 name="simple" id="simple">Simple Request</h2>\r
<p>The request is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>\r
<ul>\r
-<li>HTTP methods can only use <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, and <span style="font-family: Courier New,Courier,monospace">HEAD</span>.</li>\r
+<li>HTTP methods can only use <code>GET</code>, <code>POST</code>, and <code>HEAD</code>.</li>\r
<li>No custom header is allowed.</li>\r
-<li>The <span style="font-family: Courier New,Courier,monospace">Content-Type</span> is one of the following:\r
+<li>The <code>Content-Type</code> is one of the following:\r
<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace">application/x-www-form-urlencoded</span></li>\r
-<li><span style="font-family: Courier New,Courier,monospace">multipart/form-data</span></li>\r
-<li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>\r
+<li><code>application/x-www-form-urlencoded</code></li>\r
+<li><code>multipart/form-data</code></li>\r
+<li><code>text/plain</code></li>\r
</ul>\r
</li>\r
</ul>\r
\r
</ul>\r
\r
-<p class="figure">Figure: Simple request workflow</p>\r
+<p align="center"><strong>Figure: Simple request workflow</strong></p>\r
<p align="center"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p> \r
\r
\r
<h2 name="preflight" id="preflight">Preflight Request</h2>\r
\r
<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#terminology" target="_blank">case-insensitive</a>.</p>\r
-<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <span style="font-family: Courier New,Courier,monospace">Origin</span>, such as HTTP certification, HTTP method (for example, <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, or <span style="font-family: Courier New,Courier,monospace">PUT…</span>), or the existence of a certain header.</p>\r
+<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <code>Origin</code>, such as HTTP certification, HTTP method (for example, <code>GET</code>, <code>POST</code>, or <code>PUT…</code>), or the existence of a certain header.</p>\r
<p>When <a href="#Using_Preflight_Requests">using preflight requests</a>, the response is set in the server side with the following response headers:</p>\r
<ul>\r
<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
</ul>\r
\r
\r
-<p class="figure">Figure: Preflight request workflow</p>\r
+<p align="center"><strong>Figure: Preflight request workflow</strong></p>\r
<p align="center"><img alt="Preflight request workflow" src="../../../images/cors_preflight.png" /></p> \r
\r
<h2 id="Using_Simple_Requests" name="Using_Simple_Requests">Using Simple Requests</h2>\r
</pre>\r
</li>\r
\r
-<li>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://origin-domain.com</span> domain has the required authority.\r
+<li>On the server side, define the domain from which requests are allowed. In this case, the <code>http://origin-domain.com</code> domain has the required authority.\r
<pre class="prettyprint">\r
<?php\r
header("Access-Control-Allow-Origin: http://origin-domain.com");\r
</li>\r
\r
<li>Check the request header.\r
-<p>If you check the request header through the network log, you find that an additional <span style="font-family: Courier New,Courier,monospace">Origin</span> header has been added. This header informs the relevant server of the sender side domain. The <span style="font-family: Courier New,Courier,monospace">Origin</span> header is protected in the browser side, and cannot be changed by the user.</p>\r
+<p>If you check the request header through the network log, you find that an additional <code>Origin</code> header has been added. This header informs the relevant server of the sender side domain. The <code>Origin</code> header is protected in the browser side, and cannot be changed by the user.</p>\r
<pre class="prettyprint">\r
GET http://origin-domain.com/CORS/simple_reqeust.html HTTP/1.1\r
Host: origin-domain.com\r
<li>Check the response header:\r
<ul>\r
<li><p>If the request is received from a domain with access authority, the server allows a response.\r
-The response header includes the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header set in the server side.</p>\r
+The response header includes the <code>Access-Control-Allow-Origin</code> header set in the server side.</p>\r
<pre class="prettyprint">\r
HTTP/1/1 200 OK\r
Access-Control-Allow-Origin: http://origin-domain.com\r
Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Origin.\r
</pre></li></ul>\r
\r
-<table class="note">\r
- <tbody>\r
- <tr>\r
- <th class="note">Note</th>\r
- </tr>\r
- <tr>\r
- <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>\r
- </tr>\r
- </tbody>\r
-</table>\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.\r
+</div>\r
</li>\r
</ol>\r
<h3>Source Code</h3>\r
<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>\r
\r
<ol>\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 <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and add a custom header.\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
</pre>\r
</li>\r
\r
-<li><p>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://110.0.0.160:8081</span> domain has the required authority. In addition, define various server settings.</p>\r
+<li><p>On the server side, define the domain from which requests are allowed. In this case, the <code>http://110.0.0.160:8081</code> domain has the required authority. In addition, define various server settings.</p>\r
<pre class="prettyprint">\r
<?php\r
header("Access-Control-Allow-Origin: http://110.0.0.160:8081");\r
<li>Check the request and response headers.\r
<p>If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.</p>\r
<ul>\r
-<li><p>The preflight request checks the access authority before sending the actual data. The <span style="font-family: Courier New,Courier,monospace">Origin</span> and <span style="font-family: Courier New,Courier,monospace">Access-Control-Request-Headers</span> headers have been added to the request, because the request has a user-defined custom header, and the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> set to <span style="font-family: Courier New,Courier,monospace">application/json</span>:</p>\r
+<li><p>The preflight request checks the access authority before sending the actual data. The <code>Origin</code> and <code>Access-Control-Request-Headers</code> headers have been added to the request, because the request has a user-defined custom header, and the <code>Content-Type</code> set to <code>application/json</code>:</p>\r
<pre>\r
OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1\r
Host: origin-domain.com\r
Origin: http://origin-domain.com\r
Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type\r
</pre></li>\r
-<li><p>If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and <span style="font-family: Courier New,Courier,monospace">Header-Custom-Tizen</span> are included in the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Headers</span> header:</p>\r
+<li><p>If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the <code>Content-Type</code> and <code>Header-Custom-Tizen</code> are included in the <code>Access-Control-Allow-Headers</code> header:</p>\r
<pre>\r
HTTP/1/1 200 OK\r
Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen\r
Request header field Header-Custom-Tizen is not allowed by Access-Control-Allow-Headers.\r
</pre>\r
\r
-<table class="note">\r
- <tbody>\r
- <tr>\r
- <th class="note">Note</th>\r
- </tr>\r
- <tr>\r
- <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>\r
- </tr>\r
- </tbody>\r
-</table>\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.\r
+</div>\r
</li>\r
</ol>\r
\r
\r
<h1>HTML5 iframe element</h1> \r
\r
-<p>The HTML5 <span style="font-family: Courier New,Courier,monospace">iframe</span> element can be used to solve security and design issues in embedded Web content.</p>\r
+<p>The HTML5 <code>iframe</code> element can be used to solve security and design issues in embedded Web content.</p>\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
-<p>The main features of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element include:</p>\r
+<p>The main features of the <code>iframe</code> element include:</p>\r
\r
<ul>\r
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> attribute\r
-<p>To enhance application security, you can use the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute of the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to control the execution of tasks that can result in unreliable content.</p>\r
-<p>If an empty value is assigned to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute, the following restrictions are applied:</p>\r
+<p>To enhance application security, you can use the <code>sandbox</code> attribute of the <code>iframe</code> object to control the execution of tasks that can result in unreliable content.</p>\r
+<p>If an empty value is assigned to the <code>sandbox</code> attribute, the following restrictions are applied:</p>\r
<ul>\r
<li>Content is treated as belonging to a unique origin. Access to cookies, local storage, and other pages within the same domain are not allowed.</li>\r
<li>Form submission is disabled.</li>\r
</ul>\r
<p>To work around these restrictions, you can use the following additional security restriction conditions:</p>\r
<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>\r
+<li><code>allow-same-origin</code>\r
<p>Enables the content <a href="#Sandboxed_Cookies">to be treated as belonging to the same origin</a>.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span>\r
+<li><code>allow-top-navigation</code>\r
<p>Enables <a href="#Sandboxed_Page"> navigation to the top-level browsing context</a>.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace">allow-forms</span>\r
+<li><code>allow-forms</code>\r
<p>Enables <a href="#Sandboxed_Form">form submission</a>.</p></li>\r
-<li><
span style="font-family: Courier New,Courier,monospace">allow-scripts</span><p> Enables script execution, but blocks pop-ups.</p></li>
\r-<li><span style="font-family: Courier New,Courier,monospace">allow-popups</span>\r
+<li><
code>allow-scripts</code><p> Enables script execution, but blocks pop-ups.</p></li>
\r+<li><code>allow-popups</code>\r
<p>Enables <a href="#Sandboxed_Popups"> opening a pop-up window from the sandboxed element</a>.</p></li>\r
</ul></li>\r
\r
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute\r
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute provided in the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to <a href="#Parent_Document"> render a page as a part of the parent document and include it in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element</a>.</p></li>\r
+<p>You can use the <code>seamless</code> attribute provided in the <code>iframe</code> object to <a href="#Parent_Document"> render a page as a part of the parent document and include it in the <code>iframe</code> element</a>.</p></li>\r
</ul>\r
\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">scrolling</span>, <span style="font-family: Courier New,Courier,monospace">align</span>, <span style="font-family: Courier New,Courier,monospace">frameborder</span>, <span style="font-family: Courier New,Courier,monospace">marginheight</span>, <span style="font-family: Courier New,Courier,monospace">marginwidth</span>, and <span style="font-family: Courier New,Courier,monospace">longdesc</span> HTML5 attributes are no longer supported in the latest HTML5 version.</td>\r
- </tr> \r
- </tbody> \r
- </table> \r
+<div class="note">\r
+ <strong>Note</strong>\r
+ The <code>scrolling</code>, <code>align</code>, <code>frameborder</code>, <code>marginheight</code>, <code>marginwidth</code>, and <code>longdesc</code> HTML5 attributes are no longer supported in the latest HTML5 version.\r
+</div>\r
\r
<h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies">Accessing Sandboxed Cookies</h2>\r
\r
-<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when accessing the cookies of the parent document enhances the security features of your application:</p>\r
+<p>Learning how to control <code>iframe</code> element content when accessing the cookies of the parent document enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content and cookie access, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>:\r
-<pre class="prettyprint"><input type="checkbox" id="chkSandbox" name="chkSandbox" \r
- onclick="setSandbox()" /> Enable Sandbox\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <code>iframe</code> element content and cookie access, set the <code>sandbox</code> attribute value as <code>allow-same-origin</code>:\r
+<pre class="prettyprint">\r
+<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+ onclick="setSandbox()"/> Enable Sandbox\r
<div id="description" style="padding: 10px; margin: 10px;"></div>\r
\r
-<iframe src="iframe_cookie_stolen.html" \r
- sandbox="allow-scripts allow-same-origin" \r
- id="iframe" seamless \r
- width="100%" height="350px" \r
- style="border: 1px solid #DCDCDC;"></iframe></pre></li>\r
+<iframe src="iframe_cookie_stolen.html"\r
+ sandbox="allow-scripts allow-same-origin"\r
+ id="iframe" seamless\r
+ width="100%" height="350px"\r
+ style="border: 1px solid #DCDCDC;"></iframe>\r
+</pre></li>\r
<li>Create a test cookie:\r
-<pre class="prettyprint"><script> \r
+<pre class="prettyprint">\r
+<script>\r
SetCookie('userid', 'example@tizen.org', 7);\r
- \r
- function SetCookie(name, value, expiredays) \r
+\r
+ function SetCookie(name, value, expiredays)\r
{\r
var today = new Date();\r
today.setDate(today.getDate() + expiredays);\r
- document.cookie = name + "=" + escape(value) + \r
- "; path=/; expires=" + today.toGMTString() + ";";\r
+ document.cookie =\r
+ name + "=" + escape(value) + "; path=/; expires="\r
+ + today.toGMTString() + ";";\r
}\r
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
\r
-<li>To block cookie access, remove the <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
-<pre class="prettyprint"><script>\r
- function setSandbox() \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
+ if (checkbox.checked)\r
{\r
- /* Access to cookies within the same domain is not allowed */ \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
+ else\r
{\r
- /* Access to cookies within the same domain is allowed */ \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
+ 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
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
<li>Display the result:\r
-<pre class="prettyprint"><div id="message"></div></pre></li>\r
+<pre class="prettyprint">\r
+<div id="message"></div>\r
+</pre></li>\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"><script>\r
- window.onload = function() \r
+<pre class="prettyprint">\r
+<script>\r
+ window.onload = function()\r
{\r
var message = document.getElementById("message");\r
- try \r
+ try\r
{\r
- message.innerHTML = "<h3>stole parent window's cookie</h3> userid: " + GetCookie("userid");\r
- } \r
- catch (e) \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
+ function GetCookie(Name)\r
{\r
var search = Name + "="\r
\r
- if (document.cookie.length > 0) \r
+ if (document.cookie.length > 0)\r
{\r
\r
offset = document.cookie.indexOf(search)\r
\r
- if (offset != -1) \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
+ return unescape(document.cookie.substring(offset, end));\r
}\r
}\r
\r
return "";\r
}\r
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
</ol>\r
-<p class="figure">Figure: Sandbox cookie access (in mobile applications only)</p>\r
+<p align="center"><strong>Figure: Sandbox cookie access (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Sandbox cookie access (in mobile applications only)" src="../../../images/sandbox_cookie_access.png"/></p>\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following files:</p>\r
\r
<h2 id="Sandboxed_Page" name="Sandboxed_Page">Redirecting a Sandboxed Page</h2>\r
\r
-<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when redirecting a page enhances the security features of your application:</p>\r
+<p>Learning how to control <code>iframe</code> element content when redirecting a page enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that disables the sandbox. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:\r
-<pre class="prettyprint"><input type="checkbox" id="chkSandbox" name="chkSandbox" \r
- onclick="setSandbox()" /> Disable Sandbox\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that disables the sandbox. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:\r
+<pre class="prettyprint">\r
+<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+ onclick="setSandbox()"/> Disable Sandbox\r
<div id="description" style="padding: 10px; margin: 10px;"></div>\r
\r
-<iframe src="iframe_page_redirection.html" \r
- sandbox="allow-scripts" \r
- id="iframe" seamless></iframe></pre></li>\r
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, set the <span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span> attribute to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
-<pre class="prettyprint"><script> \r
- function setSandbox() \r
+<iframe src="iframe_page_redirection.html"\r
+ sandbox="allow-scripts"\r
+ id="iframe" seamless></iframe>\r
+</pre></li>\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
+ if (checkbox.checked)\r
{\r
flag = "allow-scripts allow-top-navigation";\r
- frameInfo = "<iframe src sandbox="allow-scripts allow-top-navigation"></iframe>";\r
- } \r
- else \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
frame.setAttribute("src", "iframe_page_redirection.html");\r
document.querySelector("#description").textContent = frameInfo;\r
}\r
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
\r
\r
<li>Include the image displayed on the page:\r
-<pre class="prettyprint"><img id="img" alt="Tizen Lockup on Dark"\r
+<pre class="prettyprint">\r
+<img id="img" alt="Tizen Lockup on Dark"\r
src="http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png" \r
- onclick="alert('fake advertisement!');" \r
- width="240" height="103" /></pre></li>\r
-<li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <span style="font-family: Courier New,Courier,monospace">warning.html</span> page:\r
-<pre class="prettyprint"><script> \r
- try \r
+ onclick="alert('fake advertisement!');"\r
+ width="240" height="103"/>\r
+</pre></li>\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
+ catch (e)\r
{\r
alert("HTML5 Sandbox prevented top level navigation.");\r
}\r
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
</ol>\r
\r
-<p class="figure">Figure: Sandbox page redirection (in mobile applications only)</p>\r
+<p align="center"><strong>Figure: Sandbox page redirection (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Sandbox page redirection (in mobile applications only)" src="../../../images/sandbox_page_redirection.png"/></p>\r
\r
<h3>Source Code</h3>\r
</ul> \r
\r
<h2 id="Sandboxed_Form" name="Sandboxed_Form">Submitting a Sandboxed Form</h2>\r
- <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when submitting a form enhances the security features of your application:</p>\r
+ <p>Learning how to control <code>iframe</code> element content when submitting a form enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-forms</span>:\r
-<pre class="prettyprint"><input type="checkbox" id="chkSandbox" name="chkSandbox" \r
- onclick="setSandbox()" /> Enable Sandbox\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <code>sandbox</code> attribute value as <code>allow-forms</code>:\r
+<pre class="prettyprint">\r
+<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+ onclick="setSandbox()"/> Enable Sandbox\r
<div id="description" style="padding: 10px; margin: 10px;"></div>\r
\r
-<iframe src="iframe_form_submission.html" \r
- sandbox="allow-scripts allow-same-origin allow-forms" \r
- width="100%" height="200px"></iframe></pre></li>\r
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-forms</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
-<pre class="prettyprint"><script> \r
- function setSandbox() \r
+<iframe src="iframe_form_submission.html"\r
+ sandbox="allow-scripts allow-same-origin allow-forms"\r
+ width="100%" height="200px"></iframe>\r
+</pre></li>\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
+ if (checkbox.checked)\r
{\r
flag = "allow-scripts allow-same-origin";\r
- frameInfo = "<iframe src sandbox="allow-scripts allow-same-origin"></iframe>";\r
- } else \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 = "<iframe src sandbox='allow-scripts allow-same-origin allow-forms'></iframe>";\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
-</script></pre></li>\r
-<li>Create a form for the login screen with <span style="font-family: Courier New,Courier,monospace"><input></span> elements to enter an email and password, and submit them:\r
-<pre class="prettyprint"><form method="get" action="iframe_form_submission.html">\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
+<pre class="prettyprint">\r
+<form method="get" action="iframe_form_submission.html">\r
<h3>Advertisement, SNS</h3>\r
- \r
+\r
<fieldset>\r
<legend>Login</legend>\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
+ <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
</fieldset>\r
<input type="submit" value="Login"/>\r
-</form></pre></li>\r
+</form>\r
+</pre></li>\r
\r
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, the imported login information is displayed:\r
-<pre class="prettyprint"><script>\r
- window.onload = function() \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
+ if (location.href.indexOf("?") >= 0)\r
{\r
- html = ['<div id="message">',\r
- '<h3>Catches login qualification certifying information</h3>',\r
- (location.href.split("?")[1]).replace("&", "<br />"),\r
- '</div>'].join('');\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
-</script></pre></li>\r
+</script>\r
+</pre></li>\r
</ol>\r
-<p class="figure">Figure: Sandbox form submission (in mobile applications only)</p>\r
+<p align="center"><strong>Figure: Sandbox form submission (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Sandbox form submission (in mobile applications only)" src="../../../images/sandbox_form_submission.png"/></p>\r
\r
\r
\r
<h2 id="Sandboxed_Popups" name="Sandboxed_Popups">Managing Sandboxed Pop-ups</h2>\r
\r
- <p>Learning how to control the opening of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content enhances the security features of your application:</p>\r
+ <p>Learning how to control the opening of the <code>iframe</code> element content enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-popups</span>:\r
-<pre class="prettyprint"><input type="checkbox" id="chkSandbox" name="chkSandbox" \r
- onclick="setSandbox()" /> Enable Sandbox\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <code>sandbox</code> attribute value as <code>allow-popups</code>:\r
+<pre class="prettyprint">\r
+<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+ onclick="setSandbox()"/> Enable Sandbox\r
<div id="description" style="padding:10 px; margin:10 px;"></div>\r
\r
-<iframe src="iframe_popup.html" \r
+<iframe src="iframe_popup.html"\r
sandbox="allow-scripts allow-same-origin allow-popups"\r
id="iframe" seamless\r
style="border: 1px solid #DCDCDC;"></iframe>\r
</pre></li>\r
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-popups</span> flag from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
-<pre class="prettyprint"><script> \r
- function setSandbox() \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
+ if (checkbox.checked)\r
{\r
flag = 'allow-scripts allow-same-origin';\r
- frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin"></iframe>';\r
- } \r
- else \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 = '<iframe src sandbox="allow-scripts allow-same-origin allow-popups"></iframe>';\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
-</script></pre></li>\r
-<li>Create an external link in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element:\r
-<pre class="prettyprint"><p>[<a href="https://www.tizen.org/about" target="_blank">Click Link!</a>]</p></pre></li>\r
+</script>\r
+</pre></li>\r
+<li>Create an external link in the <code>iframe</code> element:\r
+<pre class="prettyprint">\r
+<p>[<a href="https://www.tizen.org/about" target="_blank">Click Link!</a>]</p>\r
+</pre></li>\r
</ol>\r
\r
-<p class="figure">Figure: Sandbox pop-up (in mobile applications only)</p>\r
+<p align="center"><strong>Figure: Sandbox pop-up (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Sandbox pop-up (in mobile applications only)" src="../../../images/sandbox_popup.png"/></p>\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following files:</p>\r
\r
<h2 id="Parent_Document" name="Parent_Document">Including Rendered Content in the Parent Document</h2>\r
\r
- <p>Learning how to include rendered content seamlessly in the parent document using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element enhances the security features of your application:</p>\r
+ <p>Learning how to include rendered content seamlessly in the parent document using the <code>iframe</code> element enhances the security features of your application:</p>\r
<ol>\r
-<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <span style="font-family: Courier New,Courier,monospace">iframe</span> element without the setting:\r
-<pre class="prettyprint"><head> \r
+<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <code>iframe</code> element without the setting:\r
+<pre class="prettyprint">\r
+<head>\r
<style>\r
- body, html \r
+ body, html\r
{\r
margin: 0; padding: 0;\r
}\r
- body \r
+ body\r
{\r
font-size: 12px;\r
}\r
{\r
color: blue;\r
}\r
- </style> \r
+ </style>\r
</head>\r
<body>\r
<h2>HTML5 iframe</h2>\r
<iframe seamless src="iframe.html"></iframe>\r
<iframe src="iframe.html"></iframe>\r
-</body></pre></li>\r
-<li>Create the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content. The <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute set displays the content with the inherited CSS style:\r
-<pre class="prettyprint"><body> \r
+</body>\r
+</pre></li>\r
+<li>Create the <code>iframe</code> element content. The <code>iframe</code> element with the <code>seamless</code> attribute set displays the content with the inherited CSS style:\r
+<pre class="prettyprint">\r
+<body>\r
<h3>iframe! h3 Content</h3>\r
<ul>\r
<li><a href="http://tizen.org">tizen.org</a></li>\r
tizen.org target="_self"</a>\r
</li>\r
</ul>\r
-</body></pre></li>\r
+</body>\r
+</pre></li>\r
</ol>\r
-<p class="figure">Figure: Seamless content appending (in mobile applications only)</p>\r
+<p align="center"><strong>Figure: Seamless content appending (in mobile applications only)</strong></p>\r
<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following files:</p>\r
<h2 id="set" name="set">Setting the Cache Manifest</h2>
-<p>To enable application caches, include the <span style="font-family: Courier New,Courier,monospace">manifest</span> attribute in the <span style="font-family: Courier New,Courier,monospace"><html></span> tag on every page of your Web application that you want cached. The recommended file extension for the manifest file is <span style="font-family: Courier New,Courier,monospace">.appcache</span>. The file must be served using the <span style="font-family: Courier New,Courier,monospace">text/cache-manifest</span> MIME type.</p>
+<p>To enable application caches, include the <code>manifest</code> attribute in the <code><html></code> tag on every page of your Web application that you want cached. The recommended file extension for the manifest file is <code>.appcache</code>. The file must be served using the <code>text/cache-manifest</code> MIME type.</p>
<p>The following example demonstrates cache enabling. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/storage/html5_application_caches" target="_blank">appcache_update.html</a>.</p>
<pre class="prettyprint">
images/sound-icon.png
images/background.png
/tizen_application_cache.html
-/main.js</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace"># 2013-03-18 v2.0.0</span> line is used for searching. When the content in an image or file list is changed, it does not automatically update the cache. It is updated if the manifest file is changed. Even if the content in the description is changed, cache update is possible. </td>
- </tr>
- </tbody>
-</table>
+/main.js
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code># 2013-03-18 v2.0.0</code> line is used for searching. When the content in an image or file list is changed, it does not automatically update the cache. It is updated if the manifest file is changed. Even if the content in the description is changed, cache update is possible.
+</div>
</li>
-<li><p>Define the files to be cached in the <span style="font-family: Courier New,Courier,monospace">CACHE</span> section:</p>
-<pre class="prettyprint">CACHE:
-style/default.css</pre>
+<li><p>Define the files to be cached in the <code>CACHE</code> section:</p>
+<pre class="prettyprint">
+CACHE:
+style/default.css
+</pre>
<p>This is the default section for entries. Files listed under this header are explicitly cached after they are downloaded for the first time.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><span style="font-family: Courier New,Courier,monospace">CACHE</span> section can be omitted, if automatic cache save is used. </td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>CACHE</code> section can be omitted, if automatic cache save is used.
+</div>
</li>
-<li><p>Define the online white list in the <span style="font-family: Courier New,Courier,monospace">NETWORK</span> section:</p>
-<pre class="prettyprint">NETWORK:
+<li><p>Define the online white list in the <code>NETWORK</code> section:</p>
+<pre class="prettyprint">
+NETWORK:
comm.cgi
-login.asp</pre>
+login.asp
+</pre>
<p>All requests to these resources bypass the cache, even if the user if offline. Wild cards like '*' can be used.</p></li>
<li>
-<p>Define the fallback pages in the <span style="font-family: Courier New,Courier,monospace">FALLBACK</span> section:</p>
-<pre class="prettyprint">FALLBACK:
+<p>Define the fallback pages in the <code>FALLBACK</code> section:</p>
+<pre class="prettyprint">
+FALLBACK:
/ tizen /tizen_offline.html
</pre>
-<p>This section is optional and used to specify fallback pages in case a resource is inaccessible. In the example above, if the file in the <span style="font-family: Courier New,Courier,monospace">/tizen</span> folder cannot be loaded in an offline state, it is replaced with the <span style="font-family: Courier New,Courier,monospace">tizen_offline.html</span> file.</p>
+<p>This section is optional and used to specify fallback pages in case a resource is inaccessible. In the example above, if the file in the <code>/tizen</code> folder cannot be loaded in an offline state, it is replaced with the <code>tizen_offline.html</code> file.</p>
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The cached version of the file is displayed to the user even when an updated file is uploaded to the server. If the file is updated, the manifest file must be changed accordingly. The cache size in a mobile or desktop Web browser is normally set as 5 MB per domain.
-</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The cached version of the file is displayed to the user even when an updated file is uploaded to the server. If the file is updated, the manifest file must be changed accordingly. The cache size in a mobile or desktop Web browser is normally set as 5 MB per domain.
+</div>
<h2 id="update" name="update">Updating the Cache</h2>
<p>The browser checks only the edited items in the manifest, and checks whether a cache update is needed. If the relevant page is updated from the server, the manifest is applied as the basis even after edited items have been applied. If the update content is an addition or deletion of the defined file within the manifest, the manifest file can be edited. </p>
<p>To update the cache:</p>
<ol>
<li>
-<p>Include the <span style="font-family: Courier New,Courier,monospace">manifest</span> property in the <span style="font-family: Courier New,Courier,monospace"><html></span> tag to enable loading the manifest file and caching content by the browser:</p>
+<p>Include the <code>manifest</code> property in the <code><html></code> tag to enable loading the manifest file and caching content by the browser:</p>
<pre class="prettyprint">
<!DOCTYPE html>
<html manifest="clock.appcache">
</pre>
</li>
<li>
-<p>If the content of the <span style="font-family: Courier New,Courier,monospace">cache_test.js</span> file is changed and updating the cache is necessary, edit the manifest file accordingly:</p>
+<p>If the content of the <code>cache_test.js</code> file is changed and updating the cache is necessary, edit the manifest file accordingly:</p>
<pre class="prettyprint">
CACHE MANIFEST
#VERSION 1.0.0
</pre>
</li>
<li>
-<p>Reconnect and check whether there are edited items in the manifest file using the <span style="font-family: Courier New,Courier,monospace">update()</span> method:</p>
+<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 update = function()
{
var appCache = window.applicationCache;
appCache.addEventListener('updateready', handleCacheEvent, false);
</pre>
</li>
<li>
-<p>If there are changes in the manifest file, use the <span style="font-family: Courier New,Courier,monospace">swapCache()</span> and <span style="font-family: Courier New,Courier,monospace">handleCacheEvent()</span> methods to update the cache:</p>
+<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)
+ function handleCacheEvent(e)
{
- if (appCache.status == appCache.UPDATEREADY)
+ if (appCache.status == appCache.UPDATEREADY)
{
- try
+ try
{
window.applicationCache.swapCache();
document.getElementById('log').innerHTML = "Update is successful";
</pre>
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The files used in this example are Web server source files. A change in the client cache occurs when the server file changes. </td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The files used in this example are Web server source files. A change in the client cache occurs when the server file changes.
+</div>
+
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<ul>
<p>To check the current status of the cache:</p>
<ol>
<li>
-<p>Check the <span style="font-family: Courier New,Courier,monospace">window.applicationCache.status</span> value:</p>
+<p>Check the <code>window.applicationCache.status</code> value:</p>
<pre class="prettyprint">
<script>
var appCache = window.applicationCache;
-
- switch (appCache.status)
+
+ switch (appCache.status)
{
case 0: /* ApplicationCache.status is UNCACHED */
break;
</pre>
</li>
<li>
-<p>Different events can occur based on the cache status. Use the <span style="font-family: Courier New,Courier,monospace">addEventListener()</span> method to add listeners in order to detect events:</p>
+<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);
+ {
+ /* 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);
+ {
+ /*
+ 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);
+ {
+ /* Content is being updated */
+ }, false);
appCache.addEventListener('error', function()
- {
- /* Error occurred */
- }, false);
+ {
+ /* Error occurred */
+ }, false);
appCache.addEventListener('noupdate', function()
- {
- /* No update is available */
- }, false);
+ {
+ /* No update is available */
+ }, false);
appCache.addEventListener('obsolete', function()
- {
- /* Manifest file cannot be found */
- }, false);
+ {
+ /* Manifest file cannot be found */
+ }, false);
appCache.addEventListener('progress', function()
- {
- /* Cache file is being downloaded */
- }, false);
+ {
+ /* Cache file is being downloaded */
+ }, false);
appCache.addEventListener('updateready', function()
- {
- /* All resources for update are downloaded */
- }, false);
+ {
+ /* All resources for update are downloaded */
+ }, false);
</script>
</pre>
</li>
<ul>
<li>Reading local file information
<p>You can select a local file to upload using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> interface, which creates and returns a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> object.</p>
-<p>The <
span style="font-family: Courier New,Courier,monospace">File</span> object is used to <a href="#read_info">read basic file information</a>.
+<p>The <
code>File</code> object is used to <a href="#read_info">read basic file information</a>.
</p>
</li>
<li>Reading local file content
-<p>You can use the reading methods of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> interface to <a href="#read_content">read file content</a> in text, binary, or <span style="font-family: Courier New,Courier,monospace">dataURL</span> format. If the data is loaded, the <span style="font-family: Courier New,Courier,monospace">onload</span> event occurs. This event uses the data reading methods according to file format.</p></li>
+<p>You can use the reading methods of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> interface to <a href="#read_content">read file content</a> in text, binary, or <code>dataURL</code> format. If the data is loaded, the <code>onload</code> event occurs. This event uses the data reading methods according to file format.</p></li>
<li>Slicing local files
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">slice()</span> method with a local file or the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface to <a href="#slice">slice data objects</a>. You can use the created blob to read data as a binary string using the <span style="font-family: Courier New,Courier,monospace">FileReader</span> interface. </p>
+<p>You can use the <code>slice()</code> method with a local file or the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface to <a href="#slice">slice data objects</a>. You can use the created blob to read data as a binary string using the <code>FileReader</code> interface. </p>
</li>
</ul>
</li>
<p>You can <a href="#access">request access to a sandboxed file system</a> using the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#using-localfilesystem" target="_blank">LocalFileSystem</a> interface.
</p></li>
<li>Displaying files in a sandboxed file system
-<p>You can use <
span style="font-family: Courier New,Courier,monospace">readEntries()</span> 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 <a href="#display">display directories or files</a>.
+<p>You can use <
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 <a href="#display">display directories or files</a>.
</p></li>
<li>Creating a directory or file within a sandboxed file system
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">getDirectory()</span> and <span style="font-family: Courier New,Courier,monospace">getFile()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface) to <a href="#create_dir">create a directory or file</a>. </p></li>
+<p>You can use the <
code>getDirectory()</code> and <code>getFile()</code> methods of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface) to <a href="#create_dir">create a directory or file</a>. </p></li>
<li>Deleting a directory or file within a sandboxed file system
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">removeRecursively()</span> method of the <span style="font-family: Courier New,Courier,monospace">DirectoryEntry</span> interface and the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-entry-interface" target="_blank">Entry</a> interface to <a href="#remove">delete a directory or file</a>.
+<p>You can use the <
code>removeRecursively()</code> method of the <code>DirectoryEntry</code> interface and the <code>remove()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-entry-interface" target="_blank">Entry</a> interface to <a href="#remove">delete a directory or file</a>.
</p></li>
</ul>
</li>
<p>Reading basic information, such as file name, size, MIME type, modification date, and path, of a local file is a useful file management skill:</p>
<ol>
-<li>To display file information, create the <span style="font-family: Courier New,Courier,monospace"><input type="file"></span> element and other needed elements:
+<li>To display file information, create the <code><input type="file"></code> element and other needed elements:
<pre class="prettyprint">
<input type="file" id="tizenFiles" onchange="readSelectedFiles();" multiple />
<div id="selectedFileInfoList"></div>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To enable multiple upload, use the <span style="font-family: Courier New,Courier,monospace">multiple</span> attribute. </td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ To enable multiple upload, use the <code>multiple</code> attribute.
+</div>
</li>
<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> instance:
</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">readSelectedFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileList</span> interface to retrieve and display file information, such as file name, size, MIME type, and modification date:
+<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()
+ function readSelectedFiles()
{
var displaySection = document.getElementById('selectedFileInfoList');
var html = [];
- for (var i = 0; i < files.length; i++)
+ for (var i = 0; i < files.length; i++)
{
var file = files[i];
html.push("<li>",
" type: ", file.type, "<br />", /* MIME type */
" size: ", file.size, "bytes<br />", /* Size */
" lastModifiedDate: ", /* Last modification date */
- (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : ""),
+ (file.lastModifiedDate ?
+ file.lastModifiedDate.toLocaleDateString() : ""),
" <br />",
"</li>");
}
}
</script>
</pre>
-<p class="figure">Figure: Displaying file information (in mobile applications only)</p>
+<p align="center"><strong>Figure: Displaying file information (in mobile applications only)</strong></p>
<p align="center"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.png" /></p>
</li>
</ol>
<p>Reading a local image file in a Web application is a useful file management skill:</p>
<ol>
-<li>To read a local image file and display its information, create the <span style="font-family: Courier New,Courier,monospace"><input type="file"></span> element and other needed elements:
+<li>To read a local image file and display its information, create the <code><input type="file"></code> element and other needed elements:
<pre class="prettyprint">
<input type="file" id="tizenFiles" onchange="readSelectedFiles();" multiple/>
<div id="selectedFileInfoList"></div>
</pre>
</li>
-<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance to read the content of the local image file. Use the <span style="font-family: Courier New,Courier,monospace">readAsDataURL()</span> method to read data in the <span style="font-family: Courier New,Courier,monospace">dataURL</span> format.
-<p>If the data is loaded, an <span style="font-family: Courier New,Courier,monospace">onload</span> event is fired. Create an <span style="font-family: Courier New,Courier,monospace">img</span> element to allocate the event result property value for rendering:</p>
+<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance to read the content of the local image file. Use the <code>readAsDataURL()</code> method to read data in the <code>dataURL</code> format.
+<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()
+ function readSelectedFiles()
{
var files = document.getElementById("tizenFiles").files;
- if (files.length === 0)
+ if (files.length === 0)
{
return;
}
-
+
var html = [];
- for (var i = 0; i < files.length; i++)
+ 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.*"))
+ if (!file.type.match("image.*"))
{
continue;
}
- reader.onload = (function(e)
- {
+ reader.onload = (function(e)
+ {
var img = document.createElement("img");
- img.src = e.target.result;
+ img.src = e.target.result;
- /* Set the selected image's dataURL */
+ /* Set the selected image's dataURL */
img.title = escape(file.name);
img.className = "img";
-
+
document.getElementById("selectedFileInfoList").appendChild(img);
};
reader.readAsDataURL(file);
</script>
</pre>
-<p class="figure">Figure: Displaying an image file (in mobile applications only)</p>
+<p align="center"><strong>Figure: Displaying an image file (in mobile applications only)</strong></p>
<p align="center"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.png" /></p>
</li>
</ol>
<p>Slicing a local file using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface is a useful file management skill:</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace"><input type="file"></span> element, the element for inputting the start byte and the end byte for slice, and the element for displaying the slicing result:
+<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;" />~
-end byte: <input type="text" id="endByte" name="endByte" style="width: 100px;" />
-<input type="button" value="Slice File" onclick="readBinaryString();" />
+<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();"/>
<div id="result" style="padding: 25px 10px 0 20px;"></div>
</pre>
</pre>
</li>
-<li>Slice the defined byte range (from <
span style="font-family: Courier New,Courier,monospace">startByte</span> to <span style="font-family: Courier New,Courier,monospace">endByte</span>) using the <span style="font-family: Courier New,Courier,monospace">slice()</span> method of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> interface:
+<li>Slice the defined byte range (from <
code>startByte</code> to <code>endByte</code>) using the <code>slice()</code> method of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> interface:
<pre class="prettyprint lang-js">
<script>
- function readBinaryString()
+ function readBinaryString()
{
- if (document.getElementById("tizenFile").files.length === 0)
+ if (document.getElementById("tizenFile").files.length === 0)
{
alert("Upload File");
var blob = file.slice(startByte, endByte);
</pre>
-<p>A new <span style="font-family: Courier New,Courier,monospace">Blob</span> object is created. </p>
+<p>A new <code>Blob</code> object is created. </p>
</li>
<li>
-<p>Read the data as a binary string using the <span style="font-family: Courier New,Courier,monospace">readAsBinaryString()</span> method:</p>
+<p>Read the data as a binary string using the <code>readAsBinaryString()</code> method:</p>
<pre class="prettyprint lang-html">
reader.readAsBinaryString(blob);
}
</script>
</pre>
</li>
-<li>If the data loading is complete, the read data is displayed. Check the status using the <span style="font-family: Courier New,Courier,monospace">onloadend</span> event:
+<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)
+ reader.onloadend = function(e)
{
if (e.target.readyState == FileReader.DONE) /* DONE == 2 */
- {
+ {
document.getElementById('result').textContent = e.target.result;
}
};
</script>
</pre>
-<p class="figure">Figure: Slicing a file (in mobile applications only)</p>
+<p align="center"><strong>Figure: Slicing a file (in mobile applications only)</strong></p>
<p align="center"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.png" /></p>
</li>
</ol>
<p>Requesting access to sandboxed sections of a local file system is a useful file management skill:</p>
<ol>
-<li>Use the <
span style="font-family: Courier New,Courier,monospace">requestFileSystem()</span> 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:
+<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;
+
+ var fs = null;
/* Initialize the file system when loading a page */
- if (window.requestFileSystem)
+ if (window.requestFileSystem)
{
initFS();
}
- function initFS()
+ function initFS()
{
/* Request for access to the sandboxed file system */
/* and define PERSISTENT or TEMPORARY storage */
1024 * 1024, /* Storage space (bytes) */
function(filesystem) {fs = filesystem;},
errorHandler);
- }
+ }
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">requestFileSystem()</span> method is created in the Web application program when it is initially called. </td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ The <code>requestFileSystem()</code> method is created in the Web application program when it is initially called.
+</div>
<p>The directory file in the file system root can be searched, created and deleted by accessing local file system.
</p>
<p>Reading a file or directory in a sandboxed section of a local file system is a useful file management skill:</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace"><input type="button"></span> element for displaying the entries (directories or files) stored in the root directory within the file system, and the list element for displaying the result:
+<li>Create the <code><input type="button"></code> element for displaying the entries (directories or files) stored in the root directory within the file system, and the list element for displaying the result:
<pre class="prettyprint">
-<input type="button" value="Show FileList" onclick="ShowFileList();" />
+<input type="button" value="Show FileList" onclick="ShowFileList();"/>
<ul id="resultSection"></ul>
</pre>
</li>
-<li>To read the entry within the file system, use the <
span style="font-family: Courier New,Courier,monospace">createReader()</span> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface:
+<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()
+ function ShowFileList()
{
if (!fs) return;
var dirReader = root.createReader();
</pre>
</li>
-<li>Use the <
span style="font-family: Courier New,Courier,monospace">readEntries()</span> 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:
+<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)
+ if (!entries.length)
{
objResultSection.innerHTML = 'Filesystem is empty.';
}
- else
+ else
{
var fragment = document.createDocumentFragment();
var entry, i;
- for (i = 0; i < entries.length; i++)
+ for (i = 0; i < entries.length; i++)
{
- entry = entries[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 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 */
+ /* Display entry name */
li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
objResultSection.innerHTML = '';
fragment.appendChild(li);
</script>
</pre>
</li></ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td>
- </tr>
- </tbody>
-</table>
-<p class="figure">Figure: Displaying files</p>
+
+<div class="note">
+ <strong>Note</strong>
+ For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
+</div>
+
+<p align="center"><strong>Figure: Displaying files</strong></p>
<p align="center"><img alt="Displaying files" src="../../../images/file4.png" /></p>
<p>Creating a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">select</span> element for selecting the type of entry to be added, <span style="font-family: Courier New,Courier,monospace"><input type="text"></span> element for entering the entry name, and <span style="font-family: Courier New,Courier,monospace"><input type="button>"</span> element for creating the entry:
+<li>Create the <code>select</code> element for selecting the type of entry to be added, <code><input type="text"></code> element for entering the entry name, and <code><input type="button>"</code> element for creating the entry:
<pre class="prettyprint">
<select id="selType">
<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="button" value="Add File or Directory" onclick="AddFile();" />
+<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 <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> method. To create a file, use the <span style="font-family: Courier New,Courier,monospace">getFile()</span> method:
+<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()
+ function AddFile()
{
if (!fs) return;
var type = document.querySelector('#selType').value;
var name = document.querySelector('#txtName').value;
- if (name == "")
+ if (name == "")
{
return alert("Enter File or Directory Name.");
}
- if (type == "file")
+ if (type == "file")
{
/* Create file */
- fs.root.getFile(name, {create: true}, null, errorHandler);
+ fs.root.getFile(name, {create: true}, null, errorHandler);
}
- else if (type == "dir")
+ else if (type == "dir")
{
- /* Create directory */
- fs.root.getDirectory(name, {create: true}, null, errorHandler);
+ /* Create directory */
+ fs.root.getDirectory(name, {create: true}, null, errorHandler);
}
document.querySelector('#resultSection').innerHTML = 'Files created.';
}
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td>
- </tr>
- </tbody>
-</table>
-
-<p class="figure">Figure: Adding a file</p>
+
+<div class="note">
+ <strong>Note</strong>
+ For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
+</div>
+
+<p align="center"><strong>Figure: Adding a file</strong></p>
<p align="center"><img alt="Adding a file" src="../../../images/file5.png" /></p>
</li>
</ol>
<p>Deleting a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace"><input type="button"></span> element for deleting the entry (directory or file):
+<li>Create the <code><input type="button"></code> element for deleting the entry (directory or file):
<pre class="prettyprint">
-<input type="button" value="Remove all files" onclick="RemoveFile();" />
+<input type="button" value="Remove all files" onclick="RemoveFile();"/>
</pre>
</li>
-<li>To delete a directory and all the files in it, use the <span style="font-family: Courier New,Courier,monospace">removeRecursively()</span> method. To delete an individual file, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method:
+<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()
+ function RemoveFile()
{
if (!fs) return;
var dirReader = fs.root.createReader();
var entry, i;
- dirReader.readEntries(function(entries)
- {
- for (i = 0; i < entries.length; i++)
+ dirReader.readEntries(function(entries)
{
- entry = entries[i];
- if (entry.isDirectory)
- {
- entry.removeRecursively(function() {}, errorHandler);
- }
- else
+ for (i = 0; i < entries.length; i++)
{
- entry.remove(function() {}, errorHandler);
+ 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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td>
- </tr>
- </tbody>
-</table>
-<p class="figure">Figure: Deleting files</p>
+
+<div class="note">
+ <strong>Note</strong>
+ For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
+</div>
+
+<p align="center"><strong>Figure: Deleting files</strong></p>
<p align="center"><img alt="Deleting files" src="../../../images/file6.png" /></p>
</li>
</ol>
<ul>
<li>Creating a database
<p>
-Use the <
span style="font-family: Courier New,Courier,monospace">IndexedDB.open()</span> method to <a href="#db">create a database</a>. In a <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#database-concept" target="_blank">database</a>, at least 1 <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> must be present.</p>
+Use the <
code>IndexedDB.open()</code> method to <a href="#db">create a database</a>. In a <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#database-concept" target="_blank">database</a>, at least 1 <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> must be present.</p>
</li>
<li>Creating an object store
<p>Object store is the basic storage mechanism of indexed database storage data.</p>
<p>You can <a href="#store">
- create an object store</a> using the <span style="font-family: Courier New,Courier,monospace">createObjectStore()</span> method. The object store contains a list of records for storing data, and a key-value list sorted according to the key in an ascending order.</p>
+ create an object store</a> using the <code>createObjectStore()</code> method. The object store contains a list of records for storing data, and a key-value list sorted according to the key in an ascending order.</p>
</li>
<li>Managing data
<p>You can <a href="#manage">save and access data</a> in the object store.</p>
-<p>The stored data creates a key, assigned to a <span style="font-family: Courier New,Courier,monospace">keypath</span>, which in turn creates a value as a JSON object.
+<p>The stored data creates a key, assigned to a <code>keypath</code>, which in turn creates a value as a JSON object.
</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Tizen supports the <span style="font-family: Courier New,Courier,monospace">READ_ONLY</span>, <span style="font-family: Courier New,Courier,monospace">READ_WRITE</span>, and <span style="font-family: Courier New,Courier,monospace">VERSION_CHANGE</span> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction" target="_blank">transactions</a> with the <span style="font-family: Courier New,Courier,monospace">unsigned short</span> type.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ Tizen supports the <code>READ_ONLY</code>, <code>READ_WRITE</code>, and <code>VERSION_CHANGE</code> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction" target="_blank">transactions</a> with the <code>unsigned short</code> type.
+</div>
</li>
<li>Creating an index
-<p>In the object store, you can use the <
span style="font-family: Courier New,Courier,monospace">createIndex()</span> method to <a href="#index">generate an
+<p>In the object store, you can use the <
code>createIndex()</code> method to <a href="#index">generate an
index</a>. You can search and retrieve records stored in the
<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#index-concept" target="_blank">index</a> using other properties than the key, as the key is not always unique. You can also retrieve records containing arrays as keys.</p>
</li>
<ol>
<li>
-<p>Use the <
span style="font-family: Courier New,Courier,monospace">window.webkitIndexedDB.open()</span> method to generate a database named <span style="font-family: Courier New,Courier,monospace">TizenIndexedDB</span> in order to create an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> for storage:</p>
+<p>Use the <
code>window.webkitIndexedDB.open()</code> method to generate a database named <code>TizenIndexedDB</code> in order to create an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> for storage:</p>
<pre class="prettyprint">
<script>
- if (!window.webkitIndexedDB)
+ 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>Check whether an indexed database is supported in the <span style="font-family: Courier New,Courier,monospace">window</span> object. If the database is generated properly, the <span style="font-family: Courier New,Courier,monospace">onsuccess</span> event handler is called. </p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The name of the database can be any string type, including an empty string. To change the version of the database, use the <span style="font-family: Courier New,Courier,monospace">VERSION_CHANGE</span> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction-concept" target="_blank">transaction</a>.</td>
- </tr>
- </tbody>
-</table>
+<p>Check whether an indexed database is supported in the <code>window</code> object. If the database is generated properly, the <code>onsuccess</code> event handler is called. </p>
+
+<div class="note">
+ <strong>Note</strong>
+ The name of the database can be any string type, including an empty string. To change the version of the database, use the <code>VERSION_CHANGE</code> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction-concept" target="_blank">transaction</a>.
+</div>
</li>
<li>
-<p>Delete the generated database using the <span style="font-family: Courier New,Courier,monospace">window.webkitIndexedDB.deleteDatabase()</span> method:</p>
+<p>Delete the generated database using the <code>window.webkitIndexedDB.deleteDatabase()</code> method:</p>
<pre class="prettyprint">
<script>
window.webkitIndexedDB.deleteDatabase('TizenIndexedDB');
<p>Creating and deleting an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> is a useful data management skill:</p>
<ol>
<li>
-<p>To generate an object store for data storage, use the <span style="font-family: Courier New,Courier,monospace">createObjectStore()</span> method:</p>
+<p>To generate an object store for data storage, use the <code>createObjectStore()</code> method:</p>
<pre class="prettyprint">
<script>
var tizenDB = {}
var request = window.webkitIndexedDB.open("TizenIndexedDB");
- request.onupgradeneeded = function(e)
- {
- tizenDB.db = event.target.result;
- try
+ 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.
-The <span style="font-family: Courier New,Courier,monospace">keyPath</span> property makes the object store unique and must contain the <span style="font-family: Courier New,Courier,monospace">key</span> attribute to store data in the object store.</p>
+The <code>keyPath</code> property makes the object store unique and must contain the <code>key</code> attribute to store data in the object store.</p>
</li>
<li>
-<p>To delete the object store, use the <span style="font-family: Courier New,Courier,monospace">deleteObjectStore()</span> method:</p>
+<p>To delete the object store, use the <code>deleteObjectStore()</code> method:</p>
<pre class="prettyprint">
<script>
window.webkitIndexedDB.deleteObjectStore('tizenStore');
<ol>
<li>
-<p>Access the object store using the <span style="font-family: Courier New,Courier,monospace">readwrite</span> transaction and save data using the <span style="font-family: Courier New,Courier,monospace">put()</span> method:</p>
+<p>Access the object store using the <code>readwrite</code> transaction and save data using the <code>put()</code> method:</p>
<pre class="prettyprint">
<script>
objStore.transaction.oncomplete = function(e)
{
- var trans = tizenDB.db.transaction("tizenStore", "readwrite");
+ var trans = tizenDB.db.transaction("tizenStore", "readwrite");
var tizenStore = trans.objectStore("tizenStore");
- var data =
+ var data =
{
"key": new Date().getTime(),
"text": "Tizen-" + Math.random()
};
var request = tizenStore.put(data);
- request.onsuccess = function(e)
+ request.onsuccess = function(e)
{
tizenDB.db.objectStoreId = request.result;
console.log(request.result);
};
- }
+ }
</script>
</pre>
</li><li>
-<p>Request data in the <span style="font-family: Courier New,Courier,monospace">tizenStore</span> object store by calling data relevant to the key value in the storage with the <span style="font-family: Courier New,Courier,monospace">get()</span> method:
+<p>Request data in the <code>tizenStore</code> object store by calling data relevant to the key value in the storage with the <code>get()</code> method:
</p>
<pre class="prettyprint">
<script>
var request = tizenStore.put(data);
- request.onsuccess = function(e)
+ request.onsuccess = function(e)
{
tizenDB.db.objectStoreId = request.result;
var data = tizenStore.get(tizenDB.db.objectStoreId);
</pre>
</li><li>
-<p>Delete the data in the object store using the <span style="font-family: Courier New,Courier,monospace">delete()</span> method:</p>
+<p>Delete the data in the object store using the <code>delete()</code> method:</p>
<pre class="prettyprint">
<script>
var request = tizenStore.put(data);
- request.onsuccess = function(e)
+ request.onsuccess = function(e)
{
- tizenDB.db.objectStoreId = request.result;
+ tizenDB.db.objectStoreId = request.result;
var data = tizenStore.delete(tizenDB.db.objectStoreId);
- data.onsuccess = function(e)
+ data.onsuccess = function(e)
{
console.log(data);
}
<ol>
<li>
-<p>Create an index named <span style="font-family: Courier New,Courier,monospace">tizen01</span> to search for stored data in records based on its property (<span style="font-family: Courier New,Courier,monospace">text</span>):</p>
+<p>Create an index named <code>tizen01</code> to search for stored data in records based on its property (<code>text</code>):</p>
<pre class="prettyprint lang-js">
<script>
</pre>
</li>
<li>
-<p>Access the index using the <span style="font-family: Courier New,Courier,monospace">objStore.index()</span> method:</p>
+<p>Access the index using the <code>objStore.index()</code> method:</p>
<pre class="prettyprint">
var dbIndex = objStore.index("tizen01");
</pre>
</li>
<li>
-<p>Delete the index using the <span style="font-family: Courier New,Courier,monospace">objStore.deleteIndex()</span> method:</p>
-<pre class="prettyprint"> tizenDB.index = objStore.deleteIndex("tizen01");
+<p>Delete the index using the <code>objStore.deleteIndex()</code> method:</p>
+<pre class="prettyprint">
+ tizenDB.index = objStore.deleteIndex("tizen01");
</script>
</pre>
</li>
<p>Saving, reading, and deleting data in a local Web storage is a useful data management skill:</p>
<ol>
<li>
-<p>To save data in the storage, use the <span style="font-family: Courier New,Courier,monospace">setItem()</span> method that saves data in the key-value format:</p>
+<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the size of the data exceeds 5 MB, an error occurs. </td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ If the size of the data exceeds 5 MB, an error occurs.
+</div>
</li>
<li>
-<p>To get the saved data, use the <span style="font-family: Courier New,Courier,monospace">getItem()</span> method with the data key:</p>
+<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++)
+ for (var i = 0; i < localStorage.length; i++)
{
- localhtml += "<li>" + localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)) + "</li>";
+ localhtml +=
+ "<li>" + localStorage.key(i) + " : "
+ + localStorage.getItem(localStorage.key(i)) + "</li>";
}
</script>
</pre>
<li>
<p>To delete the saved data: </p>
<ul>
-<li>To delete a specific item, use the <span style="font-family: Courier New,Courier,monospace">removeItem()</span> method with the data key:
+<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>
<li>
-<p>To delete all the data stored in the local storage, use the <span style="font-family: Courier New,Courier,monospace">clear()</span> method:</p>
+<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">clear()</span> method deletes all data within the same domain.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>clear()</code> method deletes all data within the same domain.
+</div>
</li>
</ul>
</li>
<h2 id="save" name="save">Managing Data in Local and Session Storage</h2>
-<p>With the <span style="font-family: Courier New,Courier,monospace">setItem()</span> method, you can store searches on certain conditions used in the browser by the user. When the user reconnects, the <span style="font-family: Courier New,Courier,monospace">getItem()</span> method is called to retrieve the stored data.</p>
+<p>With the <code>setItem()</code> method, you can store searches on certain conditions used in the browser by the user. When the user reconnects, the <code>getItem()</code> method is called to retrieve the stored data.</p>
<p>Knowing how the same data is saved in local storage and session storage, and checking whether data exists when the browser is closed and reopened is a useful data management skill: </p>
<ol>
-<li><p>Create the storage key and define a <span style="font-family: Courier New,Courier,monospace">button</span> element for saving the data:</p>
+<li><p>Create the storage key and define a <code>button</code> element for saving the data:</p>
<pre class="prettyprint">
<body>
- Storage key:
- <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;" />
+ Storage key:
+ <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;" />
</body>
</pre>
</li>
<li>
-<p>Get the key-value pair to be stored in the local storage and session storage using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span> method. Store the input key-value pair received using the <span style="font-family: Courier New,Courier,monospace">setItem()</span> method:</p>
+<p>Get the key-value pair to be stored in the local storage and session storage using the <code>getElementById()</code> method. Store the input key-value pair received using the <code>setItem()</code> method:</p>
<pre class="prettyprint">
<script>
- function addStorage()
+ function addStorage()
{
var key = document.getElementById("storageKey");
var data = document.getElementById("storageData");
/* Set the local storage item */
- if ("localStorage" in window)
+ if ("localStorage" in window)
{
localStorage.setItem(key.value, data.value);
location.reload();
- }
- else
+ }
+ else
{
alert("no localStorage in window");
}
/* Set the session storage item */
- if ("sessionStorage" in window)
+ if ("sessionStorage" in window)
{
sessionStorage.setItem(key.value, data.value);
location.reload();
- }
- else
+ }
+ else
{
alert("no sessionStorage in window");
}
</pre>
</li>
<li>
-<p>Retrieve and display the stored data using the <span style="font-family: Courier New,Courier,monospace">getItem()</span> method:</p>
+<p>Retrieve and display the stored data using the <code>getItem()</code> method:</p>
<pre class="prettyprint">
<script>
- window.onload = function()
+ window.onload = function()
{
var localhtml = "";
var sessionhtml = "";
-
+
/* Get the local storage item */
- for (var i = 0; i < localStorage.length; i++)
+ for (var i = 0; i < localStorage.length; i++)
{
- localhtml += "<li>" + localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)) + "</li>";
+ 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++)
+ for (var j = 0; j < sessionStorage.length; j++)
{
- sessionhtml += "<li>" + sessionStorage.key(j) + " : " + sessionStorage.getItem(sessionStorage.key(j)) + "</li>";
+ sessionhtml +=
+ "<li>" + sessionStorage.key(j) + " : "
+ + sessionStorage.getItem(sessionStorage.key(j)) + "</li>";
}
document.getElementById("sessionStorageData").innerHTML = sessionhtml;
}
</script>
</pre>
-<p class="figure">Figure: Displaying local and session storage data (in mobile applications only)</p>
+<p align="center"><strong>Figure: Displaying local and session storage data (in mobile applications only)</strong></p>
<p align="center"><img alt="Displaying local and session storage data (in mobile applications only)" src="../../../images/web_storage1.png" /></p>
- <p>If the browser is closed and reopened, only the local storage data can be displayed, as illustrated in the figure below.</p>
+ <p>If the browser is closed and reopened, only the local storage data can be displayed, as illustrated in the following figure.</p>
-<p class="figure">Figure: Displaying data after reopening the browser (in mobile applications only)</p>
+<p align="center"><strong>Figure: Displaying data after reopening the browser (in mobile applications only)</strong></p>
<p align="center"><img alt="Displaying data after reopening the browser (in mobile applications only)" src="../../../images/web_storage2.png" /></p>
</li>
</ol>
<p>You can access the result object <a href="#access_a">asynchronously</a> or <a href="#access">synchronously</a>.</p></li>
<li>Error management
<p>You can handle errors <a href="#handle_a">asynchronously</a> or <a href="#handle">synchronously</a>.</p>
-<p>For the properties that can be delivered with the <
span style="font-family: Courier New,Courier,monospace">sqlError</span> object, see <a href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/?cp=3_0_6_0_5_6#errors-and-exceptions" target="_blank">Errors and exceptions</a>.</p>
+<p>For the properties that can be delivered with the <
code>sqlError</code> object, see <a href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/?cp=3_0_6_0_5_6#errors-and-exceptions" target="_blank">Errors and exceptions</a>.</p>
</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Web SQL Database API is still in group note state, but Tizen supports it as it is already widely used in the industry.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The Web SQL Database API is still in group note state, but Tizen supports it as it is already widely used in the industry.
+</div>
<h2 id="create_a" name="create_a">Opening a Database Asynchronously</h2>
<p>To provide users with SQL database features, you must learn to create and open a SQL database asynchronously:</p>
<ol>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">openDatabase()</span> method to access a database. If the database does not exist, the method first creates it and then opens it:</p>
+<p>Use the <code>openDatabase()</code> method to access a database. If the database does not exist, the method first creates it and then opens it:</p>
<pre class="prettyprint">
var db;
var version = 1.0;
var dbName = "tizendb";
var dbDisplayName = "tizen_test_db";
var dbSize = 2 * 1024 * 1024;
-try
+try
{
- db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database)
- {
- alert("database creation callback");
- });
+ 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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handler for the database <span style="font-family: Courier New,Courier,monospace">opened</span> event.</td>
- </tr>
- </tbody>
-</table></li>
+<div class="note">
+ <strong>Note</strong>
+ The creation event handler is invoked only once if the database does not exist. There is no event handler for the database <code>opened</code> event.
+</div>
+</li>
</ol>
<h3>Source Code</h3>
<p>To provide users with SQL database features, you must learn to execute SQL statements asynchronously:</p>
<ol>
<li>
-<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <span style="font-family: Courier New,Courier,monospace">transaction()</span> or <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> method returned by the <span style="font-family: Courier New,Courier,monospace">openDatabase()</span> method:</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 <span style="font-family: Courier New,Courier,monospace">transaction()</span> and <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> methods is that the latter cannot be used with SQL statements that change the database (such as <span style="font-family: Courier New,Courier,monospace">INSERT</span>, <span style="font-family: Courier New,Courier,monospace">UPDATE</span>, <span style="font-family: Courier New,Courier,monospace">DELETE</span>, or <span style="font-family: Courier New,Courier,monospace">CREATE</span>).</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When possible, use the <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> to obtain better execution performance of SQL statements.</td>
- </tr>
- </tbody>
- </table>
+<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>
+
+<div class="note">
+ <strong>Note</strong>
+ When possible, use the <code>readTransaction()</code> to obtain better execution performance of SQL statements.
+</div>
</li>
<li>
-<p>To execute a SQL statement, use the <span style="font-family: Courier New,Courier,monospace">executeSql()</span> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <span style="font-family: Courier New,Courier,monospace">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace">END</span>, or <span style="font-family: Courier New,Courier,monospace">ROLLBACK</span>):</p>
+<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>
sqlTransaction.executeSql("SELECT * FROM tizenTable WHERE id=?", [value]);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Use an array to pass the arguments to secure SQL statements from SQL injection attacks.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Use an array to pass the arguments to secure SQL statements from SQL injection attacks.
+</div>
</li>
</ol>
<p>To provide users with SQL database features, you must learn to access SQL statement results asynchronously:</p>
<ol>
<li>
-<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
+<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <code>sqlResultSet</code> object:</p>
<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>
<li>The result object of the SELECT statement stores also the number of records that were inserted, changed, or deleted.
-It contains the number of selected rows (length field) and the <span style="font-family: Courier New,Courier,monospace">item()</span> method. Use the method with the index argument (integer value from 0 to <span style="font-family: Courier New,Courier,monospace">rows.length</span> - 1) to get individual records:
+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++)
+sqlTransaction.executeSql("SELECT id, title, author FROM books", [],
+ function(sqlTransaction, sqlResultSet)
{
- book = sqlResultSet.rows.item(i);
- alert("id: " + book.id + ", title: " + book.title
- + ", author: " + book.author);
- }
-});
+ 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>
<ol>
<li>
-<p>Handle a syntax error in the <span style="font-family: Courier New,Courier,monospace">sqlError</span> object:</p>
+<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)
+sqlTransaction.executeSql("SELECT * FROM notExistingTable", [],
+ function(sqlTransaction, sqlResultSet) {},
+ function(sqlTransaction, sqlError)
{
- case sqlError.SYNTAX_ERR:
- alert("Syntax error has occurred. " + sqlError.message);
- break;
- default:
- alert("Other error");
- }
-});
+ switch (sqlError.code)
+ {
+ case sqlError.SYNTAX_ERR:
+ alert("Syntax error has occurred. " + sqlError.message);
+ break;
+ default:
+ alert("Other error");
+ }
+ });
</pre>
-<p>Other types of errors that can occur are exceptions. The <span style="font-family: Courier New,Courier,monospace">sqlException</span> object has the same fields as the <span style="font-family: Courier New,Courier,monospace">sqlError</span> object but it must be handled in the <span style="font-family: Courier New,Courier,monospace">try - catch</span> block.</p>
+<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>
</ol>
<ol>
<li>
-<p>Use the <
span style="font-family: Courier New,Courier,monospace">openDatabaseSync()</span> 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>
+<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
+try
{
- databaseSync = openDatabaseSync("dbName", "1.0", "display database name", 1024 * 1024, function(databaseSync)
- {
- alert("database creation callback");
- });
+ databaseSync = openDatabaseSync("dbName", "1.0", "display database name",
+ 1024 * 1024, function(databaseSync)
+ {
+ 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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handle for the database opened event but, in the synchronous database API, no other code is run until the database creation operation is completed.</td>
- </tr>
- </tbody>
-</table></li>
+<div class="note">
+ <strong>Note</strong>
+ The creation event handler is invoked only once if the database does not exist. There is no event handle for the database opened event but, in the synchronous database API, no other code is run until the database creation operation is completed.
+</div>
+</li>
</ol>
<h2 id="execute" name="execute">Executing SQL Statements Synchronously</h2>
<p>To provide users with SQL database features, you must learn to execute SQL statements synchronously:</p>
<ol>
<li>
-<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <span style="font-family: Courier New,Courier,monospace">transaction()</span> or <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> method returned by the <span style="font-family: Courier New,Courier,monospace">openDatabaseSync()</span> method:</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>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 <span style="font-family: Courier New,Courier,monospace">transaction()</span> and <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> methods is that the latter cannot be used with SQL statements that change the database (such as <span style="font-family: Courier New,Courier,monospace">INSERT</span>, <span style="font-family: Courier New,Courier,monospace">UPDATE</span>, <span style="font-family: Courier New,Courier,monospace">DELETE</span>, or <span style="font-family: Courier New,Courier,monospace">CREATE</span>).</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When possible, use the <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> to obtain better execution performance of SQL statements.</td>
- </tr>
- </tbody>
- </table>
+<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>
+
+<div class="note">
+ <strong>Note</strong>
+ When possible, use the <code>readTransaction()</code> to obtain better execution performance of SQL statements.
+</div>
</li>
<li>
-<p>To execute a SQL statement, use the <span style="font-family: Courier New,Courier,monospace">executeSql()</span> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <span style="font-family: Courier New,Courier,monospace">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace">END</span>, or <span style="font-family: Courier New,Courier,monospace">ROLLBACK</span>):</p>
+<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Use an array to pass the arguments to secure SQL statements from SQL injection attacks.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ Use an array to pass the arguments to secure SQL statements from SQL injection attacks.
+</div>
</li>
</ol>
<p>To provide users with SQL database features, you must learn to access SQL statement results synchronously:</p>
<ol>
<li>
-<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
+<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <code>sqlResultSet</code> object:</p>
<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"]);
+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>
<li>The result object of the SELECT statement stores also the number of records that were inserted, changed, or deleted.
-It contains the number of selected rows (length field) and the <span style="font-family: Courier New,Courier,monospace">item()</span> method. Use the method with the index argument (integer value from 0 to <span style="font-family: Courier New,Courier,monospace">rows.length</span> - 1) to get individual records:
+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++)
+for (i = 0; i < booksNumber; i++)
{
book = sqlResultSet.rows.item(i);
- alert("id: " + book.id + ", title: " + book.title + ", author: " + book.author);
+ alert("id: " + book.id + ", title: "
+ + book.title + ", author: " + book.author);
}
</pre>
</li>
<p>To provide users with SQL database features, you must learn to handle SQL database-related errors synchronously:</p>
<ol>
-<li>Handle errors in the <span style="font-family: Courier New,Courier,monospace">sqlException</span> object:
+<li>Handle errors in the <code>sqlException</code> object:
<pre class="prettyprint">
-try
+try
{
- databaseSync.transaction(function(sqlTransactionSync)
- {
- var sqlResultSet = sqlTransactionSync.executeSql("DELETE FROM books WHERE id=?", [id]);
- });
+ 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)
+catch (sqlException)
{
- postMessage("An error has occurred during deleting the book from the table!
- Error code: " + sqlException.code + " (" + sqlException.message + ").");
+ postMessage("An error has occurred during deleting the book from the table!
+ Error code: " + sqlException.code
+ + " (" + sqlException.message + ").");
}
</pre>
</li>
</ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the synchronous database API, the script execution is stopped until the transaction is completed.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ In the synchronous database API, the script execution is stopped until the transaction is completed.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
\r
<p>To take advantage of the camera features, you must learn to access the camera device:</p> \r
<ol>\r
-<li>Access the camera with the stream that you can receive from the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.\r
+<li>Access the camera with the stream that you can receive from the <code>getUserMedia()</code> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.\r
<pre class="prettyprint">\r
var stream;\r
-navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback, \r
+navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,\r
noStreamCallback);\r
-function gotStream(rStream) \r
+function gotStream(rStream)\r
{\r
stream = rStream;\r
}\r
</pre>\r
</li>\r
-<li>Use the received stream as the first parameter for the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, which returns the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object. The <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method is a member object of <span style="font-family: Courier New,Courier,monospace">tizCamera</span> from the navigator.\r
+<li>Use the received stream as the first parameter for the <code>createCameraControl()</code> method, which returns the <code>cameraControl</code> object. The <code>createCameraControl()</code> method is a member object of <code>tizCamera</code> from the navigator.\r
<pre class="prettyprint">\r
-navigator.tizCamera.createCameraControl(stream, gotCameraCallback, noCameraCallback); \r
+navigator.tizCamera.createCameraControl(stream, gotCameraCallback, noCameraCallback);\r
</pre>\r
</li>\r
-<li>You can use the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> in the success event handler of the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, where it is provided as a parameter:\r
+<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:\r
<pre class="prettyprint">\r
-function gotCameraCallback(cameraControl)\r
+function gotCameraCallback(cameraControl) {}\r
</pre>\r
</li> \r
</ol> \r
\r
<p>To take advantage of the camera features, you must learn to manage the camera:</p> \r
<ul> \r
- <li>You can record videos with the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object. \r
- <p>Use the <span style="font-family: Courier New,Courier,monospace">start()</span> to start the recording, and the <span style="font-family: Courier New,Courier,monospace">stop()</span> method to stop the recording:</p>\r
-<pre class="prettyprint">\r
+ <li>You can record videos with the <code>cameraControl</code> object. \r
+ <p>Use the <code>start()</code> to start the recording, and the <code>stop()</code> method to stop the recording:</p>\r
+<pre class="prettyprint">\r
cameraControl.recorder.start(recordingStartSuccess, recordingStartError);\r
-cameraControl.recorder.stop(recordingStopSuccess, recordingStopError); \r
+cameraControl.recorder.stop(recordingStopSuccess, recordingStopError);\r
</pre></li>\r
\r
- <li>Use the <span style="font-family: Courier New,Courier,monospace">takePicture()</span> method to capture an image and write it in a file:\r
-<pre class="prettyprint">\r
-cameraControl.image.takePicture(takePictureSuccess, takePictureError); \r
+ <li>Use the <code>takePicture()</code> method to capture an image and write it in a file:\r
+<pre class="prettyprint">\r
+cameraControl.image.takePicture(takePictureSuccess, takePictureError);\r
</pre></li>\r
\r
- <li>Use the <span style="font-family: Courier New,Courier,monospace">applySettings()</span> 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
+ <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
-} \r
-cameraControl.recorder.applySettings(recordingSetting, \r
- recorderSettingSuccessCallback, \r
+}\r
+cameraControl.recorder.applySettings(recordingSetting,\r
+ recorderSettingSuccessCallback,\r
recorderSettingErrorCallback);\r
</pre>\r
-<table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">If a setting cannot be set, the error callback is called to resolve the issue.</td> \r
- </tr>\r
- </tbody> \r
- </table></li> \r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ If a setting cannot be set, the error callback is called to resolve the issue.\r
+</div>\r
+ </li> \r
</ul>\r
\r
<h2 id="deallocate" name="deallocate">Deallocating the Camera Preview Stream</h2>\r
<p>To take advantage of the camera features, you must learn to deallocate the camera preview stream resources when the application is invisible, so that the preview stream can be assigned to another application:</p>\r
\r
<ol>\r
-<li>Access the camera preview stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method:\r
-<pre class="prettyprint">\r
-function initCameraPreview() \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
}\r
\r
-function onPreviewStream(stream) \r
+function onPreviewStream(stream)\r
{\r
cameraStream = stream;\r
-}</pre>\r
+}\r
+</pre>\r
</li>\r
-<li>Use the <span style="font-family: Courier New,Courier,monospace">onVisibilityChange()</span> event listener to detect changes in the visibility state of the application. When the application becomes invisible, the <span style="font-family: Courier New,Courier,monospace">cameraStream.stop()</span> method is called to release the preview stream. When the application becomes visible again, the preview stream is re-initialized.\r
-<pre class="prettyprint">function onVisibilityChange() \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
+ if (document.visibilityState !== 'visible')\r
{\r
cameraStream.stop();\r
- } \r
- else \r
+ }\r
+ else\r
{\r
initCameraPreview();\r
}\r
\r
<p>To switch to the fullscreen and back:</p>\r
\r
-<ul><li>With the <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> method, you can convert a specific element to fullscreen.</li>\r
-<li>With the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> method, you can cancel the fullscreen mode.</li></ul>\r
-\r
- <table class="note"> \r
- <tbody> \r
- <tr> \r
- <th class="note">Note</th> \r
- </tr> \r
- <tr> \r
- <td class="note">Tizen supports the WebKit-based Fullscreen API. When using the Fullscreen API, you must include the webkit prefix.</td> \r
- </tr> \r
- </tbody>\r
- </table>\r
+<ul><li>With the <code>webkitRequestFullScreen()</code> method, you can convert a specific element to fullscreen.</li>\r
+<li>With the <code>webkitCancelFullScreen()</code> method, you can cancel the fullscreen mode.</li></ul>\r
+\r
+<div class="note">\r
+ <strong>Note</strong>\r
+ Tizen supports the WebKit-based Fullscreen API. When using the Fullscreen API, you must include the webkit prefix.\r
+</div>\r
\r
<h2 id="use" name="use">Using the Fullscreen Mode</h2>\r
\r
<p>To display and element on full screen, you must learn to use the fullscreen mode:</p> \r
<ol> \r
<li><p>Define the element to be shown in the fullscreen mode.</p>\r
- <p>In the following example, the screen contains an image, a video playback area, and 2 buttons. For the fullscreen mode, the image and 1 button are defined as an element (<span style="font-family: Courier New,Courier,monospace">fs-image</span>). The video playback area (<span style="font-family: Courier New,Courier,monospace">video</span>) is another element.</p>\r
-
<pre class="prettyprint">
\r+ <p>In the following example, the screen contains an image, a video playback area, and 2 buttons. For the fullscreen mode, the image and 1 button are defined as an element (<code>fs-image</code>). The video playback area (<code>video</code>) is another element.</p>\r
+<pre class="prettyprint">\r
<h1>FullScreen</h1>\r
<div class="example_body">\r
<div id='fs-image'>\r
<p><button id="toggleImage">Toggle Image fullscreen</button></p>\r
</div>\r
<div>\r
- <video id="video" controls preload="none" \r
+ <video id="video" controls preload="none"\r
poster="http://media.w3.org/2010/05/sintel/poster.png">\r
- <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" \r
+ <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"\r
type="video/mp4">\r
</video>\r
</div>\r
<button id="toggleVideo">Toggle Video fullscreen</button>\r
</div>\r
-</pre> \r
+</pre>\r
</li> \r
\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 (<span style="font-family: Courier New,Courier,monospace">-webkit-full-screen</span>):</p>\r
-
<pre class="prettyprint">
\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
+ #fs-image: -webkit-full-screen\r
{\r
background: #39c;\r
}\r
- #fs-image: full-screen \r
+ #fs-image: full-screen\r
{\r
background: #39c;\r
}\r
</style>\r
-</pre> </li> \r
+</pre></li>\r
\r
-<li><p>Toggle between the normal and fullscreen mode by using the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> and <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> methods:</p>\r
+<li><p>Toggle between the normal and fullscreen mode by using the <code>webkitCancelFullScreen()</code> and <code>webkitRequestFullScreen()</code> methods:</p>\r
\r
<pre class="prettyprint">\r
<script>\r
- function toggleFullScreenHandler(e, target) \r
+ function toggleFullScreenHandler(e, target)\r
{\r
var target = document.getElementById(target);\r
/* Check whether in fullscreen mode */\r
- if (document.webkitIsFullScreen) \r
- { \r
+ if (document.webkitIsFullScreen)\r
+ {\r
/* Cancel the fullscreen mode */\r
- document.webkitCancelFullScreen(); \r
- } \r
- else \r
+ document.webkitCancelFullScreen();\r
+ }\r
+ else\r
{\r
/* Switch on the fullscreen mode */\r
- target.webkitRequestFullScreen(); \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
+\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
</script>\r
</pre>\r
</li>\r
</ol> \r
\r
-<p class="figure">Figure: Normal and fullscreen modes</p> \r
+<p align="center"><strong>Figure: Normal and fullscreen modes</strong></p> \r
<p align="center"><img alt="Normal and fullscreen modes" src="../../../images/fullscreen.png" /></p> \r
\r
<h3>Source Code</h3>\r
<h2 id="layout" name="layout">Defining the Application Layout</h2>
<p>The Camera sample application layout contains 3 screens: the main screen that shows the camera view port and the mode control, the preview screen that shows the camera preview, and the settings screen that allows you to define the camera settings.</p>
-<p>The application uses a simple MV (Model View) architecture. The <span style="font-family: Courier New,Courier,monospace;">js/core</span> directory contains files that implement a simple AMD (Asynchronous Module Definition) and specify module defining.</p>
+<p>The application uses a simple MV (Model View) architecture. The <code>js/core</code> directory contains files that implement a simple AMD (Asynchronous Module Definition) and specify module defining.</p>
<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
+ <li><strong>index.html Source File</strong>
<p>The main screen displays the camera view port and buttons for camera modes and settings. In addition, it contains a progress area for displaying the progress of a recording.</p>
-<p>The screen is styled with the <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <span style="font-family: Courier New,Courier,monospace;">js/views/main.js</span> file.</p>
+<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/main.js</code> file.</p>
<pre class="prettyprint">
<div class="ui-page" id="main">
<div class="ui-content">
<video id="camera-preview"></video>
<button type="button" class="ui-btn hidden navigation" id="mode-btn"></button>
- <button type="button" class="ui-btn hidden navigation" id="settings-btn"></button>
+ <button type="button" class="ui-btn hidden navigation"
+ id="settings-btn"></button>
<div id="record-progress" class="hidden">
<div id="record-progress-label">
- <span id="record-progress-label-val"></span>/<span id="record-progress-label-max"></span> secs
+ <span id="record-progress-label-val"></span>/
+ <span id="record-progress-label-max"></span> secs
</div>
<div id="record-progress-val"></div>
</div>
</ol>
<h3 id="preview_screen" name="preview_screen">Defining the Preview Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
+ <li><strong>index.html Source File</strong>
<p>The preview screen displays the image and video preview. </p>
-<p>The screen is styled with the <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <span style="font-family: Courier New,Courier,monospace;">js/views/preview.js</span> file.</p>
+<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/preview.js</code> file.</p>
<pre class="prettyprint">
<div class="ui-page" id="preview">
</ol>
<h3 id="settings_screen" name="settings_screen">Defining the Settings Screen</h3>
- <ol class="tutorstep">
+ <ol>
- <li>index.html Source File
+ <li><strong>index.html Source File</strong>
<p>The Settings screen displays the picture and video size and format settings.</p>
-<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">ui-header</span>. The header section determines the title of the screen. The content section contains a list view component with links to different settings.</p>
+<p>The header section of the screen is defined within a <code><div></code> element whose <code>class</code> attribute is set to <code>ui-header</code>. The header section determines the title of the screen. The content section contains a list view component with links to different settings.</p>
<p>Each individual setting has its own sub-screen with a screen title and a list view component displaying the available settings values.</p>
-<p>The screen is styled with the <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <span style="font-family: Courier New,Courier,monospace;">js/views/settings.js</span> file.</p>
+<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/settings.js</code> file.</p>
<pre class="prettyprint">
<div class="ui-page" id="settings">
<h3 id="initialize" name="initialize">Initializing the Preview</h3>
-<ol class="tutorstep">
+<ol>
-<li>js/views/main.js Source File
+<li><strong>js/views/main.js Source File</strong>
<ol type="a"><li>
-<p>After launching the application, set the variables for the camera preview, call the <span style="font-family: Courier New,Courier,monospace;">initCameraPreview()</span> method to initialize the preview, and register the event handler for when the camera is ready to display the preview.</p>
+<p>After launching the application, set the variables for the camera preview, call the <code>initCameraPreview()</code> method to initialize the preview, and register the event handler for when the camera is ready to display the preview.</p>
<pre class="prettyprint">
var e = req.core.event,
page = null,
camera = req.models.camera,
cameraPreview = null;
/* Initialize module */
-function init()
+function init()
{
page = document.getElementById('main');
cameraPreview = document.getElementById('camera-preview');
e.listeners({'camera.ready': onCameraReady});
</pre>
</li>
-<li><p>In the <span style="font-family: Courier New,Courier,monospace;">initCameraPreview()</span> method, call the <span style="font-family: Courier New,Courier,monospace;">requestForCameraStream()</span> method to retrieve the media stream from the camera.</p>
+<li><p>In the <code>initCameraPreview()</code> method, call the <code>requestForCameraStream()</code> method to retrieve the media stream from the camera.</p>
<pre class="prettyprint">
-function requestForCameraStream()
+function requestForCameraStream()
{
previewInitAttemtps += 1;
- navigator.webkitGetUserMedia({video: true, audio: true},
+ navigator.webkitGetUserMedia({video: true, audio: true},
onPreviewStream, onPreviewStreamError);
}
</pre>
</ol></li></ol>
<h3 id="callback" name="callback">Displaying the Preview</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
- <p>If you successfully retrieve the media stream from the camera, use the <span style="font-family: Courier New,Courier,monospace;">onPreviewStream()</span> event handler to first call the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> method and then play the preview with the <span style="font-family: Courier New,Courier,monospace;">play()</span> method.</p>
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
+ <p>If you successfully retrieve the media stream from the camera, use the <code>onPreviewStream()</code> event handler to first call the <code>registerStream()</code> method and then play the preview with the <code>play()</code> method.</p>
<pre class="prettyprint">
-function onPreviewStream(stream)
+function onPreviewStream(stream)
{
previewInitAttemtps = 0;
cameraStream = stream;
cameraPreview.src = streamUrl;
camera.registerStream(cameraStream);
- if (pageHelper.isPageActive(page))
+ if (pageHelper.isPageActive(page))
{
cameraPreview.play();
}
}
</pre>
</li>
- <li>js/models/camera.js Source File
-<ol type="a"><li><p>In the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> method, create the camera control for the media stream.</p>
-
<pre class="prettyprint">
-function registerStream(mediaStream)
+ <li><strong>js/models/camera.js Source File</strong>
+<ol type="a"><li><p>In the <code>registerStream()</code> method, create the camera control for the media stream.</p>
+<pre class="prettyprint">
+function registerStream(mediaStream)
{
- navigator.tizCamera.createCameraControl(mediaStream,
- onCameraControlCreated,
+ navigator.tizCamera.createCameraControl(mediaStream,
+ onCameraControlCreated,
onCameraControlError);
}
</pre>
</li>
<li>
-<p>When the camera control (the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object) is created, initialize the camera settings and fire the <span style="font-family: Courier New,Courier,monospace">camera.ready</span> event.</p>
+<p>When the camera control (the <code>cameraControl</code> object) is created, initialize the camera settings and fire the <code>camera.ready</code> event.</p>
<pre class="prettyprint">
-function onCameraControlCreated(control)
+function onCameraControlCreated(control)
{
cameraControl = control;
initCameraSettings();
</li>
<li>When initializing the camera settings, read and saves them.
<pre class="prettyprint">
-function initCameraSettings()
+function initCameraSettings()
{
var pictureFormats = null,
pictureSizes = null;
cameraSettings = storage.get(STORAGE_SETTINGS_KEY);
- if (!cameraSettings)
+ if (!cameraSettings)
{
cameraSettings = {};
pictureFormats = getAvailablePictureFormats();
}
</pre></li></ol></li>
-<li>js/views/main.js Source File
-<p>When the camera is ready to display the preview and the <span style="font-family: Courier New,Courier,monospace">camera.ready</span> event is fired, the <span style="font-family: Courier New,Courier,monospace;">onCameraReady()</span> event handler is called.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>When the camera is ready to display the preview and the <code>camera.ready</code> event is fired, the <code>onCameraReady()</code> event handler is called.</p>
<pre class="prettyprint">
-function onCameraReady()
+function onCameraReady()
{
previewInitInProgress = false;
- if (pageHelper.isPageActive(page))
+ if (pageHelper.isPageActive(page))
{
cameraPreview.play();
}
<h3 id="initialize2" name="initialize2">Initializing the Image Capture</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
<p>Set the needed variables and events for the image capture.</p>
<pre class="prettyprint">
var e = req.core.event,
photoMode = true,
/* Initialize the module */
-function init()
+function init()
{
cameraPreview = document.getElementById('camera-preview');
focusContainer = document.getElementById('focus-container');
</pre>
</li>
-<li>js/views/main.js Source File
-<p>When the user taps the preview, the <span style="font-family: Courier New,Courier,monospace">onCameraPreviewClick()</span> event handler is called. If the photo mode is on, the image is captured with the <span style="font-family: Courier New,Courier,monospace">takePicture()</span> method.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>When the user taps the preview, the <code>onCameraPreviewClick()</code> event handler is called. If the photo mode is on, the image is captured with the <code>takePicture()</code> method.</p>
<pre class="prettyprint">
-function onCameraPreviewClick()
+function onCameraPreviewClick()
{
- if (photoMode)
+ if (photoMode)
{
takePhoto();
- }
- else
+ }
+ else
{
/* Record video */
}
}
-function takePhoto()
+function takePhoto()
{
camera.takePicture();
}
</pre>
</li></ol>
<h3 id="focus" name="focus">Auto-focusing an Image</h3>
-<ol class="tutorstep">
-<li>js/models/camera.js Source File
+<ol>
+<li><strong>js/models/camera.js Source File</strong>
<p>To capture an image, first set the needed variables and activate the auto-focus.</p>
<pre class="prettyprint">
var e = req.core.event,
cameraControl = null,
picturePath = '';
-function takePicture()
+function takePicture()
{
- if (busy)
+ if (busy)
{
return false;
}
busy = true;
e.fire('camera.autofocus.start');
- if (cameraControl.autoFocus())
+ if (cameraControl.autoFocus())
{
setTimeout(onAutoFocusSuccess, AUTOFOCUS_DELAY);
- }
- else
+ }
+ else
{
/* Error handling */
}
}
</pre>
</li>
-<li>js/views/main.js Source File
-<p>When the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.start</span> event is fired, the <span style="font-family: Courier New,Courier,monospace">onAutoFocusStart()</span> event handler calls the <span style="font-family: Courier New,Courier,monospace">showAutoFocus()</span> method to add styles to the animated focus frame on the preview.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>When the <code>camera.autofocus.start</code> event is fired, the <code>onAutoFocusStart()</code> event handler calls the <code>showAutoFocus()</code> method to add styles to the animated focus frame on the preview.</p>
<pre class="prettyprint">
-function onAutoFocusStart()
+function onAutoFocusStart()
{
showAutoFocus();
}
-function showAutoFocus()
+function showAutoFocus()
{
focusContainer.classList.remove('hidden');
focusFrame.classList.add('autofocus-animation');
}
</pre>
</li>
-<li>js/models/camera.js Source File
-<p>If the auto-focus succeeds, the <span style="font-family: Courier New,Courier,monospace">onAutoFocusSuccess</span> event handler calls the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method to start the image capture. The event handler also fires the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.success</span> event.</p>
+<li><strong>js/models/camera.js Source File</strong>
+<p>If the auto-focus succeeds, the <code>onAutoFocusSuccess</code> event handler calls the <code>setTimeout()</code> method to start the image capture. The event handler also fires the <code>camera.autofocus.success</code> event.</p>
<pre class="prettyprint">
-function onAutoFocusSuccess()
+function onAutoFocusSuccess()
{
e.fire('camera.autofocus.success');
setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
</pre>
</li>
-<li>js/views/main.js Source File
-<p>Based on the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.success</span> event, the focus frame style is changed on the screen.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>Based on the <code>camera.autofocus.success</code> event, the focus frame style is changed on the screen.</p>
<pre class="prettyprint">
-function onAutoFocusSuccess()
+function onAutoFocusSuccess()
{
focusFrame.classList.add('autofocus-success');
}
</pre>
</li></ol>
<h3 id="capture" name="capture">Capturing an Image</h3>
-<ol class="tutorstep">
-<li>js/models/camera.js Source File
-<p>In the <span style="font-family: Courier New,Courier,monospace">startTakingPicture()</span> method, set name and path of the captured image file, and the format and size of the file.
+<ol>
+<li><strong>js/models/camera.js Source File</strong>
+<p>In the <code>startTakingPicture()</code> method, set name and path of the captured image file, and the format and size of the file.
</p>
<pre class="prettyprint">
-function startTakingPicture()
+function startTakingPicture()
{
var settings = {},
fileName = '';
settings.pictureFormat = getPictureFormat();
settings.pictureSize = getPictureSize();
- cameraControl.image.applySettings(settings, onImageSettingsApplied,
+ cameraControl.image.applySettings(settings, onImageSettingsApplied,
onImageSettingsError);
}
</pre>
</li>
-<li>js/models/camera.js Source File
-<p>When the image settings have been successfully applied and the picture is ready, the <span style="font-family: Courier New,Courier,monospace">onImageSettingsApplied()</span> and <span style="font-family: Courier New,Courier,monospace">onPictureDone()</span> event handlers are called.</p>
+<li><strong>js/models/camera.js Source File</strong>
+<p>When the image settings have been successfully applied and the picture is ready, the <code>onImageSettingsApplied()</code> and <code>onPictureDone()</code> event handlers are called.</p>
<pre class="prettyprint">
-function onImageSettingsApplied()
+function onImageSettingsApplied()
{
cameraControl.image.takePicture(onPictureDone, onPictureError);
}
-function onPictureDone()
+function onPictureDone()
{
e.fire('camera.picture.done', {path: picturePath});
}
</pre>
</li>
-<li>js/views/main.js Source File
-<p>When the picture is done, the auto-focus frame is hidden and the <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event is fired to show the image preview.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>When the picture is done, the auto-focus frame is hidden and the <code>views.preview.show</code> event is fired to show the image preview.</p>
<pre class="prettyprint">
/* Called when the camera.picture.done event is fired */
-function onPictureDone(ev)
+function onPictureDone(ev)
{
var path = ev.detail.path;
hideAutoFocus();
e.fire('views.preview.show', {picture: path});
}
-function hideAutoFocus()
+function hideAutoFocus()
{
var classList = focusFrame.classList;
focusContainer.classList.add('hidden');
}
</pre>
</li>
-<li>js/views/preview.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event calls the <span style="font-family: Courier New,Courier,monospace">show()</span> method, which displays the image preview on the screen.</p>
+<li><strong>js/views/preview.js Source File</strong>
+<p>The <code>views.preview.show</code> event calls the <code>show()</code> method, which displays the image preview on the screen.</p>
<pre class="prettyprint">
-function show(ev)
+function show(ev)
{
var detail = ev.detail;
- if (detail.picture)
+ if (detail.picture)
{
picture.src = detail.picture;
picture.classList.remove('hidden');
video.classList.add('hidden');
- }
- else if (detail.video)
+ }
+ else if (detail.video)
{
- /* Show recorded video preview */
+ /* Show recorded video preview */
}
}
<h3 id="initialize3" name="initialize3">Initializing Video Recording</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
<ol type="a">
<li>
<p>Set the needed variables for the image capture.</p>
-<p>The maximum recording time is set for 10 seconds (<span style="font-family: Courier New,Courier,monospace;">maxRecordingTimeSeconds</span>). Set the <span style="font-family: Courier New,Courier,monospace;">RECORDING_INTERVAL_STEP</span> variable in milliseconds for checking the length of the recording.</p>
+<p>The maximum recording time is set for 10 seconds (<code>maxRecordingTimeSeconds</code>). Set the <code>RECORDING_INTERVAL_STEP</code> variable in milliseconds for checking the length of the recording.</p>
<pre class="prettyprint">
var e = req.core.event,
recordingInterval = null,
maxRecordingTimeSeconds = Math.floor(camera.MAX_RECORDING_TIME / 1000);
-function init()
+function init()
{
page = document.getElementById('main');
cameraPreview = document.getElementById('camera-preview');
recordProgress = document.getElementById('record-progress');
recordProgressVal = document.getElementById('record-progress-val');
- recordProgressLabelVal = document.getElementById('record-progress-label-val');
- recordProgressLabelMax = document.getElementById('record-progress-label-max');
+ recordProgressLabelVal =
+ document.getElementById('record-progress-label-val');
+ recordProgressLabelMax =
+ document.getElementById('record-progress-label-max');
bindEvents();
initCameraPreview();
}
</pre></li>
<li>
-<p>When the user taps the preview, the <span style="font-family: Courier New,Courier,monospace">onCameraPreviewClick()</span> event handler is called. If the photo mode is not on, the video recording is set with the <span style="font-family: Courier New,Courier,monospace">toggleRecording()</span> and <span style="font-family: Courier New,Courier,monospace">setRecording()</span> methods.</p>
+<p>When the user taps the preview, the <code>onCameraPreviewClick()</code> event handler is called. If the photo mode is not on, the video recording is set with the <code>toggleRecording()</code> and <code>setRecording()</code> methods.</p>
<pre class="prettyprint">
-function onCameraPreviewClick()
+function onCameraPreviewClick()
{
- if (photoMode)
+ if (photoMode)
{
/* Capture an image */
- }
- else
+ }
+ else
{
toggleRecording();
setRecording();
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">toggleRecording()</span> method defines the recording state (on or off).</p>
+<p>The <code>toggleRecording()</code> method defines the recording state (on or off).</p>
<pre class="prettyprint">
-function toggleRecording(forceValue)
+function toggleRecording(forceValue)
{
- if (forceValue !== undefined)
+ if (forceValue !== undefined)
{
recording = !!forceValue;
- }
- else
+ }
+ else
{
recording = !recording;
}
}
</pre></li>
-<li>The <span style="font-family: Courier New,Courier,monospace">setRecording()</span> method starts or stops recording, based on the recording state.
+<li>The <code>setRecording()</code> method starts or stops recording, based on the recording state.
<pre class="prettyprint">
-function setRecording()
+function setRecording()
{
- if (recording)
+ if (recording)
{
startRecording();
- }
- else
+ }
+ else
{
stopRecording();
}
</pre></li></ol></li></ol>
<h3 id="record" name="record">Starting Video Recording</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
<ol type="a"><li>
-<p>The <span style="font-family: Courier New,Courier,monospace">startRecording()</span> method starts the recording process, and the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method stops it.</p>
+<p>The <code>startRecording()</code> method starts the recording process, and the <code>stopRecording()</code> method stops it.</p>
<pre class="prettyprint">
-function startRecording()
+function startRecording()
{
camera.startRecording();
resetRecordingProgress();
showRecordingView();
}
-function stopRecording()
+function stopRecording()
{
camera.stopRecording();
}
<li>
<p>To start the recording process, first reset the time and progress bar values.</p>
<pre class="prettyprint">
-function resetRecordingProgress()
+function resetRecordingProgress()
{
recordingTime = 0;
renderRecordingProgressBar();
}
-function renderRecordingProgressBarValue(value)
+function renderRecordingProgressBarValue(value)
{
recordProgressVal.style.width = value + 'px';
}
-function renderRecordingProgressBarLabel()
+function renderRecordingProgressBarLabel()
{
recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
- recordProgressLabelMax.innerHTML = dateHelper.formatTime(maxRecordingTimeSeconds);
+ recordProgressLabelMax.innerHTML =
+ dateHelper.formatTime(maxRecordingTimeSeconds);
}
-function renderRecordingProgressBar()
+function renderRecordingProgressBar()
{
var parentWidth = recordProgress.clientWidth,
width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
<li>
<p>While recording, you want to show the recording view and progress bar, but hide the navigation buttons.</p>
<pre class="prettyprint">
-function showRecordingView()
+function showRecordingView()
{
hideNavigationBtns();
showRecordProgress();
}
-function hideNavigationBtns()
+function hideNavigationBtns()
{
modeBtn.classList.add('hidden');
settingsBtn.classList.add('hidden');
}
-function showRecordProgress()
+function showRecordProgress()
{
recordProgress.classList.remove('hidden');
}
</pre>
</li></ol></li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<ol type="a"><li>
<p>Start video recording by applying video file parameters.</p>
<pre class="prettyprint">
-function startRecording()
+function startRecording()
{
var settings = {},
fileName = '';
- if (busy)
+ if (busy)
{
return false;
}
settings.recordingFormat = getRecordingFormat();
cameraControl.recorder.applySettings(settings, onVideoSettingsApplied,
onVideoSettingsError);
-
+
return true;
}
-function createVideoFileName()
+function createVideoFileName()
{
var currentDate = new Date(),
extension = getRecordingFormat(),
fileName = '';
- fileName = dateHelper.format(currentDate, 'yyyymmdd_HHMMSS') + '.' + extension;
+ fileName =
+ dateHelper.format(currentDate, 'yyyymmdd_HHMMSS') + '.' + extension;
return fileName;
}
</pre></li>
-<li>When the video file parameters have been applied successfully, the <span style="font-family: Courier New,Courier,monospace">onVideoSettingsApplied()</span> event handler starts the actual recording.
+<li>When the video file parameters have been applied successfully, the <code>onVideoSettingsApplied()</code> event handler starts the actual recording.
<pre class="prettyprint">
-function onVideoSettingsApplied()
+function onVideoSettingsApplied()
{
cameraControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
}
<p>Trace the length of the recording. If the recording lasts longer than 10 seconds, stop recording.</p>
<pre class="prettyprint">
-function onRecordingStartSuccess()
+function onRecordingStartSuccess()
{
startTracingVideoLength();
e.fire('camera.recording.start');
}
-function startTracingVideoLength()
+function startTracingVideoLength()
{
videoRecordingStartTime = new Date();
- videoLengthCheckInterval = window.setInterval(checkVideoLength,
+ videoLengthCheckInterval = window.setInterval(checkVideoLength,
VIDEO_LENGTH_CHECK_INTERVAL);
}
-function checkVideoLength()
+function checkVideoLength()
{
var currentTime = new Date();
videoRecordingTime = currentTime - videoRecordingStartTime;
- if (videoRecordingTime > MAX_RECORDING_TIME)
+ if (videoRecordingTime > MAX_RECORDING_TIME)
{
stopRecording();
}
}
</pre></li></ol></li>
-<li>js/views/main.js Source File
-<p>Based on the <span style="font-family: Courier New,Courier,monospace">camera.recording.start</span> event, call the <span style="font-family: Courier New,Courier,monospace">setRecordingInterval()</span> method to set the recording interval and update the recording process.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>Based on the <code>camera.recording.start</code> event, call the <code>setRecordingInterval()</code> method to set the recording interval and update the recording process.</p>
<pre class="prettyprint">
-function onRecordingStart()
+function onRecordingStart()
{
setRecordingInterval();
}
-function setRecordingInterval()
+function setRecordingInterval()
{
- recordingInterval = setInterval(updateRecordingProgress,
+ recordingInterval = setInterval(updateRecordingProgress,
RECORDING_INTERVAL_STEP);
}
-function updateRecordingProgress()
+function updateRecordingProgress()
{
recordingTime = camera.getRecordingTime();
renderRecordingProgressBar();
}
-function renderRecordingProgressBar()
+function renderRecordingProgressBar()
{
var parentWidth = recordProgress.clientWidth,
width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
renderRecordingProgressBarLabel();
}
-function renderRecordingProgressBarValue(value)
+function renderRecordingProgressBarValue(value)
{
recordProgressVal.style.width = value + 'px';
}
-function renderRecordingProgressBarLabel()
+function renderRecordingProgressBarLabel()
{
var time = Math.ceil(recordingTime / 1000);
- if (time > maxRecordingTimeSeconds)
+ if (time > maxRecordingTimeSeconds)
{
time = maxRecordingTimeSeconds;
}
</li></ol>
<h3 id="stop" name="stop">Stopping Video Recording</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
-<p>When the user taps the screen to stop the recording, the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method calls the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method.</p>
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
+<p>When the user taps the screen to stop the recording, the <code>stopRecording()</code> method calls the <code>stopRecording()</code> method.</p>
<pre class="prettyprint">
-function stopRecording()
+function stopRecording()
{
camera.stopRecording();
}
</pre>
</li>
-<li>js/models/camera.js Source File
-<p>After the recording stops successfully, the <span style="font-family: Courier New,Courier,monospace">onVideoRecordingStopSuccess()</span> event handler fires the <span style="font-family: Courier New,Courier,monospace">camera.recording.done</span> event.</p>
+<li><strong>js/models/camera.js Source File</strong>
+<p>After the recording stops successfully, the <code>onVideoRecordingStopSuccess()</code> event handler fires the <code>camera.recording.done</code> event.</p>
<pre class="prettyprint">
-function onVideoRecordingStopSuccess()
+function onVideoRecordingStopSuccess()
{
busy = false;
e.fire('camera.recording.done', {path: videoPath});
}
</pre></li>
-<li>js/views/main.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">camera.recording.done</span> event calls the <span style="font-family: Courier New,Courier,monospace">onRecordingDone</span> event handler.</p>
+<li><strong>js/views/main.js Source File</strong>
+<p>The <code>camera.recording.done</code> event calls the <code>onRecordingDone</code> event handler.</p>
<pre class="prettyprint">
-function onRecordingDone(ev)
+function onRecordingDone(ev)
{
var path = ev.detail.path;
removeRecordingInterval();
toggleRecording(false);
updateRecordingProgress();
- if (!exitInProgress)
+ if (!exitInProgress)
{
e.fire('views.preview.show', {video: path});
}
}
</pre></li>
-<li>js/views/preview.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace">onRecordingDone</span> event handler fires the <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event, which calls the <span style="font-family: Courier New,Courier,monospace">show()</span> method to displays the video preview on the screen.</p>
+<li><strong>js/views/preview.js Source File</strong>
+<p>The <code>onRecordingDone</code> event handler fires the <code>views.preview.show</code> event, which calls the <code>show()</code> method to displays the video preview on the screen.</p>
<pre class="prettyprint">
-function show(ev)
+function show(ev)
{
var detail = ev.detail;
- if (detail.picture)
+ if (detail.picture)
{
/* Show captured image preview */
- }
- else if (detail.video)
+ }
+ else if (detail.video)
{
foreground.classList.remove('hidden');
video.classList.remove('hidden');
<h3 id="initialize4" name="initialize4">Initializing the Settings</h3>
-<ol class="tutorstep">
- <li>js/views/main.js Source File
+<ol>
+ <li><strong>js/views/main.js Source File</strong>
<p>When the user clicks the icon in the right top corner of the main screen, the click event opens the Settings screen.</p>
<pre class="prettyprint">
-function onSettingsBtnClick()
+function onSettingsBtnClick()
{
e.fire('views.settings.show', {photoMode: photoMode});
}
</pre>
</li>
-<li>js/models/camera.js Source File
-<p>When the settings are selected, the <span style="font-family: Courier New,Courier,monospace;">saveCameraSettings()</span> method is used to save them.</p>
+<li><strong>js/models/camera.js Source File</strong>
+<p>When the settings are selected, the <code>saveCameraSettings()</code> method is used to save them.</p>
<pre class="prettyprint">
function saveCameraSettings()
{
storage.add(STORAGE_SETTINGS_KEY, cameraSettings);
-}</pre>
+}
+</pre>
</li></ol>
<h3 id="imageformat" name="imageformat">Setting the Image Format</h3>
-<ol class="tutorstep">
- <li>js/views/pictureFormat.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> method creates the content for the subscreen for setting the image file format.</p>
+<ol>
+ <li><strong>js/views/pictureFormat.js Source File</strong>
+<p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file format.</p>
<pre class="prettyprint">
-function renderView()
+function renderView()
{
var formats = camera.getAvailablePictureFormats(),
currentFormat = camera.getPictureFormat(),
format = null,
checked = false;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
format = formats[i];
checked = currentFormat === format;
- content.push(t.get('pictureFormatRow',
+ content.push(t.get('pictureFormatRow',
{
format: format,
checked: checked
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The available formats are retrieved from the model.</p>
<pre class="prettyprint">
-function getAvailablePictureFormats()
+function getAvailablePictureFormats()
{
return cameraControl.capabilities.pictureFormats;
}
</pre>
</li>
-<li>js/views/pictureFormat.js Source File
+<li><strong>js/views/pictureFormat.js Source File</strong>
<p>After the user selects the format they want, the selected format is passed to the model.</p>
<pre class="prettyprint">
-function bindEvents()
+function bindEvents()
{
page.addEventListener('pagebeforeshow', onPageBeforeShow);
formatList.addEventListener('click', onFormatListClick);
}
-function onFormatListClick()
+function onFormatListClick()
{
var input = formatList.querySelectorAll('input:checked')[0];
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The selected format is used and saved in the model.</p>
<pre class="prettyprint">
-function setPictureFormat(format)
+function setPictureFormat(format)
{
cameraSettings.pictureFormat = format;
saveCameraSettings();
</ol>
<h3 id="size" name="size">Setting the Image File Size</h3>
-<ol class="tutorstep">
- <li>js/views/pictureSize.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> method creates the content for the subscreen for setting the image file size.</p>
+<ol>
+ <li><strong>js/views/pictureSize.js Source File</strong>
+<p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file size.</p>
<pre class="prettyprint">
-function renderView()
+function renderView()
{
var sizes = camera.getAvailablePictureSizes(),
currentSize = camera.getPictureSize(),
size = null,
checked = false;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
size = sizes[i];
checked = currentSize.height === size.height &&
currentSize.width === size.width;
- content.push(t.get('pictureSizeRow',
+ content.push(t.get('pictureSizeRow',
{
width: size.width,
height: size.height,
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The available sizes are retrieved from the model.</p>
<pre class="prettyprint">
-function getAvailablePictureSizes()
+function getAvailablePictureSizes()
{
return cameraControl.capabilities.pictureSizes;
}
</pre>
</li>
-<li>js/views/pictureSize.js Source File
+<li><strong>js/views/pictureSize.js Source File</strong>
<p>After the user selects the size they want, the selected size is passed to the model.</p>
<pre class="prettyprint">
-function onSizeListClick()
+function onSizeListClick()
{
var input = pictureSizeList.querySelectorAll('input:checked')[0],
width = parseInt(input.getAttribute('data-width'), 10),
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The selected size is used and saved in the model.</p>
<pre class="prettyprint">
-function setPictureSize(size)
+function setPictureSize(size)
{
- cameraSettings.pictureSize =
+ cameraSettings.pictureSize =
{
width: size.width,
height: size.height
</ol>
<h3 id="videoformat" name="videoformat">Setting the Video Format</h3>
-<ol class="tutorstep">
- <li>js/views/recordingFormat.js Source File
-<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> method creates the content for the subscreen for setting the video file format.</p>
+<ol>
+ <li><strong>js/views/recordingFormat.js Source File</strong>
+<p>The <code>renderView()</code> method creates the content for the subscreen for setting the video file format.</p>
<pre class="prettyprint">
-function renderView()
+function renderView()
{
var formats = camera.getAvailableRecordingFormats(),
currentFormat = camera.getRecordingFormat(),
format = null,
checked = false;
- for (i = 0; i < len; i += 1)
+ for (i = 0; i < len; i += 1)
{
format = formats[i];
checked = currentFormat === format;
- content.push(t.get('recordingFormatRow',
+ content.push(t.get('recordingFormatRow',
{
format: format,
checked: checked
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The available formats are retrieved from the model.</p>
<pre class="prettyprint">
-function getAvailableRecordingFormats()
+function getAvailableRecordingFormats()
{
return cameraControl.capabilities.recordingFormats;
}
</pre>
</li>
-<li>js/views/recordingFormat.js Source File
+<li><strong>js/views/recordingFormat.js Source File</strong>
<p>After the user selects the format they want, the selected format is passed to the model.</p>
<pre class="prettyprint">
-function onFormatListClick()
+function onFormatListClick()
{
var input = formatList.querySelectorAll('input:checked')[0];
}
</pre>
</li>
-<li>js/models/camera.js Source File
+<li><strong>js/models/camera.js Source File</strong>
<p>The selected format is used and saved in the model.</p>
<pre class="prettyprint">
-function setRecordingFormat(format)
+function setRecordingFormat(format)
{
cameraSettings.recordingFormat = format;
saveCameraSettings();
<p>To handle binary data in your application with JavaScript, you must learn to create array buffers:</p>
<ol>
<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>
+<pre class="prettyprint lang-js">
+<script>
var log = document.getElementById("log");
/* Create a 12-byte buffer */
var x = new Int32Array(buffer);
/* Check the buffer length */
- log.innerHTML = "<div>" + buffer.byteLength + "<div>";</pre>
+ 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"*/
+ /* 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"*/
+ /* Get slice: "6789" */
x[1] = 6789;
log.innerHTML += "<div>" + x[1] + "<div>";
log.innerHTML += "<div>" + y[0] + "<div>";
-</script></pre></li>
+</script>
+</pre></li>
</ol>
-<p class="figure">Figure: Creating and slicing array buffers (in mobile applications only)</p>
+<p align="center"><strong>Figure: Creating and slicing array buffers (in mobile applications only)</strong></p>
<p align="center"><img alt="Creating and slicing array buffers (in mobile applications only)" src="../../../images/arraybuffer.png"/></p>
<h3>Source Code</h3>
<li>Typed array view types
<p>In the typed array view types, an array buffer view is used while manipulating and indexing binary data and returning the value of a general number. The specification of the respective array buffer length is fixed, and forms the basis for typed array view types.</p>
<p>The following table describes the typed array view types.</p>
+
+<p align="center" class="Table"><strong>Table: Typed array view types</strong></p>
<table border="1">
- <caption>
- Table: Typed array view types
- </caption>
<colgroup>
<col width="5%" />
<col width="2%" />
<th>Equivalent C type</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Int8Array</span></td>
+ <td><code>Int8Array</code></td>
<td>1</td>
<td>8-bit 2's complement signed integer</td>
<td>signed char</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Uint8Array</span></td>
+ <td><code>Uint8Array</code></td>
<td>1</td>
<td>8-bit unsigned integer</td>
<td>unsigned char</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span><sup>2</sup></td>
+ <td><code>Uint8ClampedArray</code><sup>2</sup></td>
<td>1</td>
<td>8-bit unsigned integer (clamped)</td>
<td>unsigned char</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Int16Array</span></td>
+ <td><code>Int16Array</code></td>
<td>2</td>
<td>16-bit 2's complement signed integer</td>
<td>short</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Uint16Array</span></td>
+ <td><code>Uint16Array</code></td>
<td>2</td>
<td>16-bit unsigned integer</td>
<td>unsigned short</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Int32Array</span></td>
+ <td><code>Int32Array</code></td>
<td>4</td>
<td>32-bit 2's complement signed integer</td>
<td>int</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Uint32Array</span></td>
+ <td><code>Uint32Array</code></td>
<td>4</td>
<td>32-bit unsigned integer</td>
<td>unsigned int</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Float32Array</span></td>
+ <td><code>Float32Array</code></td>
<td>4</td>
<td>32-bit IEEE floating point</td>
<td>float</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">Float64Array</span></td>
+ <td><code>Float64Array</code></td>
<td>8</td>
<td>64-bit IEEE floating point</td>
<td>double</td>
</tr>
</tbody>
</table>
- <p><sup>1</sup> The size unit is bytes, and it corresponds to the <span style="font-family: Courier New,Courier,monospace">BYTES_PER_ELEMENT</span> constant for the given type. </p>
- <p><sup>2</sup> The <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> is a special view, and it replaces the <span style="font-family: Courier New,Courier,monospace">CanvasPixelArray</span>.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">There are no restrictions related to sorting the typed array view types.</td></tr>
- </tbody>
- </table>
+ <p><sup>1</sup> The size unit is bytes, and it corresponds to the <code>BYTES_PER_ELEMENT</code> constant for the given type. </p>
+ <p><sup>2</sup> The <code>Uint8ClampedArray</code> is a special view, and it replaces the <code>CanvasPixelArray</code>.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ There are no restrictions related to sorting the typed array view types.
+</div>
</li>
<li>DataView view types
</script>
</pre>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the above code, to access a buffer with an array of 16-bit signed integers, use the <span style="font-family: Courier New,Courier,monospace">Int16Array</span> instance that references an array buffer.</td>
- </tr>
- </tbody>
- </table></li>
+<div class="note">
+ <strong>Note</strong>
+ In the above code, to access a buffer with an array of 16-bit signed integers, use the <code>Int16Array</code> instance that references an array buffer.
+</div>
+ </li>
<li>Create a typed array view:
-<pre class="prettyprint lang-js"><script>
+<pre class="prettyprint lang-js">
+<script>
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);
</pre>
<pre class="prettyprint">
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>";
-</script></pre>
+ log.innerHTML += "<div>" + x.byteOffset + "<div>";
+</script>
+</pre>
<p align="center"><img alt="Typed Array implementation" src="../../../images/typed_array_implementation.png"/></p></li>
-<li>Replace the <span style="font-family: Courier New,Courier,monospace">CanvasPixelArray</span> instance with the <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> instance:
+<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([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>
+ log.innerHTML += "<div>" + y.length + "<div>";
+</script>
+</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> behavior is identical to the other typed array views. The only notable exception is that the setters and constructors use clamping rather than modulo arithmetic while converting incoming number values.</p>
+<p>The <code>Uint8ClampedArray</code> behavior is identical to the other typed array views. The only notable exception is that the setters and constructors use clamping rather than modulo arithmetic while converting incoming number values.</p>
<p align="center"><img alt="Clamped Array implementation" src="../../../images/clamped_array.png"/></p></li>
-<li>When an <span style="font-family: Courier New,Courier,monospace">ArrayBuffer</span> with heterogeneous type of data is used, you can take advantage of the <span style="font-family: Courier New,Courier,monospace">DataView</span> of the buffer:
+<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");
-
+
/* Create DataView */
var x = new DataView(new ArrayBuffer(12), 0);
/* Store the variable */
- x.setFloat32(1, Math.PI);
+ x.setFloat32(1, Math.PI);
/* Get the variable */
log.innerHTML += "<div>" + x.getFloat32(1) + "<div>";
- log.innerHTML += "<div>" + Math.PI + "<div>";
-</script></pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">DataView</span> 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 <span style="font-family: Courier New,Courier,monospace">littleEndian</span> argument indicates that the value can be stored in a big-endian or little-endian byte order. If the argument is set to <span style="font-family: Courier New,Courier,monospace">false</span> or is undefined, the value gets stored in the big-endian byte order.</p>
+ 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>
<p align="center"><img alt="DataView" src="../../../images/data_view.png"/></p></li>
</ol>
<p>To handle binary data in your application with JavaScript, you must learn to deliver binary data effectively in other HTML5 APIs that employ a typed array:</p>
<ol>
-<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 <span style="font-family: Courier New,Courier,monospace">gl.bufferData()</span> method to set the buffer object to deliver texture data:
+<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 */
+ 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>
+</script>
+</pre></li>
<li>For the HTML5 canvas element API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">wearable</a> applications), use the typed array with the following steps:
<ol type="a">
-<li>Create an <span style="font-family: Courier New,Courier,monospace">ImageData</span> object of the canvas internally.</li>
+<li>Create an <code>ImageData</code> object of the canvas internally.</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 canvasData =
+ tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData = canvasData.data;
-</script></pre></li></ol>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The pixel array of canvas can be created and edited without direct manipulation of the canvas element.</td>
- </tr>
- </tbody>
- </table></li>
-
-<li>For the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API</a>, set the response type of the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest</span> object as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
+</script>
+</pre></li></ol>
+
+<div class="note">
+ <strong>Note</strong>
+ The pixel array of canvas can be created and edited without direct manipulation of the canvas element.
+</div>
+ </li>
+
+<li>For the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API</a>, 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()
+this.setSound = function()
{
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
- request.onload = function()
+ request.onload = function()
{
var data = request.response;
};
request.send();
-}</pre></li>
+}
+</pre></li>
</ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>The main features of the WebGL include:</p>
<ul>
<li>Importing the WebGL context
- <p>You can use the <
span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">Canvas</span> object to <a href="#import">import the WebGL context</a>.</p>
+ <p>You can use the <
code>getContext()</code> method of the <code>Canvas</code> object to <a href="#import">import the WebGL context</a>.</p>
</li>
<li>Using programs and shaders
<p>You can use shaders, such as the vertex shader and fragment shader, to convert shape data to display it on the screen as pixels. <a href="#shader">Shaders must be initialized</a> and attached to programs.
<li>Using buffers
<p>A buffer is a memory block for storing temporary data. In WebGL, you must <a href="#buffer">create a vertex buffer object (VBO) to store vertex attributes</a>, such as location, color, and texture coordinates.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">deleteBuffer()</span> method can be used to delete the buffer.</td>
- </tr>
- </tbody>
-</table>
-
+<div class="note">
+ <strong>Note</strong>
+ The <code>deleteBuffer()</code> method can be used to delete the buffer.
+</div>
</li>
<li>Drawing on the screen
<h2 id="import" name="import">Importing the WebGL Context</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <span style="font-family: Courier New,Courier,monospace"><canvas></span> element:</p>
+<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <code><canvas></code> element:</p>
<ol>
- <li><p>Define the <span style="font-family: Courier New,Courier,monospace"><canvas></span> element ID and set its width and height:</p>
-
<pre class="prettyprint">
+ <li><p>Define the <code><canvas></code> element ID and set its width and height:</p>
+<pre class="prettyprint">
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
-</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the width and height are not set, the default size, 300x150 px, is used.</td>
- </tr>
- </tbody>
-</table>
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ If the width and height are not set, the default size, 300 x 150 px, is used.
+</div>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">Canvas</span> object to import the WebGL context:</p>
-
<pre class="prettyprint">
+<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;
/* 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)
+ for (var i = 0; i < names.length; ++i)
{
- try
+ try
{
webGLContext = canvas.getContext(names[i]);
}
if (webGLContext) break;
}
-
+
return webGLContext;
}
</script>
<p>To enhance the user experience of your application with WebGL features, you must learn to bind the shaders and GLSL ES in WebGL by using shaders and programs:
</p>
<ol>
- <li><p>Define the vertex shader and fragment shader using the <
span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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">
+ <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;
-
- void main()
+
+ void main()
{
/* vec4(2D coordinates, depth, perspective) */
</script>
<script id="fshader" type="x-shader/x-fragment">
- void main()
+ void main()
{
/* Color stored in the gl_FragColor variable becomes the pixel color */
gl_FragColor = vec4(1, 0.5, 0.5, 1);
}
</script>
-</pre>
+</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">createShader()</span> method to create the shaders:</p>
-
<pre class="prettyprint">
+<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);
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">shaderSource()</span> method to attach the source elements to the shaders:</p>
+<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);
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">compileShader()</span> method and compile the shaders:</p>
+<li><p>Import the <code>compileShader()</code> method and compile the shaders:</p>
<pre class="prettyprint">
gl.compileShader(vshader);
gl.compileShader(fshader);
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">After a shader has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteShader()</span> method to delete it.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ After a shader has been used, you can use the <code>deleteShader()</code> method to delete it.
+</div>
</li>
-<li><p>Import the <
span style="font-family: Courier New,Courier,monospace">createProgram()</span> 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>
+<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();
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">attachShader()</span> method to attach the shaders to the program:</p>
+<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);
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">linkProgram()</span> method to connect to the program:</p>
+<li><p>Import the <code>linkProgram()</code> method to connect to the program:</p>
<pre class="prettyprint">
gl.linkProgram(program);
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">useProgram()</span> method to enable WebGL to use the program:</p>
+<li><p>Import the <code>useProgram()</code> method to enable WebGL to use the program:</p>
<pre class="prettyprint">
- /* Shaders are loaded and used */
+ /* Shaders are loaded and used */
gl.useProgram(program);
-</script>
+</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">After a WebGL program has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteProgram()</span> method to delete it.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ After a WebGL program has been used, you can use the <code>deleteProgram()</code> method to delete it.
+</div>
</li>
</ol>
<h3>Source Code</h3>
<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>
+</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method to create the vertex buffer object (VBO):</p>
+<li><p>Import the <code>createBuffer()</code> method to create the vertex buffer object (VBO):</p>
<pre class="prettyprint">
<script>
triangleVerticesBuffer = gl.createBuffer();
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">bindBuffer()</span> method to bind the VBO:</p>
+<li><p>Import the <code>bindBuffer()</code> method to bind the VBO:</p>
<pre class="prettyprint">
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
</pre>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">bufferData()</span> method to store data to the VBO:</p>
+<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);
</ol>
<p>The following figure shows the final triangle as it is displayed on the screen.</p>
-<p class="figure">Figure: Triangle on the screen</p>
+<p align="center"><strong>Figure: Triangle on the screen</strong></p>
<p align="center"><img alt="Triangle on the screen" src="../../../images/initializing_buffers.png" /></p>
<h3>Source Code</h3>
</p>
<ol>
- <li><p>Import the <span style="font-family: Courier New,Courier,monospace">getAttribLocation()</span> method to bring the attribute location from the WebGL program:</p>
+ <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");
</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 <span style="font-family: Courier New,Courier,monospace">vertexPositionAttribute</span> variable.</p>
+<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>
</li>
-<li><p>Import the <span style="font-family: Courier New,Courier,monospace">vertexAttribPointer()</span> method that indicates the data format to the shader.</p>
+<li><p>Import the <code>vertexAttribPointer()</code> method that indicates the data format to the shader.</p>
<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">
</pre>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> method to send the shape to the drawing buffer:</p>
+<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);
</script>
</pre>
+<p>The following table describes the arguments that can be used with the <code>drawArrays()</code> method and their results.</p>
-<p>The following table describes the arguments that can be used with the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> method and their results.</p>
+<p align="center" class="Table"><strong>Table: Arguments for drawing shapes</strong></p>
<table>
-<caption>Table: Arguments for drawing shapes</caption>
<colgroup>
<col width="25%" />
<col width="75%" />
<th>Description</th>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">POINTS</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>POINTS</code></p> </td>
<td rowspan="1" colspan="1"><p>The point type renders 1 point at a time.</p>
<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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINES</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>LINES</code></p> </td>
<td rowspan="1" colspan="1"><p>In the lines type, 2 lines share the same vertex, but each is defined separately. In the example, 6 vertices are needed.</p>
<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, -1.0];
+ 1.0, 1.0,
+ 1.0, 0.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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_STRIP</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>LINE_STRIP</code></p> </td>
<td rowspan="1" colspan="1"> <p>In the line strip type, a part of the vertex is shared. In the example, 4 vertices are needed.</p>
<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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_LOOP</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>LINE_LOOP</code></p> </td>
<td rowspan="1" colspan="1">
<p>In the line loop type, the first vertex and the last vertex are connected, otherwise this type is similar to the line strip type. In the example, 4 vertices are needed. </p>
<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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLES</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>TRIANGLES</code></p> </td>
<td rowspan="1" colspan="1"><p>In the triangles type, 2 triangles are comprised of 3 vertices. In the example, 6 vertices are needed.
</p>
<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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_STRIP</span></p> </td>
+ <td rowspan="1" colspan="1"> <p><code>TRIANGLE_STRIP</code></p> </td>
<td rowspan="1" colspan="1"><p>In the triangle strip type, a triangle is created using the last 2 vertices and the next vertex. In the example, 6 vertices are needed.
</p>
<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>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_FAN</span></p> </td>
- <td rowspan="1" colspan="1"> <p>In the triangle fan type, the first IBO index is shared in all elements. In the example, the <span style="font-family: Courier New,Courier,monospace">p0</span> vertex is shared by all triangles, so 4 triangles are created with 6 vertices.
+ <td rowspan="1" colspan="1"> <p><code>TRIANGLE_FAN</code></p> </td>
+ <td rowspan="1" colspan="1"> <p>In the triangle fan type, the first IBO index is shared in all elements. In the example, the <code>p0</code> vertex is shared by all triangles, so 4 triangles are created with 6 vertices.
</p>
<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>
<p>To enhance the user experience of your application with WebGL features, you must learn to set colors using attributes and a buffer:</p>
<ol>
-<li><p>Define the vertex shader and fragment shader using the <
span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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>
+<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;
varying vec4 vColor;
- void main()
+ 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;
- void main()
+ void main()
{
gl_FragColor = vColor;
}
</li>
<li><p>Define a rectangular vertex comprised of 2 triangles:</p>
-
<pre class="prettyprint lang-js">
+<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>
-<li><p>Create the color buffer and render the 2 triangles using the <span style="font-family: Courier New,Courier,monospace">gl.TRIANGLE_STRIP</span> attribute:</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 */
+ 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();
/* Bring the color attribute position from the WebGlProgram instance */
var vertexColorAttribute = gl.getAttribLocation(program, "attVertexColor");
/* Activate the attribute data array */
- gl.enableVertexAttribArray(vertexColorAttribute);
+ gl.enableVertexAttribArray(vertexColorAttribute);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
</li>
</ol>
<p>The following figure shows the result as it is displayed on the screen.</p>
-<p class="figure">Figure: Color on the screen</p>
+<p align="center"><strong>Figure: Color on the screen</strong></p>
<p align="center"><img alt="Color on the screen" src="../../../images/color_final.png" /></p>
<h3>Source Code</h3>
<p>To enhance the user experience of your application with WebGL features, you must learn to use a texture, which is an image applied to the surface:</p>
<ol>
-<li><p>Define the vertex shader and fragment shader using the <
span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
+<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). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
<p>Set the variable to pass the texture coordinate over to the fragment shader. Define the formula for calculating the texture coordinates.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The coordinate range of a vertex is -1 ~ 1, and the coordinate range of a texture is 0 ~ 1.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The coordinate range of a vertex is -1 ~ 1, and the coordinate range of a texture is 0 ~ 1.
+</div>
+
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
attribute vec2 attVertexPos;
varying highp vec2 varTextureCoord;
- void main(void)
+ void main(void)
{
gl_Position = vec4(attVertexPos, 0, 2.0);
varTextureCoord = 0.5 * attVertexPos.xy + 0.5;
<script id="fshader" type="x-shader/x-fragment">
varying highp vec2 varTextureCoord;
uniform sampler2D unfSampler; /* Used to access the texture */
-
- void main(void)
+
+ void main(void)
{
/* texture2D(texture sampler, texture coordinate) */
- gl_FragColor= texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
+ gl_FragColor =
+ texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
}
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The texture coordinates uses the <span style="font-family: Courier New,Courier,monospace">s, t</span> pair.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ The texture coordinates uses the <code>s, t</code> pair.
+</div>
</li>
-<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">texture</span> instance using the <span style="font-family: Courier New,Courier,monospace">createTexture()</span> method:</p>
+<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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">After a texture has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteTexture()</span> method to delete it.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ After a texture has been used, you can use the <code>deleteTexture()</code> method to delete it.
+</div>
</li>
-<li><p>Load the image file to be used as texture data, and bind the texture using the <span style="font-family: Courier New,Courier,monospace">bindTexture()</span> method:</p>
+<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();
{
/* 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 <span style="font-family: Courier New,Courier,monospace">gl.UNPACK_FLIP_Y_WEBGL</span> attribute to reverse the data and store it.</p>
+ 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 <span style="font-family: Courier New,Courier,monospace">texImage2D()</span> method assigns the image to be used as a texture, and the <span style="font-family: Courier New,Courier,monospace">textParameteri()</span> method assigns a filter.</p>
-<pre class="prettyprint"> gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
-
+ <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);
/* Filter texture */
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
- /* Wrap texture */
+ /* 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);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
</pre>
</li>
-<li>Import the <span style="font-family: Courier New,Courier,monospace">unfSampler</span> uniform location to use in the program:
+<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);</pre>
+<pre class="prettyprint">
+ var unfSampler = gl.getUniformLocation(program, "uSampler");
+ gl.uniform1i(unfSampler, 0);
+</pre>
</li>
-<li>Draw the image using the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> method:
+<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);
+<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);
-
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
</script>
</li>
</ol>
<p>The following figure shows the result as it is displayed on the screen.</p>
-<p class="figure">Figure: Texture on the screen</p>
+<p align="center"><strong>Figure: Texture on the screen</strong></p>
<p align="center"><img alt="Texture on the screen" src="../../../images/texture.png" /></p>
<h3>Source Code</h3>
<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 */
-
- var centerVertices = [cx, cy]; /* Common coordinates for all triangles (the central point of a circle) */
+ 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 = [];
function draw()
{
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
- cy = cx = Math.sin(angle) * 0.9; /* Calculate the coordinate of central point to be moved to */
+ /* 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>
+ 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++)
lastVertices = [circumVertices[0], circumVertices[1]];
circumVertices = circumVertices.concat(lastVertices);
vertices = vertices.concat(centerVertices);
- vertices = vertices.concat(circumVertices);</pre>
+ 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 <span style="font-family: Courier New,Courier,monospace">TRIANGLE_FAN</span> argument that allows all triangles to share a central point to make a circle.
-<pre class="prettyprint"> angle += 0.01; /* Change the angle value to change the central point coordinates */
+ <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);
+ 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");
+
+ 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>
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
+ }
+</pre>
</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">setInterval()</span> method to set the rendering interval of the circle:
-<pre class="prettyprint"> window.setInterval(function() {draw();}, 10);
+<li>Use the <code>setInterval()</code> method to set the rendering interval of the circle:
+<pre class="prettyprint">
+ window.setInterval(function() {draw();}, 10);
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Instead of the <span style="font-family: Courier New,Courier,monospace">setInterval()</span> method, you can also use the script-based W3C <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method. </td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Instead of the <code>setInterval()</code> method, you can also use the script-based W3C <code>requestAnimationFrame()</code> method.
+</div>
</li>
</ol>
<p>The following figure shows the animation as it is displayed on the screen.</p>
-<p class="figure">Figure: Animation on the screen</p>
+<p align="center"><strong>Figure: Animation on the screen</strong></p>
<p align="center"><img alt="Animation on the screen" src="../../../images/animation_up_down.png" /></p>
<h3>Source Code</h3>
<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];
+ 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();
+ 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");
+ 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");
-
+
+ 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);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
</pre>
<p align="center"><img alt="2 triangles" src="../../../images/3d.png" /></p>
</li>
-<li><p>Define the vertex shader and fragment shader with using the <
span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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>
+<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;
-
+
uniform mat4 uMVMatrix; /* Uniform variable delivered with the model view matrix */
uniform mat4 uPMatrix; /* Uniform variable delivered with the projection matrix */
-
+
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);
+ /*
+ 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);
}
</script>
<script id="fshader" type="x-shader/x-fragment">
- precision mediump float;
-
+ precision mediump float;
+
varying vec4 vColor;
-
+
void main()
{
gl_FragColor = vColor;
- }
+ }
</script>
</pre>
</pre>
</li>
-<li><p>Download the glMatrix library (<span style="font-family: Courier New,Courier,monospace">gl-matrix-min.js</span>) and include it in the HTML:</p>
+<li><p>Download the glMatrix library (<code>gl-matrix-min.js</code>) and include it in the HTML:</p>
<pre class="prettyprint">
<script src="js/lib/gl-matrix-min.js"></script>
</pre>
</pre>
</li>
-<li><p>Check that the location of the <span style="font-family: Courier New,Courier,monospace">uPMatrix</span> and <span style="font-family: Courier New,Courier,monospace">uMVMatrix</span> uniforms can be used in program:</p>
+<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>
+<script>
function getMatrixUniforms()
{
pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
- mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
+ mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
}
- function setMatrixUniforms()
+ function setMatrixUniforms()
{
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
</li>
</ol>
<p>The following figure shows the 3D perspective as it is displayed on the screen.</p>
-<p class="figure">Figure: 3D perspective on the screen</p>
+<p align="center"><strong>Figure: 3D perspective on the screen</strong></p>
<p align="center"><img alt="3D perspective on the screen" src="../../../images/3d_final.png" /></p>
<p>To enhance the user experience of your application with WebGL features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
<ol>
-<li><p>Define the vertex shader and fragment shader using the <
span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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>
+<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 */
+ 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)
+ 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);
+ /*
+ 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;
+ 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;
- uniform sampler2D unifSampler; /* Handle the cube mapped texture */
-
- void main(void)
+ uniform sampler2D unifSampler; /* Handle the cube mapped texture */
+
+ void main(void)
{
gl_FragColor = texture2D(unifSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
<script>
var gl = null;
var program = null;
-
+
var diceTexture;
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
- var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
+ var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
var cubeVertexTextureCoordBuffe; /* Buffer for texture coordinate information */
- var cubeVertexIndexBuffer; /* Buffer for index information */
-
+ var cubeVertexIndexBuffer; /* Buffer for index information */
+
var xRot = 30;
var yRot = 30;
</pre>
</li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">canvas</span> object to import the WebGL context:</p>
+<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");
-
- return webGLContext
+
+ return webGLContext;
}
</script>
</pre>
</li>
-<li><p>Create the shaders and programs using the <span style="font-family: Courier New,Courier,monospace">createShader()</span> and <span style="font-family: Courier New,Courier,monospace">createProgram()</span> methods:</p>
+<li><p>Create the shaders and programs using the <code>createShader()</code> and <code>createProgram()</code> methods:</p>
<pre class="prettyprint lang-js">
-<script>
+<script>
function initShaders()
{
var vshader = gl.createShader(gl.VERTEX_SHADER);
gl.attachShader(program, vshader);
gl.attachShader(program, fshader);
gl.linkProgram(program); /* Link to program */
- gl.useProgram(program); /* Shaders are loaded and used */
+ gl.useProgram(program); /* Shaders are loaded and used */
- program.vertexPositionAttribute = gl.getAttribLocation(program,"attVertexPos");
+ program.vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
gl.enableVertexAttribArray(program.vertexPositionAttribute);
- program.textureCoordAttribute = gl.getAttribLocation(program, "attTextureCoord");
+ program.textureCoordAttribute =
+ gl.getAttribLocation(program, "attTextureCoord");
gl.enableVertexAttribArray(program.textureCoordAttribute);
program.pMatrixUniform = gl.getUniformLocation(program, "unifPMatrix");
- program.mvMatrixUniform = gl.getUniformLocation(program, "unifMVMatrix");</pre>
+ 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 <span style="font-family: Courier New,Courier,monospace">unifSampler</span> location:
-<pre class="prettyprint"> program.samplerUniform = gl.getUniformLocation(program, "unifSampler");
+<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");
}
</pre>
</li>
<li><p>Initialize the buffer:</p>
<pre class="prettyprint">
- function initBuffers()
+ 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 */
+ 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);
+ 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 */
+ 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);
+ 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);
+ 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)
+ function initTexture(callback)
{
textureImage = new Image();
- textureImage.onload = function()
+ textureImage.onload = function()
{
handleLoadedTexture(textureImage)
if (callback) callback();
textureImage.src = "images/dice.gif";
}
- function handleLoadedTexture(textureImage)
+ 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.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()
+ function drawScene()
{
gl.viewport(0, 0, canvas.width, canvas.height);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */</pre>
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
+</pre>
</li>
-<li>Import the <span style="font-family: Courier New,Courier,monospace">mat4()</span> method module and define it using the utility methods:
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">perspective()</span> method is not WebGL-embedded, so it must be used directly, or a third-party matrix library must be used.</td>
- </tr>
- </tbody>
-</table>
-
-<pre class="prettyprint lang-js"> mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
+<li>Import the <code>mat4()</code> method module and define it using the utility methods:
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>perspective()</code> method is not WebGL-embedded, so it must be used directly, or a third-party matrix library must be used.
+</div>
+
+<pre class="prettyprint lang-js">
+ 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.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.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.vertexAttribPointer(program.textureCoordAttribute,
+ cubeVertexTextureCoordBuffer.itemSize,
+ gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, diceTexture);
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>
}
canvas.addEventListener('touchstart', function(e)
- {
- touches = e.touches.item(0);
+ {
+ touches = e.touches.item(0);
- startPosX = touches.pageX;
- startPosY = touches.pageY;
+ startPosX = touches.pageX;
+ startPosY = touches.pageY;
- canvas.addEventListener('touchmove', mouseMoveHandler)
- });
+ canvas.addEventListener('touchmove', mouseMoveHandler)
+ });
canvas.addEventListener('touchend', function(e)
- {
- canvas.removeEventListener('touchmove', mouseMoveHandler)
- })
+ {
+ canvas.removeEventListener('touchmove', mouseMoveHandler)
+ })
canvas.addEventListener('touchend', function()
- {
- canvas.removeEventListener('touchmove', mouseMoveHandler)
- });
- }
-</script>
+ {
+ canvas.removeEventListener('touchmove', mouseMoveHandler)
+ });
+ }
+</script>
</pre>
</li></ol>
<p>The following figure shows the dice as it is displayed on the screen.</p>
-<p class="figure">Figure: Dice on the screen</p>
+<p align="center"><strong>Figure: Dice on the screen</strong></p>
<p align="center"><img alt="Dice on the screen" src="../../../images/dice_3d.png" /></p>
<h3>Source Code</h3>
</pre>
</li>
-<li><p>Set the area to allocate the <span style="font-family: Courier New,Courier,monospace"><canvas></span> element in HTML, and to adjust the camera and light settings:</p>
+<li><p>Set the area to allocate the <code><canvas></code> element in HTML, and to adjust the camera and light settings:</p>
<pre class="prettyprint">
<body>
<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>
+ <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" type="range" min="300" max="800" step="10" /></td>
+ <td width='150px'>
+ <input id="slider-cz" 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>
+ </table>
</span>
</div>
</body>
</pre>
</li>
-<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 <span style="font-family: Courier New,Courier,monospace">startWebGl()</span> method.</p>
+<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 */
- var components = {}; /* Object type variable containing, for example, light and mesh information */
+ 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()
+
+ function startWegGL()
{
setupWebGLRenderer();
setupCamera();
</pre>
</li>
-<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">WebGLRenderer</span> instance and, after setting the canvas size, add the <span style="font-family: Courier New,Courier,monospace">domElement</span> to the designated HTML location:</p>
+<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);
+ document.getElementById('webGLContainer').appendChild(renderer.domElement);
}
</pre>
</li>
-<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">PerspectiveCamera</span> instance:</p>
+<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 = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
camera.position.z = 500;
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In WebGL, there is no <span style="font-family: Courier New,Courier,monospace">Camera</span> object.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ In WebGL, there is no <code>Camera</code> object.
+</div>
</li>
-<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">Scene</span> instance and create the mesh and light elements using the <span style="font-family: Courier New,Courier,monospace">createMeshs()</span> and <span style="font-family: Courier New,Courier,monospace">setupLight()</span> methods:</p>
+<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()
{
createMeshs();
setupLight();
- /* Circulate components and add the mesh and light elements to the scene object */
+ /*
+ Circulate components and add the mesh
+ and light elements to the scene object
+ */
for (n in components)
{
- scene.add(components[n]);
+ 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)}));
+ 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 */
+ /* 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)}));
+ 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;
/* Create the plane mesh */
components.planeMesh = (function()
{
- var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 10,0),
- new THREE.MeshLambertMaterial({color:'red'}));
+ 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 the DirectionalLight location */
+ directionalLight.position.set(0, 0, 1).normalize();
/* Set directionalLight as a component element */
- components.directionalLight = directionalLight;
+ components.directionalLight = directionalLight;
- /* Create a new AmbientLight instance and set it as a component element */
+ /* Create a new AmbientLight instance and set it as a component element */
components.ambientLight = new THREE.AmbientLight(0x915656);
}
</pre>
<li><p>Add an animation:</p>
<pre class="prettyprint">
function animate()
- {
- var speed= 0.2;
+ {
+ 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);
+ components.cubeMesh.rotation.x =
+ components.cubeMesh.rotation.z =
+ components.cubeMesh.rotation.y += angleChange;
+
+ var range = Math.sin(angle);
if (range < 0)
{
range *=-1;
{
moveWebGLObject();
});
-
- angle += 0.03;
+
+ angle += 0.03;
})();
}
</pre>
</li>
-<li><p>Adjust the camera and light location using events in the <span style="font-family: Courier New,Courier,monospace">manipulate()</span> method:</p>
+<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');
+ {
+ /*
+ 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');
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 */
+ /*
+ 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[axis] = target.value;
+ components.directionalLight.position.set(components.directionalLight.position.x,
+ components.directionalLight.position.y,
components.directionalLight.position.z).normalize();
}
</pre>
</li></ol>
<p>The following figure shows the final result as it is displayed on the screen.</p>
-<p class="figure">Figure: Final result</p>
+<p align="center"><strong>Figure: Final result</strong></p>
<p align="center"><img alt="Final result" src="../../../images/threejs.png" /></p>
<h3>Source Code</h3>
<p>You can <a href="#prop_ani">define various properties</a> to control animations.</p></li>
</ul>
-<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+<p>When using the CSS animation properties, the Tizen browser requires the <code>-webkit-</code> prefix.</p>
<h2 name="keyframe" id="keyframe">Using Keyframes</h2>
-<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
-<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace"><number>% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>
+<p>The CSS animations work based on <code>@-webkit-keyframes</code> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
+<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <code>from {} to {}</code> rule, where <code>from</code> is the beginning of the animation at 0% and <code>to</code> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <code><number>% {}</code> rules that together cover the entire animation iteration from 0% to 100%.</p>
<p>The following code snippet demonstrates how to use keyframes:</p>
<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;}
<p>You can define various properties for an animation to control how it is played:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>
-<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>
+<li><code>animation-name</code>
+<p>This property uses the name defined in the <code>@-webkit-keyframes</code> rules to play the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>
+<li><code>animation-duration</code>
<p>This property defines how long one iteration of the animation takes.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>
-<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>
+<li><code>animation-iteration-count</code>
+<p>This property defines how many times the animation is repeated. If the value is set as <code>infinite</code>, the repetitions are unlimited.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>
+<li><code>animation-timing-function</code>
<p>This property defines the pace of the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>
-<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
+<li><code>animation-direction</code>
+<p>This property defines the replay direction. The <code>reverse</code> value plays the animation from 100% keyframe to 0% keyframe, while the <code>alternate</code> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>
-<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>
+<li><code>animation-play-state</code>
+<p>This property defines the replay status of the animation. The <code>paused</code> value temporarily stops the animation.</p></li>
+<li><code>animation-delay</code>
<p>This property defines the delay time before the start of the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>
-<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>
+<li><code>animation-fill-mode</code>
+<p>This property defines the state of the animation before or after the animation is played. The <code>forwards</code> value maintains the last value of the keyframe rule when the animation is over, while the <code>backwards</code> value fills up the first value of the keyframe rule when the animation with the <code>animation-delay</code> property is in a standby state. The <code>both</code> value covers both the start and the end of the animation.</p></li></ul>
<p>The following code snippet demonstrates how to use animation properties:</p>
<pre class="prettyprint lang-html">
<head>
<style type="text/css">
- .box
+ .box
{
-webkit-animation-name: boxani;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: none;
}
- .box.case01: hover
+ .box.case01: hover
{
-webkit-animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
</div>
</body>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>hover</code> pseudo class in Tizen maintains a <code>mouseover</code> state when an element is tapped, and becomes a <code>mouseout</code> state when another element is tapped.
+</div>
-<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. If you omit a property value, a default value is used instead.</p>
+<p>The <code>animation</code> property allows you to define all the animation properties in a shorthand mode in the order of <code>animation-name</code> | <code>animation-duration</code> | <code>animation-timing-function</code> | <code>animation-delay</code> | <code>animation-iteration-count</code> | <code>animation-direction</code> | <code>animation-fill-mode</code>. If you omit a property value, a default value is used instead.</p>
<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;
<h2 id="create" name="create">Creating a Logo Animation</h2>
-<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>
+<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or the emulator) is switched on:</p>
<ol>
<li>No elements are initially shown on the screen. </li>
<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>
<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
</ol>
-<p class="figure">Figure: Logo animation (in mobile applications only)</p>
+<p align="center"><strong>Figure: Logo animation (in mobile applications only)</strong></p>
<p align="center"><img alt="Logo animation" src="../../../images/animation1.png" /></p>
<p>To create a logo animation:</p>
<ol>
</li>
<li>Define the basic style for the animation:
<pre class="prettyprint">
-.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto;
+.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto;
position: relative; border: 2px solid #fff; overflow: hidden;}
-.animation-holder {width: 280px; height: 88px; position: absolute;
- left: 50%; top: 50%; margin: -54px 0 0 -140px;}
+.animation-holder {width: 280px; height: 88px; position: absolute;
+ left: 50%; top: 50%; margin: -54px 0 0 -140px;}
-.tizen-txt, .tizen-logo {position: absolute; display: block;
+.tizen-txt, .tizen-logo {position: absolute; display: block;
background-repeat: no-repeat; background-position: 50% 50%}
.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
-.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px;
+.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px;
background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
</pre>
</li>
<li>Create the animation:
<ol type="a">
<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 <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. 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>
+<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;
<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;}
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.</td>
- </tr>
- </tbody>
- </table></li>
+<div class="note">
+ <strong>Note</strong>
+ If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.
+</div>
+ </li>
<li>Create the keyframes to implement the flow for each letter in the word "TIZEN":
<ul>
<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
+<li>The <code>animation-timing-function</code> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
</ul>
<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;}
}
<!--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;}
<!--Remaining letters-->
</pre></li>
-<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>
+<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;
}
<p>When creating a background for an element, you can use the following properties:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">background-color</span>
+<li><code>background-color</code>
<p>Defines the color of the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-image</span>
+<li><code>background-image</code>
<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-position</span>
+<li><code>background-position</code>
<p>Defines the exact position of the image.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>
+<li><code>background-repeat</code>
<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>
+<li><code>background-origin</code>
<p>Defines the position of the initial background for the item.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-size</span>
+<li><code>background-size</code>
<p>Defines the size of the image in the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>
+<li><code>background-clip</code>
<p>Defines the area of the cropped background element.</p></li>
</ul>
-<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>
+<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<code>border-width</code>, <code>border-style</code>, and <code>border-color</code>), or by listing the values for all 3 properties together in 1 <code>border</code> property. To define rounded corners for the border, you can additionally use the <code>border-radius</code> property.</p>
-<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>
+<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <code>box-shadow</code> property. To switch the shadow from outside to inside the element, add the <code>inset</code> keyword to the property too.</p>
-<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
+<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <code>background-repeat</code> property value.</p>
- <p class="figure">Figure: Background examples</p>
+ <p align="center"><strong>Figure: Background examples</strong></p>
<p align="center"><img alt="Background examples" src="../../../images/css_bg1.png" /></p>
<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
<pre class="prettyprint">
<!--Background color-->
-#one
+#one
{
width: 180px;
height: 40px;
background-color: lightblue;
}
-<!--Background image-->
-#one
+<!--Background image-->
+#one
{
width: 200px;
height: 100px;
background-image: url(t3.png);
}
-<!--Multiple images-->
-#multi
+<!--Multiple images-->
+#multi
{
width: 155px;
height: 100px;
}
<!--Shading and border with rounded corners-->
-#shading
+#shading
{
width: 160px;
height: 40px;
<p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
-<p class="figure">Figure: Background with the parallax effect</p>
+<p align="center"><strong>Figure: Background with the parallax effect</strong></p>
<p align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p>
-<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
+<ol><li>Prepare 3 images (<code>tizen.png</code>, <code>tizen2.png</code>, and <code>dot.png</code>), each with a transparent background.
<p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
-<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id="parallelexample"</span> and a slider input element with the minimum, maximum, and initial value:
+<li>Create a <code>div</code> element with <code>id="parallelexample"</code> and a slider input element with the minimum, maximum, and initial value:
<pre class="prettyprint">
<div id="parallelexample"></div>
<input id="position" type="range" min="1" max="200" value="50">
</pre></li>
-<li>Define the needed styles for the <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace"><head></span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.
+<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
margin: 0px auto;
}
</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 <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> event handler for the slider to determine the change based on the slider handle movement.
+<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()
+function moveLayers()
{
/* Get slider value */
var poz = document.getElementById('position');
poz.onchange = function()
{
var layer1 = this.value/8, layer2 = this.value/16;
- example.style.backgroundPosition = layer1 +'em 8em, '
- + layer2 + 'em 4em, center top';
+ example.style.backgroundPosition =
+ layer1 +'em 8em, ' + layer2 + 'em 4em, center top';
}
}
</pre></li></ol>
<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>
<li>Box model properties
-<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace"><br></span> and <span style="font-family: Courier New,Courier,monospace"><i></span>. The box model area is set as defined in the following figure.</p>
+<p>A box model refers to all DOM elements excluding design elements, such as <code><br></code> and <code><i></code>. The box model area is set as defined in the following figure.</p>
<ul>
<li><strong>Content</strong>: Content area</li>
<li><strong>Padding</strong>: Gap between the content and boundary</li>
<li><strong>Border</strong>: Boundary</li>
<li><strong>Margin</strong>: Overall size of the box model</li>
</ul>
-<p class="figure">Figure: Box model structure</p>
+<p align="center"><strong>Figure: Box model structure</strong></p>
<p align="center"><img alt="Box model structure" src="../../../images/box_model_properties_struct.png"/></p>
<p>You can <a href="#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</li></ul>
+<li>The <code>box-sizing</code> property assigns the box size range.</li>
+<li>The <code>outline</code> properties make the box outstanding.</li>
+<li>The <code>text-overflow</code> property handles the text extending outside the box.</li></ul>
</li>
</ul>
<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
<ol>
-<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
-<pre class="prettyprint">input: enabled {border: 1px solid blue}
-input: disabled {border: 1px solid red}</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td>
- </tr>
- </tbody>
- </table></li>
-<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes.
+<li><p>Use the pseudo-classes, such as <code>:enabled</code> and <code>:disabled</code>, to add different styles based on the state of the DOM elements:</p>
+<pre class="prettyprint">
+input: enabled {border: 1px solid blue}
+input: disabled {border: 1px solid red}
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ In the versions prior to CSS3, pseudo-elements, such as <code>:hover</code>, <code>:active</code>, and <code>:focus</code>, were used, and required an attribute selector. Since the <code>:enabled</code> and <code>:disabled</code> classes are not influenced by the <code>display</code> and <code>visibility</code> attributes, they improve the accessibility.
+</div>
+ </li>
+<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes.
<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
<pre class="prettyprint">
-<!--HTML-->
+<!--HTML-->
<input type="number" step="10" min="10" max="100"/>
</pre>
<pre class="prettyprint">
input[type="number"]: out-of-range {border: 3px solid red; width: 90%}
</pre>
<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../../images/pseudo_elements_selector_range.png"/></p></li>
-<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
+<li>To apply different styles to required input items and option items, use the <code>:required</code> and <code>:optional</code> pseudo-classes. (The following figure applies to mobile applications only.)
<pre class="prettyprint">
<!--HTML-->
<fieldset>
<legend>required and optional</legend>
- <label>email: <input type="email" required></label>
- <label>password: <input type="Password" placeholder="required area" required></label>
+ <label>email: <input type="email" 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>
-</fieldset></pre>
+</fieldset>
+</pre>
<pre class="prettyprint">
<!--CSS-->
input: required, textarea: required {border: 1px solid red}
<h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
<p>To enhance the user experience of your application, you must learn how to use box model properties:</p>
-<table>
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this topic.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The properties dependent on mouse and keyboard functions are not discussed in this topic.
+</div>
<ol>
-<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
+<li>To assign the area that is included in the width and height of the box automatically, use the <code>box-sizing</code> property. To assign the width without a margin, use the <code>box-sizing: border-box</code> property.
<pre class="prettyprint lang-html">
-div.content-box {box-sizing: content-box} <!--width (height) = content-->
-div.border-box {box-sizing: border-box} <!--width (height) = content + padding + border-->
+<!--width (height) = content-->
+div.content-box {box-sizing: content-box}
+<!--width (height) = content + padding + border-->
+div.border-box {box-sizing: border-box}
div.border-box: before {height: 40px}
</pre></li>
-<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:
+<li>To draw an outline without using up the area, use the <code>outline</code> property:
<pre class="prettyprint">
.Test-Box {outline: 5px dashed red}
.outline: before {outline: 2px dashed red}
.outline-offset: before {outline-offset: 35px}
</pre></li>
-<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as '...'.
-<pre class="prettyprint">div
+<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
{
width: 250px;
margin: 20px auto;
}
.clip {text-overflow: clip}
-.ellipsis {text-overflow: ellipsis}</pre></li>
+.ellipsis {text-overflow: ellipsis}
+</pre></li>
</ol>
<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>
-<p class="figure">Figure: Box model properties (in mobile applications only)</p>
+<p align="center"><strong>Figure: Box model properties (in mobile applications only)</strong></p>
<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../../images/box_model_properties.png"/></p>
<h3>Source Code</h3>
<p>The main features of Clipboard API and events include:</p>
<ul>
<li><p>Copying</p>
-<p>You can fire the <
span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="#copy">place the selected data on the clipboard</a>.</p></li>
+<p>You can fire the <
code>copy</code> event to <a href="#copy">place the selected data on the clipboard</a>.</p></li>
<li><p>Cutting</p>
-<p>You can fire the <
span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="#cut">remove the selected content in the document</a>.</p></li>
+<p>You can fire the <
code>cut</code> event to place the selected data on the clipboard, and <a href="#cut">remove the selected content in the document</a>.</p></li>
<li><p>Pasting</p>
-<p>You can fire the <
span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
+<p>You can fire the <
code>paste</code> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
</li>
</ul>
<h2 id="copy" name="copy">Copying Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p>
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>copy</code> event:</p>
<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
+<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);</pre>
+ {
+ copyHandler(e);
+ }, false);
+</pre>
</li>
- <li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> method is called.</p>
+ <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)
+<pre class="prettyprint">
+ function copyHandler(e)
{
e.preventDefault();
- var range = window.getSelection();</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.</td>
- </tr>
- </tbody>
-</table>
+ var range = window.getSelection();
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ If the current selection is not influenced and there is no selected range, the clipboard imports the <code>setData()</code> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.
+</div>
</li>
<li>Store the data of the selected range:
-<pre class="prettyprint"> e.clipboardData.setData("text/plain", range);
+<pre class="prettyprint">
+ e.clipboardData.setData("text/plain", range);
};
</script>
</pre>
<h2 id="cut" name="cut">Cutting Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p>
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>cut</code> event:</p>
<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
+<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);</pre>
+ document.addEventListener("cut", function(e)
+ {
+ cutHandler(e);
+ }, false);
+</pre>
</li>
- <li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> method is called.</p>
+ <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)
+<pre class="prettyprint">
+ function cutHandler(e)
{
e.preventDefault();
- var range = window.getSelection();</pre>
+ var range = window.getSelection();
+</pre>
</li>
<li>Store the data of the selected range:
-<pre class="prettyprint"> e.clipboardData.setData("text/plain", range);
- };
+<pre class="prettyprint">
+ e.clipboardData.setData("text/plain", range);
+ };
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td>
- </tr>
- </tbody>
-</table>
+
+<div class="note">
+ <strong>Note</strong>
+ Before the <code>setData()</code> method is imported, the basic motion of the system event must be cancelled using the <code>preventDefault()</code> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.
+</div>
</li>
</ol>
<h2 id="paste" name="paste">Pasting Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p>
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>paste</code> event:</p>
<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
+<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);</pre>
+ {
+ pasteHandler(e);
+ }, false);
+</pre>
</li>
- <li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> method is called.</p>
+ <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)
+<pre class="prettyprint">
+ function pasteHandler(e)
{
- e.preventDefault();</pre>
+ e.preventDefault();
+</pre>
</li>
- <li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+ <li>Paste the clipboard data to the target using the <code>getData()</code> method:
<pre class="prettyprint">
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">
<div id="ev-log" class="log">Event log</div>
<div contenteditable>
This section is informative
- 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.
+ 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.
</div>
<body>
</pre>
</li>
-<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> events:</p>
+<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");
+ var evLogBox = document.getElementById("ev-log");
document.addEventListener("copy", function(e)
- {
- copyHandler(e);
- }, false);
+ {
+ copyHandler(e);
+ }, false);
document.addEventListener("paste", function(e)
- {
- pasteHandler(e);
- }, false);
+ {
+ pasteHandler(e);
+ }, false);
</pre>
</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> event occurs, stop the system clipboard basic operation and set the range you want to copy:
+<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)
+ function copyHandler(e)
{
e.preventDefault();
- var range = window.getSelection();</pre>
+ var range = window.getSelection();
+</pre>
</li>
<li>Store the data of the selected range:
-<pre class="prettyprint"> e.clipboardData.setData("text/plain", range);
+<pre class="prettyprint">
+ e.clipboardData.setData("text/plain", range);
evLogBox.innerHTML = "Event log: copy";
- };</pre>
+ };
+</pre>
</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
-<pre class="prettyprint"> function pasteHandler(e)
+<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();
pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
evLogBox.innerHTML = "Event log: paste";
- };
+ };
</script>
</pre>
</li>
</ol>
-<p class="figure">Figure: Copying and pasting</p>
+<p align="center"><strong>Figure: Copying and pasting</strong></p>
<p align="center"><img alt="Copying and pasting" src="../../../images/copy_pasting.png" /></p>
<h3>Source Code</h3>
<p>You can specify the color of an element with the following formats:</p>
<ul>
<li>Keyword values
-<p>You can use basic keywords, such as <
span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.
+<p>You can use basic keywords, such as <
code>red</code>, <code>green</code>, <code>blue</code>, or <code>deepskyblue</code>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
+<p>The <code>currentColor</code> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <code>currentColor</code> keyword is the computed value of the <code>color</code> property. If the <code>currentColor</code> keyword is set on the <code>color</code> property itself, it is treated as <code>color: inherit</code>.
</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
+<p>You can use the <code>transparent</code> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
</li>
<li>RGB values
<ul>
<li>In hexadecimal notation
-<p>The format is '#' followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</p></li>
+<p>The format is '#' followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <code>#fc0</code> expands to <code>#ffcc00</code>.</p></li>
<li>In functional notation
-<p>The format is 'rgb(' followed by a comma-separated list of 3 numerical values (integer or percentage) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. White space characters are allowed around the numerical values.
+<p>The format is 'rgb(' followed by a comma-separated list of 3 numerical values (integer or percentage) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <code>rgb(255, 255, 255)</code> = <code>rgb(100%, 100%, 100%)</code> = <code>#FFF</code>. White space characters are allowed around the numerical values.
</p></li>
</ul>
</li>
<li>RGBA values
-<p>The RGB color model is extended to include "alpha" to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</p>
+<p>The RGB color model is extended to include "alpha" to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <code>rgba(255, 0, 0, 0.7)</code>.</p>
</li>
<li>HSL value
-<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is "normal". For example: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>.
+<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is "normal". For example: <code>hsl(0, 100%, 50%)</code>.
</p></li>
<li>HSLA value
-<p>The HSL color model is extended to include "alpha" to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>
+<p>The HSL color model is extended to include "alpha" to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <code>hsla(120, 100%, 50%, 0.8)</code>.</p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI 'appearance' property.</p></td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ The CSS2 System Color values have been deprecated in favor of the CSS3 UI 'appearance' property.
+</div>
<h2 id="specify">Specifying a Color for an Element</h2>
background: white;
border: 1px solid springgreen;
}
-#one span
+#one span
{
background: currentColor;
}
<p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
-<p class="figure">Figure: HSLA color generator</p>
+<p align="center"><strong>Figure: HSLA color generator</strong></p>
<p align="center"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
-<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace"><div></span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
+<ol><li>To create the color generator, define 2 <code><div></code> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
<ul>
<li>The first input has a range of 0 - 360 and represents hue.</li>
<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
<li>The last input has a range of 0 - 10 and represents alpha transparency.
-<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> attribute is 0 so the value can be divided by 10.</p></li></ul>
+<p>The range should be 0.1 - 1, but the minimum value of the <code>min</code> attribute is 0 so the value can be divided by 10.</p></li></ul>
<pre class="prettyprint lang-html">
<div id="color-generator">
<input id="alpha" value="10" type="range" min="0" max="10">
</div>
</pre></li>
-<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById()</span> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
+<li>Obtain the values from the slider inputs with the <code>getElementById()</code> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
<pre class="prettyprint">
var h = document.getElementById('hue').value,
s = document.getElementById('saturation').value,
<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()
</p>
<ul>
<li>Using drag and drop
-<p>To make an element draggable, add the <
span style="font-family: Courier New,Courier,monospace">draggable="true"</span> attribute to it. Only elements thus defined as draggable can <a href="#handle">generate drag and drop events</a>.</p>
+<p>To make an element draggable, add the <
code>draggable="true"</code> attribute to it. Only elements thus defined as draggable can <a href="#handle">generate drag and drop events</a>.</p>
<p>A drag and drop requires a source, target, and data. It is used through the following events:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">dragstart</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">drag</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragleave</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragenter</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragover</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">drop</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragend</span></li></ul>
-<p>The <
span style="font-family: Courier New,Courier,monospace">dragstart</span> and <span style="font-family: Courier New,Courier,monospace">drop</span> events send data through the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface.</p>
+<ul><li><code>dragstart</code></li>
+<li><code>drag</code></li>
+<li><code>dragleave</code></li>
+<li><code>dragenter</code></li>
+<li><code>dragover</code></li>
+<li><code>drop</code></li>
+<li><code>dragend</code></li></ul>
+<p>The <
code>dragstart</code> and <code>drop</code> events send data through the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface.</p>
</li>
<li>Transferring data
-<p>You can <a href="#transfer">transfer data from the drag source to the drop target</a>. The <span style="font-family: Courier New,Courier,monospace">DataTransfer</span> interface instance receives the <span style="font-family: Courier New,Courier,monospace">dragstart</span> event and fills itself with the data to be transferred. It then receives a <span style="font-family: Courier New,Courier,monospace">drop</span> event, and puts the data into the drop target. </p></li>
+<p>You can <a href="#transfer">transfer data from the drag source to the drop target</a>. The <code>DataTransfer</code> interface instance receives the <code>dragstart</code> event and fills itself with the data to be transferred. It then receives a <code>drop</code> event, and puts the data into the drop target. </p></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To use drag and drop in a Tizen device, long-press the draggable element. When the context menu opens, select the <strong>Drag</strong> option.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ To use drag and drop in a Tizen device, long-press the draggable element. When the context menu opens, select <strong>Drag</strong>.
+</div>
<h2 id="handle" name="handle">Handling Drag and Drop Events</h2>
<ol>
-<li><p>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable="true"</span> attribute to them:</p>
+<li><p>Define the draggable elements by adding the <code>draggable="true"</code> attribute to them:</p>
<pre class="prettyprint lang-html">
<h1>Drag and drop tutorial</h1>
<div class="example_body">
var cols = document.querySelectorAll('#drag-list_.drag-row');
var colsLength = cols.length;
- for (var i = 0; i < colsLength; i++)
+ for (var i = 0; i < colsLength; i++)
{
cols[i].addEventListener('dragstart', dragStart, false);
cols[i].addEventListener('drag', dragIng, false);
<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)
+function dragStart(e)
{
- log.innerHTML = "dragStart"
+ log.innerHTML = "dragStart";
};
-function dragIng(e)
+function dragIng(e)
{
- log.innerHTML = "drag"
+ log.innerHTML = "drag";
};
-function dragOver(e)
+function dragOver(e)
{
e.preventDefault();
- log.innerHTML = "dragOver"
+ log.innerHTML = "dragOver";
};
-function dragEnter(e)
+function dragEnter(e)
{
- log.innerHTML = "dragEnter"
-};
+ log.innerHTML = "dragEnter";
+};
-function dragLeave(e)
+function dragLeave(e)
{
- log.innerHTML = "dragLeave"
+ log.innerHTML = "dragLeave";
};
-function dragDrop(e)
+function dragDrop(e)
{
e.stopPropagation();
- log.innerHTML = "dragDrop"
+ log.innerHTML = "dragDrop";
};
-
-function dragEnd(e)
+
+function dragEnd(e)
{
- log.innerHTML = "dragEnd"
+ log.innerHTML = "dragEnd";
};
</pre>
</li>
<p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
<ol>
-<li>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable="true"</span> attribute to them.
+<li>Define the draggable elements by adding the <code>draggable="true"</code> attribute to them.
<p>In this example, the Tizen logo image has been divided and allocated randomly. Each imager part is defined as draggable, so that the user can rearrange the image parts in the correct order.</p>
<pre class="prettyprint lang-html">
<h1>Drag and drop tutorial</h1>
</pre>
</li>
-<li>Add event listeners for the <span style="font-family: Courier New,Courier,monospace">dragover</span>, <span style="font-family: Courier New,Courier,monospace">dragleave</span>, <span style="font-family: Courier New,Courier,monospace">dragstart</span>, and <span style="font-family: Courier New,Courier,monospace">drop</span> events:
+<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++)
+ for (var i = 0; i < colsLength; i++)
{
cols[i].addEventListener('dragstart', dragStartHandler, false);
cols[i].addEventListener('dragover', dragOverHandler, false);
<li>Transfer data (in this case, image parts):
<ol type="a">
-<li>Declare the <span style="font-family: Courier New,Courier,monospace">dragElem</span> variable, which is an empty object for the data exchange:
+<li>Declare the <code>dragElem</code> variable, which is an empty object for the data exchange:
<pre class="prettyprint">
var dragElem = null;
</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 <span style="font-family: Courier New,Courier,monospace">dragStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">dragDropHandler()</span> event handlers to exchange image parts:
+<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)
+function dragStartHandler(e)
{
/* Set data */
dragElem = this;
cols[i].classList.add('start');
};
};
-function dragDropHandler(e)
+function dragDropHandler(e)
{
/* Get data */
dragElem.innerHTML = this.innerHTML;
var puzzleKey = ["01", "02", "03", "04", "05", "06"];
var puzzleArray = [];
-function puzzleCheck()
+function puzzleCheck()
{
/* Initialize the user key */
puzzleArray = [];
/* Insert the keys in the array */
- for (var i = 0; i < colsLength; i++)
+ for (var i = 0; i < colsLength; i++)
{
puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
};
</ol>
</li>
</ol>
-<p class="figure">Figure: Drag and drop puzzle</p>
-<p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p>
+<p align="center"><strong>Figure: Drag and drop puzzle</strong></p>
+<p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p>
+<p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop2.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
<ul>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Flexible Box Layout Module</h1>
-<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
+<p>CSS attributes, such as <code>float</code>, <code>display</code>, and <code>position</code>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
</ul>
-<p class="figure">Figure: Flexible box layout</p>
+<p align="center"><strong>Figure: Flexible box layout</strong></p>
<p align ="center"><img alt="Flexible box layout" src="../../../images/flex_container.png"/></p>
<h2 id="usecont" name="usecont">Using the Flex Container</h2>
<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
<ol>
-<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:
-<pre class="prettyprint"><style>
+<li>Assign the area (flex container) where the flexible box layout is applied by using the <code>display: flex</code> property:
+<pre class="prettyprint">
+<style>
.flex_container {display: -webkit-flex}
</style>
<div class="flex_item">B</div>
<div class="flex_item">C</div>
<div class="flex_item">D</div>
-<div></pre>
+<div>
+</pre>
<p>The child nodes within the assigned flex container become flex items.</p>
</li>
<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
+<li><code>flex-direction</code> property sets the alignment direction of the flex items:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
-<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>
+<li><code>row</code>: Align from left to right.</li>
+<li><code>row-reverse</code>: Align from right to left.</li>
+<li><code>column</code>: Align from top to bottom.</li>
+<li><code>column-reverse</code>: Align from bottom to top.</li>
</ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
+<li><code>flex-wrap</code> property sets the line changing of the flex items:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
+<li><code>nowrap</code>: Reduces the size of the flex items without changing lines.</li>
+<li><code>wrap</code>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
+<li><code>wrap-reverse</code>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <code>wrap</code> value.</li>
</ul></li>
-<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
+<li><code>justify-content</code> property sets the handling of gaps between the flex items on the main axis:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>
+<li><code>flex-start</code>: Gathers the items at the alignment starting point.</li>
+<li><code>flex-end</code>: Gathers the items at the alignment finishing point.</li>
+<li><code>center</code>: Gathers the items in the center.</li>
+<li><code>space-between</code>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
+<li><code>space-around</code>: Creates equal gaps between all items.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td>
- </tr>
- </tbody>
- </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
+
+<div class="note">
+ <strong>Note</strong>
+ This property is similar to <code>text-align</code>, but the alignment direction and the starting point are based on the <code>flex-direction</code> and <code>flex-wrap</code> properties.
+</div>
+ </li>
+
+<li><code>align-content</code> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <code>justify-content</code> property, and 1 additional value:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
+<li><code>stretch</code>: Extends the size of the flex items and aligns them without gaps.</li>
</ul></li>
-<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
+<li id="alignitems"><code>align-items</code> property sets the relative location and size between the flex items on the cross axis:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
-<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>
+<li><code>flex-start</code>: Aligns the items vertically to the top.</li>
+<li><code>flex-end</code>: Aligns the items vertically to the bottom.</li>
+<li><code>center</code>: Aligns the items vertically to the middle.</li>
+<li><code>baseline</code>: Aligns the items vertically to the baseline.</li>
+<li><code>stretch</code>: Extends the height of the flex items and aligns them without gaps.</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td>
- </tr>
- </tbody>
- </table></li></ul></li></ol>
+
+<div class="note">
+ <strong>Note</strong>
+ If the <code>flex-wrap</code> property is set to <code>wrap-reverse</code>, the start and end points of the alignment are reversed.
+</div>
+</li></ul></li></ol>
<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
-<p class="figure">Figure: Flex container properties (in mobile applications only)</p>
+<p align="center"><strong>Figure: Flex container properties (in mobile applications only)</strong></p>
<p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
<h3>Source Code</h3>
<ol>
<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
-<pre class="prettyprint"><style>
+<pre class="prettyprint">
+<style>
.flex_container {display: -webkit-flex}
</style>
<div class="flex_item">A</div>
<div class="flex_item">B</div>
<div class="flex_item">C</div>
-<div></pre>
+<div>
+</pre>
</li>
<li><p>Define the necessary properties for the flex items:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td>
- </tr>
- </tbody>
- </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
+<li><code>align-self</code> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
+
+<div class="note">
+ <strong>Note</strong>
+ If both the <code>align-self</code> and <code>align-items</code> properties are used simultaneously, the <code>align-items</code> property is ignored.
+</div>
+</li>
+
+<li><code>flex</code> property is a shorthand expression defining the flex item size handling:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
+<li><code>flex-grow</code>: Sets whether the spaces between flex items are filled.</li>
+<li><code>flex-shrink</code>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
+<li><code>flex-basis</code>: Sets the default width of the relevant flex items.</li>
</ul></li></ul></li></ol>
<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>
-<p class="figure">Figure: Flex items (in mobile applications only)</p>
+<p align="center"><strong>Figure: Flex items (in mobile applications only)</strong></p>
<p align="center"><img alt="Flex items (in mobile applications only)" src="../../../images/flexitem_properties.png"/></p>
<h3>Source Code</h3>
<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
<ol>
<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
-<pre class="prettyprint"><div class="container">
+<pre class="prettyprint">
+<div class="container">
<article class="events">
<h2>UPCOMING EVENTS</h2>
<ul>
<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-->
<!--Other icons-->
</div>
</article>
-</div></pre></li>
+</div>
+</pre></li>
<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
-<pre class="prettyprint"><!--Border for the article areas-->
+<pre class="prettyprint">
+<!--Border for the article areas-->
.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%;
+ 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;
-}</pre>
+}
+</pre>
<p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../../images/flexible_default_structure.png"/></p></li>
<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
<ol type="a">
-<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
+<li>Define the text list items and the icon list as flex containers using the <code>display: -webkit-flex;</code> property:
<ul>
<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
<p>(The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint"><!--Flexible alignment of text list-->
-.container .events > ul > li
+<pre class="prettyprint">
+<!--Flexible alignment of text list-->
+.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;
-}</pre>
+}
+</pre>
<p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../../images/flexible_box_alignment.png"/></p></li>
<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)
+@media screen and (min-width: 390px)
{
- .container .schedule .img_list
+ .container .schedule .img_list
{
display: -webkit-flex;
-webkit-flex-wrap: wrap;
.container {display: -webkit-flex;}
.container > * {-webkit-align-content: center;}
.container article {height: 250px;}
-}</pre>
+}
+</pre>
<p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../../images/flexible_screen_size.png"/></p>
<p>For more information on defining screen-size-specific rules, see <a href="media_query_w.htm">Media Queries</a>.</p>
</li></ol></li></ol>
<p>The new text features in CSS Fonts Module Level 3 API include:</p>
<ul>
<li>Font properties
-<p>You can <a href="#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</p></li>
+<p>You can <a href="#font">use CSS font properties</a>, such as <code>font-style</code>, <code>font-weight</code>, <code>font-variant</code>, <code>font-size</code>, and <code>font-family</code>, to modify the appearance of text.</p></li>
</ul>
<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
<ol>
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace"><style></span> element in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of the Web page to apply different font styles:</p>
+<li><p>Define the <code>font-style</code> property within a <code><style></code> element in the <code><head></code> section of the Web page to apply different font styles:</p>
<pre class="prettyprint">
<head>
</li>
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,
+<li><p>Define the <code>font-weight</code> property,
which controls the weight of the text:</p>
<pre class="prettyprint">
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to
+<li>Define the <code>font-variant</code> property to
change the font to, for example, use small capital letters:
<pre class="prettyprint">
<head>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> property, which controls the size of the font:
+<li>Define the <code>font-size</code> property, which controls the size of the font:
<pre class="prettyprint">
<head>
<style>
</pre>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> property, which controls the height of a text line:
+<li>Define the <code>line-height</code> property, which controls the height of a text line:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace"><style></span> element determines the property priority.
+<li>Define the <code>font-family</code> property, which assigns a specific font or its representative to an element. The list order within the <code><style></code> element determines the property priority.
<p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>
<pre class="prettyprint">
<head>
<p>The following figure shows examples of manipulating the text font properties.</p>
-<p class="figure">Figure: Font properties (in mobile applications only)</p>
+<p align="center"><strong>Figure: Font properties (in mobile applications only)</strong></p>
<p align="center"><img alt="Font properties (in mobile applications only)" src="../../../images/font_properties.png"/></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.</td>
- </tr>
- </tbody>
- </table>
-
+<div class="note">
+ <strong>Note</strong>
+ For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<h1>Frame Flattening</h1>
- <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;"><frame></span> and <span style="font-family: Courier New,Courier,monospace;"><iframe></span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p>
+ <p>In the Tizen WebKit, content placed within the <code><frame></code> and <code><iframe></code> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p>
<p>This feature is supported in mobile applications only.</p>
<p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p>
- <p>To implement scrollable content in the Tizen WebKit, use the CSS <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>
+ <p>To implement scrollable content in the Tizen WebKit, use the CSS <code>overflow: scroll</code> or <code>webkit-overflow-scrolling: touch</code> property instead of <code>iframe</code>.</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<form action="" method="">
<label>email: <input type="text"/></label>
<label>password: <input type="password"/></label>
-
+
<input type="submit" value="Login"/>
</form>
</pre></li>
-<li><p>To check the validity of the entered email address automatically, add the <span style="font-family: Courier New,Courier,monospace">required</span> attribute to the <span style="font-family: Courier New,Courier,monospace">input</span> element with the <span style="font-family: Courier New,Courier,monospace">email</span> type:</p>
+<li><p>To check the validity of the entered email address automatically, add the <code>required</code> attribute to the <code>input</code> element with the <code>email</code> type:</p>
<pre class="prettyprint">
<label>email: <input type="email" required /></label>
</pre></li>
-<li><p>Define the password field as mandatory by using the <span style="font-family: Courier New,Courier,monospace">required</span> attribute in that <span style="font-family: Courier New,Courier,monospace">input</span> element too:</p>
+<li><p>Define the password field as mandatory by using the <code>required</code> attribute in that <code>input</code> element too:</p>
<pre class="prettyprint">
<label>password: <input type="password" required /></label>
</pre></li>
-<li><p>Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the <span style="font-family: Courier New,Courier,monospace">placeholder</span> attribute:</p>
+<li><p>Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the <code>placeholder</code> attribute:</p>
<pre class="prettyprint">
<input type="email" placeholder="e-mail address" required />
<input type="password" placeholder="password" required />
<input type="email" placeholder="e-mail address" required />
<input type="password" placeholder="password" required />
</fieldset>
-
+
<input type="submit" value="Login"/>
</form>
</pre>
<input type="email" placeholder="e-mail address" required />
<input type="password" placeholder="password" required />
</fieldset>
-
+
<input type="submit" value="Login"/>
</form>
</pre></li>
-<li><p>When the form page is loaded on the screen, put the focus automatically to the email field by using the <span style="font-family: Courier New,Courier,monospace">autofocus</span> attribute:</p>
+<li><p>When the form page is loaded on the screen, put the focus automatically to the email field by using the <code>autofocus</code> attribute:</p>
<pre class="prettyprint">
<input type="email" placeholder="e-mail address" required autofocus />
</pre></li>
<li>
-<p>To spare the user from filling in information that they have given previously, use the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute, which shows the previously successfully inserted entries in a <span style="font-family: Courier New,Courier,monospace">datalist</span>, from which the user can select and use them.</p>
-<p>You can apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to a specific field by adding it to the appropriate <span style="font-family: Courier New,Courier,monospace">input</span> element. If you add it to the <span style="font-family: Courier New,Courier,monospace">form</span> element, it applies to all child elements within the form.</p>
+<p>To spare the user from filling in information that they have given previously, use the <code>autocomplete</code> attribute, which shows the previously successfully inserted entries in a <code>datalist</code>, from which the user can select and use them.</p>
+<p>You can apply the <code>autocomplete</code> attribute to a specific field by adding it to the appropriate <code>input</code> element. If you add it to the <code>form</code> element, it applies to all child elements within the form.</p>
<pre class="prettyprint">
<form action="" method="" autocomplete="on">
</pre>
</li>
-<li><p>In general, apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to the <span style="font-family: Courier New,Courier,monospace">form</span> element, and then separately set it to <span style="font-family: Courier New,Courier,monospace">off</span> for those fields that must not use it. </p>
+<li><p>In general, apply the <code>autocomplete</code> attribute to the <code>form</code> element, and then separately set it to <code>off</code> for those fields that must not use it. </p>
<p>In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.</p>
<pre class="prettyprint">
<input type="password" placeholder="password" required autocomplete="off"/>
</pre>
</li>
-<li><p>Protect the password with private and public key pair using the <span style="font-family: Courier New,Courier,monospace">keygen</span> element.</p>
+<li><p>Protect the password with private and public key pair using the <code>keygen</code> element.</p>
<p>The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.</p>
<pre class="prettyprint">
<keygen name="keyvalue">
</pre></li>
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used to ensure that the field value must be entered and then the validity check can be performed.</p>
+<li><p>Use the <code>pattern</code> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <code>required</code> attribute is used to ensure that the field value must be entered and then the validity check can be performed.</p>
<p>In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.</p>
-<pre class="prettyprint"><input type="password" placeholder="password" required
- pattern="[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*"
+<pre class="prettyprint">
+<input type="password" placeholder="password" required
+ pattern="[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*"
autocomplete="off"/>
</pre></li>
-<li><p>Define the required length of the password within the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute. </p>
+<li><p>Define the required length of the password within the <code>pattern</code> attribute. </p>
<p>In the following example, the password must be 6 to 12 characters long.</p>
<pre class="prettyprint">
-<input type="password" placeholder="password" required
- pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
+<input type="password" placeholder="password" required
+ pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
autocomplete="off"/>
</pre></li>
</ol>
<fieldset>
<legend>Login</legend>
<input type="email" placeholder="e-mail address" required autofocus />
- <input type="password" placeholder="password" required
- pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
+ <input type="password" placeholder="password" required
+ pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
autocomplete="off"/>
</fieldset>
<keygen name="keyvalue">
-
+
<input type="submit" value="Login"/>
</form>
</pre>
<h2 id="element" name="element">New HTML5 Elements</h2>
<p>The following table lists the new elements available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">elements.html</a>.</p>
+<p align="center" class="Table"><strong>Table: New HTML5 elements</strong></p>
<table>
-<caption>Table: New HTML5 elements</caption>
-
<tbody>
<tr>
<th>Element</th>
</tr>
<tr>
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-datalist-element" target="_blank">datalist</a></td>
- <td>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <span style="font-family: Courier New,Courier,monospace">input</span> element to predefine its value.
-<p>In Tizen, the value selected in the <span style="font-family: Courier New,Courier,monospace">datalist</span> element can be edited.</p></td>
+ <td>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <code>input</code> element to predefine its value.
+<p>In Tizen, the value selected in the <code>datalist</code> element can be edited.</p></td>
<td>
<pre class="prettyprint">
<input type="text" list="search"/>
</tr>
<tr>
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
- <td>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <span style="font-family: Courier New,Courier,monospace">name</span> attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.</td>
+ <td>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <code>name</code> attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.</td>
<td rowspan="1" colspan="1">
<pre class="prettyprint">
<label>user:<input type="text" name="user_name"/></label>
<tr>
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-output-element" target="_blank">output</a></td>
- <td>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <span style="font-family: Courier New,Courier,monospace">form</span> element.</td>
+ <td>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <code>form</code> element.</td>
<td rowspan="1" colspan="1">
<pre class="prettyprint">
<fieldset onsubmit="return false"
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element" target="_blank">progress</a></td>
<td>Represents the progress of a task.
</td>
- <td><pre class="prettyprint">
+ <td>
+<pre class="prettyprint">
<progress value="75" max="100">
75/100
</progress>
<h2 id="input" name="input">New Input Element Types</h2>
<p>The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">types.html</a>.</p>
+<p align="center" class="Table"><strong>Table: New input element types</strong></p>
<table>
-<caption>Table: New input element types</caption>
-
<tbody>
<tr>
<th>Type</th>
<td>Select an HSL color from the color picker. The value format is HEX (#0099ff).
</td>
<td rowspan="13">
-
<pre class="prettyprint">
+<pre class="prettyprint">
<input type="color"
value="#ff0000"/>
<input type="datetime"
<tr>
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a></td>
<td>Enter an email address with the email keyboard.
- <p>If the <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<span style="font-family: Courier New,Courier,monospace">1*(atext / ".") "@" ldh-str 1*("." ldh-str)</span>).</p>
+ <p>If the <code>required</code> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<code>1*(atext / ".") "@" ldh-str 1*("." ldh-str)</code>).</p>
</td>
</tr>
<tr>
<p>The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">attributes.html</a>.</p>
+<p align="center" class="Table"><strong>Table: New input element attributes</strong></p>
<table>
-<caption>Table: New input element attributes</caption>
-
<tbody>
<tr>
<th>Attribute</th>
<tr>
<td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-autocomplete" target="_blank">autocomplete</a></td>
<td>Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input.
- <p>The text used by the user before (such as an <span style="font-family: Courier New,Courier,monospace">input</span> element) is listed in a <span style="font-family: Courier New,Courier,monospace">datalist</span> form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".</p>
+ <p>The text used by the user before (such as an <code>input</code> element) is listed in a <code>datalist</code> form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".</p>
</td>
<td rowspan="6">
-
<pre class="prettyprint">
+<pre class="prettyprint">
<input type="range" min="1" max="10"/>
<input type="tel" pattern="[0-9]+" required />
<input placeholder="You know what to do, huh?"/>
<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
<ol>
-<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element.</li>
+<li>HTML is parsed referring to the rules defined in the <code><!DOCTYPE></code> element.</li>
<li>HTML DOM tree is established.</li>
<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
</ol>
-<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> Element</h2>
+<h2 id="doctype"><!DOCTYPE> Element</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
+<p>The <code><!DOCTYPE></code> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
-<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element must be declared at the beginning of an HTML document.</p>
+<p>The browser, based on the version defined in the <code><!DOCTYPE></code> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <code><!DOCTYPE></code> element must be declared at the beginning of an HTML document.</p>
-<pre class="prettyprint"><!--HTML5-->
+<pre class="prettyprint">
+<!--HTML5-->
<!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>
<p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;"><html></span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;"><head></span> and <span style="font-family: Courier New,Courier,monospace;"><body></span> elements as child nodes:</p>
+<p>The <code><html></code> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <code><head></code> and <code><body></code> elements as child nodes:</p>
-<pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html>
<head>
<!--Content-->
<body>
<!--Content-->
</body>
-</html></pre>
+</html>
+</pre>
<h3><head> element</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;"><head></span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
+<p>The <code><head></code> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
-<pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8" />
- <title> Tizen (in mobile applications) or Tizen Wearable (in wearable applications) </title>
- <link rel="stylesheet" href="css/style.css" />
+ <meta charset="utf-8"/>
+ <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>
<!--Content-->
</body>
-</html></pre>
+</html>
+</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;"><head></span> contains the following subelements:</p>
+<p>The <code><head></code> contains the following subelements:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;"><title></span>: Defines the title of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank"><meta></a></span>: Defines information, such as encoding, creator, and keywords of the document.
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td>
- </tr>
- </tbody>
- </table></li>
-<li><span style="font-family: Courier New,Courier,monospace;"><style></span>, <span style="font-family: Courier New,Courier,monospace;"><link></span>: Sets the styles of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><script></span>, <span style="font-family: Courier New,Courier,monospace;"><noscript></span>: Adds functions to the document. </li>
+<li><code><title></code>: Defines the title of the document.</li>
+<li><code><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank"><meta></a></code>: Defines information, such as encoding, creator, and keywords of the document.
+
+<div class="note">
+ <strong>Note</strong>
+ The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.
+</div>
+</li>
+<li><code><style></code>, <code><link></code>: Sets the styles of the document.</li>
+<li><code><script></code>, <code><noscript></code>: Adds functions to the document. </li>
</ul>
<h3><body> element</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;"><body></span> element defines the area displaying content on the browser screen:</p>
+<p>The <code><body></code> element defines the area displaying content on the browser screen:</p>
-<pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html>
<head>
<!--Content-->
<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-->
</footer>
</section>
</body>
-</html></pre>
+</html>
+</pre>
<h2 id="css" name="css">CSS Rule Priorities</h2>
<p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
-<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p>
+<p align="center"><strong>Figure: Expected and actual result of applying a font color (in mobile applications only)</strong></p>
<p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../../images/css_result.png" /></p>
<h3>Basic CSS Rules</h3>
<ul>
<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
-<pre class="prettyprint lang-html">p {color: red}
+<pre class="prettyprint lang-html">
+p {color: red}
p {color: blue}
<!--Blue color is applied-->
</pre></li>
<li>Element = 1</li>
</ul>
-<pre class="prettyprint lang-html"><body>
+<pre class="prettyprint lang-html">
+<body>
<p id="target" class="target">Hello World</p>
</body>
p.target {color: blue} /* Specificity: 11 */
p {color: tomato} /* Specificity: 1 */
</style>
-<!--Red color is applied--></pre>
+<!--Red color is applied-->
+</pre>
</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
-<pre class="prettyprint lang-html"><body>
+<li>When the <code>!important</code> attribute is used, it has the highest priority:
+<pre class="prettyprint lang-html">
+<body>
<p id="target" class="target">Hello World</p>
</body>
p.target {color: blue}
p {color: tomato}
</style>
-<!--Black color is applied--></pre>
+<!--Black color is applied-->
+</pre>
</li>
</ul>
<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
-<pre class="prettyprint">.contents {color: #999 !important;}
+<pre class="prettyprint">
+.contents {color: #999 !important;}
section.contents {color: #999;}
<h3>Using CSS with HTML</h3>
-<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;"><link></span> tag in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element.</p>
+<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <code><link></code> tag in the <code><head></code> element.</p>
<p>In the following example, the applied order of the CSS elements is as follows:</p>
<ol>
-<li><span style="font-family: Courier New,Courier,monospace;"><link></span> tag in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><style></span> tag in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+<li><code><link></code> tag in the <code><head></code> element</li>
+<li><code><style></code> tag in the <code><head></code> element</li>
+<li><code>@import</code> attribute in the CSS area</li>
+<li><code>style</code> attribute in a HTML element</li>
</ol>
-<pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html>
<head>
<!--Link in head-->
</pre>
<p>However, the priority order of the elements is as follows:</p>
<ol>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><style></span> tag in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><link></span> tag in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element</li>
+<li><code>style</code> attribute in a HTML element</li>
+<li><code><style></code> tag in the <code><head></code> element</li>
+<li><code>@import</code> attribute in the CSS area</li>
+<li><code><link></code> tag in the <code><head></code> element</li>
</ol>
-<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
+<p>The <code>style</code> attribute in the HTML element has the highest priority after the <code>!important</code> attribute.</p>
-<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;"><p></span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
+<p>Using the order above, if all other color styles are applied to <code><p></code> elements, the <code>style</code> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
-<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
+<p>Generally, when the <code>@import</code> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the following figure. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td>
- </tr>
- </tbody>
- </table>
-<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p>
+<div class="note">
+ <strong>Note</strong>
+ Using the <code>@import</code> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).
+</div>
+
+<p align="center"><strong>Figure: Using the <code>@import</code> attribute</strong></p>
<p align="center"><img alt="Using the @import attribute" src="../../../images/using_import_attribute.png" /></p>
<p>The markup in the corresponding files is as follows:</p>
<ul>
<li>In the HTML code:
-<pre class="prettyprint"><head>
+<pre class="prettyprint">
+<head>
<link rel="stylesheet" href="css/style.css"/>
</head>
</pre></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
-<pre class="prettyprint">@import url("priorities1.css");
+<li>In the <code>style.css</code> file:
+<pre class="prettyprint">
+@import url("priorities1.css");
p: after {content: " : linked in head"}
</pre>
-<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p>
+<p align="center"><strong>Figure: Result of linking the <code>@import</code> attribute</strong></p>
<p align="center"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
-<pre class="prettyprint">p: after {content: " : Using @import in CSS area"}
+<li>In the <code>priorities1.css</code> file:
+<pre class="prettyprint">
+p: after {content: " : Using @import in CSS area"}
</pre>
-<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p>
+<p align="center"><strong>Figure: Result of using the <code>@import</code> attribute in the CSS area</strong></p>
<p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
</ul>
<h3>Using JavaScript with HTML</h3>
<p>Used with HTML, JavaScript works as follows:</p>
<ol>
-<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;"><script></span> tag is parsed to JavaScript Interpreter.</li>
+<li>During HTML parsing, the content of the <code><script></code> tag is parsed to JavaScript Interpreter.</li>
<li>The Interpreter parses the received script code. </li>
<li>Requests that need not be handled immediately are suspended. </li>
<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
</ol>
<p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
-<pre class="prettyprint">/* Linking from HTML */
+<pre class="prettyprint">
+/* Linking from HTML */
<script src="js/main.js"></script>
/* Direct use in HTML */
<script>
var obj = document.querySelector(".animated");
-
- function animate()
+
+ function animate()
{
/* Execute */
};
-
+
/* Call the animation function when the event is fired */
- webkitRequestAnimationFrame(animate);
+ 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>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.
+</div>
<h3>JavaScript Events</h3>
<p>The following example shows the use of a simple event:</p>
-<pre class="prettyprint"><!--HTML-->
+<pre class="prettyprint">
+<!--HTML-->
<body onload="touchEventHandler()">
<script>
/* JavaScript */
- /* Directly assigning */
+ /* Directly assigning */
window.onload = touchEventHandler; /* Assigns the name of the subject method */
-
+
/* Event listener (W3C standard) */
document.addEventListener("touchstart", touchEventHandler, false);
-</script></pre>
+</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>
<h3>JavaScript Priorities</h3>
<p>The rendering order of JavaScript code is based on the following rules:</p>
<ul>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;"><head></span> element is temporarily saved, but not handled. </li>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;"><body></span> element is immediately handled when it is parsed. </li>
-<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;"><head></span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;"><body></span> element content after it.</li>
+<li>JavaScript within the <code><head></code> element is temporarily saved, but not handled. </li>
+<li>JavaScript within the <code><body></code> element is immediately handled when it is parsed. </li>
+<li>When the temporarily saved JavaScript content is executed, the <code><head></code> element content is rendered first, and the <code><body></code> element content after it.</li>
</ul>
<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
<ul>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;"><script></span> tag:
+<li>To use JavaScript code in the <code><head></code> element, place the relevant JavaScript content in a <code><script></code> tag:
<pre class="prettyprint lang-html">
<head>
<script src="js/jquery_1.9.0_min.js"></script>
- <script>
- window.onload = function()
+ <script>
+ window.onload = function()
{
testLog('head onload');
};
- $(document).ready(function()
+ $(document).ready(function()
{
testLog('head ready');
});
</script>
-</head></pre>
+</head>
+</pre>
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;"><head></span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
+<p>The JavaScript code within the <code><head></code> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
</li>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;"><body></span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;"><script></span> tag:
+<li>To use JavaScript code in the <code><body></code> element, place the relevant JavaScript content in a <code><script></code> tag:
<pre class="prettyprint lang-html">
<body>
<script src="js/jquery_1.9.0_min.js"></script>
<script>
- function testLog(txt)
+ function testLog(txt)
{
var logText = document.querySelector('.log');
logText.innerHTML += '<li>JavaScript in HTML ' + txt + '</li>';
};
-
- window.onload = function()
+
+ window.onload = function()
{
testLog('body onload');
};
- $(document).ready(function()
+ $(document).ready(function()
{
testLog('body ready');
});
testLog('body');
- (function()
+ (function()
{
testLog('body anonymous function');
}();
</script>
</body>
</pre>
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;"><body></span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready()</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
+<p>The JavaScript code within the <code><body></code> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <code>$(document).ready()</code> method and in the <code>onload</code> event are executed in the stored order.</p>
</li></ul>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;"><head></span> and <span style="font-family: Courier New,Courier,monospace;"><body></span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;"><body></span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element is not executed. </td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ jQuery has to be called from both the <code><head></code> and <code><body></code> elements. The <code>logText</code> variable has to be called from the <code><body></code> element. The method connected to the <code>onload</code> event in the <code><head></code> element is not executed.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<ul>
<li>In CSS
<p>You can define attribute values depending on given conditions:</p>
-<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}
+<pre class="prettyprint">
+@media only screen and (max-width: 480px) {styles}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.
+</div>
</li>
-<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS
+<li>In an <code>@import</code> rule in CSS
<p>You can import from CSS a file that matches the condition:</p>
-<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)
+<pre class="prettyprint">
+@import url(example.css) not screen and (min-width: 480px)
</pre>
</li>
<li>In HTML
<p>You can directly import the CSS file that matches the condition:</p>
-<pre class="prettyprint"><link rel="stylesheet" media="all and (max-width: 480px)" href="example.css"></pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td>
- </tr>
- </tbody>
- </table>
+<pre class="prettyprint">
+<link rel="stylesheet" media="all and (max-width: 480px)" href="example.css">
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced.
+</div>
</li>
</ul>
<ul>
<li>Combination and relevancy
-<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>
-<pre class="prettyprint">@media not screen and (min-width: 320px), screen and (max-width: 480px)
+<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)
{
.example: after {content: "width: 320px ~ 480px"}
}
</pre>
</li>
<li>Viewport width
-<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>
-<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px)
+<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)
{
.example: after {content: "width: 320px ~ 480px"}
}
</pre>
</li>
<li>Device and viewport height
-<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport's height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>
-<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign 'device-'.</p>
-<pre class="prettyprint">@media screen and (min-device-height: 700px)
+<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)
{
.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>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: "min-height"}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content "min-device-height"}</span> rule applied in a landscape screen.</p>
+<p>In the above example, a device with the width-height resolution of 480/720 has the <code>{content: "min-height"}</code> rule applied as a priority in a portrait screen, but the <code>{content "min-device-height"}</code> rule applied in a landscape screen.</p>
</li>
<li>Device aspect ratio
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> 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)
+<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)
{
.example: after {content: "aspect-ratio, portrait"}
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)
+</div>
</li>
</ul>
<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>
<li>class attribute = 10</li>
<li>element = 1</li></ul>
-<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content > .title p</span>, carry the specificity of 112.</p></li>
+<p>Selectors, such as <code>section#content > .title p</code>, carry the specificity of 112.</p></li>
<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>
-<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
+<li><p>CSS is applied first based on the conditions in the <code>@import</code> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
</ul>
<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"}
}
<!--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"}
}
<ul>
<li>If the viewport is 320 px:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: "a.css : width: ~ 480px"</span>).</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>
-<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace"><head></span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: "In HTML head"</span>).</li>
+<li>The <code>a.css</code> file is applied (based on <code>content: "a.css : width: ~ 480px"</code>).</li>
+<li>The <code>c.css</code> and <code>b.css</code> files are not imported.</li>
+<li>CSS is applied instead of the HTML <code><head></code> (the <code>a.css</code> file has higher priority than <code>content: "In HTML head"</code>).</li>
</ul></li>
<li>If the viewport is 700 px:
-<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: "a.css : width: 480px ~ 768px"</span>).</p> </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>
+<ul><li><p>The <code>a.css</code> file is applied (based on <code>content: "a.css : width: 480px ~ 768px"</code>).</p> </li>
+<li>The <code>c.css</code> and <code>b.css</code> files are not imported.</li></ul></li>
<li>If the viewport is 900 px:
<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>
-<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: "c.css : width: 768px ~ 1024px"</span>). </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: "b.css : width: 768px ~ 1024px"</span>).</li>
+<li>The <code>b.css</code> file is imported.</li>
+<li>c.css is applied (based on <code>content: "c.css : width: 768px ~ 1024px"</code>). </li>
+<li>The <code>a.css</code> file is not imported.</li>
+<li>The <code>b.css</code> file is applied (based on <code>content: "b.css : width: 768px ~ 1024px"</code>).</li>
</ul></li>
</ul>
</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;
}
<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-->}
<h1>CSS Multi-column Layout Module</h1>
- <p>You can arrange the screen content into columns. Using the CSS <
span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>
+ <p>You can arrange the screen content into columns. Using the CSS <
code>column-</code> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>
<p>This feature is supported in mobile applications only.</p>
<li><a href="#break">Setting the column break</a></li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Up to Tizen 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ Up to Tizen 2.2, most CSS properties and values used in Tizen required the <code>-webkit-</code> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.
+</div>
<h2 id="size" name="size">Setting the Column Number and Width</h2>
-<p> When the layout is set to a constant number of columns using the <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>
+<p> When the layout is set to a constant number of columns using the <code>column-count</code> (or <code>-webkit-column-count)</code> property, the column width is set to fill the available horizontal space.</p>
<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 <
span style="font-family: Courier New,Courier,monospace">column-count</span> 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>
+<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
{
}
</pre>
-<p class="figure">Figure: 4 columns on different resolution displays</p>
+<p align="center"><strong>Figure: 4 columns on different resolution displays</strong></p>
<p align="center"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>
+<p>The <code>column-width</code> (or <code>-webkit-column-width)</code> property sets the base column width.</p>
<p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
-<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 <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>
-<p>The following code snippet demonstrates how to use the <
span style="font-family: Courier New,Courier,monospace">column-width</span> 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>
+<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
{
}
</pre>
-<p class="figure">Figure: Column width 153 px on different resolution displays</p>
+<p align="center"><strong>Figure: Column width 153 px on different resolution displays</strong></p>
<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p>
<h2 id="gap" name="gap">Setting the Column Gap</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) 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 <
span style="font-family: Courier New,Courier,monospace">column-gap</span> 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>
+<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;
}
</pre>
-<p class="figure">Figure: Column gap</p>
+<p align="center"><strong>Figure: Column gap</strong></p>
<p align="center"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
<h2 id="rule" name="rule">Setting the Column Rule</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
+<p>The <code>column-rule</code> (or <code>-webkit-column-rule</code>) property displays a vertical line in the middle of the column gap.</p>
<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>
-<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> 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 <span style="font-family: Courier New,Courier,monospace">column-rule</span> 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
+<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
{
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: rgb(92, 203, 246);
}
</pre>
-<p class="figure">Figure: Column rule</p>
+<p align="center"><strong>Figure: Column rule</strong></p>
<p align="center"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In Tizen 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ In Tizen 2.2, to avoid displaying the rules incorrectly, do not use the <code>column-rule</code> (or <code>-webkit-column-rule</code>) property with horizontal scrolling of the columns.
+</div>
<h2 id="span" name="span">Setting the Column Span</h2>
-<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>
-<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>
+<p>By default, all elements within the columns are no wider than the column width. The <code>column-span</code> (or <code>-webkit-column-span</code>) property can be used to display content across all columns.</p>
+<p>When using this property with column elements which have the <code>column-count</code> or <code>column-width</code> property set, the following restrictions apply:</p>
<ul>
<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>
-<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>
-<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>
+<li>If the column element has the <code>overflow</code> property set to <code>hidden</code>, the <code>column-span</code> property is ignored.</li>
+<li>An element using the <code>column-span</code> property does not have to be a direct child of the column element.</li>
</ul>
-<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>
-<p>The following code snippet demonstrates how to use the <
span style="font-family: Courier New,Courier,monospace">column-span</span> 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>
+<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;
}
</pre>
-<p class="figure">Figure: Column span</p>
+<p align="center"><strong>Figure: Column span</strong></p>
<p align="center"><img alt="Column span" src="../../../images/column_span.png" /></p>
<h2 id="break" name="break">Setting the Column Break</h2>
-<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
+<p>By default, column elements are broken to balance column height. The <code>break-before</code> (or <code>-webkit-column-break-before</code>), <code>break-after</code> (or <code>-webkit-column-break-after</code>), and <code>break-inside</code> (or <code>-webkit-column-break-inside</code>) properties can be used to define that an element cannot be broken between columns (set to <code>avoid</code>), or that an element must begin or end within a given column.</p>
-<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to <span style="font-family: Courier New,Courier,monospace">always</span>.</p>
-<p>The following code snippet demonstrates how to use the <
span style="font-family: Courier New,Courier,monospace">column-break</span> 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>
+<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
{
}
</pre>
-<p class="figure">Figure: Column break</p>
+<p align="center"><strong>Figure: Column break</strong></p>
<p align="center"><img alt="Column break" src="../../../images/column_break.png" /></p>
<h2 id="basic" name="basic">Creating a Basic Layout</h2>
<li>Set the CSS column properties:
<ol type="a">
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
+<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;
margin: 2vh 5vw;
padding: 2vh 5vw;
- background: #c3c8ca;</pre>
+ background: #c3c8ca;
+</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
-<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
+<p>The <code>column-width</code> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
+<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <code>width</code> attribute value reduced by <code>padding</code>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>
+<p>Use the <code>column-gap</code> (or <code>-webkit-column-gap</code>) property to set the distance between columns:</p>
<pre class="prettyprint">
column-gap: 10px;
-webkit-column-gap: 10px;
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
+<p>Use the <code>column-rule</code> (or <code>-webkit-column-rule</code>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
<pre class="prettyprint">
-webkit-column-rule-width: 1px;
column-rule-width: 1px;
column-rule-color: #677784;
column-rule-style: solid;
-}</pre>
+}
+</pre>
<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>
</li></ol>
- <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
+ <p>The following figure shows the layout with the <code>column-rule</code> <code>width</code> set to 40 px and the <code>column-gap</code> set to 10 px.</p>
-<p class="figure">Figure: Column settings</p>
+<p align="center"><strong>Figure: Column settings</strong></p>
<p align="center"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
</li>
<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p>
+<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;
</pre>
</li>
<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>
+<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
</pre>
</li>
<li>
-<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>
-<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>
+<p>Set image elements to have an automatic <code>margin</code> to center them within the column.</p>
+<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;
}
<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-<p class="figure">Figure: Basic layout on a 480 x 800 display</p>
+<p align="center"><strong>Figure: Basic layout on a 480 x 800 display</strong></p>
<p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
-<p class="figure">Figure: Basic layout on a 720 x 1280 display</p>
+<p align="center"><strong>Figure: Basic layout on a 720 x 1280 display</strong></p>
<p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
<h3>Source Code</h3>
<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
<ol>
<li>
-<p>Create the HTML layout. The <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> element contains buttons to add and remove content in the columns.</p>
+<p>Create the HTML layout. The <code>article</code> element displays the columns, and the <code>nav</code> element contains buttons to add and remove content in the columns.</p>
<pre class="prettyprint">
<body>
<article id="article">
</article>
<nav>
- <a id="addSections" href="#">Add images</a>
- <input type="number" id="howMany" value="3"/>
+ <a id="addSections" href="#">Add images</a>
+ <input type="number" id="howMany" value="3"/>
<a id="removeGroup" href="#">Remove last Group</a>
</nav>
<footer> Multicolumn Layout Tutorial 02</footer>
<li>
<p>Define the CSS display and column properties:</p>
<pre class="prettyprint">
-body
+body
{
display: flex;
display: -webkit-flex;
</pre>
</li>
<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>
+<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%;
</pre>
</li>
<li>
-<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>
+<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;
<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
</li>
<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>
+<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
{
</pre>
</li>
<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>
+<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;
</pre>
</li>
<li>
-<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>
+<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;
</pre>
</li>
<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>
+<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;
-webkit-column-span: all;
}
</pre>
-<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
+<p> As a result, the <code>h1</code> elements are spread across the columns. When the <code>column-span</code> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
</li>
<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>
+<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;
</pre>
</li>
<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</p>
+<p>Set the <code>footer</code> size:</p>
<pre class="prettyprint">
-footer
+footer
{
padding: 2vh;
height: 5vh;
<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>
</pre>
</li>
<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
+<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()
+window.onload = function()
{
addGroup(4);
howManyInput = document.getElementById('howMany');
var addBtn = document.getElementById('addSections');
- addBtn.onclick = function()
+ addBtn.onclick = function()
{
addGroup(howManyInput.value);
return false;
};
var removeBtn = document.getElementById('removeGroup');
- removeBtn.onclick = function()
+ removeBtn.onclick = function()
{
removeGroup();
</pre>
</li>
<li>
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>
+<p>Declare the <code>h1No</code> variable containing the number of <code>h1</code> elements included in the <code>article</code> elements, and one added to next lines.</p>
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>
+<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)
+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)
+ for (i = 0; i < howMany; ++i)
{
newHTML += "<section><img alt='' src='";
newHTML += images[Math.floor(Math.random() * 4)];
</pre>
</li>
<li>
-<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>
+<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()
+function removeGroup()
{
var all = document.querySelectorAll('article>h1');
var last = all.length - 1;
- if (last < 0)
+ if (last < 0)
{
return;
}
</li></ol>
<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p>
+<p align="center"><strong>Figure: Dynamic layout on a 480 x 800 display</strong></p>
<p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
-<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p>
+<p align="center"><strong>Figure: Dynamic layout on a 720 x 1280 display</strong></p>
<p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../../images/dynamic_layout_720x1280.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
<p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
<p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
<ul>
- <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
+ <li>The <code>device-height</code> and <code>device-width</code> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
<li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
</ul>
<h3 id="css" name="css">CSS Media Query</h3>
<li>Determine the CSS layout to be used based on the screen width.</li>
</ul>
<h2 id="ui" name="ui">UI Scalability</h2>
- <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
+ <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <code>rem</code> unit to determine the size of the Tizen Web UI components.</p>
<h3 id="set" name="set">Setting the Viewport</h3>
<p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
- <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
- <pre class="prettyprint"><meta name="viewport"
- content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></pre>
- <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
- <pre class="prettyprint"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"></pre>
- <table>
- <caption>
- Table: Layout size and scale factor
- </caption>
+ <p>In the following example, the viewport width is set to <code>device-width</code>, which is determined by the width of the Tizen device. The <code>device-width</code> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
+<pre class="prettyprint">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+</pre>
+ <p>If the viewport width is set to <code>device-width</code>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<code>http://tizen.org</code>) on different devices with the viewport width set to <code>device-width</code>.</p>
+<pre class="prettyprint">
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+</pre>
+
+<p align="center" class="Table"><strong>Table: Layout size and scale factor</strong></p>
+<table>
<tbody>
<tr>
<th>Device screen resolution</th>
</tbody>
</table>
<h3 id="web" name="web">Working with Tizen Web Winsets</h3>
- <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
- <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace"><html></span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace"><html></span> element to adjust the Tizen Web winset sizes accurately.</p>
+ <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <code>device-width</code>.</p>
+ <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <code>rem</code> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <code><html></code> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <code><html></code> element to adjust the Tizen Web winset sizes accurately.</p>
<h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
<p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
<ul>
<li>Creating screen resolution-independent UI</li>
</ul>
<h3 id="configure" name="configure">Configuring the Viewport</h3>
- <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../../org.tizen.training/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in the Tizen Studio. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
- <pre class="prettyprint"><meta name="viewport"
+ <p>To use UI scalability in your application, set the <code>viewport</code> meta tag while <a href="../../../../../org.tizen.training/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in the Tizen Studio. To configure the viewport in the Tizen Web applications, add the <code>viewport</code> meta tag in the <code><head></code> section of the <code>index.html</code> file:</p>
+<pre class="prettyprint">
+<meta name="viewport"
content="width=device-width, initial-scale=1.0,
- minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></pre>
+ minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+</pre>
<h3 id="optimize" name="optimize">Optimizing Resources</h3>
<p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
<p>In the HTML file:</p>
- <pre class="prettyprint"><link media="only screen and (min-resolution: 320dpi)"
- href="high-quality-images.css" type= "text/css" rel="stylesheet"></pre>
+<pre class="prettyprint">
+<link media="only screen and (min-resolution: 320dpi)"
+ href="high-quality-images.css" type= "text/css" rel="stylesheet">
+</pre>
<p>In the CSS file:</p>
- <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
+<pre class="prettyprint lang-html">
+@media screen and (max-resolution: 159dpi)
{
<!--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)
+<pre class="prettyprint lang-html">
+@media screen and (orientation: portrait)
{
<!--Set styles-->
}
<p><a href="media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the deployable package easily.</p>
<p>Images can be used in Web applications in the following ways:</p>
- <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
- <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
+ <ul><li><code>IMG</code> tag linking images directly to HTML</li>
+ <li>CSS <code>background</code> property expressing images as a background in HTML</li>
<li><a href="../graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
</ul>
<p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
</ul>
<h3 id="photos" name="photos">Photos</h3>
- <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
- <pre class="prettyprint"><!--HTML-->
-<img src="images/sample.jpg" alt="sample image" />
+ <p>An image can be added to an application using the HTML <code>img</code> tag, or CSS <code>background</code> property as shown in the following example:</p>
+<pre class="prettyprint">
+<!--HTML-->
+<img src="images/sample.jpg" alt="sample image"/>
<!--CSS-->
.photo
<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
<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
+<pre class="prettyprint">
+img
{
max-width: 100%;
}
</pre>
-<p class="figure">Figure: Enlarging a low-resolution image</p>
+<p align="center"><strong>Figure: Enlarging a low-resolution image</strong></p>
<p align="center"><img alt="Enlarging a low-resolution image" src="../../../images/enlarge_low_res_image.png" /></p>
<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 <span style="font-family: Courier New,Courier,monospace">background-size</span> 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
+ <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
{
padding-left: 30px;
height: 30px;
}
</pre>
-<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
+<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the following figure.</p>
-<p class="figure">Figure: Network speed when calling each image separately</p>
+<p align="center"><strong>Figure: Network speed when calling each image separately</strong></p>
<p align="center"><img alt="Calling each of image separately" src="../../../images/calling_img_sep.png"/></p>
-<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
+<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
+<pre class="prettyprint lang-html">
+.prev_icon, .next_icon
{
background-size: 20px auto; <!--Full HD Display-->
background-image: url(../images/page_navi_arrow.png);
background-position: 0 -50px;
}
</pre>
-<p class="figure">Figure: Network speed when using sprite images</p>
+<p align="center"><strong>Figure: Network speed when using sprite images</strong></p>
<p align="center"><img alt="Network speed when using sprite image" src="../../../images/network_speed_sprite.png" /></p>
<h3 id="animated" name="animated">Animated Images</h3>
<p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
- <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
- <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
+ <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <code>animation</code> attribute.</p>
+ <p align="center"><strong>Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</strong></p>
<p align="center"><img alt="JAVA mascot character in GIF" src="../../../images/mascot.gif"/></p>
<p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
<li>Network: 10 ~ 25 ms</li>
</ul>
- <p class="figure">Figure: Events for a GIF image</p>
+ <p align="center"><strong>Figure: Events for a GIF image</strong></p>
<p align="center"><img alt="Events" src="../../../images/events.png"/></p>
- <p class="figure">Figure: Memory usage of a GIF image</p>
+ <p align="center"><strong>Figure: Memory usage of a GIF image</strong></p>
<p align="center"><img alt="Memory" src="../../../images/memory.png"/></p>
- <p class="figure">Figure: Network capacity usage of a GIF image</p>
+ <p align="center"><strong>Figure: Network capacity usage of a GIF image</strong></p>
<p align="center"><img alt="Network" src="../../../images/network.png"/></p>
<p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
<ul><li>
-Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
+Events: Event is fired every 100 ms, the interval of <code>setInterval()</code>.</li><li>
Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
Network: Used until the animation is stopped.</li></ul>
- <p class="figure">Figure: Events for a JavaScript animation</p>
+ <p align="center"><strong>Figure: Events for a JavaScript animation</strong></p>
<p align="center"><img alt="Events" src="../../../images/events2.png"/></p>
- <p class="figure">Figure: Memory usage of a JavaScript animation</p>
+ <p align="center"><strong>Figure: Memory usage of a JavaScript animation</strong></p>
<p align="center"><img alt="Memory" src="../../../images/memory2.png"/></p>
- <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
+ <p align="center"><strong>Figure: Network capacity usage of a JavaScript animation</strong></p>
<p align="center"><img alt="Network" src="../../../images/network2.png"/></p>
<p>The following example shows how JavaScript animation can be implemented:</p>
- <pre class="prettyprint"><script>
+<pre class="prettyprint">
+<script>
var obj = document.querySelector(".animated img"), flag = 0;
function animate()
{
</script>
</pre>
-<p>You can use the <
span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
+<p>You can use the <
code>requestAnimationFrame()</code> method of the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
-<pre class="prettyprint"><script>
+<pre class="prettyprint">
+<script>
var obj = document.querySelector(".animated img"), flag = 0, i = 0;
function animate()
{
Memory: 50 ~ 90 KB</li><li>
Network: 9 ~ 21 ms</li></ul>
- <p class="figure">Figure: Events for a CSS3 animation</p>
+ <p align="center"><strong>Figure: Events for a CSS3 animation</strong></p>
<p align="center"><img alt="Events" src="../../../images/events3.png"/></p>
- <p class="figure">Figure: Memory usage of a CSS3 animation</p>
+ <p align="center"><strong>Figure: Memory usage of a CSS3 animation</strong></p>
<p align="center"><img alt="Memory" src="../../../images/memory3.png"/></p>
- <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
+ <p align="center"><strong>Figure: Network capacity usage of a CSS3 animation</strong></p>
<p align="center"><img alt="Network" src="../../../images/network3.png"/></p>
<p>The following example shows how CSS3 animation can be implemented:</p>
- <pre class="prettyprint"><style>
+<pre class="prettyprint">
+<style>
.css_animation
{
width: 50px;
<p>This feature is supported in mobile and wearable applications only.</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method, the method returns the first element (if any) that matches any of the selectors in the group.</p>
+<p>You can use the <code>querySelector()</code> and <code>querySelectorAll()</code> methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the <code>querySelector()</code> method, the method returns the first element (if any) that matches any of the selectors in the group.</p>
<p>The main features of the Selectors API Level 1 and Level 2 include:</p>
<ul>
<li>Selecting a single element
<p>Use <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS Selectors</a> to <a href="#single">select a single element</a>.</p></li>
<li>Selecting multiple elements simultaneously
-<p><a href="#multi">Select multiple elements</a> using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
+<p><a href="#multi">Select multiple elements</a> using the <code>querySelectorAll()</code> method.</p></li>
</ul>
<p>You can also <a href="#create">create an accordion menu</a>.</p>
<h2 id="single" name="single">Selecting a Single Node</h2>
<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
<ol>
- <li>To select the first matching element found in the child nodes, use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span>, <span style="font-family: Courier New,Courier,monospace">getElementsByTagName()</span>, and <span style="font-family: Courier New,Courier,monospace">getElementsByClassName()</span> methods.
- <pre class="prettyprint">var obj1 = document.getElementsByTagName('td')[0]; /* First <td> element in the document */
-var obj2 = document.getElementById('foo'); /* Element with the ID #foo */
-var obj3 = document.getElementsByClassName('bar')[0]; /* First element in the bar class */
-
+ <li>To select the first matching element found in the child nodes, use the <code>querySelector()</code> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <code>getElementById()</code>, <code>getElementsByTagName()</code>, and <code>getElementsByClassName()</code> methods.
+<pre class="prettyprint">
+/* First <td> element in the document */
+var obj1 = document.getElementsByTagName('td')[0];
+/* Element with the ID #foo */
+var obj2 = document.getElementById('foo');
+/* First element in the bar class */
+var obj3 = document.getElementsByClassName('bar')[0];
+
var obj4 = document.querySelector('td'); /* Same as obj1 */
var obj5 = document.querySelector('#foo'); /* Same as obj2 */
-var obj6 = document.querySelector('.bar'); /* Same as obj3 */</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>.</p></li>
+var obj6 = document.querySelector('.bar'); /* Same as obj3 */
+</pre>
+<p>The <code>querySelector()</code> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <code>null</code>.</p></li>
<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 <span style="font-family: Courier New,Courier,monospace"><tr></span> element, which is a child of the <span style="font-family: Courier New,Courier,monospace"><tbody></span> element in the second <span style="font-family: Courier New,Courier,monospace"><table></span> element of the document.</p>
- <pre class="prettyprint">var obj = document.querySelector('table:nth-child(2) tbody > tr:nth-child(2) :last-child');</pre></li>
+ <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');
+</pre></li>
<li>You can use method chaining to select an element:
- <pre class="prettyprint">var obj = document.querySelector('table:nth-child(2)');
-var targetObj = obj.querySelector('tbody > tr:nth-child(2) :last-child')</pre></li>
+<pre class="prettyprint">
+var obj = document.querySelector('table:nth-child(2)');
+var targetObj = obj.querySelector('tbody > tr:nth-child(2) :last-child');
+</pre></li>
</ol>
-<p class="figure">Figure: Single node selection (in mobile applications only)</p>
+<p align="center"><strong>Figure: Single node selection (in mobile applications only)</strong></p>
<p align="center"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
<ol>
- <li>Select an element in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method:
- <pre class="prettyprint">var obj = document.querySelector('table:nth-child(2)');</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>. The query above selects the second <span style="font-family: Courier New,Courier,monospace"><table></span> element in the document as a single element.</p>
+ <li>Select an element in the node list using the <code>querySelector()</code> method:
+<pre class="prettyprint">
+var obj = document.querySelector('table:nth-child(2)');
+</pre>
+<p>The <code>querySelector()</code> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <code>null</code>. The query above selects the second <code><table></code> element in the document as a single element.</p>
</li>
-<li>Select multiple elements in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method, and define a variable to represent the length of the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
-<pre class="prettyprint">var targetObj = obj.querySelectorAll('thead th, tbody td');
-var i = targetObj.length;</pre>
-<p> The <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <span style="font-family: Courier New,Courier,monospace"><th></span> elements in the table head and the <span style="font-family: Courier New,Courier,monospace"><td></span> elements in the table body.</p>
+<li>Select multiple elements in the node list using the <code>querySelectorAll()</code> method, and define a variable to represent the length of the <code>targetObj</code> node list:
+<pre class="prettyprint">
+var targetObj = obj.querySelectorAll('thead th, tbody td');
+var i = targetObj.length;
+</pre>
+<p> The <code>querySelectorAll()</code> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <code><th></code> elements in the table head and the <code><td></code> elements in the table body.</p>
</li>
-<li>Apply a defined style to all elements stored in the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
-<pre class="prettyprint">while (0 < i)
+<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;
-}</pre></li></ol>
+}
+</pre></li></ol>
- <p class="figure">Figure: Multiple node selection (in mobile applications only)</p>
+ <p align="center"><strong>Figure: Multiple node selection (in mobile applications only)</strong></p>
<p align="center"><img alt="Multiple node selection (in mobile applications only)" src="../../../images/multi_node_selection.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
<ol>
<li>Create the HTML layout:
- <pre class="prettyprint"><ul class="accordion">
+<pre class="prettyprint">
+<ul class="accordion">
<li>
<p class="title current">Title 1<p>
<div>contents 1</div>
<div>contents 2</div>
</li>
<!--Other list elements-->
-</ul></pre></li>
+</ul>
+</pre></li>
<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
+<pre class="prettyprint lang-html">
+.accordion > li > div
{
padding: 0 15px;
line-height: 2;
}
<!--Assign styles to be applied in case the current class is added to p.title-->
-.accordion > li > p.current
+.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 <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to change the class of the subject in the elements where the event is fired:
-<pre class="prettyprint">var testAccordion = function(obj)
+}
+</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)
+ if (targetLength <= 0)
return false;
- targetObj.onclick = function(e)
+ targetObj.onclick = function(e)
{
var that = e.target;
/* In case the e.target class is not title */
- if ((that.className !== 'title')) return false;
+ if ((that.className !== 'title'))
+ return false;
- for (var i = 0; i < targetLength; i++)
+ for (var i = 0; i < targetLength; i++)
{
- /* Change all classes of the 'li p' elements at the bottom of .accordion to title */
+ /*
+ 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>
+}
+</pre>
</li>
<li>Define the elements that use the accordion menu:
-<pre class="prettyprint">testAccordion('.accordion');</pre></li></ol>
+<pre class="prettyprint">
+testAccordion('.accordion');
+</pre></li></ol>
- <p class="figure">Figure: Accordion menu (in mobile applications only)</p>
+ <p align="center"><strong>Figure: Accordion menu (in mobile applications only)</strong></p>
<p align="center"><img alt="Accordion menu (in mobile applications only)" src="../../../images/accordion_menu.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
<p>The main features of the HTML5 session history of browsing contexts API include:</p>
<ul>
<li>Adding entries to the session history
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <span style="font-family: Courier New,Courier,monospace">history</span> interface to <a href="#Managing_Session_History">add an entry to the session history</a>. With the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method, you can update the session history details.
+<p>You can use the <code>pushState()</code> method of the <code>history</code> interface to <a href="#Managing_Session_History">add an entry to the session history</a>. With the <code>replaceState()</code> method, you can update the session history details.
</p></li>
<li>Detecting session history status changes
-<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <span style="font-family: Courier New,Courier,monospace">popstate</span> event
-references the information stored with the <
span style="font-family: Courier New,Courier,monospace">pushState()</span> or <span style="font-family: Courier New,Courier,monospace">replaceState()</span> methods, and enables you to <a href="#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</p>
+<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <code>popstate</code> event
+references the information stored with the <
code>pushState()</code> or <code>replaceState()</code> methods, and enables you to <a href="#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</p>
</li>
</ul>
<p>Learning how to manage the session history enhances the user browsing experience in your application:</p>
<ol>
-<li>To add an entry to the session history, use the <
span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
+<li>To add an entry to the session history, use the <
code>pushState()</code> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
<pre class="prettyprint">
<script>
history.pushState({index: currentIndex}, document.title);
</script>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">pushState()</span> method accepts the <span style="font-family: Courier New,Courier,monospace">data</span>, <span style="font-family: Courier New,Courier,monospace">title</span>, and <span style="font-family: Courier New,Courier,monospace">url</span> (optional) parameters. The <span style="font-family: Courier New,Courier,monospace">title</span> parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.</td>
- </tr>
- </tbody>
- </table>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>pushState()</code> method accepts the <code>data</code>, <code>title</code>, and <code>url</code> (optional) parameters. The <code>title</code> parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.
+</div>
</li>
-<li>To update the entry details, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method:
+<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 <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method uses the same parameters as the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method. The <span style="font-family: Courier New,Courier,monospace">history_sample.html</span> is the <span style="font-family: Courier New,Courier,monospace">url</span> parameter, which refers to the address of the page that is to be changed.</p>
+<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>
</li>
<li>To use the session history information:
<a href="http://tizen.org/">Tizen.org</a>
</pre>
</li>
-<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <span style="font-family: Courier New,Courier,monospace">history</span> interface:
+<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <code>history</code> interface:
<pre class="prettyprint">
var currentIndex = 0;
var prev = document.querySelector('.paging > a:nth-child(1)');
var next = document.querySelector('.paging > a:nth-child(2)');
-/* Prev button click event */
-prev.onclick = function()
+/* Prev button click event */
+prev.onclick = function()
{
- currentIndex -= 1;
+ currentIndex -= 1;
setState(currentIndex);
-
+
return false;
};
-
-/* Next button click event */
-next.onclick = function()
+
+/* Next button click event */
+next.onclick = function()
{
- currentIndex += 1;
+ currentIndex += 1;
setState(currentIndex);
-
+
return false;
};
</pre>
</li>
-<li>If the <span style="font-family: Courier New,Courier,monospace">state</span> object has data in it, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method to change the previously stored information. Otherwise, add new info with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method.
+<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)
+function setState(currentIndex)
{
- if (history.state)
+ if (history.state)
{
- history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
- }
- else
+ history.replaceState({index: currentIndex}, document.title,
+ '#page' + currentIndex);
+ }
+ else
{
history.pushState({index: currentIndex}, document.title);
}
<pre class="prettyprint">
var output = document.querySelector('output');
-window.onpopstate = function()
+window.onpopstate = function()
{
currentIndex = history.state.index;
output.textContent = currentIndex;
}
</pre>
-<p>In the snippet above, when a <span style="font-family: Courier New,Courier,monospace">popstate</span> event is fired, it saves the index value stored in the <span style="font-family: Courier New,Courier,monospace">state</span> object to the <span style="font-family: Courier New,Courier,monospace">currentIndex</span> variable, and outputs the <span style="font-family: Courier New,Courier,monospace"><output></span> element from the correct index location.
+<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>
</li></ol>
<ul>
<li>Text properties
-<p>You can use CSS text properties, such as <
span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="#text">manipulate and transform text</a>.</p></li>
+<p>You can use CSS text properties, such as <
code>text-transform</code>, <code>text-align</code>, <code>text-indent</code>, <code>letter-spacing</code>, and <code>word-spacing</code>, to <a href="#text">manipulate and transform text</a>.</p></li>
</ul>
<h2 id="text" name="text">Manipulating Text</h2>
<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
<ol>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace"><style></span> element in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of the Web page to control the text capitalization:
+<li>Define the <code>text-transform</code> property within a <code><style></code> element in the <code><head></code> section of the Web page to control the text capitalization:
<pre class="prettyprint">
<head>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:
+<li>Define the <code>text-align</code> property, which controls the text alignment:
<pre class="prettyprint">
<head>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:
+<li>Define the <code>text-indent</code> property, which controls the text indentation:
<pre class="prettyprint">
<head>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> property, which controls the letter spacing:
+<li>Define the <code>letter-spacing</code> property, which controls the letter spacing:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> property, which controls the space between words:
+<li>Define the <code>word-spacing</code> property, which controls the space between words:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
+<li>Define the <code>word-break</code> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> property, which determines the handling of empty space within an element:
+<li>Define the <code>white-space</code> property, which determines the handling of empty space within an element:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> property, which adds a shadow effect to text:
+<li>Define the <code>text-shadow</code> property, which adds a shadow effect to text:
<pre class="prettyprint">
<head>
<style>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
+<li>Define the <code>word-wrap</code> and <code>overflow-wrap</code> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
<pre class="prettyprint">
<head>
<style>
</ol>
-
<p>The following figure shows examples of manipulating the text properties.</p>
-<p class="figure">Figure: Text properties (in mobile applications only)</p>
+<p align="center"><strong>Figure: Text properties (in mobile applications only)</strong></p>
<p align="center"><img alt="Text properties (in mobile applications only)" src="../../../images/text_properties.png"/></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>
- </tr>
- </tbody>
- </table>
+<div class="note">
+ <strong>Note</strong>
+ For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.
+</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</ul>
-<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>
+<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <code>-moz-</code> prefix, the Chrome and Safari browsers require the <code>-webkit-</code> prefix, and the Opera browser requires the <code>-o-</code> prefix.</p>
<h2 name="prop_trans" id="prop_trans">Defining Transform Properties</h2>
<p>You can define various properties to control the elements within the coordinate space:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>
-<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>
+<li><code>transform-origin</code>
+<p>This property changes the location of the transformed element. It can only be used with elements for whom the <code>transform</code> property has been declared.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>
+<li><code>transform-style</code>
<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">perspective</span>
+<li><code>perspective</code>
<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>
+<li><code>perspective-origin</code>
<p>This property defines the location facing the element.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>
+<li><code>backface-visibility</code>
<p>This property defines whether the backface of the transformed element is expressed.</p></li>
</ul>
<pre class="prettyprint">
<head>
<style type="text/css">
- .box
+ .box
{
transform: rotate(30deg);
transform-origin: 30% 30%;
-webkit-animation: trans-ani 10s infinite linear;
-webkit-backface-visibility: visible;
}
- .box.case01
+ .box.case01
{
transform-style: preserve-3d;
perspective-origin: 30% 30%;
<p>The CSS Transforms API supports various transform methods in 2D and 3D.</p>
-<p>In 2D transforms, all transform methods are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> methods can be expressed in individual methods. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> method can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> methods.</p>
+<p>In 2D transforms, all transform methods are expressed based on a matrix. The X and Y values of the <code>translate()</code>, <code>scale()</code>, and <code>skew()</code> methods can be expressed in individual methods. For example, the X and Y values of the <code>translate()</code> method can be expressed with the <code>translateX(number)</code> and <code>translateY(number)</code> methods.</p>
<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);
</body>
</pre>
-<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>
+<p>In 3D transforms, the Z axis has been added (for example, <code>translateZ(number)</code> and <code>scale3dZ(number)</code>). When handling 3D transforms, pay attention to the following:</p>
<ul>
-<li>If a transform method is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>
-<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> methods can be expressed in individual methods.</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> method, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual method: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(<angle>)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, <angle>)</span> methods perform the same task.</li>
+<li>If a transform method is used together with the <code>perspective</code> property, the z axis is emphasized.</li>
+<li>The X, Y, and Z values of the <code>translate3d()</code>, <code>scale3d()</code>, and <code>rotate3d()</code> methods can be expressed in individual methods.</li>
+<li>In the <code>rotate3d(number, number, number, angle)</code> method, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual method: for example, the <code>rotateX(<angle>)</code> and <code>rotate3d(1, 0, 0, <angle>)</code> methods perform the same task.</li>
</ul>
<p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>
<pre class="prettyprint">
.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
+ .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);
+ 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
+ .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);
+ 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
<h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
-<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
+<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <code>transform</code> property. In the modified animation:</p>
<ul>
<li>As in the original animation, no elements are initially shown on the screen.</li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li>
-<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <code>transform</code> property, the logo is made to rotate.</li>
+<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location. With the <code>transform</code> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
</ul>
-<p class="figure">Figure: Tizen logo to be transformed</p>
+<p align="center"><strong>Figure: Tizen logo to be transformed</strong></p>
<p align="center"><img alt="Tizen logo to be transformed" src="../../../images/css_transforms1.png" /></p>
</div>
</pre>
</li>
-<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.
+<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;
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;
<li>Create the animation:
<ol type="a">
<li>
-<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> method, which defines the angle of the rotation.
+<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
+@-webkit-keyframes tizen-logo
{
- 0%
+ 0%
{
-webkit-animation-timing-function: ease-in;
height: 211px;
-webkit-transform: rotate(0deg);
width: 220px;
}
- 30%
+ 30%
{
-webkit-animation-timing-function: ease-out;
height: 211px;
-webkit-transform: rotate(720deg);
width: 220px;
}
- 50%
+ 50%
{
height: 32px;
left: 247px;
-webkit-transform: rotate(1440deg);
width: 33px;
}
- 100%
+ 100%
{
height: 32px;
left: 247px;
}
}
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td>
- </tr>
- </tbody>
- </table></li>
-<li>Create the keyframes for the first letter in the word "TIZEN". In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
+
+<div class="note">
+ <strong>Note</strong>
+ For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <code>transform-origin</code> property to adjust the rotation location.
+</div>
+</li>
+<li>Create the keyframes for the first letter in the word "TIZEN". In the animation, due to the <code>translate3d()</code> and <code>rotateY()</code> methods, each letter transforms slightly from the right to the left as it comes in.
<p align="center"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-t
+@-webkit-keyframes tizen-txt-t
{
- 0%
+ 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);
100% {}
}
</pre></li>
-<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
+<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%;
}
<li><p>Create the keyframes for the other letters similarly:</p>
<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-i
+@-webkit-keyframes tizen-txt-i
{
- 0%
+ 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);
</li>
</ol>
-<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
-<p class="figure">Figure: Full Tizen logo animation</p>
+<p>The following figure shows the full Tizen logo animation with the <code>transform</code> properties.</p>
+<p align="center"><strong>Figure: Full Tizen logo animation</strong></p>
<p align="center"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
<h3>Source Code</h3>
<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
</ul>
-<p class="figure">Figure: Fade effect</p>
+<p align="center"><strong>Figure: Fade effect</strong></p>
<p align="center"><img alt="Fade effect" src="../../../images/fade_affect_animation.png" /></p>
<p>You can control UI events and change the DOM elements in the following ways:</p>
<li>Create a modal layer pop-up using jQuery:
<pre class="prettyprint">
-(function($)
+(function($)
{
- function showModalPopup(url)
+ 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'
+ 'top': ($(window).height()/2 + $(document).scrollTop()
+ - $(url).height()/2) + 'px',
+ 'left': ($(window).width()/2 + $(document).scrollLeft()
+ - $(url).width()/2) + 'px'
});
/* Fade effect */
};
$('.layerpopupActive a').on('click', function()
- {
- var targetUrl = $(this).attr('href');
+ {
+ var targetUrl = $(this).attr('href');
- showModalPopup(targetUrl);
+ showModalPopup(targetUrl);
+
+ return false;
+ });
- return false;
- });
-
/* End processing - Fade Out effect */
-
- $('body').on('click', function(e)
- {
- if (e.target.className === 'mask')
+
+ $('body').on('click', function(e)
{
- $('.layerpop').fadeOut();
- $('.mask').fadeOut(400, function()
+ if (e.target.className === 'mask')
{
- $('.mask').remove();
- });
- };
- });
-})(jQuery);</pre>
+ $('.layerpop').fadeOut();
+ $('.mask').fadeOut(400, function()
+ {
+ $('.mask').remove();
+ });
+ };
+ });
+})(jQuery);
+</pre>
<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>
<ol>
<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>
<p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android™ with severe fragmentation.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.
+</div>
<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android™ 2.1, iOS™3.X and below, note that transition and animation may not be realized.</td>
- </tr>
- </tbody>
-</table>
+<div class="note">
+ <strong>Note</strong>
+ In case of using 3D effects, <code>-webkit-transform: translateZ(0);</code> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android™ 2.1, iOS™3.X and below, note that transition and animation may not be realized.
+</div>
</li>
<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;
}
/* JavaScript */
-function showModalPopup(url)
+function showModalPopup(url)
{
url.className += 'active';
-}</pre>
+}
+</pre>
</li>
</ul>
<h3>Performance Differences</h3>
<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Event performance using JavaScript</p>
+<p align="center"><strong>Figure: Event performance using JavaScript</strong></p>
<p align="center"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
-<p class="figure">Figure: Event performance using CSS3</p>
+<p align="center"><strong>Figure: Event performance using CSS3</strong></p>
<p align="center"><img alt="Events using CSS3" src="../../../images/events_using_css3.png" /></p>
<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Memory performance using JavaScript</p>
+<p align="center"><strong>Figure: Memory performance using JavaScript</strong></p>
<p align="center"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
-<p class="figure">Figure: Memory performance using CSS3</p>
+<p align="center"><strong>Figure: Memory performance using CSS3</strong></p>
<p align="center"><img alt="Memory when using CSS3" src="../../../images/memory_using_css3.png" /></p>
<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Tizen provides remote debugging through the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td>
- </tr>
- </tbody>
-</table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android™ 2.3 and for versions above iOS™ 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td>
- </tr>
- </tbody>
-</table>
-
- <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-
- <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
+<div class="note">
+ <strong>Note</strong>
+ Tizen provides remote debugging through the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.
+</div>
+
+<div class="note">
+ <strong>Note</strong>
+ If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android™ 2.3 and for versions above iOS™ 4.3, which are still widely used, so attention is needed when distributing it to various devices.
+</div>
+
+<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
+
+<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
<p>In hardware acceleration, GPU is used to perform a method faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
<h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p>
+ <p align="center"><strong>Figure: Blue box</strong></p>
<p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
<ul>
<li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
<ol>
<li>Construct the blue box and set its position on the screen:
- <pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript transition sample</title>
<style>
- #box
+ #box
{
position: absolute;
width: 100px;
left: 0px;
top: 50px;
}
- </style></pre>
+ </style>
+</pre>
</li>
<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
- <pre class="prettyprint"> <script>
+<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()
+ function startTransition()
{
process();
}
<body>
<div id='box' onclick='startTransition()'>click me!</div>
</body>
-</html></pre></li></ol></li>
+</html>
+</pre></li></ol></li>
<li>Use CSS transition:
- <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
- <pre class="prettyprint"><!DOCTYPE html>
+ <p>Separate a moving element to an independent layer with the <code>-webkit-transition</code> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition sample</title>
<style>
- #box
+ #box
{
position: absolute;
width: 100px;
<script>
function startTransition()
{
- document.getElementById('box').style.webkitTransform = "translate(200px, 200px)";
+ document.getElementById('box').style.webkitTransform =
+ "translate(200px, 200px)";
}
</script>
</head>
<body>
<div id='box' onclick='startTransition()'>click me!</div>
</body>
-</html></pre>
+</html>
+</pre>
</li>
<li>Use 3D transform:
- <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
- <pre class="prettyprint"><!DOCTYPE html>
+ <p>Use the <code>-webkit-transform: translate3d</code> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}
</style>
<script>
- function startTransition()
+ function startTransition()
{
- document.getElementById('box').style.webkitTransform = "translate3d(200px, 200px, 0px)";
+ document.getElementById('box').style.webkitTransform =
+ "translate3d(200px, 200px, 0px)";
}
</script>
</head>
<body>
<div id='box' onclick='startTransition()'>click me!<p></div>
</body>
-</html></pre>
+</html>
+</pre>
</li>
</ul>
<h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area
+ <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
{
overflow: scroll;
-webkit-overflow-scrolling: touch;
-}</pre>
+}
+</pre>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>You can improve the rendering performance of the application by <a href="#hw">enabling hardware acceleration</a>.</p></li>
</ul>
-<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+<p>When using the CSS transition properties, the Tizen browser requires the <code>-webkit-</code> prefix.</p>
<h2 name="prop" id="prop">Defining Transition Properties</h2>
<p>You can define various properties to control the element transitions:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>
+<li><code>transition-property</code>
<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>
-<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>
+<li><code>transition-duration</code>
+<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <code>transition-property</code> property.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>
-<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>
+<li><code>transition-timing-function</code>
+<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <code>ease</code> stepping function equals <code>cubic-bezier(0.25, 0.1, 0.25, 1)</code>, and the <code>linear</code> stepping function equals <code>cubic-bezier(0, 0, 1, 1)</code>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>
+<li><code>transition-delay</code>
<p>This property defines the delay time before the start of the transition.</p></li>
</ul>
<style type="text/css">
body{font-size: 12px}
- .box
+ .box
{
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 0.5s;
}
- .box: hover
+ .box: hover
{
width: 300px;
height: 200px;
</div>
</body>
</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td>
- </tr>
- </tbody>
- </table>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. If you omit a property value, a default value is used instead.</p>
+
+<div class="note">
+ <strong>Note</strong>
+ The <code>hover</code> pseudo class in Tizen maintains a <code>mouseover</code> state when an element is tapped, and becomes a <code>mouseout</code> state when another element is tapped.
+</div>
+
+<p>The <code>transition</code> property allows you to define all the transition properties in a shorthand mode in the order of <code>transition-property</code> | <code>transition-duration</code> | <code>transition-timing-function</code> | <code>transition-delay</code>. If you omit a property value, a default value is used instead.</p>
<pre class="prettyprint">
<style type="text/css">
- .box
+ .box
{
-webkit-transition: width 1s ease 1s;
}
</style>
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>
+<p>The <code>transition</code> property connects movement more naturally than the more generally used the pseudo classes, such as <code>:hover</code> or <code>:active</code>. The smooth effect can be achieved more conveniently and easily with the <code>transition</code> property than with JavaScript or Flash, and the <code>transition</code> property also supports the browser side to provide excellent performance.</p>
<h2 id="modify" name="modify">Modifying Element Properties</h2>
-<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current "UPCOMING EVENTS" area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
+<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <code>http://tizen.org</code> Web site, where the current "UPCOMING EVENTS" area only has the <code>text-decoration: underline</code> property in a <code>mouseover</code> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <code>transitions</code> properties in this area.</p>
-<p class="figure">Figure: Tizen site section to be transitioned</p>
+<p align="center"><strong>Figure: Tizen site section to be transitioned</strong></p>
<p align="center"><img alt="Tizen site section to be transitioned" src="../../../images/transitions1.png" /></p>
-<ol><li><p>Add a background color change to the "UPCOMING EVENTS" area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
+<ol><li><p>Add a background color change to the "UPCOMING EVENTS" area during a <code>mouseover</code> state:</p>
<ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>
</pre>
-<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>
+<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>
-<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
+<p>The <code>all</code> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
</li>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:
+<li>Define the <code>mouseover</code> state for the <code>block-title</code> class:
<pre class="prettyprint">
.block-title: hover {background: #eaeaea;}
<p>Apply the transition effect in other elements:</p>
-<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
+<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>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>
+<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <code>span</code> group. When the mouse hovers over the title element, change the color of all elements tied into the <code>a</code> group.</p>
<pre class="prettyprint">
.date: hover {background: #d2ecff !important;}
.date: hover .day > span {font-size: 1.9em;}
<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;
- width: 0; height: 100%;
- background: #000;
+ position: absolute;
+ left: -3px; top: 0;
+ display: block;
+ width: 0; height: 100%;
+ background: #000;
z-index: -1;
}
</pre>
-<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. 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 <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>
+<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;
}
.event-info: hover .location .anibg {width: 100%; color: #fff;}
</pre>
-<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
+<p>The transition takes place when the property in question is at the front on the screen. The <code>event-info</code> class is used as the subject for the change, and it has been defined so that the transition occurs simultaneously in the <code>.location</code> and <code>.anibg</code> elements when the mouse hovers over any of the elements tied together as group <code>a</code>.
</p></li>
</ol><p align="center"><img alt="Location phrase emphasis" src="../../../images/transitions5.png" /></p>
<p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
<h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p>
+ <p align="center"><strong>Figure: Blue box</strong></p>
<p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
<ul>
<li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
<ol>
<li>Construct the blue box and set its position on the screen:
- <pre class="prettyprint"><!DOCTYPE html>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript transition sample</title>
<style>
- #box
+ #box
{
position: absolute;
width: 100px;
left: 0px;
top: 50px;
}
- </style></pre>
+ </style>
+</pre>
</li>
<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
- <pre class="prettyprint"> <script>
+<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()
+ function startTransition()
{
process();
}
<body>
<div id='box' onclick='startTransition()'>click me!</div>
</body>
-</html></pre></li></ol></li>
+</html>
+</pre></li></ol></li>
<li>Use CSS transition:
- <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
- <pre class="prettyprint"><!DOCTYPE html>
+ <p>Separate a moving element to an independent layer with the <code>-webkit-transition</code> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition sample</title>
<style>
- #box
+ #box
{
position: absolute;
width: 100px;
<script>
function startTransition()
{
- document.getElementById('box').style.webkitTransform = "translate(200px, 200px)";
+ document.getElementById('box').style.webkitTransform =
+ "translate(200px, 200px)";
}
</script>
</head>
<body>
<div id='box' onclick='startTransition()'>click me!</div>
</body>
-</html></pre>
+</html>
+</pre>
</li>
<li>Use 3D transform:
- <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
- <pre class="prettyprint"><!DOCTYPE html>
+ <p>Use the <code>-webkit-transform: translate3d</code> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
+<pre class="prettyprint">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}
</style>
<script>
- function startTransition()
+ function startTransition()
{
- document.getElementById('box').style.webkitTransform = "translate3d(200px, 200px, 0px)";
+ document.getElementById('box').style.webkitTransform =
+ "translate3d(200px, 200px, 0px)";
}
</script>
</head>
<body>
<div id='box' onclick='startTransition()'>click me!<p></div>
</body>
-</html></pre>
+</html>
+</pre>
</li>
</ul>
<h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area
+ <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
{
overflow: scroll;
-webkit-overflow-scrolling: touch;
-}</pre>
+}
+</pre>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<p>CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.</p>
<ul>
<li><a href="transform_w.htm">CSS Transforms</a> <strong>in mobile and wearable applications only</strong>
- <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
+ <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <code>transform</code> property.</p></li>
<li><a href="animation_w.htm">CSS Animations Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
- <p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
+ <p>Enables you to create animations using the CSS3 <code>animation</code> property.</p></li>
<li><a href="transition_w.htm">CSS Transitions Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
- <p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
+ <p>Enables you to add effects when changing the style of an element using the CSS3 <code>transition</code> property.</p></li>
<li><a href="color_w.htm">CSS Color Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
<h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>
-<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
+<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <code>viewport</code> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <code>viewport</code> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <code>viewport</code> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
<p>To use the tag in an HTML file, set its name and content:</p>
<pre class="prettyprint">
<meta name="viewport" content="XXX">
</pre>
-<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
+<p>As shown in the following code snippet, use the <code>viewport</code> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <code>viewport</code> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
<pre class="prettyprint">
<meta name="viewport" content="width=device-width, user-scalable=no">
</pre>
<meta name="viewport" content="width=320">
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
+<p>The <code>viewport</code> meta tag has other properties, such as <code>height</code>, <code>initial-scale</code>, <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
<h3 id="relative" name="relative">Relative Layout</h3>
<p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>
-<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>
+<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <code>number_pad</code> element is set to 100% and 70%, not 320 px and 224 px. </p>
-<p class="figure">Figure: 320x320 calculator</p>
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
+<p align="center"><strong>Figure: 320x320 calculator</strong></p>
+<p><code>number_pad {width: 100%; height: 70%;}</code></p>
<p align="center"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p>
<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
-<p class="figure">Figure: 360x480 calculator with a relative layout</p>
+<p align="center"><strong>Figure: 360x480 calculator with a relative layout</strong></p>
<p align="center"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p>
<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
-<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p>
+<p align="center"><strong>Figure: 360x480 calculator with an absolute 320x320 layout</strong></p>
+<p><code>number_pad {width: 320px; height: 224px;}</code></p>
<p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p>
<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
-<p class="figure">Figure: Typical wearable Web application layout</p>
+<p align="center"><strong>Figure: Typical wearable Web application layout</strong></p>
<p align="center"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p>
<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
-<p class="figure">Figure: 320x320 sample Web application</p>
+<p align="center"><strong>Figure: 320x320 sample Web application</strong></p>
<p align="center"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p>
<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p>
-<p class="figure">Figure: Layout on 360x480</p>
+<p align="center"><strong>Figure: Layout on 360x480</strong></p>
<p align="center"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p>
<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p>
</pre>
<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
-<p class="figure">Figure: Usable layout on 360x480</p>
+<p align="center"><strong>Figure: Usable layout on 360x480</strong></p>
<p align="center"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p>
<h3 id="flexible" name="flexible">Flexible Media</h3>
<p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>
<p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>
-<p class="figure">Figure: Flexible media on 320x320 and 360x480</p>
-<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
+<p align="center"><strong>Figure: Flexible media on 320x320 and 360x480</strong></p>
+<p><code>.video iframe {width: 100%; height: auto;}</code></p>
<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p>
<p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
-<p class="figure">Figure: Fixed size media element</p>
-<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;}</span></p>
+<p align="center"><strong>Figure: Fixed size media element</strong></p>
+<p><code> .video iframe {width: 320px; height: 240px;}</code></p>
<p align="center"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p>
<h3 id="single_example" name="single_example">Single Layout Example</h3>
<p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>
-<p>First of all, set the targeted size of the content area as 320 px in the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> property, as shown in the following code snippet.</p>
+<p>First of all, set the targeted size of the content area as 320 px in the <code>viewport</code> meta tag, and disable the <code>user-scalable</code> property, as shown in the following code snippet.</p>
<pre class="prettyprint">
<html>
<head>
- <link href="css/style.css" rel="stylesheet" type="text/css">
- <meta name="viewport" content="width=320px, user-scalable=no" />
- </head>
+ <link href="css/style.css" rel="stylesheet" type="text/css">
+ <meta name="viewport" content="width=320px, user-scalable=no"/>
+ </head>
<body>
<main>
<div class="tile left">
<div id="box1" class="box"></div>
- </div>
+ </div>
<div class="tile right">
<div id="box2" class="box"></div>
- </div>
+ </div>
<div class="tile left">
- <div id="box3" class="box"></div>
+ <div id="box3" class="box"></div>
</div>
<div class="tile right">
- <div id="box4" class="box"></div>
- </div>
+ <div id="box4" class="box"></div>
+ </div>
</main>
- </body>
+ </body>
</html>
</pre>
-<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace"><div></span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p>
+<p>In the above HTML code, the content area consists of 4 <code><div></code> box elements, and their UI layout is described in the <code>style.css</code> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p>
<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
<pre class="prettyprint">
#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%;
.left {padding: 10px 5px 5px 10px;}
.right {padding: 10px 10px 5px 5px;}
-.box
+.box
{
width: 100%;
height: 100%;
<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p>
- <p class="figure">Figure: Original layout on a target device</p>
+ <p align="center"><strong>Figure: Original layout on a target device</strong></p>
<p align="center"><img alt="Original layout on a target device" src="../../../images/layout_original.png"/></p>
<p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
- <p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>
+ <p align="center"><strong>Figure: Scaled layout on a 16:9 mobile device</strong></p>
<p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../../images/layout_original_scaled.png"/></p>
<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
#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%;
.left {padding: 10px 5px 5px 10px;}
.right {padding: 10px 10px 5px 5px;}
-.box
+.box
{
width: 100%;
height: 100%;
- <p class="figure">Figure: Image-based layout on a target device</p>
+ <p align="center"><strong>Figure: Image-based layout on a target device</strong></p>
<p align="center"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
-<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>
+<p align="center"><strong>Figure: Image-based scaled layout on a 16:9 mobile device</strong></p>
<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>
<p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (watch face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (watch face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
-<p class="figure">Figure: Application for a watch and tablet</p>
+<p align="center"><strong>Figure: Application for a watch and tablet</strong></p>
<p align="center"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>
<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p>
<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p>
- <p class="figure">Figure: Application for a square and circular device</p>
+ <p align="center"><strong>Figure: Application for a square and circular device</strong></p>
<p align="center"><img alt="Application for a square and circular device" src="../../../images/circular_support.png"/></p>
<h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>
-<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">"device-width"</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">"device-width"</span> setting is needed to create an adaptive and responsive Web application. </p>
+<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <code>viewport</code> meta tag is set to <code>"device-width"</code>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <code>"device-width"</code> setting is needed to create an adaptive and responsive Web application. </p>
<p>To use the meta tag in an HTML file, set its name and content: </p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
<meta name="viewport" content="width=device-width, user-scalable=no">
</pre>
<p>Media queries consist of a media type and expressions of media features. </p>
<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>
+<ul><li><code>aural</code></li>
+<li><code>braille</code></li>
+<li><code>handheld</code></li>
+<li><code>print</code></li>
+<li><code>projection</code></li>
+<li><code>screen</code></li>
+<li><code>tty</code></li>
+<li><code>tv</code></li>
</ul>
-<p>You can declare that sections apply to certain media types inside a CSS style sheet. As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>
+<p>You can declare that sections apply to certain media types inside a CSS style sheet. As in the following example, you can declare <code>screen</code> as a media type and describe its layout inside <code>{...}</code>. That code applies the layout inside <code>{...}</code> when the Web application is run on the screen type executable context.</p>
<pre class="prettyprint">
@media screen {...}
</pre>
-<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>
+<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <code>screen</code> media type and a 500 pixel minimum width. Its final view shows the layout inside <code>{...}</code> to the end user. </p>
<pre class="prettyprint">
@media screen and (min-width: 500px) {...}
</pre>
<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p>
-
-<table>
-<caption>Table: Media features</caption>
+
+<p align="center" class="Table"><strong>Table: Media features</strong></p>
+<table>
<tbody>
<tr>
<th>Feature</th>
</tr>
<tr>
<td>resolution</td>
- <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>
+ <td>resolution (<code>dpi</code> or <code>dpcm</code>)</td>
<td>Resolution</td>
</tr>
<tr>
<td>scan</td>
- <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>
+ <td><code>progressive</code> or <code>interlaced</code></td>
<td>no</td>
- <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>
+ <td>Scanning process of the <code>tv</code> media types</td>
</tr>
<tr>
<td>width</td>
<h4>Tizen Specialized Media Query</h4>
<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Tizen specialized media feature</caption>
+<div class="note">
+ <strong>Note</strong>
+ This feature is supported since <strong>2.3.1</strong>.
+</div>
+
+<p align="center" class="Table"><strong>Table: Tizen specialized media feature</strong></p>
+<table>
<tbody>
<tr>
<th>Feature</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">"rectangle"</span> | <span style="font-family: Courier New,Courier,monospace;">"circle"</span></td>
+ <td><code>-tizen-geometric-shape</code></td>
+ <td><code>"rectangle"</code> | <code>"circle"</code></td>
<td>No</td>
<td>Device shape</td>
</tr>
</tbody>
</table>
-<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>
+<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <code>{...}</code> to the end user:</p>
<pre class="prettyprint">
@media all and (-tizen-geometric-shape: circle) {...}
</pre>
<h4>Portrait and Landscape</h4>
-<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p>
-<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation: portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p>
+<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>
+</pre>
<h4>Circular Device</h4>
-<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
- </tr>
- </tbody>
-</table>
+<p>You can configure the device circular mode using the <code>-tizen-geometric-shape</code> attribute in the Tizen environment. The following example shows how to use the <code>-tizen-geometric-shape</code> feature.</p>
+<div class="note">
+ <strong>Note</strong>
+ This feature is supported since <strong>2.3.1</strong>.
+</div>
<pre class="prettyprint lang-html">
-@media all and (-tizen-geometric-shape: circle)
+@media all and (-tizen-geometric-shape: circle)
{
<!--For a circular device-->
}
</section>
<!--CSS code-->
-html, body
+html, body
{
height: 100%;
width: 100%;
overflow: hidden;
}
-section
+section
{
width: 100%;
height: 100%;
padding: 70px 0;
}
-header, footer
+header, footer
{
width: 100%;
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;
font-size: 40px;
}
-article ul li:first
+article ul li:first
{
border-top: 0 none;
-}</pre>
+}
+</pre>
<p>To migrate the application, use the following steps:</p>
<ol>
<li>Use a relative layout.
- <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>
+ <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>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>
- </tr>
- </tbody>
-</table>
+}
+</pre>
+
+<div class="note">
+ <strong>Note</strong>
+ The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.
+</div>
</li>
<li>Set extra spaces both at the top and bottom.
<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 class="figure">Figure: Top and bottom padding</p>
+ <p align="center"><strong>Figure: Top and bottom padding</strong></p>
<p align="center"><img alt="Top and bottom padding" src="../../../images/migrate_padding.png"/></p>
</li>
<li>Set the header and footer position.
<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
-<p class="figure">Figure: Scrolling with a rectangular screen</p>
+<p align="center"><strong>Figure: Scrolling with a rectangular screen</strong></p>
<p align="center"><img alt="Scrolling with a rectangular screen" src="../../../images/migrate_scrollable_rect.png"/></p>
<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
-<p class="figure">Figure: Scrolling with a circular screen</p>
+<p align="center"><strong>Figure: Scrolling with a circular screen</strong></p>
<p align="center"><img alt="Scrolling with a circular screen" src="../../../images/migrate_scrollable_circle.png"/></p>
-<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>
+<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)
+@media all and (-tizen-geometric-shape: circle)
{
- header, footer
+ header, footer
{
position: static;
}
<p>To provide a better user experience, show the entire display at the beginning, including the "top padding" space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
-<p class="figure">Figure: Moving to the initial position</p>
+<p align="center"><strong>Figure: Moving to the initial position</strong></p>
<p align="center"><img alt="Moving to the initial position" src="../../../images/migrate_move_to_top.png"/></p>
<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()
+(function initScrollPosition()
{
var SCROLL_DELAY_TIME = 1500,
page = document.getElementById("main"),
- scrollPosition = window.parseInt(window.getComputedStyle(page)["padding-top"]),
+ 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);
-
- initScrollTimeoutId = window.setTimeout(function()
- {
- page.scrollTop = scrollPosition;
- }, SCROLL_DELAY_TIME);
+ if (mql.matches)
+ {
+ page.addEventListener("scroll", function clearInitScrollCallback()
+ {
+ window.clearTimeout(initScrollTimeoutId);
+ page.removeEventListener("scroll", clearInitScrollCallback, false);
+ }, false);
+
+ initScrollTimeoutId = window.setTimeout(function()
+ {
+ page.scrollTop = scrollPosition;
+ }, SCROLL_DELAY_TIME);
}
}());
</pre>
<li>Set extra attributes for a better view.
<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
-<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements' layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
+<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements' layout are needed too. For example, consider setting the <code>text-align: center</code> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
<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)
+@media all and (-tizen-geometric-shape: circle)
{
- article ul li
+ article ul li
{
text-align: center;
line-height: 60px;
<ul>
<li>WOFF file format 1.0
-<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><
span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
+<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><
code>@font-face</code> rule</a> to display it identically with the input font. The <code>@font-face</code> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
</ul>
<h2 id="woff" name="woff">Using the WOFF File Format</h2>
<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
<ol>
-<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
+<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><code>@font-face</code> rules</a>. Within the rules, you can define the following properties:
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
+<li><code>font-family</code>
<p>Defines a name for the font. This property is mandatory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">src</span>
-<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>
+<li><code>src</code>
+<p>Defines the URL of the font file on the server. This property is mandatory. If the <code>local</code> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
+<li><code>font-stretch</code>
<p>Defines the way the font is stretched. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-style</span>
+<li><code>font-style</code>
<p>Defines the font style. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>
+<li><code>font-weight</code>
<p>Defines the font weight. This property is optional.</p></li>
</ul>
-<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace"><style></span> element in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of a Web page:</p>
+<p>Define the rules with in a <code><style></code> element in the <code><head></code> section of a Web page:</p>
<pre class="prettyprint">
<head>
<style>
p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
</style>
-</head></pre>
+</head>
+</pre>
</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace"><body></span> section, create <span style="font-family: Courier New,Courier,monospace"><p></span> elements containing text in which the font rules are implemented:
-<pre class="prettyprint"><body>
+<li>In the <code><body></code> section, create <code><p></code> elements containing text in which the font rules are implemented:
+<pre class="prettyprint">
+<body>
<p>The quick brown fox jumps over a lazy dog.</p>
<p>The quick brown fox jumps over a lazy dog.</p>
<p>The quick brown fox jumps over a lazy dog.</p>
</pre>
</li>
</ol>
-<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
+<p align="center"><strong>Figure: Implementing the @font-face rules (in mobile applications only)</strong></p>
<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
<p>A better approach is to cache the values into local variables. Caching the value into a local variable is equivalent to one search, so it yields performance benefits from the second access onwards. This even applies to DOM properties: Each property access requires DOM traverse overhead, and since JavaScript does not know ahead of time if a given access is going to change values, caching a common part can save a lot of search time.</p>
<p>The following example illustrates the issue.</p>
+
+<p align="center" class="Table"><strong>Table: Example of using local variables</strong></p>
<table border="1">
- <caption>Table: Example of using local variables</caption>
<tbody>
<tr>
<th>Before</th>
- <td><pre class="prettyprint">var globalVar;
-test: function()
+ <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)
+ var ratio =
+ window.innerWidth / (window.innerHeight + window.innerWidth); (X)
}
</pre></td>
</tr>
<tr>
<th>After</th>
- <td><pre class="prettyprint">test: function()
+ <td>
+<pre class="prettyprint">
+test: function()
{
var global = globalVar; (O)
var one = global + 1;
- screenHeight = window.innerHeight; (O)
+ screenHeight = window.innerHeight; (O)
screenWidth= window.innerWidth; (O)
- var ratio = screenWidth / (screenHeight + screenWidth);
+ var ratio = screenWidth / (screenHeight + screenWidth);
}
</pre></td>
</tr>
</tbody>
</table>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Tip</th>
- </tr>
- <tr>
- <td class="note">To minimize the property access time:
- <ul><li>Property depth: the deeper the property hierarchy is, the more search time is requires (object.name < object.name.name).</li>
- <li>Property notation: dot notation is faster than associate notation in Webkit (object.name < object ["name"]).</li></ul></td>
- </tr>
- </tbody>
- </table>
- <h2 id="event" name="event">Improving the Event Handler Response Time</h2>
+<div class="note">
+ <strong>Tip</strong>
+ To minimize the property access time:
+<ul><li>Property depth: the deeper the property hierarchy is, the more search time is requires (object.name < object.name.name).</li>
+<li>Property notation: dot notation is faster than associate notation in Webkit (object.name < object ["name"]).</li></ul>
+</div>
+
+<h2 id="event" name="event">Improving the Event Handler Response Time</h2>
<p>When the number of event handlers grows in the DOM tree, Webkit consumes more memory to trace the events and the response time for each event increases. To prevent the response time slow-down, you can use a technique called event delegation.</p>
<p>Event delegation means that you attach just one handler in the parent element and let it handle all the events from the child elements. Event delegation is based on events propagating up to the parent node, called bubbling, so the parent can handle all the events from the child nodes.</p>
<p>The following example illustrates the issue.</p>
+
+<p align="center" class="Table"><strong>Table: Example of improving response time</strong></p>
<table border="1">
- <caption>Table: Example of improving response time</caption>
<tbody>
<tr>
<th>Before</th>
- <td><pre class="prettyprint">document.getElementById('a').onclick = function()
+ <td>
+<pre class="prettyprint">
+document.getElementById('a').onclick = function()
{
alert('<a> clicked!!');
}
-document.getElementById('div').onclick = function()
+document.getElementById('div').onclick = function()
{
alert('<div> clicked!!');
}
<tr>
<th>After</th>
- <td><pre class="prettyprint">document.getElementById('ul').onclick = function()
+ <td>
+<pre class="prettyprint">
+document.getElementById('ul').onclick = function()
{
var target = e.target;
if (target.nodeName == 'a')
<p>When DOM elements or object properties are accessed, JavaScript searches the variables with its variable resolution mechanism. Try to reduce the number of potential targets, since the average variable search slows when the target coverage grows. To minimize this problem, good coding practice demands that you explicitly remove unused DOM elements and properties when you know they are no longer needed.</p>
<p>The following examples illustrate the issue.</p>
+
+<p align="center" class="Table"><strong>Table: Example of removing unused elements and properties</strong></p>
<table border="1">
- <caption>Table: Example of removing unused elements and properties</caption>
<tbody>
<tr>
<th>Removing an unused property</th>
- <td><pre class="prettyprint">var myApp = {prop: "myprop"};
-delete myApp.prop;
+ <td>
+<pre class="prettyprint">
+var myApp = {prop: "myprop"};
+delete myApp.prop;
</pre></td>
</tr>
<tr>
<th>Removing an unused DOM element</th>
- <td><pre class="prettyprint">var el= $('#myelem');
-el.parentNode.removeChild(el);</pre></td>
+ <td>
+<pre class="prettyprint">
+var el= $('#myelem');
+el.parentNode.removeChild(el);
+</pre></td>
</tr>
</tbody>
</table>
<p>The layout of the Web application is maintained in Webkit as a DOM tree. The CSS style is applied to the DOM tree and produces the render tree that contains the rendering information for the real screen. The user sees the result of painting the render tree. The following figure shows the overall rendering flow that happens in the Webkit layout engine.</p>
-<p class="figure">Figure: Webkit rendering flow</p>
+<p align="center"><strong>Figure: Webkit rendering flow</strong></p>
<p align="center"><img alt="Webkit rendering flow" src="../../../images/minimize_doc_flow.png" /></p>
<p>You can improve performance by designing your application to avoid unnecessary rendering. Minimizing the chances of DOM tree changes is a key to optimizing Web application performance, because usually the rendering needs to be done whenever the DOM tree is changed (this situation is called "document reflow" - Webkit needs to recalculate the position of elements in the document after a DOM change).</p>
<li>Manipulate tables separately from the DOM tree.
<p>The intuitive way to manipulate table values is to directly access and modify each value. However, this approach results in very poor performance, since every change of every value leads to a DOM change (often causing a document reflow). To avoid this problem, separate the table from the DOM tree and make changes on the detached table only. After the changes, attach the changed table to the original DOM tree. The end result is the same, but the performance difference is significant.</p>
<p>The following example illustrates the issue.</p>
+
+<p align="center" class="Table"><strong>Table: Example of manipulating tables</strong></p>
<table border="1">
- <caption>Table: Example of manipulating tables</caption>
<tbody>
<tr>
<th>Directly manipulating table nodes</th>
- <td><pre class="prettyprint">table.addLotsAndLotsOfRows();</pre></td>
+ <td>
+<pre class="prettyprint">
+table.addLotsAndLotsOfRows();
+</pre></td>
</tr>
<tr><th>Manipulating table nodes without document reflow</th>
- <td><pre class="prettyprint">var table = $('#some-table');
+ <td>
+<pre class="prettyprint">
+var table = $('#some-table');
var parent = table.parent();
table.remove();
table.addLotsAndLotsOfRows();
<li>Be careful with specific properties.
<p>The following properties are known to cause document reflow. Use a cached value with them, or minimize their usage altogether.</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">offsetTop</span>, <span style="font-family: Courier New,Courier,monospace">offsetLeft</span>, <span style="font-family: Courier New,Courier,monospace">offsetWidth</span>, <span style="font-family: Courier New,Courier,monospace">offsetHeight</span> </li>
- <li><span style="font-family: Courier New,Courier,monospace">scrollTop</span>, <span style="font-family: Courier New,Courier,monospace">scrollLeft</span>, <span style="font-family: Courier New,Courier,monospace">scrollWidth</span>, <span style="font-family: Courier New,Courier,monospace">scrollHeight</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">clientTop</span>, <span style="font-family: Courier New,Courier,monospace">clientLeft</span>, <span style="font-family: Courier New,Courier,monospace">clientWidth</span>, <span style="font-family: Courier New,Courier,monospace">clientHeight</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">getComputedStyle()</span></li>
+ <li><code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, <code>offsetHeight</code> </li>
+ <li><code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code></li>
+ <li><code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, <code>clientHeight</code></li>
+ <li><code>getComputedStyle()</code></li>
</ul>
</li>
<li>Consider the expression order.
<p>When you use inline CSS, consider the expression order in your code. The following example shows the difference between 2 code snippets that have the same result but different expression order. In the first example, the read and write order is mixed and Webkit executes the rendering flow twice, while the second example triggers the reflow only once.</p>
+<p align="center" class="Table"><strong>Table: Examples of expression order effects</strong></p>
<table border="1">
- <caption>Table: Examples of expression order effects</caption>
<tbody>
<tr>
<th>2 document reflows </th>
- <td><pre class="prettyprint">var newWidth = aDiv.offsetWidth + 10; /* Read */
+ <td>
+<pre class="prettyprint">
+var newWidth = aDiv.offsetWidth + 10; /* Read */
aDiv.style.width = newWidth + 'px'; /* Write */
var newHeight = aDiv.offsetHeight + 10; /* Read */
aDiv.style.height = newHeight + 'px'; /* Write */
</tr>
<tr>
<th>1 document reflow</th>
- <td><pre class="prettyprint">var newWidth = aDiv.offsetWidth + 10; /* Read */
+ <td>
+<pre class="prettyprint">
+var newWidth = aDiv.offsetWidth + 10; /* Read */
var newHeight = aDiv.offsetHeight + 10; /* Read */
aDiv.style.width = newWidth + 'px'; /* Write */
aDiv.style.height = newHeight + 'px'; /* Write */
<p>The intuition behind the rule to reducing the number of files can be expressed as "less files > less file operations > faster load". As shown in the following table, you can reduce 3 JavaScript files to just 1 while keeping the same content.</p>
<p>In case of large-scale Web applications, 1 application can contain 20-30 or even more JavaScript files, and concatenating the JavaScript can make the initial file operations significantly faster, eventually leading to a faster launch time.</p>
+<p align="center" class="Table"><strong>Table: Example of reducing the number of files</strong></p>
<table border="1">
- <caption>Table: Example of reducing the number of files</caption>
<tbody>
<tr>
<th>Separating JavaScript files</th>
- <td><pre class="prettyprint"><script src="foo1.js"></script>
+ <td>
+<pre class="prettyprint">
+<script src="foo1.js"></script>
<script src="foo2.js"></script>
<script src="foo3.js"></script>
</pre></td>
</tr>
<tr>
<th>Concatenating JavaScript files</th>
- <td><pre class="prettyprint"><script src="foo.js"></script>
+ <td>
+<pre class="prettyprint">
+<script src="foo.js"></script>
<!--foo.js contains foo1.js, foo2.js, and foo3.js-->
</pre></td>
</tr>
<li>UglifyJS</li>
</ul>
</li>
- <li>Keep only the first page elements in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
- <p>Take advantage of a useful technique called deferring loading. The UI component creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<span style="font-family: Courier New,Courier,monospace">index.html</span>) are constructed. Of course, images and other resources are not yet loaded at this stage.</p>
+ <li>Keep only the first page elements in the <code>index.html</code> file.
+ <p>Take advantage of a useful technique called deferring loading. The UI component creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<code>index.html</code>) are constructed. Of course, images and other resources are not yet loaded at this stage.</p>
<p>Often the first page can contain unnecessary elements, and consequently slow down the DOM construction. To avoid the problem, construct the first page to contain only the necessary elements to show the first scene, and put the rest of the pages in another HTML file. Similarly, if you do not need some JavaScript functionality on the first page, load the related JavaScript files only after the first page is loaded.</p></li>
</ul>
<p>Sound is not played in case of a tap event for:</p>
<ul>
- <li>HTML elements whose disabled property is set to <span style="font-family: Courier New,Courier,monospace">disabled</span></li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><input></span> elements whose type attribute is set to one of the following editable types:
+ <li>HTML elements whose disabled property is set to <code>disabled</code></li>
+ <li>HTML <code><input></code> elements whose type attribute is set to one of the following editable types:
<ul>
- <li><span style="font-family: Courier New,Courier,monospace">date</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">datetime</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">datetime-local</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">email</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">month</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">number</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">password</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">range</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">search</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">tel</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">text</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">time</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">url</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">week</span></li>
+ <li><code>date</code></li>
+ <li><code>datetime</code></li>
+ <li><code>datetime-local</code></li>
+ <li><code>email</code></li>
+ <li><code>month</code></li>
+ <li><code>number</code></li>
+ <li><code>password</code></li>
+ <li><code>range</code></li>
+ <li><code>search</code></li>
+ <li><code>tel</code></li>
+ <li><code>text</code></li>
+ <li><code>time</code></li>
+ <li><code>url</code></li>
+ <li><code>week</code></li>
</ul></li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><textarea></span> elements</li>
+ <li>HTML <code><textarea></code> elements</li>
</ul>
<p>Sound is played in case of a tap event for:</p>
<ul>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><a></span> elements with the <span style="font-family: Courier New,Courier,monospace">href</span> attribute</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><area></span> elements with the <span style="font-family: Courier New,Courier,monospace">href</span> attribute</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><button></span> elements</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><input></span> elements</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><keygen></span> elements</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><select></span> elements</li>
- <li>HTML <span style="font-family: Courier New,Courier,monospace"><summary></span> elements with a visible heading for the HTML <span style="font-family: Courier New,Courier,monospace"><details></span> element</li>
+ <li>HTML <code><a></code> elements with the <code>href</code> attribute</li>
+ <li>HTML <code><area></code> elements with the <code>href</code> attribute</li>
+ <li>HTML <code><button></code> elements</li>
+ <li>HTML <code><input></code> elements</li>
+ <li>HTML <code><keygen></code> elements</li>
+ <li>HTML <code><select></code> elements</li>
+ <li>HTML <code><summary></code> elements with a visible heading for the HTML <code><details></code> element</li>
<li>HTML elements on which the click event listener is registered</li>
<li>HTML elements on which the mousedown event listener is registered</li>
<li>HTML elements on which the mouseup event listener is registered</li>
</topic>
<topic href="html/native/media/image_edit_n.htm" label="Image Editing"></topic>
<topic href="html/native/media/thumbnail_images_n.htm" label="Thumbnail Images"></topic>
- <topic href="html/native/media/image_barcode_n.htm" label="Barcode Detection"></topic>
+ <topic href="html/native/media/media_vision_n.htm" label="Visual Detection and Recognition">
+ <topic href="html/native/media/image_barcode_n.htm" label="Barcode Detection and Generation"></topic>
+ <topic href="html/native/media/face_detection_n.htm" label="Face Detection, Recognition, and Tracking"></topic>
+ <topic href="html/native/media/image_recognition_n.htm" label="Image Recognition and Tracking"></topic>
+ </topic>
<topic href="html/native/media/audio_n.htm" label="Audio Management">
<topic href="html/native/media/openal_n.htm" label="OpenAL"></topic>
<topic href="html/native/media/sound_n.htm" label="Sound Manager"></topic>
<topic href="html/native/connectivity/vpn_n.htm" label="VPN Connections"></topic>
<topic href="html/native/connectivity/iotcon_n.htm" label="IoT Connectivity"></topic>
<topic href="html/native/connectivity/nsd_n.htm" label="Network Service Discovery"></topic>
+ <topic href="html/native/connectivity/d2d_connectivity_n.htm" label="Convergence"></topic>
</topic>
<topic href="html/native/messaging/messaging_cover_n.htm" label="Messaging">
<topic href="html/native/messaging/email_n.htm" label="Email"></topic>
<topic href="html/native/security/secure_key_n.htm" label="Secure Key Management"></topic>
<topic href="html/native/security/privilege_n.htm" label="Privilege Information"></topic>
<topic href="html/native/security/yaca_n.htm" label="Cryptographic Operations"></topic>
- <topic href="html/native/security/dpm_n.htm" label="Device Policy Management"></topic>
+ <topic href="html/native/security/dpm_n.htm" label="Device Policy Management"></topic>
+ <topic href="html/native/security/csr_n.htm" label="Malware Scanning and Web Protection"></topic>
<topic href="html/native/security/security_tip.htm" label="Security Tips"></topic>
</topic>
<topic href="html/native/error/error_cover_n.htm" label="Error Handling">
projects / sdk / online-doc.git / commitdiff
