Tizen可穿戴平台上的基本JavaScript / HTML页面
[英]Basic JavaScript/HTML page on Tizen Wearable platform
问题描述
I'm trying to make a simple page for the Gear 2 (running Tizen OS). 
我正在尝试为Gear 2（运行Tizen OS）制作一个简单的页面。 In this page, the user can scroll up or down to see different meds, then can swipe left to see a screen asking to confirm the med as taken. 在此页面中，用户可以向上或向下滚动以查看不同的药物，然后可以向左滑动以查看询问确认药物是否服用的屏幕。 I've taken some sample Tizen OS code and cobbled it together to try to achieve this, but it's not working as desired - it's just displaying all 4 text elements, one right after the other. 我已经获取了一些示例Tizen OS代码并将其拼凑在一起以尝试实现此目的，但是它并不能按需工作-它仅显示所有4个文本元素，一个紧挨着另一个。 I am very new to HTML and JavaScript so I'm sure I'm making some simple mistakes. 我是HTML和JavaScript的新手，所以我确定自己犯了一些简单的错误。
index.html 的index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</div>
</section>
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/tau/js/widget/virtuallist.js"></script>
<script src="app.js"></script>
</html>
app.js app.js
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName == "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
} );
} () );
(function() {
var page = document.getElementById( "main" ),
changer = document.getElementById( "barsectionchanger" ),
sectionChanger, idx=1;
page.addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar"
});
});
page.addEventListener( "pagehide", function() {
sectionChanger.destroy();
});
})();
(function() {
var underlayarray = document.getElementsByClassName( "barcontainer" ),
changerarray = document.getElementsByClassName( "hsectionchanger" ),
sectionChanger, idx=1;
for (i = 0; i < underlayarray.length; i++){
underlayarray[i].addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
});
}
})();
Any insight into potential problems is appreciated. 任何对潜在问题的见解都值得赞赏。 Thanks 谢谢
1 个解决方案
解决方案1
1 2014-11-18 15:51:04
Construction of SectionChanger widget not allow to put one widget instance inside another. SectionChanger窗口小部件的构造不允许将一个窗口小部件实例放入另一个窗口中。
You should create another layout off aplliaction. 您应该在裁缝之外创建另一个布局。 For example you can use horizontal section changer on main level and vertical scrolled content in each section. 例如，您可以在主要级别上使用水平部分更改器，并在每个部分中使用垂直滚动内容。
I fixed your code and now all section changers built correctly, but still are problems with working of widget. 我修复了您的代码，现在所有部分更改器均已正确构建，但是仍然无法使用小部件。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<div>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</section>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script>( function () {
window.addEventListener('tizenhwkey', function (ev) {
if (ev.keyName == "back") {
var page = document.getElementsByClassName('ui-page-active')[0],
pageid = page ? page.id : "";
if (pageid === "main") {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
});
}() );
(function () {
var page = document.getElementById("main"),
changer = document.getElementById("barsectionchanger"),
sectionChanger, idx = 1;
page.addEventListener("pageshow", function () {
var changerarray = document.getElementsByClassName("hsectionchanger"),
i;
tau.widget.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar",
items: changer.firstElementChild.children
});
for (i = 0; i < changerarray.length; i++) {
tau.widget.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
}
});
page.addEventListener("pagehide", function () {
sectionChanger.destroy();
});
})();
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.