Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
41|Page
Figure 13: Page structure 
Handling Events on the Page 
TAU also provides various custom events for creating hooks between the application UI and the 
JavaScript code. These events complement the native events of the platform and include, for example, 
touch-based gesture events, such as swipe, drag, and pinch. 
For example, to handle swipe and drag events in your UI, use the following code as a basis: 
var gesture = new Gesture(element, 
dragOrientation: tau.gesture.Orientation.VERTICAL 
}) 
.on("drag dragend dragcancel swipe", function(event) 
/* Handle swipe and drag events */ 
}); 
You can also use jQuery  with TAU. 
Available UI Widgets 
The following table lists the UI widgets available in TAU. 
Table 8: UI widgets available in TAU 
Widget 
Description 
Autodividers 
The autodividers widget automatically creates dividers for a list view widget as an extension. 
Button 
The button widget changes the default browser buttons to special buttons with additional 
features, such as icons, corners, and shadows. 
Checkbox 
radio 
The checkbox radio widget changes the default browser checkboxes and radio buttons to a 
form more adapted to the mobile environment. 
Collapsible 
The collapsible widget allows you to expand or collapse content when tapped. 
Control group 
The control group widget improves the styling of multiple buttons by grouping them into a single 
block. 
Date-time 
picker 
The date-time picker widget shows a control that the user can use to enter date and time 
values. 
Drawer 
The drawer widget allows you to open and close a drawer to show or hide the content inside it. 
Pdf fillable forms - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
convert pdf into fillable form; add signature field to pdf
Pdf fillable forms - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
c# fill out pdf form; create fill pdf form
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
42|Page
Fast scroll 
The fast scroll widget shows a shortcut list that is bound to its parent scroll bar and respective 
list view. 
Flip toggle 
switch 
The flip toggle switch widget is a common UI element used for binary on/off or true/false data 
input. 
Gallery 
The gallery widget shows images in a gallery on the screen. 
List divider 
The list divider widget creates a list separator, which can be used for grouping list items. 
List view 
The list view widget is used to display, for example, navigation data, results, and data entries, 
in a list format. 
Loader 
The loader widget displays a loader pop-up on page changes. 
Notification 
The notification widget shows a pop-up on the screen to provide notifications. 
Popup 
The popup widget supports two pop-ups: the position-to-window pop-up (like a system pop-up) 
and the context pop-up. 
Progress 
The progress widget shows that an operation is in progress. 
Progress bar 
The progress bar widget shows a control that indicates the progress percentage of an on-going 
operation. 
Scroll handler 
The scroll handler widget is an extension for the scroll view widget, and adds a scroll button 
that looks like a handle. 
Search bar 
The search bar widget is used to search for page content. 
Slider 
The slider widget changes the range-type browser input to sliders. 
Swipe 
The swipe widget shows a list view on the screen where the list items can be swiped vertically 
to show a menu. 
Tab bar 
The tab bar widget shows an unordered list of buttons on the screen wrapped together in a 
single group. 
Token text 
area 
The token text area widget changes a text item to a button. 
Virtual list view  The virtual list view widget is used to display data elements in a list format with dynamic data 
management. 
Handling Multiple Pages, Widgets, and Events 
The following examples show you how to create an application with two pages, one button widget on 
each page, and event handlers for changing the currently displayed page: 
1.  Add a page to the application by using the UI Builder or manually editing the HTML code: 
<div data-role="page" id="page1"> 
<div data-role="header"> 
<h1>Page 1</h1> 
</div> 
<div data-role="content"> 
C# Create PDF Library SDK to convert PDF from other file formats
Free PDF creator SDK for Visual Studio .NET. Batch create adobe PDF from multiple forms. Create fillable PDF document with fields.
pdf signature field; create a fillable pdf form in word
C# PDF Field Edit Library: insert, delete, update pdf form field
provide best ways to create PDF forms and delete PDF forms in C#.NET framework project. A professional PDF form creator supports to create fillable PDF form in
allow users to attach to pdf form; pdf fillable forms
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
43|Page
Swipe right or 
<button id="button1" data-role="button">Press button</button> 
to change to page 2 
</div> 
</div> 
The above code adds a page with some text and a button widget. 
2.  Add a second page to the application, also with some text and a button widget: 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<h1>Page 2</h1> 
</div> 
<div data-role="content"> 
Swipe left or 
<button id="button2" data-role="button">Press button</button> 
to change back to page 1 
</div> 
</div> 
3.  Define the event and event handlers for changing the currently displayed page when the user 
either swipes left or right across the screen or clicks a button: 
<script> 
tau.event.one(document, "pageshow", function() 
/* Swipe handlers */ 
$("#page1").on("swipeleft", function(event)  
tau.changePage("#page2"); 
}); 
$("#page2").on("swiperight", function(event)  
tau.changePage("#page1"); 
}); 
/* Button click handlers */ 
$("#button1").on("click", function(event)  
tau.changePage("#page2"); 
}); 
$("#button2").on("click", function(event) 
tau.changePage("#page1"); 
}); 
}) 
</script> 
The 
tau.changePage()
method changes the currently displayed page to the page with the 
specified ID. If the user swipes left or right or clicks the button on page 1, the application switches 
to page 2, and vice versa. 
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
An advanced .NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual C# .NET. Online source code for C#.NET class.
convert pdf to fill in form; create fillable form pdf online
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Export PDF document from OpenOffice Presentation. Turn ODT, ODS, ODP forms into fillable PDF formats. Quick integrate online source code to VB.NET class project
adding signature to pdf form; change font size pdf fillable form
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
44|Page
6. Using Tizen Web APIs 
This chapter shows you how to use Tizen Web APIs to develop the following types of features: 
Calendar 
Contact 
Messaging 
Multimedia 
NFC 
Calendar 
The Calendar API allows you to manage events and tasks in a calendar. 
A calendar is a collection of events or tasks, depending on the calendar type. Each event and task has 
a series of attributes, such as purpose, starting time, and duration. 
The events and tasks are identified using the 
CalendarItemId
type definition, which is either a 
CalendarTaskId
(for tasks) or 
CalendarEventId
(for events). In recurring events, the 
CalendarEventId
contains a recurrence ID (RID) in addition to the actual event ID for separately 
identifying each occurrence of the event. 
The Calendar API uses the 
TZDate
object of the Time API, rather than the standard JavaScript 
Date
object, to handle difficult issues related to the time zone, because the 
TZDate
object handles exact 
time and provides various utility methods. 
Note: 
Due to time zones and daylight saving time, an event for "today" can actually occur in the past or in 
the future. 
Calendar API Main Features 
The main features of the Calendar API include: 
Calendar management 
To access a calendar item, you must first retrieve the 
Calendar
object of the applicable type. To 
access the device calendars, you can use: 
The 
getDefaultCalendar()
method of the 
CalendarManager
interface to retrieve the 
default calendar 
The 
getCalendars()
method to retrieve all the available calendars as an array 
The 
getUnifiedCalendar()
method of the 
CalendarManager
interface to retrieve the 
special calendar which combines events and tasks from all calendars of the same type 
Calendar item management 
You can manage calendar items (add a new item to a calendar or manage a single calendar event) 
using the applicable methods of the 
Calendar
interface. 
VB.NET Create PDF Library SDK to convert PDF from other file
Batch create adobe PDF document from multiple forms in VB.NET. Create fillable PDF document with fields in Visual Basic .NET application.
add fillable fields to pdf; best pdf form filler
C# PDF Text Box Edit Library: add, delete, update PDF text box in
Able to create a fillable and editable text box to PDF Since RasterEdge XDoc.PDF SDK is based on .NET framework ASP.NET web service and Windows Forms for any
convert word to pdf fillable form online; converting a word document to pdf fillable form
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
45|Page
To update or delete a single instance of a recurring event, first get the list of event instances with 
the 
expandRecurrence()
method of the 
CalendarEvent:CalendarItem
object. Then, 
delete the applicable event instance, or update it by calling the 
update()
method with the 
updateAllInstances
parameter set to 
false
You can create and manage multiple calendar items simultaneously using the applicable batch 
methods: 
addBatch()
updateBatch()
, and 
removeBatch()
. The batch mode provides 
faster, optimized processing of multiple calendar items. 
When searching for calendar items, you can create attribute filters, attribute range filters, and 
composite filters based on specific filter attributes. You can also sort the search results. 
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. 
Calendar item alarms 
You can set an alarm for an important event (for example, a monthly meeting) or a specific task 
(for example, paying a utility bill), by using the 
CalendarAlarm
interface. The alarm is triggered 
at the specified time to remind the user of the event or task. 
Calendar change notifications 
You can keep the calendar in your application synchronized with user-specific calendars, such as 
a calendar on a social networking Web site, by receiving notifications in your application when 
calendar items have been changed. 
The 
addChangeListener()
method of the 
Calendar
interface registers an event listener, 
which starts asynchronously when the 
addChangeListener()
method returns the subscription 
identifier for the listener. You can use the 
CalendarChangeCallback
interface to define listener 
event handlers for receiving the notifications. 
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 
calendar event is treated as one event. 
iCalendar 2.0 format conversions 
You can convert the calendar items to the iCalendar format or back using the 
CalendarEvent
object constructor and the 
convertToString()
method of the 
CalendarItem
interface, 
respectively. 
The conversion allows you to exchange calendar data between applications by sharing files with 
the 
.ics
extension. The iCalendar format is independent of the underlying transport protocol, 
meaning that calendar items can be exchanged using a variety of protocols, including HTTP, 
SMTP, and Infrared. 
The iCalendar format can be used to store calendar item information and exchange calendar data 
over the Internet. 
The following example shows a sample event in the iCalendar format: 
BEGIN: VCALENDAR 
BEGIN: VEVENT 
DTSTART: 20110714T150000Z 
DTEND: 20110715T173000Z 
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
46|Page
SUMMARY: Team meeting 
END: VEVENT 
END: VCALENDAR 
For more information about the Calendar API, see the Tizen Calendar API Reference
Adding an Event to a Calendar 
To add an event to the default system calendar: 
1.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface. Specify the calendar type 
“EVENT” 
as a parameter. 
var calendar = tizen.calendar.getDefaultCalendar("EVENT"); 
2.  Create a 
CalendarEvent
object and define the event properties: 
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", 
3.  To create a recurring event, define a recurrence rule. In this example, the event repeats once a 
day for three days. 
recurrenceRule: new tizen.CalendarRecurrenceRule("DAILY", 
{occurrenceCount: 3}) 
}); 
4.  To set up an alarm to remind about this event, create an alarm with the 
CalendarAlarm
interface, 
and add the alarm to the event: 
/* Alarm is triggered with sound 30 minutes before the event's start 
time */ 
var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration 
(30, "MINS"), "SOUND"); 
ev.alarms = [alarm]; 
5.  Add the 
CalendarEvent
object to the default calendar with the 
add()
method of the 
Calendar
object: 
calendar.add(ev);  /* ev.id attribute is generated */ 
Note: 
You can add a task item the same way as described above using the 
"TASK"
calendar type and the 
CalendarTask
constructor. 
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
47|Page
Adding Events to a Calendar in Batch Mode 
To add multiple events to the default system calendar in batch mode: 
1.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface: 
var calendar = tizen.calendar.getDefaultCalendar("EVENT"); 
2.  Define the items to be added as an array: 
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" 
}); 
Note: 
To keep the example as simple as possible, the array below contains only one event. 
Note: 
The 
addBatch()
method is asynchronous. Normally, synchronous callbacks should be used to react 
to its success or failure. 
3.  Use the 
addBatch()
method of the 
Calendar
object to add the events in the array to the 
calendar: 
calendar.addBatch([ev]); 
Managing the Event 
To manage a single calendar event: 
1.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface. Specify the calendar type 
“EVENT” 
as a parameter. 
var myCalendar = tizen.calendar.getDefaultCalendar("EVENT"); 
2.  Retrieve all events stored in the calendar by using the 
find()
method of the 
Calendar
object: 
myCalendar.find(eventSearchSuccessCallback) 
Note: 
To retrieve a specific set of events, you can specify a filter and sorting order for the search operation 
through the 
filter
and 
sortMode
parameters. 
Note: 
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
48|Page
In this example, all the events are retrieved because no filter is used. 
3.  Update or delete the found event inside the 
eventSearchSuccessCallback
event handler. 
In this example, the description parameter of the first event is changed and the event is updated in 
the calendar using the 
update()
method. The second event is deleted using the 
remove()
method. 
/* Define the event success callback */ 
function eventSearchSuccessCallback(events) 
/* Update the first existing event */ 
events[0].description = "New Description"; 
myCalendar.update(events[0]); 
/* Delete the second existing event */ 
myCalendar.remove(events[1].id); 
Managing Multiple Calendar Events in Batch Mode 
To manage multiple calendar events in batch mode: 
1.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface. Specify the calendar type 
“EVENT” 
as a parameter. 
var myCalendar = tizen.calendar.getDefaultCalendar("EVENT"); 
2.  Retrieve all events stored in the calendar by using the 
find()
method of the 
Calendar
object: 
myCalendar.find(eventSearchSuccessCallback); 
Note: 
To retrieve a specific set of events, you can specify a filter and sorting order for the search operation 
through the 
filter
and 
sortMode
parameters. 
Note: 
In this example, all the events are retrieved because no filter is used. 
3.  To update events: 
a.  Define the items to be updated in the success event handler of the 
find()
method: 
function eventSearchSuccessCallback(events) 
events[0].description = "New Description 1"; 
events[1].description = "New Description 2"; 
b.  Use the 
updateBatch()
method to update multiple calendar items asynchronously: 
/* Update the first 2 existing events */ 
myCalendar.updateBatch(events.slice(0, 2)); 
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
49|Page
4.  To delete events, use the 
removeBatch()
method in the success event handler of the 
find()
method to delete multiple calendar items asynchronously: 
function eventSearchSuccessCallback(events) 
/* Delete the first 2 existing events */ 
myCalendar.removeBatch([events[0].id, events[1].id]); 
Updating a Recurring Calendar Event 
To update a recurring calendar event: 
1.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface. Retrieve the calendar event using the 
get()
method by specifying 
the event ID. 
var calendar = tizen.calendar.getDefaultCalendar("EVENT"); 
var event = calendar.get(evId); 
2.  Expand the recurring event to get its instances by using the 
expandRecurrence()
method of 
the 
CalendarEvent
object: 
event.expandRecurrence(new tizen.TZDate(2012, 2, 1), 
new tizen.TZDate(2012, 2, 15), 
eventExpandSuccessCB); 
The expanded event instances have their own 
id.uid
and 
id.rid
attributes, where the 
id.uid
attribute is the same for all instances. 
3.  Update a single instance of the expanded recurring event. 
In case of recurring events, you can use the second parameter of the 
update()
method to 
determine, whether a single instance or all occurrences of the event are updated. If the parameter 
is set to 
true
, all instances are updated, while if it is set to 
false
, only the indicated instance of 
the recurring event is updated (based on the 
id.rid
attribute). 
In this example, the second instance of the event is updated. 
/* Success event handler */ 
function eventExpandSuccessCB(events) 
events[1].summary = 'updated summary'; 
calendar.update(events[1], false); 
Receiving Notifications on Calendar Changes 
To receive notifications when calendar items are added, updated, or removed: 
1.  Define the needed variables: 
/* Watcher identifier */ 
var watcherId = 0; 
/* This example assumes that the calendar is initialized */ 
var calendar; 
Tizen Web Application Development for Beginners 
Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code 
Examples contained herein are licensed under BSD-3-Clause
For details, see the Content License.
50|Page
2.  Define the event handlers for different notifications using the 
CalendarChangeCallback
listener 
interface: 
var watcher = 
/* When new items are added */ 
onitemsadded: function(items) 
console.log(items.length + " items were added"); 
}, 
/* When items are updated */ 
onitemsupdated: function(items) 
console.log(items.length + " items were updated"); 
}, 
/* When items are deleted */ 
onitemsremoved: function(ids) 
console.log(ids.length + " items were removed"); 
}; 
3.  Register the listener to use the defined event handlers: 
watcherId = calendar.addChangeListener(watcher); 
4.  To stop the notifications, use the 
removeChangeListener()
method: 
function cancelWatch() 
calendar.removeChangeListener(watcherId); 
Converting Calendar Items 
The following examples show you how to make calendar item exchange more efficient in your 
application by converting calendar events to and from the iCalendar format: 
To convert an iCalendar string to a calendar event: 
a.  Retrieve the default system calendar using the 
getDefaultCalendar()
method of the 
CalendarManager
interface. Specify the calendar type 
“EVENT” 
as a parameter. 
var calendar = tizen.calendar.getDefaultCalendar("EVENT"); 
b.  Create a new 
CalendarEvent
object from the iCalendar string and add it to the default 
calendar: 
try 
var ev = new tizen.CalendarEvent 
("BEGIN:VCALENDAR\r\n" + 
"BEGIN:VEVENT\r\n" + 
"DTSTAMP:19970901T1300Z\r\n" + 
"DTSTART:19970903T163000Z\r\n" + 
"DTEND:19970903T190000Z\r\n" + 
"SUMMARY:Annual Employee Review\r\n" + 
Documents you may be interested
Documents you may be interested