【Axure 教程】中继器(基础篇)

news2024/10/7 6:37:46

一、初识中继器

中继器是 Axure 中一个比较高阶的应用,它可以让我们在纯静态网页中模拟出类似带有后台数据交互的增删改查的效果,虽然它没有真正意义上帮我们存储任何的数据,但是当我们在一次项目体验过程中,它却可以给我们带来更加真实的交互效果,我们可以把中继器理解为是一个临时的数据库表,在我们退出当前预览之前,它都可以帮我们存储所需的数据。

如果你有学过数据库的话,对于中继器的掌握是很容易的,但如果你完全没有接触过数据库,也不清楚数据库原理,那么本篇文章应该会适合你。

接下里,我们先在 Axure 中拖入一个【中继器】:

这是 Axure 默认的中继器效果,我们双击打开看一下:

打开之后,我们发现里面只有一个矩形,那么问题就来了:

  1. 里面只有一个矩形,但是为什么我们在外面看到的是3个?
  2. 里面的矩形是没有内容的,但是为什么外面看到的矩形却有数字?

我们再返回中继器的外层,发现这个中继器有一个事件,就是【每项加载】的时候,给矩形【设置文本】,这下我们就知道了,原来矩形的文字是在这里设置的,但是这里的参数是什么意思?而且现在依然没有解决为什么有3个矩形的问题。

别急,我们点一下这个中继器的【样式】看一下:

我们发现,在【样式】里面有一个【数据】表格,里面有一列【Column0】,数据正好是我们所看到的1、2、3,我们可以这样猜想:

矩形的数量和文字是根据中继器中的这个【数据】来动态加载的,我们只需要添加一个矩形,中继器会根据数据的条数来动态增加矩形的数量,并且可以将每一行的数据设置为矩形的文字。

根据这个猜想,我们可以尝试在这个数据中添加一行,命名为【4】,再来看看效果:

可以发现,这个跟我们预测的效果是一样的,这样我们大概就清楚了,中继器是一个可以让我们通过动态数据来控制设计元素的一个东西,那既然是动态数据,总不能是一开始在 Axure 里面设定好的吧,我在网页上应该也要能够编辑,才叫动态,那我们就来尝试一下,对这个中继器做一个增、删、改、查。

二、增

我们在中继器上方拖入一个按钮,命名为“添加行”:

给按钮添加点击事件,发现在【中继器动作】里面有很多的操作可以选,后面我们会一一讲到,我们选择这里的【添加行】:

然后选择我们要操作的中继器:

选择后点击【添加行】:

弹出【添加行到中继器】窗口:

我们发现,这里添加行除了可以指定一个数值,也可以是一个【函数表达式】,我们先指定一个固定值,比如【5】:

保存后我们来看看在浏览器中的效果:

可以看到,我们每点击一下,就会动态增加一个矩形,不过因为我们是指定的固定值的原因,所以增加的矩形的文字都是【5】,这样,我们就做完了中继器的添加功能。

三、删

刚刚是增加,接下来我们来做删除,同样拖入一个按钮,命名为【删除行】:

接下来我们给按钮添加【中继器动作】中的【删除行】:

可以发现,系统要求我们提供一个删除条件,要么按【规则】删除行,要么删除【已标记】的行,【标记】的功能会在“进阶篇”中介绍,这里我们按规则来,这里讲讲为什么要有这个规则。

如果没有规则的话,在删除时就会把所有数据清空,经验告诉我们,真实业务中会把所有数据清空这种行为,除了误操作,基本不太可能出现,所以一般都会要求给定一些条件作为删除的规则。

这里系统也给我们提供了一个参考,就是指定中继器的某个字段名=指定的内容时,删除对应行,我们可以照猫画虎改一下,因为我们只有一行,所以很好写,就当某一行的数据等于【1】时,我们删除掉,我们可以这样写:

接下来看看效果:

跟预期效果是一样的,删除的功能我们也做完了。

四、改

接下来我们来尝试修改某一行的数据,比如将其中的【3】改成【9】,同样拖入一个按钮,命名为【更新行】:

然后给按钮添加【中继器动作】中的【更新行】,同样为了避免将所有的数据改掉,系统会要求我们设定一个规则,而规则的下方则要求我们提供需要修改的列以及修改后的值,我们就按下方这样配置,因为只有一列,我们这里的意思相当于就是找到数据为【3】的那一列,并改成【9】:

保存后看看效果:

这样修改的功能我们也做完了。

五、查

