离线下载
PDF版 ePub版

极客学院团队出品 · 更新于 2018-11-28 11:00:42

建立交互

点击启用一个 Button Shape,使用编辑器获取文本框焦点。然后,当页面加载的时,使用页面的 OnPageLoad 事件把焦点放到文本框上。

添加一个 Button Shape 和两个文本框

images

1 添加一个按钮,两个文本框

拖放一个 Button Shape 部件和两个文本框部件到设计区域上。

2 在按钮上编辑文本

在 Button Shape 部件上编辑输入两个单词 Swap Focus。

3 为按钮命名

仍然选择 Button Shape 部件,在“部件交互和注释”窗口将它命名为 Button1。

4 编辑提示文本

选择第一个文本框, 在“属性”选项卡中编辑提示文本读作 Text Field 1。

5 命名为 TextField1

将文本框命名为 TextField1。

禁用第二个文本框

images

1 编辑提示文本

将第二个文本框部件编辑提示文本读作 Text Field 2。

2 禁用 Text Field 2

在“属性”选项卡,单击“禁用”。

3 命名为 TextField2

继续选择文本框并命名为 Textfield2。

单击按钮禁用第一个文本框

images

images

1 选择 Button1

单击选择 Swap Focus 部件。

2 编辑 OnClick 事件

在“交互”选项卡双击 OnClick 事件。

3 添加动作到禁用

在最左侧的列表上选择动作“禁用”选项。

4 指定 TextField1

在最右侧的列表上勾选 TextField1 复选框。

还不能点击(OK 按钮)。

我们在下一步将在同一案例中继续添加另一个动作。

启用第二个文本框

images

1 添加启用部件动作

同一 Case 中通过点击 Focus 添加另一个动作。

2 指定 TextField2

勾选 TextField2 复选框。

3 不要点击 OK

我们还没完全完成这个 Case。下一步,我们将添加第三个动作。

第二个文本框设置 Focus

images

1 添加设置聚焦动作

在同一 Case 下通过点击 Focus 添加另一个动作。

2 指定 TextField2

勾选 TextField2 复选框。

3 复查所有动作

确定的所有动作如上图所示正确的显示出来。

4 点击 OK

点击 OK 按钮确认所有的改变。

当页面下载时设置聚焦 Text Field 1

images

images

1 添加一个 Case OnPageLoad

在下方“页面交互”选项双击 OnPageLoad 事件。

2 添加设置聚集动作

在最左侧列表选择动作 Focus。

3 指定 TextField1

在最右侧列表勾选 TextField1 复选框。

4 点击 OK

点击 OK 按钮确认所有改变。

预览原型

预览你的原型。注意当页面加载时第一个文本框已经聚焦。点击 Swap Focus 按钮禁用 Text Field 1,然后启用聚焦 Text Field 2。在浏览器中刷新页面将会重置一切。