【HarmonyOS】元服务卡片展示动态数据,并定点更新卡片数据

news2024/11/14 20:54:54

【关键字】

元服务卡片、卡片展示动态数据、更新卡片数据

【写在前面】

          本篇文章主要介绍开发元服务卡片时,如何实现卡片中动态显示数据功能,并实现定时数据刷新。本篇文章通过实现定时刷新卡片中日期数据为例,讲述展示动态数据与更新数据功能。

【开发步骤】

1、在卡片的index.html页面中定义动态数据,并在index.json中定义变量,此处以curDate为例,定义默认值1990-01-01。

cke_948.png

cke_1349.png

2、在卡片第一次添加时,需要curDate显示当前日期,需要在MainAbility.java的onCreateForm中进行数据传递。通过查看onCreateForm中默认代码发现,最终会走到formController.bindFormData方法中,即对应WidgetImpl.java文件的bindFormData方法,此处可以通过两种方式修改代码传递数据:

1)更改WidgetImpl.java文件的bindFormData方法内容;

2)更改MainAbility.java文件的onCreateForm方法内容,不返回formController.bindFormData(formId);,直接构造ProviderFormInfo数据返回;

上述两种方式,都需要构造FormBindingData数据,通过providerFormInfo.setJsBindingData(formBindingData)设置卡片数据。此处以第一种方式为例,添加如下代码,卡片添加时会默认显示当前日期。

@Override
    public ProviderFormInfo bindFormData(long formId) {
        HiLog.info(TAG, "bindFormData start");
        // 获取当前日期,此处也可修改为通过http接口动态获取数据
        Date date = new Date();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        String curDateStr = simpleDateFormat.format(date);

        // 将需要刷新的数据通过ZSONObject放入formBindingData中
        ZSONObject object = new ZSONObject();
        object.put("curDate", curDateStr);
        FormBindingData formBindingData = new FormBindingData(object);
        HiLog.info(TAG, "formBindingData: " + ZSONObject.toZSONString(formBindingData));

        // onCreateForm方法会返回providerFormInfo,所以通过providerFormInfo.setJsBindingData刷新卡片数据
        ProviderFormInfo providerFormInfo = new ProviderFormInfo();
        providerFormInfo.setJsBindingData(formBindingData);
        return providerFormInfo;
    }

3、接下来需实现更新curDate数据功能。若卡片已经添加,如何实现定时更新卡片数据。此时需先了解卡片更新机制,参考此文档“配置卡片配置文件”了解卡片的定时刷新updateDuration和定点刷新scheduledUpdateTime机制,本篇文章便于调试,采用定点刷新机制进行卡片数据刷新。

了解刷新机制后,通过配置触发卡片数据刷新,代码会走到MainAbility.java的onUpdateForm方法中,通过构造FormBindingData数据通过updateForm方法实现数据刷新,代码如下所示:

@Override
    protected void onUpdateForm(long formId) {
        HiLog.info(TAG, "onUpdateForm");
        super.onUpdateForm(formId);

        // 获取当前日期
        Date date = new Date();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        String curDateStr = simpleDateFormat.format(date);

        // 将需要刷新的数据通过ZSONObject放入formBindingData中
        ZSONObject object = new ZSONObject();
        object.put("curDate", "2024-01-01"); // 此处为了调试,将更新的数据设置为定值,可在此处修改为从http接口获取的结果进行数据更新
        FormBindingData formBindingData = new FormBindingData(object);
        HiLog.info(TAG, "formBindingData: " + ZSONObject.toZSONString(formBindingData));

        // 更新卡片onUpdateForm方法无返回值,所以通过updateForm设置数据
        try {
            boolean isUpdate = updateForm(formId, formBindingData);
            HiLog.info(TAG, "onUpdateForm isUpdate:" + isUpdate);
        } catch (FormException e) {
            HiLog.info(TAG, "onUpdateForm FormException");
            // todo 抛异常返回默认数据,此部分自行处理,可设置默认值
        }
    }

4、此时即可运行工程项目,会发现首次添加卡片时,卡片会显示当前日期。

但是如何调试才能测试更新卡片数据功能呢?步骤3中了解了卡片更新机制后,可将config.json中scheduledUpdateTime修改当前时间后2分钟,如当前是5:12,可设置为5:14,updateDuration设置为1,运行工程添加卡片;然后将updateDuration设置为0,此时再次运行工程,添加卡片。