最后来做查的功能,同样拖入一个按钮,命名为【添加筛选】:

我们给它添加【中继器事件】中的【添加筛选】动作:

可以看到,系统要求我们给定一个筛选的条件,那我们来试一下把数据为【4】的行筛选出来,像下图这样写,我们还可以给查询条件命名,这样在【移除筛选】的时候,可以移除指定名称的筛选条件:

这里的【移除其他筛选】的意思是,如果此时有其他的筛选条件,则清空掉,按当前的筛选条件来筛选,如果不勾选,则是在已有筛选条件的基础上进行筛选,我们保存一下来看效果:

我们发现,点击之后,只剩数据为【4】的这条数据,其他数据呢,都被删除了吗?其实没有,只是被隐藏起来而已,我们可以添加一个新的按钮来【移除筛选】:

移除筛选的时候,可以移除全部筛选条件,也可以按名称移除指定名称的筛选条件:

保存后我们来看看效果,当我们点击【添加筛选】时,数据只剩下【4】,但点击【移除筛选】,所有数据又出来了:

这样中继器增删改查的功能就做完了,但是你可能会说,实际业务中不可能是这样操作的,比如我要更新或删除某条数据,肯定是直接找到某一行进行修改和删除,不可能事先设定好条件,这个就涉及到怎么在中继器中标记行的问题了。

接下来我将在“进阶篇”的教程中分享如何在中继器中删除或修改指定行的数据,敬请关注!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/652105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字节跳动提出高性能 transformer 推理库,获 IPDPS 2023 最佳论文奖

动手点关注 干货不迷路 字节跳动与英伟达, 加州大学河滨分校联合发表的论文 《ByteTransformer: A High-Performance Transformer Boosted for Variable-Length》在第 37 届 IEEE 国际并行和分布式处理大会(IPDPS 2023)中,从 396 篇投稿中脱颖…

广东省高校人工智能产教融合院长研讨会召开,校企协同探索AI教育新范式

为深化产教融合、促进校企合作,着力推进人工智能产业和高校人才培养体系相融合,深入探讨校企合作、产教融合与课程建设规划等事宜,2023年6月9日下午,百度飞桨联合广东省计算机学会、华南理工大学计算机科学与工程学院、荔峰科技&a…

这世界好神奇,我们其实并不了解自己的身体

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 文案 / 粒粒 产品统筹 / bobo 场地支持 / 声湃轩北京站 这是一次突发奇想的天马行空,三个人猝不及防地坐下来大开脑洞,从诗词歌赋聊到人生哲学&#xff…

CVPR 2023 | 美团技术团队精选论文解读

本文精选了美团技术团队被CVPR 2023收录的8篇论文进行解读。这些论文既有自监督学习、领域自适应、联邦学习等通用学习范式方面的技术迭代,也涉及目标检测、跟踪、分割、Low-level Vision等典型视觉任务的性能,体现了美团在基础通用技术和垂直领域技术上…

HotSpot虚拟机对象探索与OutOfMemoryError异常

HotSpot虚拟机对象探索与OutOfMemoryError异常 1.HotSpot虚拟机对象探索 1.1对象的创建 不是一直有一个笑话,别人问程序员有没有对象,程序员会说我没有对象,但是我可以new一个出来 这里就可以判断他学过c或者java等语言 在java中对象的创建一般我们都是通过new来创建的,但…

MyBatis01

ORM:对象关系映射 O(Object):Java虚拟机中的Java对象 R(Relational):关系型数据库 M(Mapping):将Java虚拟机中的Java对象映射到数据库表中一行记录&#xff0…

【王道·操作系统】第三章 内存管理

一、内存管理 1.1 内存的基础知识 内存可存放数据,程序执行前需要先放到内存中才能被CPU处理——缓和CPU与硬盘之间的速度矛盾内存地址从0开始,每个地址对应一个存储单元 按字节编址:每个存储单元大小为1字节(B),即8个二进制位按…

【Spring Cloud系列】- Eureka使用详解

【Spring Cloud系列】- Eureka使用详解 文章目录 【Spring Cloud系列】- Eureka使用详解一、概述二、Eureka简介三、Eureka结构与作用Eureka结构图Eureka采用CS(Client/Server,客户端/服务器)架构,它包括以下两大组件 四、Eureka集群及与应用…

梁宁:为什么中国没有像 ChatGPT 和 Vision Pro 这样的创新产品?

