UI Components

UI组件

Fuse附带了许多可用于构建用户界面的UI组件。在UX中，您可以通过将UI组件包含在标记中来添加它们:

<Image File =“MyImage.png”/>
<Rectangle Width =“50”Height =“50”Fill =“#888”/>
<Text> Hello world！</ Text>

注意，只是因为某物被包含在标签中，并不一定意味着它必须是一个UI组件。UX对其他概念也使用标签，例如Triggers和Actions。

Text

这里是一个微小的应用程序，呈现文本:

<App>
    <Text> Hello，world！</ Text>
</ App>

这是伟大的，但当你有更长的文本段落，如Lorem Ipsum，你最有可能想要启用字包装。在Fuse中，这是通过Text控件上的TextWrapping属性来完成的:

<Text TextWrapping =“Wrap”> Lorem Ipsum(...)</ Text>

如果你仍然发现包装文本仍然很难显示你想要的所有内容，你可能想考虑将内容添加到ScrollView或更改FontSize。TextWrapping可以设置为Wrap或NoWrap(默认)。

字体

您可以从包含TrueType字体的ttf文件导入字体。由于字体通常在整个应用程序中引用，因此最好简单地为其创建一个 全局资源。

<App>
    <Font File =“Roboto-Medium.ttf”ux:Global =“Medium”/>
    <Font File =“Roboto-Light.ttf”ux:Global =“Light”/>
    <StackPanel>
        <Text Font =“Light”> Roboto Light </ Text>
        <Text Font =“Medium”> Roboto Medium </ Text>
        <Text Font =“Light”> Roboto Light再次</ Text>
    </ StackPanel>
</ App>

在此示例中，字体位于与相关UX文件相同的目录中。这种导入字体的方式确保字体在整个项目中可用，并且只加载一次。

iOS和Android都支持使用多字节字符集的文本呈现。这意味着emojis在设备上工作精细渲染。

Note！目前有一些问题使用桌面预览呈现多字节字符集。不要惊讶，如果桌面渲染不匹配设备呈现100％。这是一个正在处理的问题。

文本属性

为了进一步控制如何渲染文本，可以设置TextAlignment，TextColor，FontSize和LineSpacing:

<Text TextColor =“#999”>左</ Text>
<Text TextAlignment =“Center”>中心</ Text>
<Text FontSize =“24”TextAlignment =“Right”> Right </ Text>
<Text LineSpacing =“10”>
多
线
</ Text>

在本示例中，第一个文本元素将左对齐，因为这是默认值，并且其颜色设置为中间浅灰色。第二个文本将居中对齐。第三个将右对齐，并具有较大的字体。第四个将跨越两条线，其间有10个空间。TextAlignment'的有效值为Left(默认)，Right和Center`。

Number

虽然文本是在大多数情况下，你可以使用Number来显示一个格式化的数值。
通过“Format”属性指定的格式必须是标准数字格式字符串的形式。

Number当前支持的唯一格式是F，它截断要显示的小数位数。

下面的代码将渲染3.141:

<Number Value =“3.14159265359”Format =“F03”/>

图片

保险丝支持本地显示PNG和JPEG文件(在RGB颜色空间中)。显示图像:

<App>
    <Image File =“FuseLogo.png”/>
</ App>

此代码假定文件FuseLogo.png与UX文件存在于同一目录中。如果你想从互联网加载图像的内容，只需:

<Image Url =“http:// path_to_image”/>

Note！如果你是从web开发人员的背景，你可能习惯于分配一个URL到src属性。虽然Image有一个Source属性，它用于为一个图像分配一个Resource。在这个上下文中，这个“Resource”是一个“HttpImageSource”，但是它是为你自动在封面后面创建的，所以坚持使用Url`-property从网页加载内容。

###来自资源的图像内容

对于其他方法加载图像数据的一个小例子，这里是一个小例子，也使用JavaScript中的数据绑定:

<FileImageSourceux:Key =“pic2”File =“Images / Image2.jpg”/>
<StackPanel>
    <JavaScript>
        module.exports = {
            imageResource:“pic2”，
            url:“http://somewhereontheinternet/Cute-Cat.jpg”
        }}
    </ JavaScript>
    <Image File =“Images / Image1.jpg”/>
    <Image Source =“{DataToResource imageResource}”/>
    <Image Url =“{url}”/>
</ StackPanel>

此代码将显示三个图像堆叠在彼此的顶部。最上面的图像将作为项目的一部分的文件提取。在顶部，我们通过创建一个FileImageSource来引用一个文件，我们使用DataToResource绑定到一个图像。这将从它从JavaScript获取的键查找资源。我们还得到一个图片在网络上的URL并绑定到一个图像'的Url`属性。如果这看起来很复杂，不要担心:我们稍后将更多地看看数据绑定和JavaScript。

