an-introduction-to-hvml-en.md


<div v-if="Math.random() > 0.5">
  Now you see "{{ name }}"
</div>
<div v-else>
  Now you don't
</div>
<!DOCTYPE hvml>
<hvml target="void">

    $STREAM.stdout.writelines('Hello, world!')

</hvml>
Hello, world!
$STREAM.stdout.writelines('Hello, world!')
<!DOCTYPE hvml>

<!-- $REQUEST contains the startup options -->
<hvml target="$REQUEST.target">
  <body>

    <!--
        $SYSTEM.locale returns the current system locale like `zh_CN'.
        This statement loads a JSON file which defined the map of
        localization messages, like:
        {
            "Hello, world!": "世界，您好！"
        }
    -->
    <update on="$T.map" from="messages/$SYSTEM.locale" to="merge" />

    <!--
        This statement defines an operation set, which output
        an HTML fragment.

        An operation set of HVML is similiar to a function or a closure
        in other languages.
    -->
    <define as="output_html">
        <h1>HVML</h1>
        <p>$?</p>
    </define>

    <!--
        This statement defines an operation set, which output
        a text line to STDOUT.
    -->
    <define as="output_void">
        <inherit>
            $STREAM.stdout.writelines($?)
        </inherit>
    </define>

    <!--
        This statement includes one of the operation sets defined above
        according to the value of `target` attribute of `hvml` element,
        and pass the result returned by `$T.get('Hello, world!')`.
    -->
    <include with=${output_$HVML.target} on="$T.get('Hello, world!')" />

  </body>
</hvml>
<html>
  <body>
        <h1>HVML</h1>
        <p>世界，您好！</p>
  </body>
</html>
世界，您好！
<!DOCTYPE hvml>
<hvml target="html" lang="en">
    <head>
        <init as="users">
            [
                { "id": "1", "avatar": "/img/avatars/1.png", "name": "Tom", "region": "en_US" },
                { "id": "2", "avatar": "/img/avatars/2.png", "name": "Jerry", "region": "zh_CN" }
            ]
        </init>

        <update on="$TIMERS" to="displace">
            [
                { "id" : "foo", "interval" : 500,  "active" : "yes" },
                { "id" : "bar", "interval" : 1000, "active" : "no" },
            ]
        </update>

        <init as="systemStatus" with=$STREAM.open('unix:///var/tmp/hibus.sock','default','hiBus') >
    </head>

    <body>
        <archetype name="user_item">
            <li class="user-item" id="user-$?.id" data-value="$?.id" data-region="$?.region">
                <img class="avatar" src="$?.avatar" data-value="$?.id" />
                <span>$?.name</span>
            </li>
        </archetype>

        <archedata name="item_user">
            {
                "id": "$?.attr.data-value", "avatar": "$?.content[0].attr.src",
                "name": "$?.children[1].textContent", "region": "$?.attr.data-region"
            },
        </archedata>

        <header id="theStatusBar">
            <img class="mobile-status" src="" />
            <span class="mobile-operator"></span>
            <img class="wifi-status" src="" />
            <span class="local-time">12:00</span>
            <img class="battery-status" />>
        </header>

        <ul class="user-list">
            <iterate on="$users" by="CLASS: IUser">
                <update on="$@" to="append" with="$user_item" />
                <except on="NoData">
                    <img src="wait.png" />
                </except>
                <except on="StopIteration">
                    <p>Bad user data!</p>
                </except>
            </iterate>
        </ul>

        <archetype name="footer_cn">
            <p><a href="http://www.baidu.com">Baidu</a></p>
        </archetype>

        <archetype name="footer_tw">
            <p><a href="http://www.bing.com">Bing</a></p>
        </archetype>

        <archetype name="footer_def">
            <p><a href="http://www.google.com">Google</a></p>
        </archetype>

        <footer id="the-footer">
            <test on="$_SYSTEM.locale" in='the-footer'>
                <match for="AS 'zh_CN'" exclusively>
                    <update on="$@" to="displace" with="$footer_cn" />
                </match>
                <match for="AS 'zh_TW'" exclusively>
                    <update on="$@" to="displace" with="$footer_tw" />
                </match>
                <match for="ANY">
                    <update on="$@" to="displace" with="$footer_def" />
                </match>
                <except on="NoData" raw>
                    <p>You forget to define the $global variable!</p>
                </except>
                <except on="KeyError">
                    <p>Bad global data!</p>
                </except>
                <except on="IdentifierError">
                    <p>Bad archetype data!</p>
                </except>
            </test>
        </footer>

        <observe on="$TIMERS" for="expired:foo" in="#the-header" >
            <update on="> span.local-time" at="textContent" with="$_SYSTEM.time('%H:%m')" />
        </observe>

        <choose on=$systemStatus.subscribe('@localhost/cn.fmsoft.hybridos.settings/powerd/BATTERYCHANGED')>
            <observe on="$databus" for="event:$?" in="#the-header" with=$onBatteryChanged />
                <test on="$?.level" in="#the-header">
                    <match for="GE 100" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-full.png" />
                    </match>
                    <match for="GE 90" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-90.png" />
                    </match>
                    <match for="GE 70" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-70.png" />
                    </match>
                    <match for="GE 50" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-50.png" />
                    </match>
                    <match for="GE 30" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-30.png" />
                    </match>
                    <match for="GE 10" exclusively>
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-10.png" />
                    </match>
                    <match for="ANY">
                        <update on="img.mobile-status" at="attr.src" with="/battery-level-low.png" />
                    </match>
                </test>
            </observe>
        </choose>

        <observe on=".avatar" for="clicked">
            <load on="user.hvml" with="{'id': $@.attr['data-value']}" as="modal" />
        </observe>
    </body>
</hvml>
<ui>
    <label id="path">
        /home
    </label>

    <listbox id="entries">
        <item class="dir">..</item>
        <item class="dir">vincent</item>
        <item class="dir">david</item>
        <item class="file">README.txt</item>
    </listbox>

    <button id="open">
        Open
    </button>
</ui>
<!DOCTYPE hvml>
<hvml target="xml">
    <head>
        <init as="fileInfo">
            {
                "curr_path": "/home/",
                "selected_type": "dir",
                "selected_name": "..",
            }
        </init>
    </head>

    <body>
        <label id="path">
            $fileInfo.curr_path
        </label>

        <archetype name="dir_entry">
            <item class="$?.type">$?.name</item>
        </archetype>

        <define as="fillDirEntries">
            <clear on="$@" />
            <choose on="$?" by="FUNC: DirEntries">
                <iterate on="$?" in="#entries" by="RANGE: 0">
                    <update on="$@" to="append" with="$dir_entry" />
                </iterate>
            </choose>
        </define>

        <listbox id="entries">
            <call on="$fillDirEntries" with="$fileInfo.curr_path" />
        </listbox>

        <button id="open">
            Open
        </button>

        <observe on="#entries" for="selected-item-changed">
            <update on="$fileInfo" at=".selected_type .selected_name" with ["$?.type", "$?.name" ] />
        </observe>

        <observe on="#open" for="click">
            <test on="$fileInfo.selected_type">
                <match for="AS 'dir'" exclusively>
                    <init as="new_path">
                        "$fileInfo.curr_path{$2.name}/"
                    </init>

                    <call on="$fillDirEntries" with="$new_path" in="#entries" />
                    <update on="$fileInfo" at="property.curr_path" with="$new_path" />
                    <update on="#path" at="textContent" with="$new_path" />
                </match>
                <match for="AS 'file'" exclusively>
                    <exit with="$fileInfo">
                </match>
            </test>
        </observe>
    </body>
</hvml>
    {
        "type": "dir",
        "name": "david",
    }
    [
        { "type": "dir", "name": "david" },
        { "type": "dir", "name": "vincent" },
        { "type": "file", "name": "README.txt" },
    ]
    <init as="direntries" from="lcmd:///bin/ls" via="GET" with="{ "cmdLine": "ls $fileInfo.curr_path" }" temp>
        <iterate on="$?" in="#entries" by="RANGE: 0">
            <update on="$@" to="append" with="$dir_entry" />
        </iterate>
    </init>
    <choose on=$FS.opendir($fileInfo.curr_path) >
        <iterate on=$? with=$?.read() >
            <update on="$@" to="append" with="$dir_entry" />
        </iterate>
    </choose>
<!DOCTYPE hvml>
<hvml target="html" script="python">
    <head>
        <connect at="tcp://foo.bar/bracelet" as="braceletInfo" for="MQTT">

        <update on="$TIMERS" to="displace">
            [
                { "id" : "clock", "interval" : 1000, "active" : "yes" },
            ]
        </update>

        <link rel="stylesheet" type="text/css" href="/foo/bar/bracelet.css">
    </head>

    <body>
        <div class="clock" id="clock">
            <observe on="$TIMERS" for="expired:clock">
                <update on="#clock" at="textContent" with="$_SYSTEM.time('%H:%m')" />
            </observe>
        </div>

        <div class="temperature" id="temperature">
            <observe on="$braceletInfo" for="temperature">
                <update on="#temperature" at="textContent" with="$?.value ℃" />
            </observe>
        </div>

        <div class="heartbeat" id="heartbeat">
            <observe on="$braceletInfo" for="heartbeat">
                <update on="#heartbeat" at="textContent" with="$?.value BPM" />
            </observe>
        </div>

        <div class="steps" id="steps">
            <observe on="$braceletInfo" for="steps">
                <update on="#steps" at="textContent" with="$?.value" />
            </observe>
        </div>

        <observe on="$braceletInfo">
            <choose on="$?" by="CLASS: CDumpEvent" />
        </observe>
    </body>
</hvml>