6 月 10 日,产品战略专家梁宁和图灵联合创始人刘江围绕“ ChatGPT 真需求”主题进行直播对谈。 梁宁,产品战略专家,曾任湖畔大学产品模块学术主任,联想、腾讯高管,CNET集团副总裁。 工作经历横跨 BAT,与美团…

第14届蓝桥杯Scratch(中级)国赛真题解析2023.5.28

第14届蓝桥杯Scratch(中级)国赛真题解析2023.5.28 一:选择题(50分)第 1 题 单选题(10分) 运行以下程序后,角色说出的数是 ( C )。 *选择题严禁使用程序验证,选择题不答或答错都不扣分 A.150 B.200 C.300 D.600第 2 题 单选题(10分) 对以下程序效果描述完全正确的是 …

【JUC进阶】01. Synchroized实现原理

目录 1、前言 2、Synchronized使用 2.1、对象锁(Instance Lock) 2.2、类锁(Class Lock) 2.3、方法锁(Method Lock) 3、原理分析 3.1、monitor对象 3.2、monitorenter 3.3、monitorexit 3.4、对象…

库克和马斯克之后,比尔盖茨访华,美企认识到中国市场不可替代

微软创始人比尔盖茨已到达了中国,这是美国苹果CEO库克、特斯拉CEO马斯克之后访华的又一位美国重要企业家,那么美国企业家陆续访华是为了什么呢? 一、美企连遭挫折 苹果一季度的业绩显示营收、利润均下滑了个位数,但是苹果看到了隐…

AIGC 加持 Cocos,游戏开发需要几步?

近日,游戏行业知名的 B2B 大会 WN 2023 大会于土耳其首都伊斯坦布尔顺利举办。本次大会邀请了来自全球的游戏开发商、媒体、发行商、分发平台等行业决策者,共同探讨游戏行业未来发展态势,进一步拓展业务,并在世界范围内寻找新的合…

【力扣刷题 | 第十天】347.前k个高频元素 227 简单计算器

前言: 本篇将是最后一篇我们利用栈与队列来解决力扣问题,在下文我们将进入到数这一章,相对应的【夜深人静讲数据结构与算法】专栏中树也会及时更新。 347. 前 K 个高频元素 - 力扣(LeetCode) 给你一个整数数组 nums 和…

【JS】1714- 重学 JavaScript API - Geolocation API

❝ 前期回顾: 1. Page Visibility API 2. Broadcast Channel API 3. Beacon API 4. Resize Observer API 5. Clipboard API 6. Fetch API 7. Performance API 8. WebStorage API 9. WebSockets API 10. Fullscreen API ❞ 本文将深入探讨 Geolocation API 的概念、使…

华为OD机试真题 JavaScript 实现【关联子串】【2023Q1 100分】,附详细解题思路

一、题目描述 给定两个字符串str1和str2,str1进行排列组合只要有一个为str2的子串则认为str1是str2的关联子串,请返回子串在str2的起始位置,若不是关联子串则返回-1。 二、输入描述 qwe dsgfasgfwe 三、输出描述 -1 四、解题思路 读取…

009、体系架构之HTAP

HTAP HTAP技术传统的HTAP解决方案HATP的要求TiDB的HTAP架构TiDB的HTAP特性使用场景 MPP HTAP技术 传统的HTAP解决方案 HATP的要求 可扩展性 分布式事务分布式存储 同时支持OLTP与OLAP 同时支持行存和列存OLTP与OLAP业务隔离 实时性 行存与列存数据实时同步 TiDB的HTAP架构 …

Committer 迎新!这次是来自阿里云的同学

点击蓝字 关注我们 迎新! 截至今天,Apache DolphinScheduler 项目在 GitHub 上的 Star 数已突破 10.6K,贡献者人数也突破了 470 人。社区的不断壮大,离不开每位 Contributor 的支持。 最近,Apache DolphinScheduler 又…

AI模型部署实战:利用CV-CUDA加速视觉模型部署流程

本文首发于公众号【DeepDriving】,欢迎关注。 CV-CUDA简介 随着深度学习技术在计算机视觉领域的发展,越来越多的AI算法模型被用于目标检测、图像分割、图像生成等任务中,如何高效地在云端或者边缘设备上部署这些模型是工程师迫切需要解决的问…

Android 13(T) - 智能指针

Android有一套自己的智能指针管理办法,并且将其运用在源码的各个角落,所以学习Media框架之前,我们有必要先了解下Android智能指针。 本节代码源自于Android 13(T),参考 (aospxref.com) 1 概述 与智能指针相关的总共有5个类&#…