1.4_23 Axure RP 9 for mac 高保真原型图 - 案例22【中继器 - 入门3】功能优化

最新推荐文章于 2024-04-30 07:37:17 发布

GroupiesM

最新推荐文章于 2024-04-30 07:37:17 发布

阅读量729

点赞数

本文链接：https://blog.csdn.net/qq_43529621/article/details/127228021

版权

1.4 Axure RP 9 for mac 专栏收录该内容

29 篇文章 14 订阅

订阅专栏

一、成品效果

Axure Cloud 案例22【中继器 - 入门3】功能优化

版本更新

一、回车提交
1.1 光标位于文本框时，点击回车键(enter)，进行提交动作（效果等同于点击完成按钮）。

二、获取焦点
2.1 弹出输入框后，光标置于文本框内，方便直接输入。

三、点击弹窗外部退出
3.1 在输入框外部点击鼠标左键（置灰部分）会退出输入状态，返回主页面。

四、数据校验
4.1 文本改变时，校验用户名是否存在。
4.2 用户名已存在：提示用户名xx已存在！，显示在这里插入图片描述图片。
4.3 用户名不存在：提示用户名校验成功！，显示图片。
4.4 提交动作时，校验用户名不能为空。
4.5 用户名为空：提示用户名不能为空！，显示图片。

历史版本：Axure Cloud 案例21【中继器 - 入门2】添加数据

一、添加界面
1.1 点击添加数据按钮，背景置灰。
1.2 点击添加数据按钮，出现弹窗，按照提示在对应文本框中输入信息。
1.3 弹窗中输入name后点击”完成“，进行提交。

二、中继器
2.1 index和id值自增，name按照提交的表单信息添加数据。

历史版本：Axure Cloud 案例20【中继器 - 入门1】中继器原理Repeater Table
一、表格
1.1 使用中继器初始化数据。
1.2 使用函数 Item.列名 遍历并展示数据。
1.3 使用函数 Item.Index 函数展示序号。
1.4 使用中继器的背景-交替颜色功能。

二、素材准备

首先完成案例21【中继器 - 入门2】添加数据。

再使用Axure自带元件：动态面板、文本框、矩形、热区、表格。还需要在 iconfont 搜索相关提示图片(png格式）。

三、制作方法

概览：相较于案例21【中继器 - 入门2】添加数据，本案例新增了以下部分内容，并在其他多处有修改。

1.输入提示：由一个图片和一个文本框构成。此提示默认隐藏不可见。根据不同情况触发修改文本框内容、和图片内容。
2.添加数据-热区：应用了java的面向对象思想。此热区大小1x1，通过移动触发提交动作。
因为有两处提交（鼠标点击、回车）的执行逻辑是相同的。
所以将两处点击提交的公共部分抽取出来，通过此热区统一执行提交动作。
3.表格-筛选：用于校验”用户名已存在“的功能。此表格默认隐藏不可见。文本改变时，筛选该表格，并根据[[This.ItemCount]]获取筛选的结果数量。

3.1 回车提交

在文本框中设置交互按键按下时，且情形按下的键=Return（回车）。通过触发提交热区来实现提交动作。

注1：提交按钮单击时，同样通过触发提交热区来实现提交动作

注2：热区执行动作参考如下图

3.2 获取焦点（光标）

出现弹窗后，光标就处于输入框内，更方便用户输入，不需要鼠标点击。

只需要通过获取焦点动作来指定相应输入框即可。

3.3 点击弹窗外部退出

只需要在背景单击时动作来隐藏弹窗效果即可。

且由于图层顺序：弹窗>置灰效果。点击下图蓝色区域并不会触发单击时效果。

所以点击弹窗部分也不会退出输入状态，只有点击弹窗外部 + 置灰部分时才会退出。

3.4 校验：用户名不能为空！

Step1. 在输入框文本改变时，将文本框内容赋值给变量user_name

Step2. 进行提交动作时判断，如果user_name为空，则显示输入提示，并修改文本、图片内容

文本：用户名不能为空！
图片：

3.5 校验：用户名已存在！

Step1. 输入框文本改变时，触发【表格-筛选】的筛选动作（该表格隐藏不可见）和载入时动作

①输入框输入 -> ②触发筛选 -> ③触发表格载入时动作 -> ④根据[[This.ItemCount]] 值（筛选后结果数量）的情况 -> ⑤触发提示框信息变化

注1：【表格-筛选】中的数据，和【表格-内容】中的数据是完全一致的（这样筛选结果才会准确）

注2：提交动作 -> 同时添加了两个表格的数据

注3：提交动作 -> 获取文本框内容