From 2b2aafa38a8e7b5bc70099c0e323c048fc1eff80 Mon Sep 17 00:00:00 2001 From: Heeju Joo Date: Tue, 15 Dec 2015 17:52:57 +0900 Subject: [PATCH] [TAU] add extra-support guide for circular profile - add new document pages in UI practice TAU Change-Id: I0592ce737e2915b4ac4d3595fd794bc51fd37ad4 Signed-off-by: Heeju Joo --- .../html/images/rectangular_scrollbar.png | Bin 0 -> 9154 bytes .../html/images/round_scrollbar.png | Bin 0 -> 15889 bytes .../html/web/tau/circular_ui_ww.htm | 8 + .../html/web/tau/scrollbar_ww.htm | 113 ++++++ .../html/web/tau/tau_rotary_ww.htm | 379 +++++++++++++++++++++ 5 files changed, 500 insertions(+) create mode 100644 org.tizen.ui.practices/html/images/rectangular_scrollbar.png create mode 100644 org.tizen.ui.practices/html/images/round_scrollbar.png create mode 100644 org.tizen.ui.practices/html/web/tau/scrollbar_ww.htm create mode 100644 org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm diff --git a/org.tizen.ui.practices/html/images/rectangular_scrollbar.png b/org.tizen.ui.practices/html/images/rectangular_scrollbar.png new file mode 100644 index 0000000000000000000000000000000000000000..6e5db6bd20f338563ae959b32d4d7ba8d0fdea79 GIT binary patch literal 9154 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

Y#ao6{P=Mc?UQ)f;5)-0 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 Wklt^!8VZNE5e=2w%9TpyVgCatDR?gc literal 0 HcmV?d00001 diff --git a/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm index 3a26cb5..63a8281 100644 --- a/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm +++ b/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm @@ -149,6 +149,14 @@ else Description + Circle-shaped Scroll Bar + Shows how to support circular scroll bar style. + + + Using Rotary Event with TAU + Shows how to support "rotarydetent" event in TAU Application. + + Helper Script Shows how to support some application components. diff --git a/org.tizen.ui.practices/html/web/tau/scrollbar_ww.htm b/org.tizen.ui.practices/html/web/tau/scrollbar_ww.htm new file mode 100644 index 0000000..8d0be72 --- /dev/null +++ b/org.tizen.ui.practices/html/web/tau/scrollbar_ww.htm @@ -0,0 +1,113 @@ + + + + + + + + + + + + + Applying Circular Scroll Bar + + + + + +

Applying Circular Scroll Bar

+ +

With TAU, you can use scroll bar of web engine. If you want to scroll an element, set an attributes "overflow-y" in scrollable <div> element.

Basically, shape of scroll bar is "BAR" type. But we recommend that using "CIRCULAR BAR" type scroll bar in Circular Devices.

To set circular-bar type scroll bar, "tizen-circular-scrollbar" attribute is used.

+
+

This feature is supported in wearable applications only.

+ +

The following figure shows the scroll bar in a rectangular and circular UI.

Figure: Scroll Bar in rectangular and circular devices

Scroll Bar in a rectangular device Scroll Bar in a circular device

+ +

Applying with TAU library

Using TAU library, you can define page with <div> element using "ui-page" class. In circular UI, When TAU page created, it create <div> element with "ui-scroller" and it can be scrolled.

To apply circular bar type scroll bar:

+(function(tau) {
+    var page,
+      elScroller,
+      headerHelper;
+
+   if (tau.support.shape.circle) {
+      document.addEventListener("pagebeforeshow", function (e) {
+         page = e.target;
+         elScroller = page.querySelector(".ui-scroller");
+
+         if (elScroller) {
+            elScroller.setAttribute("tizen-circular-scrollbar", "");
+         }
+      });
+
+      document.addEventListener("pagebeforehide", function (e) {
+
+         if(elScroller) {
+            elScroller.removeAttribute("tizen-circular-scrollbar");
+         }
+      });
+   }
+}(tau));
+

+ +

Applying without TAU library

When writing code without TAU library, please set "tizen-circular-scrollbar" when scroller element loaded.

To apply circular bar type scroll bar:

+ +

+ <div class="page" style="height:100%;overflow:hidden;">
+   <div class="content" style="width:100%;height:100%;overflow-y:auto;">
+      <!-- fill contents -->
+   </div>
+</div>
+<script>
+window.onload = function () {
+    var scroller = document.querySelector(".content");
+    
+    if(scroller) {
+        scroller.setAttribute("tizen-circular-scrollbar", "");
+    }
+};
+</script>
+

+ + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm b/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm new file mode 100644 index 0000000..7bf5d45 --- /dev/null +++ b/org.tizen.ui.practices/html/web/tau/tau_rotary_ww.htm @@ -0,0 +1,379 @@ + + + + + + + + + + + + + Using Rotary Event with TAU + + + + +

Using Rotary Event with TAU

The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor.
+Some UI Components can be interactive with this event. For Example, Application Page, CircleProgressBar +and SectionChanger, etc can be controlled with Rotary Event.
+You can implement some rotary dependent behaviors with following example code.

+ +

This feature is supported in wearable applications only.

+ +

Rotary Event

+ + +

Figure: Rotary device and direction of interaction

Rotary device

Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.

+ + + + + + + + + + + + + + + +

Table: Rotary events
Type	Description	Attribute
rotarydetent	Event is triggered when a device detects the detent point.	detail.direction: rotation direction + CW for clockwise rotation direction + CCW for counter-clockwise rotation direction

+ +

Page/Popup Scrolling with Rotary Event

Contents area in Page or Popup can be scrolled with Rotary Event. To attach rotary event, just query scrollable DOM.

To implement this, refer following example:

+ +

+<!-- HTML -->
+<div class="ui-page ui-page-active" id="main">
+   <header class="ui-header">
+      <h2 class="ui-title">TAU Basic</h2>
+   </header>
+   <div class="ui-content content-padding">
+      <a href="#popup" data-rel="popup">Open Popup</a>
+      <!-- Fill contents -->
+   </div>
+   <!-- popoup -->
+   <div id="popup" class="ui-popup">
+      <div class="ui-popup-content">
+         <!-- Fill contents -->
+      </div>
+      <div class="ui-popup-footer ui-bottom-button">
+         <a id="1btnPopup-cancel" href="#" class="ui-btn" data-rel="back">Check</a>
+      </div>
+   </div>
+</div>
+
+<!-- Script -->
+<script>
+   (function() {
+      var SCROLL_STEP = 50,                           // distance of moving scroll for each rotary event
+            page = document.getElementById("main");   // query with page id
+
+      page.addEventListener("popupshow", function popupOpenHandler(e) {
+         var popup = e.target,   // popup element
+               scroller = popup.querySelector(".ui-popup-wrapper"),   // element that has scroll
+
+         // rotary event handler
+               rotaryEventHandler = function(e) {
+                  if (e.detail.direction === "CW") { // Right direction
+                     scroller.scrollTop += SCROLL_STEP;
+                  } else if (e.detail.direction === "CCW") { // Left direction
+                     scroller.scrollTop -= SCROLL_STEP;
+                  }
+               };
+
+         // register rotary event when popup is shown.
+         document.addEventListener("rotarydetent", rotaryEventHandler, false);
+
+         // unregister rotary event when popup is hidden
+         popup.addEventListener("popuphide", function popupHideHandler() {
+            popup.removeEventListener("popuphide", popupHideHandler, false);
+            document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+         }, false);
+
+      }, false);
+      page.addEventListener("pagebeforeshow", function pageScrollHandler(e) {
+         var page = e.target;
+         elScroller = page.querySelector(".ui-scroller");
+
+         // 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 rotary event when popup is shown.
+         document.addEventListener("rotarydetent", rotaryEventHandler, false);
+
+         // unregister rotary event when popup is hidden
+         page.addEventListener("pagebeforehide", function pageHideHanlder() {
+            page.removeEventListener("pagebeforehide", pageHideHanlder, false);
+            document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+         }, false);
+
+      }, false);
+   }());
+</script>
+

Controlling SnapListView with Rotary Event

SnapListView component can be also scrolled with Rotary Event.

To implement this, refer following example:

+<!-- HTML -->
+<div class="ui-page ui-page-active" id="main">
+   <div class="ui-content">
+      <ul class="ui-listview">
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+         <li>SnapListview</li>
+      </ul>
+   </div>
+</div>
+
+<!-- Script -->
+<script>
+   (function(tau) {
+      var list,
+         snapListviewWidget,
+         
+         rotarydetentHandler = function(e) {
+            var selectedIndex = snapListviewWidget.getSelectedIndex(),
+                 direction = e.detail.direction;
+         
+            if (direction === "CW" && selectedIndex !== null) {
+               snapListviewWidget.scrollToPosition(++selectedIndex);
+            } else if (direction === "CCW" && selectedIndex !== null) {
+               snapListviewWidget.scrollToPosition(--selectedIndex);
+            }
+         };
+   
+      if (tau.support.shape.circle) {
+         document.addEventListener("pagebeforeshow", function () {
+            list = document.getElementById("snapList");
+            snapListviewWidget = tau.widget.SnapListview(list);
+            window.addEventListener("rotarydetent", rotarydetentHandler);
+         });
+   
+         document.addEventListener("pagebeforehide", function (e) {
+            if (list) {
+               snapListviewWidget.destroy();
+               window.removeEventListener("rotarydetent", rotarydetentHandler);
+            }
+         });
+      }
+   }(tau));
+</script>
+

