CODEWITHSUNDEEP
javascripthtmltizentizen-wearable-sdk
Landon
Landon

Reputation: 484

Basic JavaScript/HTML page on Tizen Wearable platform

I'm trying to make a simple page for the Gear 2 (running 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. I am very new to HTML and JavaScript so I'm sure I'm making some simple mistakes.

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

( 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

Upvotes: 2

Views: 2624

Answers (1)

Maciek Urbanski
Maciek Urbanski

Reputation: 73

Construction of SectionChanger widget not allow to put one widget instance inside another.

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>

Upvotes: 1

Related Questions