Colored List View

From 3952c592a775cd699ef664c7245f3ea0a3f6f972 Mon Sep 17 00:00:00 2001 From: "hagun.kim" Date: Tue, 14 Jul 2015 17:40:40 +0900 Subject: [PATCH] [TAU] add documens for new feature of TAU components Change-Id: I4a1da70bbf10d8c4fc910325a8fb4bdcd7ddd740 Signed-off-by: hagun.kim --- org.tizen.web.apireference/html/index.htm | 4 + .../Mobile_UIComponents/mobile_ColoredListview.htm | 82 ++++++ .../Mobile_UIComponents/mobile_FloatingActions.htm | 102 +++++++ .../Mobile_UIComponents/mobile_GridView.htm | 297 +++++++++++++++++++++ .../Mobile_UIComponents/mobile_PanelChanger.htm | 268 +++++++++++++++++++ .../Mobile_UIComponents/widget_reference.htm | 16 +- 6 files changed, 761 insertions(+), 8 deletions(-) create mode 100644 org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm create mode 100644 org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_FloatingActions.htm create mode 100644 org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_GridView.htm create mode 100644 org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PanelChanger.htm diff --git a/org.tizen.web.apireference/html/index.htm b/org.tizen.web.apireference/html/index.htm index c967c64..4f0bd6f 100644 --- a/org.tizen.web.apireference/html/index.htm +++ b/org.tizen.web.apireference/html/index.htm @@ -171,13 +171,17 @@

Button
Checkbox
ColoredListView
Drawer
DropdownMenu
Expandable
FloatingActions
GridView
IndexScrollBar
Listview
NavigationBar
PageIndicator
PanelChanger
Popup
Progress
Radio

Colored List View

Colored list view provides the list has gradient background color.

You should check if your brower support WebGL since colored list view uses the WebGL technology.

Default selectors
Manual constructor +
Options +

Default selector

By default, all <ul> and <ol> elements with the class="ui-colored-list" or data-role="coloredlistview" attribute are displayed as colored list view components.

Manual Constructor

To manually create a colored list view component, use the component constructor from the tau namespace:

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

+<ul class="ui-colored-list" id="coloredlist">
+   <li class="ui-li-static">Item</li>
+   <li class="ui-li-static">Item</li>
+   <li class="ui-li-static">Item</li>
+</ul>
+<script>
+   var elColoredList = document.getElementById("coloredlist"),
+        coloredList = tau.widget.ColoredListview(elColoredList);
+</script>
+

Options

Option	Input type	Default value	Description
data-colored-listview-number	number	15	the number of list items to be applied colored list view

Where to Go Next

Widget Reference

Floating Actions

Floating actions component creates a floating button at the bottom of the screen.

You can move the floating button from left end to right end.

Default selectors
Manual constructor +
Options +

Default selector

By default, all elements with the class="ui-floatingactions" or data-role="floatingactions" attribute are displayed as floating actions components.

Manual Constructor

To manually create a floating actions component, use the component constructor from the tau namespace:

+<div class="ui-floatingactions" id="floating">
+   <button class="ui-floatingactions-item" data-icon="floating-add"/>
+   <button class="ui-floatingactions-item" data-icon="floating-search"/>
+</div>
+<script>
+   var elFloatingActions = document.getElementById("floating"),
+       flaotingActions = tau.widget.FloatingActions(elFloatingActions);
+</script>
+

Options

Option	Input type	Default value	Description
data-from-rgba	string	"rgba(66, 162, 207, 1)"	color when the floating button is positioned at the left end
data-to-rgba	string	"rgba(54, 132, 168, 1)"	color when the floating button is positioned at the right end
data-opacity	number	0.9	opacity when the floating button is clicked
data-duration	number	300	animation duration for color and opacity (unit of time : millisecond)

Where to Go Next

Widget Reference

Grid View

Grid View components provides a list of grid-type and presents contents that are easily identified as images.

You can adjust the number of columns of grid using a pinch gesture. In reorder mode, you can move each item.

Grid view can have labels and set type of the labels.

Default selectors
Manual constructor +
Options +
Methods

Default selector

By default, all ul elements with the class="ui-gridview" or data-role="gridview" attribute are displayed as grid view components.

Manual Constructor

To manually create a grid view component, use the component constructor from the tau namespace:

+<ul id="gridview" class="ui-gridview">
+   <li class="ui-gridview-item">
+      <img class="ui-gridview-image" src="images/1.jpg">
+      <div class="ui-gridview-handler"></div>
+   </li>
+   <li class="ui-gridview-item">
+      <img class="ui-gridview-image" src="images/2.jpg">
+      <div class="ui-gridview-handler"></div>
+   </li>
+   <li class="ui-gridview-item">
+      <img class="ui-gridview-image" src="images/3.jpg">
+      <div class="ui-gridview-handler"></div>
+   </li>
+   <li class="ui-gridview-item">
+      <img class="ui-gridview-image" src="images/4.jpg">
+      <div class="ui-gridview-handler"></div>
+   </li>
+</ul>
+<script>
+   var elGridView = document.getElementById("gridview"),
+       gridView = tau.widget.GridView(elGridView);
+</script>
+

