Add guide for notification .Net 96/151796/4
authorMyungki Lee <mk5004.lee@samsung.com>
Fri, 22 Sep 2017 04:35:13 +0000 (13:35 +0900)
committerMyungki Lee <mk5004.lee@samsung.com>
Mon, 25 Sep 2017 08:38:56 +0000 (17:38 +0900)
PS2: Reviewed.

Change-Id: Ib2eeafd415a32232741380250d5272f2f3a2fe88
Signed-off-by: Myungki Lee <mk5004.lee@samsung.com>
org.tizen.guides/html/dotnet/notification/noti_n.htm [new file with mode: 0644]

diff --git a/org.tizen.guides/html/dotnet/notification/noti_n.htm b/org.tizen.guides/html/dotnet/notification/noti_n.htm
new file mode 100644 (file)
index 0000000..57613af
--- /dev/null
@@ -0,0 +1,465 @@
+<!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>Notifications</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Dependencies</p>
+               <ul class="toc">
+                       <li>Tizen 4.0 and Higher</li>
+               </ul>
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#type">Notification Display Types</a></li>
+                       <li><a href="#prerequisites">Prerequisites</a></li>
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a href="#create">Creating a Notification</a></li>
+                                       <li><a href="#attribute">Setting Notification Attributes</a></li>
+                                       <li><a href="#accessory">Setting Accessory Options</a></li>
+                                       <li><a href="#style">Setting Notification Styles</a></li>
+                               </ul>
+                       </li>
+                       <li>Management
+                               <ul class="toc">
+                                       <li><a href="#post">Posting a Notification</a></li>
+                                       <li><a href="#update">Updating Notification Content</a></li>
+                                       <li><a href="#delete">Deleting a Notification</a></li>
+                               </ul>
+                       </li>
+                       <li><a href="#progress">Displaying the Progress Bar</a></li>
+                       <li><a href="#template">Using a Notification Template</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="https://developer.tizen.org/dev-guide/csapi/namespaceTizen_1_1Applications_1_1Notifications.html">Tizen.Applications.Notifications Namespace</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Notifications</h1>
+<p>An application can use notifications to keep the user informed of important information.</p>
+
+<p>The main features of the Tizen.Applications.Notifications namespace include:</p>
+<ul>
+       <li>Creating a notification
+       <p>You can <a href="#create">create a notification</a>.</p></li>
+       <li>Configuring the notification
+       <ul>
+       <li>You can <a href="#attribute">set notification attributes</a>, such as the notification title, content, timestamp, and various property options.</li>
+       <li>You can <a href="#accessory">set accessory options</a> for a notification to control how the device sound, vibration, and LED feedback respond to the notification.</li>
+       <li>You can <a href="#style">set styles</a> for a notification, changing its <a href="#type">display type</a> and adding features, such as icons and background images.</li>
+       </ul></li>
+       <li>Posting a notification
+       <p>You can <a href="#post">post a notification</a> using the <code>Post()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class.</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 an ongoing notification</a> using the <code>Update()</code> method of the <code>Tizen.Applications.Notifications.NotificationManager</code> class.</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
+       <ul>
+       <li>You can <a href="#progress">display and update the progress bar</a> for an ongoing notification.</li>
+       <li>You can <a href="#template">create a template</a> that can be reused in multiple notifications.</li>
+       </ul></li>
+</ul>
+
+<h2 id="type">Notification Display Types</h2>
+<p>Tizen provides notifications by using a combination of any of the following notification display types:</p>
+
+<ul>
+<li>Quick panel</li>
+<li>Active notification</li>
+<li>Indicator</li>
+<li>Lock screen</li>
+<li>Status message</li>
+</ul>
+
+<p>The notification display type determines where and how the notification message is displayed.</p>
+
+<h3 id="quick_panel">Quick Panel Notifications</h3>
+
+<p>The display area for quick panel notifications can be one of the following:</p>
+<ul><li>Notification area
+<p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>
+<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 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">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 align="center"><strong>Figure: Active notification</strong></p>
+   <p align="center"><img alt="Active notification" src="../../images/active_notification_2.png" /></p>
+
+<h3 id="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 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">Lock Screen Notifications</h3>
+<p>You can display a notification on the lock screen. The notification content can be displayed or hidden.</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">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 align="center"><strong>Figure: Status message</strong></p>
+   <p align="center"><img alt="Status message" src="../../images/status_message.png" /></p>
+
+<h2 id="prerequisites">Prerequisites</h2>
+
+<p>To enable your application to use the notification functionality:</p>
+
+<ol>
+<li>To use notifications, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
+<pre class="prettyprint">
+&lt;privileges&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
+&lt;/privileges&gt;
+</pre>
+</li>
+<li>To use the methods and properties of the <a href="https://developer.tizen.org/dev-guide/csapi/namespaceTizen_1_1Applications_1_1Notifications.html">Tizen.Applications.Notifications</a> namespace, include it in your application:
+<pre class="prettyprint">
+using Tizen.Applications.Notifications;
+</pre>
+</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">
+DirectoryInfo info = Application.Current.DirectoryInfo;
+String imagePath;
+String sharedPath = info.SharedData;
+
+imagePath = sharedPath + "imageName.png";
+</pre>
+</li></ol>
+
+
+<h2 id="create">Creating a Notification</h2>
+<p>To create a notification, create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification.html">Tizen.Applications.Notifications.Notification</a> class:</p>
+<pre class="prettyprint">
+Notification noti = new Notification();
+</pre>
+
+<h2 id="attribute">Setting Notification Attributes</h2>
+<p>To set notification attributes, such as title, content, icon, and timestamp, set the corresponding properties of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification.html">Tizen.Applications.Notifications.Notification</a> class instance:</p>
+<pre class="prettyprint">
+Notification noti = new Notification
+{
+    Title = "Title",
+    Content = "Content",
+    Icon = imagePath,
+    Count = 2,
+    Tag = "tag",
+    TimeStamp = time,
+    Property = DisableAppLaunch
+};
+</pre>
+
+<h2 id="accessory">Setting Accessory Options</h2>
+<p>You can set accessory options for a notification to control how the device sound, vibration, and LED react to the notification being activated. Any options you do not set use the default values instead.</p>
+<p>To set accessory options:</p>
+<ol>
+       <li>Create an accessory set for the notification as a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1AccessorySet.html">Tizen.Applications.Notifications.Notification.AccessorySet</a> class:
+<pre class="prettyprint">
+Notification.AccessorySet accessory = new Notification.AccessorySet();
+</pre>
+       </li>
+       <li>Set the properties of the <code>Tizen.Applications.Notifications.Notification.AccessorySet</code> instance.
+       <p>The available <code>SoundOption</code> and <code>LedOption</code> property values are defined in the <a href="https://developer.tizen.org/dev-guide/csapi/namespaceTizen_1_1Applications_1_1Notifications.html#a8382d0e9399a416b8a4064c6c5c2ad3e">Tizen.Applications.Notifications.AccessoryOption</a> enumeration.</p>
+<pre class="prettyprint">
+accessory.SoundOption = Notifications.AccessoryOption.Custom;
+accessory.SoundPath = soundPath;
+accessory.CanVibrate = true;
+accessory.LedOption = Notifications.AccessoryOption.On;
+accessory.LedOnMillisecond = 100;
+accessory.LedOffMillisecond = 100;
+</pre>
+       </li>
+       <li>To have your notification use the modified values, set the <code>Tizen.Applications.Notifications.Notification.AccessorySet</code> instance as the <code>Accessory</code> property of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification.html">Tizen.Applications.Notifications.Notification</a> class instance:
+<pre class="prettyprint">
+noti.Accessory = accessory;
+</pre>
+       </li>
+</ol>
+
+<h2 id="style">Setting Notification Styles</h2>
+<p>You can set a style for your notification to change how the notification is displayed, including changing the display type or icon. A single notification can only have 1 style set for it.</p>
+<p>To add styles to your notification:</p>
+
+<ul>
+<li>To create an active notification:
+       <ol>
+               <li>Create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1ActiveStyle.html">Tizen.Applications.Notifications.Notification.ActiveStyle</a> class and set its properties:
+<pre class="prettyprint">
+Notification.ActiveStyle style = new Notification.ActiveStyle();
+style.IsAutoRemove = false;
+style.BackgroundImage = backgroundImage;
+</pre>
+               </li>
+               <li>Optionally, you can add buttons or a reply field to an active notification.
+                       <ul>
+                               <li>To add buttons:
+                                       <ol>
+                                               <li>To add a button, create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1ButtonAction.html">Tizen.Applications.Notifications.Notification.ButtonAction</a> class. You can add up to 3 buttons into a single active notification.
+<pre class="prettyprint">
+Notification.ButtonAction button = new Notification.ButtonAction();
+button.Index = Notifications.ButtonIndex.First;
+button.Text = "Reply";
+button.ImagePath = imagePath;
+</pre>
+                                               </li>
+                                               <li>To create an application control to handle the results of clicking a button, create an instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1AppControl.html">Tizen.Applications.AppControl</a> class and link it to the button by setting it as the <code>Action</code> property of the <code>Tizen.Applications.Notifications.Notification.ButtonAction</code> class instance:
+<pre class="prettyprint">
+AppControl appcontrol = new AppControl();
+appcontrol.ApplicationId = "org.tizen.test.tpk";
+
+button.Action = appcontrol;
+</pre>
+                                               </li>
+                                               <li>To add the button to the <code>Tizen.Applications.Notifications.Notification.ActiveStyle</code> instance, use the <code>AddButtonAction()</code> method:
+<pre class="prettyprint">
+style.AddButtonAction(button);
+</pre>
+                                               </li>
+                                       </ol>
+                               </li>
+                               <li>To add a reply field and button:
+                                       <ol>
+                                               <li>To add a reply field for the user to reply to a notification, create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1ReplyAction.html">Tizen.Applications.Notifications.Notification.ReplyAction</a> class and set its properties:
+<pre class="prettyprint">
+Notification.ReplyAction action = new Notification.ReplyAction();
+action.ParentIndex = Notifications.ButtonIndex.First;
+action.ReplyMax = 160;
+action.PlaceHolderText = "Send";
+</pre>
+                                               </li>
+                                               <li>The reply field requires a button for the user to send the completed reply with, and the button in turn requires an application control to handle the results of clicking the button. Create the application control as an instance of the <code>Tizen.Applications.AppControl</code> class, and the button as an instance of the <code>Tizen.Applications.Notifications.Notification.ButtonAction</code> class:
+<pre class="prettyprint">
+AppControl appcontrol = new AppControl();
+appcontrol.ApplicationId = "org.tizen.test.tpk";
+
+Notification.ButtonAction button = new Notification.ButtonAction();
+button.Index = Notifications.ButtonIndex.First;
+button.Text = "Reply";
+button.ImagePath = imagePath;
+button.Action = appcontrol;
+</pre>
+                                               </li>
+                                               <li>To link the button with the reply field, add it as the <code>Button</code> property of the <code>Tizen.Applications.Notifications.Notification.ReplyAction</code> class instance:
+<pre class="prettyprint">
+action.Button = button;
+</pre>
+                                               </li>
+                                               <li>To add the reply field to the style instance, add it as the <code>ReplyAction</code> property of the <code>Tizen.Applications.Notifications.Notification.ActiveStyle</code> class instance:
+<pre class="prettyprint">
+style.ReplyAction = action;
+</pre>
+                                               </li>
+                                       </ol>
+                               </li>
+                       </ul>
+               </li>
+               <li>Apply the new style to your notification by using the <code>AddStyle()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification.html">Tizen.Applications.Notifications.Notification</a> class:
+<pre class="prettyprint">
+noti.AddStyle(style);
+</pre>
+               </li>
+       </ol>
+</li>
+
+<li>To create an indicator type notification:
+       <ol>
+               <li>Create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1IndicatorStyle.html">Tizen.Applications.Notifications.Notification.IndicatorStyle</a> class and set its properties:
+<pre class="prettyprint">
+Notification.IndicatorStyle style = new Notification.IndicatorStyle();
+style.IconPath = iconPath;
+style.SubText = "SubText";
+</pre>
+               </li>
+               <li>Apply the new style to your notification by using the <code>AddStyle()</code> method of the <code>Tizen.Applications.Notifications.Notification</code> class:
+<pre class="prettyprint">
+noti.AddStyle(style);
+</pre>
+               </li>
+       </ol>
+</li>
+
+<li>To create a lock screen notification:
+       <ol>
+               <li>Create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1LockStyle.html">Tizen.Applications.Notifications.Notification.LockStyle</a> class and set its properties:
+<pre class="prettyprint">
+Notification.LockStyle style = new Notification.LockStyle();
+style.IconPath = iconPath;
+style.ThumbnailPath = thumbnailPath;
+</pre>
+               </li>
+               <li>Apply the new style to your notification by using the <code>AddStyle()</code> method of the <code>Tizen.Applications.Notifications.Notification</code> class:
+<pre class="prettyprint">
+noti.AddStyle(style);
+</pre>
+               </li>
+       </ol>
+</li></ul>
+
+
+<h2 id="post">Posting a Notification</h2>
+<p>To post a notification to the database, use the <code>Post()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class:</p>
+<pre class="prettyprint">
+NotificationManager.Post(noti);
+</pre>
+
+<h2 id="update">Updating Notification Content</h2>
+<p>To update the content of a notification, use the <code>Update()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class. The method works for ongoing notifications only.</p>
+<pre class="prettyprint">
+NotificationManager.Update(noti);
+</pre>
+
+<h2 id="delete">Deleting a Notification</h2>
+<p>To delete a notification from the database, use the <code>Delete()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class:</p>
+<pre class="prettyprint">
+NotificationManager.Delete(noti);
+</pre>
+
+<h2 id="progress">Displaying the Progress Bar</h2>
+<p>To display the progress bar and update the progress data:</p>
+
+<ol>
+       <li>To create a notification with a progress bar, create a new instance of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification_1_1ProgressType.html">Tizen.Applications.Notifications.Notification.ProgressType</a> class. To be able to retrieve the notification handle and update the progress data later, set a notification tag with the <code>Tag</code> property of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1Notification.html">Tizen.Applications.Notifications.Notification</a> class.
+<pre class="prettyprint">
+Notification.ProgressType progress = new Notification.ProgressType(Notifications.ProgressCategory.Percent, 0.0, 100.0);
+noti.Progress = progress;
+noti.Tag = "tag";
+</pre>
+       </li>
+       <li>To update the progress bar, retrieve the notification with its tag by using the <code>Load()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class, and update the notification:
+<pre class="prettyprint">
+Notification noti = NotificationManager.Load("tag");
+noti.Progress.ProgressCurrent = 10.0;
+</pre>
+       </li>
+</ol>
+
+<h2 id="template">Using a Notification Template</h2>
+<p>To create a template from an existing notification, and reuse that template later to quickly create other notifications with the same pattern:</p>
+
+<ul>
+       <li>To create a template:
+               <ol>
+                       <li>Create a notification as usual.
+                       <p>The following example creates an active notification with 2 buttons (<strong>Accept</strong> and <strong>Cancel</strong>), a background image, and sound, LED, and vibration feedback:</p>
+
+<pre class="prettyprint">
+Notification noti = new Notification
+{
+    Title = "Notification",
+    Content = "Content",
+    Icon = imagePath
+};
+
+Notification.AccessorySet accessory = new Notification.AccessorySet
+{
+    SoundOption = Notifications.AccessoryOption.Custom,
+    SoundPath = soundPath,
+    CanVibrate = true,
+    LedOption = Notifications.AccessoryOption.On,
+    LedOnMillisecond = 100,
+    LedOffMillisecond = 100
+};
+noti.Accessory = accessory;
+
+Notification.ActiveStyle style = new Notification.ActiveStyle
+{
+    IsAutoRemove = true,
+    BackgroundImage = backgroundImagePath
+};
+
+AppControl firstAppControl = new AppControl
+{
+    ApplicationId = "org.tizen.test.tpk"
+};
+
+Notification.ButtonAction button1 = new Notification.ButtonAction
+{
+    Index = Notifications.ButtonIndex.First,
+    Text = "Accept",
+    ImagePath = imagePath,
+    Action = firstAppControl
+};
+
+AppControl secondAppControl = new AppControl
+{
+    ApplicationId = "org.tizen.test.tpk"
+};
+
+Notification.ButtonAction button2 = new Notification.ButtonAction
+{
+    Index = Notifications.ButtonIndex.Second,
+    Text = "Cancel",
+    ImagePath = imagePath,
+    Action = secondAppControl
+};
+
+style.AddButtonAction(button1);
+style.AddButtonAction(button2);
+
+noti.AddStyle(style);
+</pre>
+                       </li>
+                       <li>Save the notification instance as a template and define a name for the template, using the <code>SaveTemplate()</code> method of the <a href="https://developer.tizen.org/dev-guide/csapi/classTizen_1_1Applications_1_1Notifications_1_1NotificationManager.html">Tizen.Applications.Notifications.NotificationManager</a> class:
+<pre class="prettyprint">
+NotificationManager.SaveTemplate(noti, "CALL_ACCEPT");
+</pre>
+                       </li>
+               </ol>
+       </li>
+       <li>To use the template when creating a new notification, call the <code>LoadTemplate()</code> method:
+<pre class="prettyprint">
+Notification loadNotification = NotificationManager.LoadTemplate("CALL_ACCEPT");
+</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>