现象为:5:14前卡片当前日期显示今天日期,有代码获取当前日志,等到5:14时,卡片显示日期就会变成onUpdateForm中传递的默认日期“2024-01-01”了。

请注意config.json中更新机制已实际功能需要为准,此处仅用于功能调试。

到这里就完成了卡片动态数据显示与定点更新卡片数据功能。

cke_8269.png

【服务卡片开发相关文档】

(3.0)服务卡片开发指导(包含基于JS UI和Java UI开发卡片):https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-overview-0000001062607955

(3.0)Java服务卡片JS UI组件:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-service-widget-file-0000001153028529

(3.1/4.0)FA模型服务卡片开发指导:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/widget-development-fa-0000001427902244-V3

(3.1/4.0)Stage模型服务卡片开发指导:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/service-widget-overview-0000001536226057-V3

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

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

相关文章

SLAM从入门到精通(基于ros的反光柱定位)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 我们看论文或者看书的时候,讲的最多的一般就是基于自然环境的定位。不管是激光雷达,还是视觉,其实本身还有很多…

公司电脑屏幕录制软件有什么功能

电脑屏幕录制软件有很多,今天简单说说说它的基础功能和附属功能: 基础功能: 1、屏幕录像 支持对所选电脑的屏幕进行录制,并且支持调整截屏频度、画面质量、单个视频时长等。 2、实时屏幕 可以对对方电脑进行实时屏幕查看&…

哥斯拉Godzilla使用中基于PHP的加密流量分析

转载于:https://blog.csdn.net/zlloveyouforever/article/details/129189396 哥斯拉Godzilla简介 据说是护网期间,各大厂商的waf不断在静态查杀、流量通信等方面对webshell进行拦截,众红队急需一款优秀的权限管理工具 , 虽说冰蝎3.0也不错 , …

MessagePassing分析与说明

1 Motivation 在图神经网络中,如何像在欧式空间一样进行卷积操作,其重要的问题在于如何更新当前位置的信息。 其每个位置(或者叫节点node)的更新方式如下所示。 这一个式子既可以表达GCN,也可以表达Edge Conv。 2 函…

wangeditor 富文本编辑器使用

使用环境vue3 ts &#xff0c;添加了字数限制 尝试了两种&#xff0c;使用方法类似&#xff08;参考文档&#xff09;&#xff0c;工具栏图标有不同&#xff0c;最后选用了第一种。 一、wangeditor 安装 npm i wangeditor --save 使用 这里封装了个简单组件 <templat…

浅谈AcrelEMS-GYM文体建筑能效管理解决方案-安科瑞 蒋静

1 概述 AcrelEMS-CA 文体建筑能效管理聚焦建筑的能量和信息的流向搭建平台解决方案。该系统解决方案集变电站综合自动化、电力监控、电能质量分析及治理、电气安全、能耗分析、照明控制、设备运维于一体。打破子系统孤立&#xff0c;配置方便&#xff0c;运维便捷&#xff1b;…

vue3.0运行npm run dev 报错Cannot find module node:url

vue3.0运行npm run dev 报错Cannot find module 问题背景 近期用vue3.0写项目&#xff0c;npm init vuelatest —> npm install 都正常,npm run dev的时候报错如下&#xff1a; failed to load config from F:\code\testVue\vue-demo\vite.config.js error when starting…

golang搭建http服务

