Applications for Circular UI
PUBLISHED
TAU supports different types of wearable devices (rectangular and circular) in the same application. To support a circular UI along with a rectangular UI, a media query is required.
This feature is supported in wearable applications only.
Applying the Circular UI
To support the circular UI:
- Include the
link
element for the latesttau.css
file into the<head>
element in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of the TAU library. - Include the
link
element for the latesttau.circle.css
file with the media query feature (-tizen-geometric-shape: circle
) next to thelink
element for thetau.css
. Note that adding thetau.circle.css
file following the generaltau.css
file covers the additional circular UI. - Include the
link
element for the latesttau.js
script file at the end of<body>
element in HTML. - For writing a separate code for a circular UI in JavaScript, you can use the
tau.support.shape.circle
property for detecting the circular device.
<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"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script type="text/javascript" src="tau.js"></script> <script> if (tau.support.shape.circle) { /* Implement your code for circular UI */ } else { /* Implement your code for rectangular UI */ } </script> </body>
The following figure shows how the media query -tizen-geometric-shape: circle
works in a rectangular and circular UI.
Figure: Media query on rectangular and circular devices
Overriding the Circular CSS Style with a Media Query
For some styles to be applied selectively, you can use the -tizen-geometric-shape
media query feature with a rectangle
or circle
value to distinguish the type difference. Note that the -tizen-geometric-shape
feature is only available on Tizen devices.
Table: -tizen-geometric-shape
feature description
-tizen-geometric-shape | |
---|---|
Value | rectangle | circle |
Applied to | Visual media types |
Accept min/max prefixes | No |
.className { /* Implement the basic CSS style for all types of devices (rectangular and circular) */ } @media screen and (-tizen-geometric-shape: circle) { .className { /* Implement the CSS style to be overridden in circular */ } }
Writing JavaScript Selectively for the Circular UI
TAU provides the tau.support.shape.circle
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 true
when the tau.circle.css
file is loaded.
if (tau.support.shape.circle) { /* Implement your code for circular UI */ } else { /* Implement your code for rectangular UI */ }
Supported UI Components
The following components can be used on both rectangular and circular devices.
Table: UI components supported by a rectangular and circular UI
Component | Description |
---|---|
Rotary Events [1] | Shows how to support the "rotarydetent" event. |
Helper Script [2] | Shows how to support some application components. |
Snap List [3] | Shows how to create a snap list component. |
Expandable Header [4] | Shows how to create a header component. |
Circle-shaped Progress Bar [5] | Shows how to create a circle progress bar component. |
Full Size Processing Component [6] | Shows how to create a processing component. |
Footer Button [7] | Shows how to create a footer button component. |
Thumbnail [8] | Shows how to create a thumbnail component. |
Popup Button [9] | Shows how to create a popup component. |
Index Scroll Bar [10] | Shows how to create an index scroll bar component. |
More Options [11] | Shows how to create a more options button component. |