###图像颜色

可以通过使用“颜色”属性来对“图像”进行着色。请注意，这将以最可预测的方式影响最接近白色的图像部分。例如:

<Image File =“WhiteIcon.png”Color =“#f00”/>

这将使白色图标变红。

按钮是可点击的控件，它们的外观和感觉从主题。

<App Theme =“Basic”>
    <Button Text =“点击我！ux:Name =“button1”>
        <Clicked>
            <Set button1.Text =“Clicked！” />
        </ Clicked>
    </ Button>
</ App>

这个小例子将创建一个覆盖整个屏幕的“Button”。当您点击它时，其标签将从“点击我！到“点击！”。

在Fuse，几乎任何东西都可以很容易地做可点击(和tappable等)。因此，如果您想为按钮设计自定义的外观和感觉，可以使用任何组件:

<App>
    <Rectangle Fill =“#309”>
        <Clicked>
            <DebugAction Message =“Rectangle got clicked”/>
        </ Clicked>
    </ Rectangle>
</ App>

当您单击矩形时，如果您在预览模式下运行，则“Message”输出将显示在Monitor中。它也将显示在标准设备日志中，或者，如果您从命令行启动预览过程，在标准控制台中。

事件触发器

“Button”也可以接受“Clicked”作为event-trigger:

<App Theme =“Basic”>
    <JavaScript>
        module.exports = {
            buttonClick:function(args){console.log(“Button was clicked”); }}
        }}
    </ JavaScript>
    <Button Text =“点击我！Clicked =“{buttonClick}”/>
</ App>

当你想从事件中驱动业务逻辑时，这是很方便的。

Switch

为了接受开/关式输入，Fuse有一个Switch-control:

<开关/>

要使其对打开响应，您可以使用WhileTrue-trigger:

<App Theme =“Basic”>
    <StackPanel>
        <Switch>
            <WhileTrue>
                <Change rectangle.Width =“160”Duration =“0.5”
                    Easing =“CircularInOut”/>
            </ WhileTrue>
        </ Switch>
        <Rectangle ux:Name =“rectangle”Width =“70”Height =“70”Fill =“#909”/>
    </ StackPanel>
</ App>

要使它处于相反的状态，可以使用WhileFalse或WhileTrue Invert =“true”。

如果你想要“开关”开始被激活:

<Switch Value =“true”/>

Switch发出的事件也可以从JavaScript处理:

<App Theme =“Basic”>
    <JavaScript>
        module.exports = {
            switchChanged:function(args){
                console.log(“Switch value is:”+ args.value);
            }}
        };
    </ JavaScript>
    <StackPanel>
        <Switch Value =“true”ValueChanged =“{switchChanged}”/>
    </ StackPanel>
</ App>

###数据绑定开关

你也可以使用它的’Value属性来数据绑定Switch`:

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

        var switchValue = Observable(false);

        module.exports = {
            switchValue:switchValue，
            enableSwitch:function(){switchValue.value = true; }，
            disableSwitch:function(){switchValue.value = false; }，
            switchChanged:function(args){
                console.log(“Switch value is:”+ args.value);
            }}
        };
    </ JavaScript>
    <StackPanel>
        <Switch Value =“{switchValue}”ValueChanged =“{switchChanged}”/>
        <Grid ColumnCount =“2”>
            <Button Text =“Disable”Clicked =“{disableSwitch}”/>
            <Button Text =“Enable”Clicked =“{enableSwitch}”/>
        </ Grid>
    </ StackPanel>
</ App>

滑块

要显示滑块:

<Slider />

要对正在移动的滑块作出反应，请使用ProgressAnimation。考虑这个代码，它允许你从0到90度旋转Rectangle:

<StackPanel>
    <Slider>
        <ProgressAnimation>
            <Rotate Target =“rectangle”Degrees =“90”/>
        </ ProgressAnimation>
    </ Slider>
    <Rectangle ux:Name =“rectangle”Width =“100”Height =“100”Fill =“#808”/>
</ StackPanel>

你也可以听’ValueChanged`事件:

<App Theme =“Basic”>
    <JavaScript>
        module.exports = {
            sliderValueChanged:function(args)
            {
                console.log(“Value:”+ args.value);
            }}
        };
    </ JavaScript>
    <Slider ValueChanged =“{sliderValueChanged}”/>
</ App>

当将滑块从最左侧移动到最右侧时，控制台将输出0到100之间的浮点数，这是默认的“最小值”和“最大值”。这些属性也可以设置:

<滑块最小值=“4”最大值=“42”/>

###数据绑定滑块

也可以对滑块位置进行数据绑定:

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

        var sliderValue = Observable(42);
        var sliderLabel = sliderValue.map(function(val){
            return“当前位置:”+ val;
        });

        module.exports = {
            sliderValue:sliderValue，
            sliderLabel:sliderLabel
        };
    </ JavaScript>
    <StackPanel>
        <Slider Value =“{sliderValue}”/>
        <Text TextAlignment =“Center”Value =“{sliderLabel}”/>
    </ StackPanel>
</ App>

TextInput和TextEdit

保险丝提供两种不同的控制输入和编辑文本:

• TextInput是一个根据当前Theme装饰的文本编辑器。
• TextEdit是没有视觉装饰的纯文本编辑器，否则等同于TextInput。

在下面的例子中，TextInput和TextEdit可以互换使用:

<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“输入你的名字”;
            } else {
                return“Hello there，”+ name +“！”;
            }}
        });

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

        module.exports = {
            name:name，
            问候:问候，
            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”/>

如果你想接受数值主要，你可以设置一个InputHint:

<TextInput InputHint =“Integer”/>

InputHint的有效值是Default，Email，Integer，Decimal，Phone，Url。这些被称为“提示”，因为他们可能不会做任何事情，这取决于你在哪个平台。例如，当在桌面上时，键盘将是相同的，无论是什么提示添加到TextInput`。

TextInput也允许您通过多行输入内容，而不是向右滚动，默认情况下:

<TextInput IsMultiline =“true”/>

您也可以选择完全停用编辑功能:

<TextInput IsReadOnly =“true”/>

当一个TextInput获得焦点时，它通常会召唤设备的屏幕键盘。Fuse提供了许多机制来响应这个事件，其中一个是WhileKeyboardVisible:

<文本值=“某种说明”>
    <WhileKeyboardVisible>
        <Move Y =“ -  1”RelativeTo =“Keyboard”/>
    </ WhileKeyboardVisible>
</ Text>
<TextInput />

正如你可以看到，WhileKeyboardVisible可以附加到一个任意的元素，你可以做任何你想要的，作为对屏幕键盘占用屏幕上的空间的响应。

只读的“RenderValue”属性给你实际上正在绘制的字符串。例如，如果IsPassword为真，它将包含掩码密码(即••••••)。

Styling TextInput

CaretColor属性允许您更改插入符的颜色:

<TextInput CaretColor =“#ff0000”/>

如果你想改变选择的颜色，SelectionColor使你能做到:

<TextInput SelectionColor =“#00ffaa”/>

如果希望在TextInput为空时显示某个默认字符串，可以添加占位符值

<TextInput PlaceholderText =“我的占位符文本”/>

它也可以有一个单独的颜色

<TextInput PlaceholderText =“我的占位符文本”PlaceholderColor =“#eee”/>

</ ScrollView>

<App Theme =“Basic”Background =“#fff”>
    <Panel >
        <Panel 对齐=“顶部”高度=“50”ux:名称=“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>
                <!-- 阻止在scrollview中的顶部 -->
                <Panel 高度=“50”/>
                <!--  ... Content ...  -->
            </ StackPanel>
        </ ScrollView>
    </ Panel>
</ App>

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

<App Theme =“Native”>
	<StackPanel>
		<Button Text =“我是原生按钮！/>
		<GraphicsView>
			<Button Text =“我是保险丝按钮！/>
		</ GraphicsView>
	</ StackPanel>
</ App>

<App Theme =“Native”Background =“#333”>
	<JavaScript>
			module.exports = {
				onPageLoaded:function(res){
					console.log(“WebView reached at”+ JSON.parse(res.json).url);
			}}
		};
	</ JavaScript>
	<DockPanel>
		<StatusBarBackground Dock =“Top”/>
		<NativeViewHost>
			<WebView Dock =“Fill”Url =“http://www.google.com”>
				<PageLoaded>
					<EvaluateJS Handler =“{onPageLoaded}”>
						var result = {
							url:document.location.href
						};
						返回结果;
					</ EvaluateJS>
				</ PageLoaded>
			</ WebView>
		</ NativeViewHost>
		<BottomBarBackground Dock =“Bottom”/>
	</ DockPanel>
</ App>

<NativeViewHost>
	<WebView>
		<HTML>
			<！[CDATA [
				<h1> Boom！</ h1>
			]]>
		</ HTML>
	</ WebView>
</ NativeViewHost>
<LoadHtml>
	<HTML>
		<！[CDATA [
			<h1> Bang！</ h1>
		]]>
	</ HTML>
</ LoadHtml>

<NativeViewHost>
	<MapView />
</ NativeViewHost>

“Android”:{
	“Geo”:{
		“ApiKey”:“your_key_here”
	}}
}}

<NativeViewHost>
	<MapView>
		<MapMarker Label =“Fuse HQ”Latitude =“59.9115573”Longitude =“10.73888”/>
	</ MapView>
</ NativeViewHost>

<JavaScript>
	var Observable = require(“FuseJS / Observable”);
	exports.markers = Observable({latitude:30.282786，longitude:-97.741736，label:“Austin”});
	exports.onMarkerTapped = function(args)
	{
		console.log(“Marker press:”+ args.label);
	}}
</ JavaScript>
<NativeViewHost>
	<MapView MarkerTapped = {onMarkerTapped}>
		<每个项目= {markers}>
			<MapMarker Latitude =“{latitude}”Longitude =“{longitude}”Label =“{label}”/>
		</ Each>
	</ MapView>
</ NativeViewHost>

<Grid ColumnCount =“2”>
    <Rectangle Width =“100”Height =“100”Fill =“#808”>
        <Clicked>
            <DebugAction Message =“点击左侧”/>
        </ Clicked>
    </ Rectangle>
    <Rectangle Width =“100”Height =“100”Fill =“#808”HitTestMode =“None”>
        <Clicked>
            <DebugAction Message =“点击右键”/>
        </ Clicked>
    </ Rectangle>
</ Grid>

<Panel 宽度=“100”高度=“100”>
        <Image Margin =“ -  100”File =“Pictures / Picture1.jpg”
            StretchMode =“UniformToFill”/>
</ Panel>

<Panel 宽度=“100”高度=“100”ClipToBounds =“true”>
    <Image Margin =“ -  100”File =“Pictures / Picture1.jpg”
        StretchMode =“UniformToFill”/>
</ Panel>

<Panel 不透明度=“0.5” />

<Button Text =“Hello！”>
	<Rectangle Fill =“#931”Layer =“Background”/>
</ Button>

<Panel >
    <Rectangle ZOffset =“1”Color =“Red”/>
    <Rectangle ZOffset =“2”Color =“Blue”/>
</ Panel>

<Rectangle Width =“50”Height =“50”Fill =“#808”>
    <DropShadow />
</ Rectangle>

<Rectangle Width =“50”Height =“50”Fill =“#808”>
    <DropShadow Angle =“90”Distance =“12”Size =“20”Spread =“0.1”/>
</ Rectangle>

<Panel Background =“#000”>
    <Circle Width =“50”Height =“50”Fill =“#808”>
        <DropShadow Distance =“0”Size =“50”Spread =“0.2”Color =“#ff06”/>
    </ Circle>
</ Panel>

<Text Value =“Hello there！”>
    <Blur Ra​​dius =“0.9”/>
</ Text>

<Image File =“Pictures / Picture1.jpg”>
    <去饱和量=“0.4”/>
</ Image>

<Image File =“Pictures / Picture1.jpg”>
    <半色调/>
</ Image>

<Rectangle Width =“50”Height =“50”>
    <Mask File =“Masks / Flower.png”/>
</ Rectangle>