golang环境搭建好之后,搭建htto服务 1.创建目录 创建main文件 创建成功,里面改成package main 终端执行操作创建好go.mod go mod init golang package golangimport ("fmt""net/http" )func sayHello(w http.ResponseWriter, r *http.Request) {_, _ fm…

TP4057替代DP4057 500mA线性锂离子电池充电器芯片

描述 DP4057是一款完整的单节锂离子电池带电池正负极反接保护采用恒定电流/恒定电压线性充电器。其SOT封装与较少的外部元件数目使得DP4057成为便携式应用的理想选择。DP4057 可以适合USB电源和适配器电源工作。 由于采用了内部PMOSFET架构&#xff0c;加.上防倒充电路&#xf…

基于机器视觉的12306验证码识别 计算机竞赛

文章目录 0 简介1 数据收集2 识别过程3 网络构建4 数据读取5 模型训练6 加入Dropout层7 数据增强8 迁移学习9 结果9 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的12306验证码识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向…

ES6之Set集合(通俗易懂,含实践)

Set是什么&#xff1f;它的方法有哪些&#xff1f;它在实例开发中有什么作用&#xff1f; 让我为大家介绍一下吧&#xff01; ES6提供了新的数据结构 Set(集合) 。它类似于数组&#xff0c;但成员的值是唯一的。 创建方法&#xff1a; let s new Set()console.log(s)它属于什…

使用时间潜在瓶颈网络进行图像分类

介绍 简单的循环神经网络(RNN)对学习 时间压缩表示表现出强烈的归纳偏差。方程 1显示了递推公式,其中h_t是整个输入序列 的压缩表示(单个向量)x。 方程 1:递推方程。(来源:Aritra 和 Suvaditya)另一方面,Transformers(Vaswani 等人)对于学习时间压缩表示几乎没有归…

探索随机森林: 机器学习中的集成学习神器

机器学习 第七课 随机森林 概述机器学习机器学习的主要分类监督学习无监督学习强化学习 集成学习提高准确性增强稳定性提升泛化能力 集成学习的主要方法BaggingBoostingStacking 随机森林的理论基础决策树的基本原理随机森林的生成过程随机森林的优势与局限性 随机森林的实际应…

IDEA 构建web项目-详细教程

1、创建一个新项目 1、点击File,选择New,然后点击Project 2、选择Empty Project,然后点击Next 3、新建一个项目 4、在新建完项目后&#xff0c;点击Finish后会弹出Open Project这个窗口&#xff0c;建议选择New Window 5、在Project Structure中选择Project Settings --> M…

rosbag记录与回放数据以及通过GMapping算法创建地图与导航

1、引言 通过前面几章的介绍&#xff0c;明白了ROS的工作原理&#xff0c;并且我们也能遥控机器人了&#xff0c;那机器人如何在实际环境中自主导航呢&#xff1f;要做到这点&#xff0c;机器人必须知道它自己在哪以及需要到哪儿去。 意味着&#xff0c;机器人需要有一个周围环…

3分钟教你用Python+Appium实现自动化测试

一、环境准备 1.脚本语言&#xff1a;Python3.x IDE&#xff1a;安装Pycharm 2.安装Java JDK 、Android SDK 3.adb环境&#xff0c;path添加E:\Software\Android_SDK\platform-tools 4.安装Appium for windows&#xff0c;官网地址 Redirecting 点击下载按钮会到GitHub…

中创 | 数据泄露事件频发:卡西欧数据泄露涉及149个国家用户

49%的企业在过去两年中遭受了数据泄露 网络安全事件导致关键业务意外停机&#xff0c;平均损失为每小时20万美元\小时 一、卡西欧发生数据泄露事件 作为享有盛名的国际品牌&#xff0c;卡西欧40年来总销量突破1亿只&#xff0c;尽管卡西欧享誉全球&#xff0c;拥有顶级的网…

mac安装nodejs,跑vue程序

1. 下载node.js for mac&#xff0c;地址&#xff1a;Node.js。一路安装就可以了&#xff0c;无需修改。 2. mac终端&#xff0c;查看node和npm的版本。 3. 配置环境变量&#xff0c; vim .bash_profile增加PATH$PATH:/usr/local/bin/ 4. 但是毕竟npm安装一些东西还是太慢了所…

笔记本电脑的摄像头找不到黑屏解决办法

这种问题一般来说就是缺少驱动&#xff0c;就要下载驱动。 问题&#xff1a; 解决办法&#xff1a; 1.进入联想官网下载驱动 网站&#xff1a;https://newsupport.lenovo.com.cn/driveDownloads_index.html?v9d9bc7ad5023ef3c3d5e3cf386e2f187 2.下载主机编号检测工具 3.下…

类图表示法

设计模式&#xff0c;用设计图表示的话&#xff0c;主要用到类图。常见UML类图如下&#xff1a; 1、类图&#xff1a;矩形框&#xff0c;代表一个类&#xff08;Class&#xff09;。类图分为三层&#xff0c;第一层显示类的名称&#xff0c;如果是抽象类&#xff0c;则用斜体显…