Options

Option	Input type	Default value	Description
data-cols	number	4	the number of columns to be displayed
data-reorder	boolean	false	represents whether grid view is reorder mode
data-label	string	"none"	type of label to be attatched to grid item("none", "in", "out")
data-min-width	number, string	null	minimum width px of grid item(number or "auto")
data-min-cols	number	1	the minimum number of columns
data-max-cols	number	5	the maximum number of columns

Methods

To call method on DropdownMenu, you can refer following:

+var elGridView = document.getElementById("gridview"),
+    gridView = tau.widget.GridView(elGridView),
+    item;
+
+gridView.methodName(methodArgument1, methodArgument2, ...);
+

Summary

Method	Description
+ addItem ( ) +	Add an item to grid view
+ removeItem ( ) +	Remove an item from grid view

addItem

Add an item to grid view

addItem (HTMLElement item)

+ +

Parameters:

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

Parameter	Type	Required / optional	Description
item	HTMLElement	required	element to be added

+ +

Return value:

+ + + No Return Value + +

+ +

Code + example:

+<script>
+var elGridView = document.getElementById("gridview"),
+    gridView = tau.widget.GridView(elGridView),
+    item;
+
+gridView.addItem(item);
+</script>
+

removeItem

Remove an item from grid view

removeItem (HTMLElement item)

+ +

Parameters:

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

Parameter	Type	Required / optional	Description
item	HTMLElement	required	element to be removed

+ +

Return value:

+ + + No Return Value + +

+ +

Code + example:

+<script>
+var elGridView = document.getElementById("gridview"),
+    gridView = tau.widget.GridView(elGridView),
+    item;
+
+gridView.removeItem(item);
+</script>
+

Where to Go Next

Widget Reference

Panel Changer

To implement multi page layout in a page component, you can use panel and panel changer components.

Panel can have header, content and so on like the page component.

It works even if the panel components is in other HTML files.

Panel changer component controls lifecycle of the panels.

Default selectors
Manual constructor +
HTML Examples
Options +
Methods +
Events +

Default Selectors

By default, all elements with the class="ui-panel-changer" or data-role="panel-changer" attribute are displayed as panel changer components.

Panel components use the data-role="panel" or class="ui-panel".

Manual Constructor

For manual creation of panel changer, you can use constructor from tau namespace:

+var elPanelChanger = document.getElementById("panelchanger"),
+     panelChanger = tau.widget.PanelChanger(elPanelChanger);
+

HTML Examples

Panels in another HTML file panel.html

+<div id="panel2" class="ui-panel">
+   <div class="ui-content">
+      <ul class="ui-listview">
+         <li class="ui-li-anchor">
+            <a href="#panel3">Go Panel 3</a>
+         </li>
+      </ul>
+   </div>
+</div>
+<div id="panel3" class="ui-panel">
+   <div class="ui-content">
+      <ul class="ui-listview">
+         <li class="ui-li-anchor">
+            <a>Panel3</a>
+         </li>
+      </ul>
+   </div>
+</div>
+

Panel changer and main panel in your HTML file

+<div id="panelChanger" class="ui-panel-changer">
+   <div id="mainpanel" class="ui-panel">
+      <ul class="ui-listview">
+         <li class="ui-li-anchor">
+            <a href="./panel.html#panel2">Go Panel 2</a>
+         </li>
+      </ul>
+   </div>
+</div>
+

Options

Option	Input type	Default value	Description
data-manage-history	boolean	true	represent whether to manage history of panels

Methods

Summary

Method	Description
+ changePanel ( String address, String animationType, String direction ) +	Change panel method

changePanel

change panel

changePanel ( String address, String animationType, String direction)

+ +

Parameters:

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

Parameter	Type	Description
address	String	path of a panel to be changed
animationType	String	animation type of panel changing
direction	String	represent panel history goes forward or backward.

+ +

Return value:

+ + + No Return Value + +

+ +

Events

Name	Description
panelbeforecreate	Triggered before the new panel component is created and initialized.
panelcreate	Triggered after the new panel component creation.
panelbeforeshow	Triggered before the new panel is displayed.
panelshow	Triggered after the new panel is displayed.
panelbeforehide	Triggered before the current panel is about to be closed.
panelhide	Triggered after the current panel is hidden.
panelchange	Triggered after switching from the current panel to the new panel.

Where to Go Next

Widget Reference

Colored List View + Colored list view provides the list has gradient background color. 2.4 @@ -62,14 +62,14 @@ - Floating Actions - +

Floating Actions

Grid View

Panel Changer

Colored List View

Table of Contents

Default selector

Manual Constructor

Options

Where to Go Next

Floating Actions

Table of Contents

Default selector

Manual Constructor

Options

Where to Go Next

Grid View

Table of Contents

Default selector

Manual Constructor

Options

Methods

Summary

Where to Go Next

Panel Changer

Table of Contents

Default Selectors

Manual Constructor

HTML Examples

Options

Methods

Summary

Events

Where to Go Next