概述

本文是演示仪表盘模式（Dashboard pattern）的第2部分。 仪表盘示例应用程序基于使用Tizen Web IDE生成的Tizen WebUI框架模板。
该应用程序演示了如何使用Tizen窗体小部件为Tizen应用程序设计仪表盘。

注：本文介绍了如何设计仪表板应用程序，但不包含诸如计算器和实时数据更新等功能。

主屏幕

该应用程序主页包含一个无序列表视图，将所需要的数据显示为列表项。 每个表项可以按照某个特定风格或对齐样式显示一个图标，数字或文本。

<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>

Java脚本

init函数中的java脚本代码用于处理”回退按钮“。 通过添加一个事件监听器（event listener）来捕获Tizen的按钮敲击事件。 一旦捕获到了按钮敲击事件，便会将应用程序关闭。

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

CSS

列表项目使用CSS样式区分使用不同颜色的不同的项。

.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;
}