Overview

This article is part 2 of a two-part series that demonstrates the Dashboard pattern. The Dashboard sample application is based on the Tizen WebUI framework template generated by Tizen Web IDE.
The application demonstrates the design of dashboard form for Tizen applications using the Tizen widgets.

Note: This article explains about how to design a dashboard application and does not contain functionality of calculations and updation of real-time data, etc.

Main Screen

The application home page contains an unordered list view displaying the required data as a list of items. Each list item can display an icon, numeric or text in a particular style or alignment.

<ul data-role="listview">
  <li id="ui-li-item1"><a href="#"><img
      src="./WebContent/images/icon.png" class="ui-li-bigicon" />Appleseed,
      Inc <span class="ui-li-text-sub">Visits today</span></a></li>

  <li id="ui-li-subitem1" class="ui-li-has-multiline ui-li-text-color"><a
    href="#"><t class="ui-li-text-green">Unique</t> <span
      class="ui-li-text-sub">2,892</span>
      <div data-role="button" data-inline="true" data-style="nobg">6,472</div></a></li>

  <li id="ui-li-item2"><a href="#"><img
      src="./WebContent/images/icon.png" class="ui-li-bigicon" />johnappleseed
      <span class="ui-li-text-sub"> Followers</span></a></li>
  <li id="ui-li-subitem2" class="ui-li-has-multiline ui-li-text-color"><a
    href="#"><t class="ui-li-text-lightblue">Thinking about
      getting drinks later, anyone around?</t>
      <div data-role="button" data-inline="true" data-style="nobg">5,381</div></a></li>

  <li id="ui-li-item3"><a href="#"><img
      src="./WebContent/images/icon.png" class="ui-li-bigicon" />Biz
      Podcast <span class="ui-li-text-sub"> 2,375</span></a></li>

  <li id="ui-li-item4"><a href="#"><img
      src="./WebContent/images/icon.png" class="ui-li-bigicon" />john.blog
      <span class="ui-li-text-sub">This Year</span></a></li>
  <li id="ui-li-subitem3" class="ui-li-has-multiline ui-li-text-color"><a
    href="#"><t class="ui-li-text-orange">Visits</t> <span
      class="ui-li-text-sub">9,996</span>
      <div data-role="button" data-inline="true" data-style="nobg">13,918</div></a></li>

  <li id="ui-li-item5"><a href="#"><img
      src="./WebContent/images/icon.png" class="ui-li-bigicon" />jappleseed
      <span class="ui-li-text-sub">Plays this week</span></a></li>
  <li id="ui-li-subitem4" class="ui-li-has-multiline ui-li-text-color"><a
    href="#"><t class="ui-li-text-cyan">Likes/Comments</t> <span
      class="ui-li-text-sub">173/22</span>
      <div data-role="button" data-inline="true" data-style="nobg">4,905</div></a></li>
</ul>

Javascript:

The javascript code present in the init function handles the back button. An event listener is added to receive the tizen harware key press. Upon receiving the key press, application can be closed.

// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
  if(e.keyName == "back")
    tizen.application.getCurrentApplication().exit();
});

CSS

CSS styles applied to the list items in order to differentiate the items using various colors.

.ui-li-sub-cust-li-text {
  display: block;
  font-weight: bold;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ui-li-item1 {
  background-color: green;
  color: white;
  border: 2px solid;
  border-radius: 10px;
}

#ui-li-item2 {
  background-color: lightblue;
  color: white;
  border: 2px solid;
  border-radius: 10px;
}

#ui-li-item3 {
  background-color: pink;
  color: white;
  border: 2px solid;
  border-radius: 10px;
}

#ui-li-item4 {
  background-color: orange;
  color: white;
  border: 2px solid;
  border-radius: 10px;
}

#ui-li-item5 {
  background-color: cyan;
  color: white;
  border: 1px solid;
  border-radius: 10px;
}

#ui-li-subitem1,#ui-li-subitem2,#ui-li-subitem3,#ui-li-subitem4 {
  background-color: white;
  font-color: black;
}

/*  setting font and color for text in second line  */
.ui-li-sub-cust-li-text2 {
  font-size: 26px;
  color: cyan;
}

/*  setting font and color for text in right*/
.ui-li-text-green,.ui-li-text-lightblue,.ui-li-text-orange,.ui-li-text-cyan
  {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-li-text-green {
  color: green;
}

.ui-li-text-lightblue {
  color: blue;
}

.ui-li-text-orange {
  color: orange;
}

.ui-li-text-cyan {
  color: cyan;
}