【译】Fuse入门（六）

本节讲了TextInput、ScollView、NativeViewHost、GraphicsView和WebView这些UI组件

官网原文：https://www.fusetools.com/learn/fuse#textinput

文本输入框 TextInput

Fuse提供一个TextInput控制用来输入文本：

<JavaScript>
    var valueChanged = function (args) {
        console.log(args.value);
    }

    module.exports = {
        valueChanged: valueChanged
    };
</JavaScript>

<TextInput ValueChanged="{valueChanged}" />

数据绑定也可以是双向的，如下所示：

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var name = Observable("");

        var greeting = name.map(function (name) {
            if (name == "") {
                return "Type your name above";
            } else {
                return "Hello there, " + name + "!";
            }
        });

        var clearName = function () {
            name.value = "";
        }

        module.exports = {
            name: name,
            greeting: greeting,
            clearName: clearName
        };
    </JavaScript>

    <StackPanel>
        <StatusBarBackground />
        <DockPanel>
            <Text Dock="Left" Alignment="VerticalCenter">Name:</Text>
            <TextInput Value="{name}" Alignment="VerticalCenter" />
        </DockPanel>
        <Text TextAlignment="Center" Value="{greeting}" />
        <Button Clicked="{clearName}" Text="Clear" />
    </StackPanel>
</App>

密码输入框：

<TextInput IsPassword="true" />

数字输入框：

<TextInput InputHint="Number" />

有效的InputHint属性值为Default、Email、Number、Phone和Url。InputHint有时会根据设定改变不同输入法，有时并不强制什么，主要看App运行在哪个平台上。比如，在桌面系统，不管该属性设为何值，都是一样的键盘输入。

TextInput的IsMultiline属性缺省为true, 这样输入的文字会自动换行。

<TextInput IsMultiline="true" />

有时，你还可以关闭文本输入，就是不可编辑：

<TextInput IsReadOnly="true" />

一般来说当进入文本输入框时，手持设备会显示屏幕软键盘，Fuse有许多机制去响应该事件，其中之一就是WhileKeyboardVisible:

<Text Value="Instructions of some kind">
    <WhileKeyboardVisible>
        <Move Y="-1" RelativeTo="Keyboard" />
    </WhileKeyboardVisible>
</Text>
<TextInput />

如上例所示，WhileKeyboardVisible可以设定在任一元素内，当激活文本输入框，触发键盘弹出事件，该元素会做任何你安排的动作。

只读的RenderValue属性包含的是实际绘制的字符串。举例来说，当IsPassword设为true时，RenderValue包含的就是掩饰后的密码（如：******）。

样式化文本输入框 Styling TextInput

CaretColor用来设置插入符的颜色：

<TextInput CaretColor="#ff0000" />

SelectionColor用来设置选择区的颜色：

<TextInput SelectionColor="#00ffaa" />

PlaceholderText用来设置文本输入框缺省显示的文字：

<TextInput PlaceholderText="My placeholder text" />

占位字符还可以设置单独的颜色：

<TextInput PlaceholderText="My placeholder text" PlaceholderColor="#eee" />

滚动视图 ScrollView

当内容大于可用显示面积时，Fuse可以设置滚动视图用于浏览内容。

<ScrollView>
    <Panel Width="2000" Height="2000" />
</ScrollView>

需要限制滚动方向，请设置AllowedScrollDirection:

<ScrollView AllowedScrollDirections="Horizontal">
    <!-- Contents -->
</ScrollView>

该标记的有效值包括Horizontal、Both和Vertical(缺省值)。

滚动动画 ScrollingAnimation

根据滚动视图的绝对位置，我们可以给某些元素设计一些动画，比如当向上滚动时，让一个抬头慢慢消失，如下所示：

<App Theme="Basic" Background="#fff">
    <Panel>
        <Panel Alignment="Top" Height="50" ux:Name="ledge">
            <Text Alignment="Center" TextAlignment="Center" TextColor="#fff" Value="TopLedge" />
            <Rectangle  Fill="#000" />
        </Panel>
        <ScrollView>
            <ScrollingAnimation From="0" To="50">
                <Change ledge.Opacity="0" />
            </ScrollingAnimation>
            <StackPanel>
                <!-- Block out the top ledge in the scrollview -->
                <Panel Height="50" />
                <!-- ... Content ... -->
            </StackPanel>
        </ScrollView>
    </Panel>
</App>

原生主视图 NativeViewHost

有些视图只有原生组件能用，显然只能应用于Native Theme，怎样才能在GraphicsTheme下结合原生与定制的组件呢？ 答案是NativeViewHost, 下面是一个在NativeViewHost里加入WebView的例子：

<App Theme="Basic">
    <Panel>
        <NativeViewHost>
            <WebView Url="http://interwebs.com" />
        </NativeViewHost>
    </Panel>
</App>

注意，凡是加在NativeViewHost中的视图，都是渲染在其它GraphicsTheme内容之前(上）的，所以在你决定使用深度和渲染顺序时，要将此特点考虑进去。（例如：像 BringToFront和SendToBack这些可能会表现异常。）

不想出现此类情况的话，讲定制组件和视图加到一个原生主题中。

GraphicsView

与NativeViewHost相反的是GraphicsView, 它可以将Fuse视图加到一个使用原生主题的App中。

<App Theme="Native">
    <StackPanel>
        <Button Text="I'm a Native button!" />
        <GraphicsView>
            <Button Text="I'm a Fuse button!" />
        </GraphicsView>
    </StackPanel>
</App>

再次强调，当使用NativeViewHost时，混合原生视图和Fuse视图会导致深度顺序的行为异常。

WebView

Fuse给安卓和iOS提供一个原生WebView组件用于显示网络内容，由于是原生的，所以在套用GraphicsTheme主题时，请用NativeViewHost包住WebViwe。

WebView可以通过Http协议呈现网络内容，结合一些实用的触发器，比如这些：PageBeginLoading、WhilePageLoading和PageLoaded，就可定制浏览体验。导航触发器GoBack和GoForward可以作为WebView专用触发器Reload和LoadUrl的补充。 另外WebView还能用于ProgressAnimation。

特别值得一提是EvaluateJS触发器, 它可以在WebView的环境下运行任何JavaScript代码，然后返回数据到Fuse:

<App Theme="Native" Background="#333">
    <JavaScript>
            module.exports = {
                onPageLoaded : function(res) {
                    console.log("WebView arrived at "+ JSON.parse(res.json).url);
            }
        };
    </JavaScript>
    <DockPanel>
        <StatusBarBackground Dock="Top"/>

        <WebView Dock="Fill" Url="http://www.google.com">
            <PageLoaded>
                <EvaluateJS Handler="{onPageLoaded}">
                    var result = {
                        url : document.location.href
                    };
                    return result;
                </EvaluateJS>
            </PageLoaded>
        </WebView>

        <BottomBarBackground Dock="Bottom" />
    </DockPanel>
</App>