Changing index of SectionChanger with Rotary Event

Sections of SectionChanger component can be changed with Rotary Event.

To implement this, refer following example:

+<!-- HTML -->
+<div id="main" class="ui-page">
+   <header class="ui-header">
+      <h2 class="ui-title">SectionChanger</h2>
+   </header>
+   <div id="hsectionchanger" class="ui-content">
+      <!-- section changer has only one child. -->
+      <div>
+         <section class="section" style="text-align:center" >
+            <h3> LEFT2 PAGE </h3>
+         </section>
+         <section class="section" style="text-align:center">
+            <h3> LEFT1 PAGE </h3>
+         </section>
+         <section class="section" class="ui-section-active" style="text-align:center">
+            <h3> MAIN PAGE </h3>
+         </section>
+         <section class="section" style="text-align:center">
+            <h3> RIGHT1 PAGE </h3>
+         </section>
+         <section class="section" style="text-align:center">
+            <h3> RIGHT2 PAGE </h3>
+         </section>
+      </div>
+   </div>
+</div>
+
+<!-- Script -->
+<script>
+(function(tau) {
+   var changer,
+      sectionChangerWidget,
+      sections,
+      sectionsLength;
+      
+      rotarydetentHandler = function(event) {
+         var direction = event.detail.direction,
+            activeSection;
+         
+          activeSection = sectionChangerWidget.getActiveSectionIndex();
+            
+             if (direction === "CW") { // right direction
+                 if (activeSection < sectionsLength-1) {
+                    sectionChangerWidget.setActiveSection(activeSection + 1, 30);
+                 }
+             } else if (direction === "CCW") { // left direction
+                 if (activeSection > 0) {
+                    sectionChangerWidget.setActiveSection(activeSection - 1, 30);
+                 }
+             }
+      };   
+     
+   if (tau.support.shape.circle) {
+      document.addEventListener("pagebeforeshow", function () {
+         changer = document.getElementById("hsectionchanger");
+         sectionChangerWidget = tau.widget.SectionChanger(changer, {
+            circular: false,
+            orientation: "horizontal",
+            useBouncingEffect: false
+         });
+         sections = changer.querySelectorAll(".section");
+           sectionsLength = sections.length;
+
+         document.addEventListener("rotarydetent", rotarydetentHandler);
+      });
+      
+      document.addEventListener("pagebeforehide", function (e) {
+         sectionChangerWidget.destroy();
+         document.removeEventListener("rotarydetent", rotarydetentHandler);
+      });
+   }
+}(tau));
+</script>
+

Changing value of CircleProgressBar with Rotary Event

Value of CircleProgressBar component can be changed with Rotary Event.

To implement this, refer following example:

+<!-- HTML -->
+<div class="ui-page" id="pageRotaryEvent" data-enable-page-scroll="false">
+   <header class="ui-header">
+      <h2 class="ui-title">Rotary Event</h2>
+   </header>
+   <div class="ui-content">
+      <div id="result"></div>
+   </div>
+   <progress class="ui-circle-progress" id="circleprogress" max="100" value="20"></progress>
+</div>
+
+<!-- Script -->
+<script>
+(function(){
+   var progressBar,
+      progressBarWidget,
+      resultDiv,
+      value,
+      direction,
+      rotaryDetentHandler = function(e) {
+         // Get rotary direction
+         direction = e.detail.direction;
+
+         if (direction === "CW") {
+            // Right direction
+            if (parseInt(progressBarWidget.value(), 10) < 100) {
+               value = parseInt(progressBarWidget.value(), 10) + 1;
+            } else {
+               value = 100;
+            }
+         } else if (direction === "CCW") {
+            // Left direction
+            if (parseInt(progressBarWidget.value(), 10) > 0) {
+               value = parseInt(progressBarWidget.value(), 10) - 1;
+            } else {
+               value = 0;
+            }
+         }
+
+         resultDiv.innerText = value + "%";
+         progressBarWidget.value(value);
+      };
+
+   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);
+   });
+
+   document.addEventListener("pagehide", function() {
+      progressBarWidget.destroy();
+      document.removeEventListener("rotarydetent", rotaryDetentHandler);
+   });
+}());
+</script>
+

+ + + + + +

+ +

+ + + + + + + \ No newline at end of file -- 2.7.4