0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

TS语言开发HarmonyOS应用:分布式计算器开发教程

海阔天空的专栏 来源:HarmonyOS开发者 作者:HarmonyOS开发者 2022-05-23 16:37 次阅读

最近收到很多小伙伴反馈,想基于扩展的TS语言(eTS)进行HarmonyOS应用开发,但是不知道代码该从何处写起,从0到1的过程让新手们抓狂。本期我们将带来“分布式计算器”的开发,帮助大家了解声明式开发范式的UI描述、组件化机制、UI状态管理、渲染控制语法等核心机制和功能。下面我们直接进入正题。

一、整体介绍

分布式计算器可以进行简单的数值计算,并支持远程拉起另一个计算器FA,实现两个FA进行协同计算。

如图1所示,分布式计算器界面主要由“键盘”、“显示”及“标题栏”三个模块组成。其中,“键盘”“显示”模块负责响应用户点击并控制运算表达式及运算结果的显示,实现了基础的计算功能。“菜单栏”模块为计算器顶部的菜单栏,是分布式计算功能的入口。

那么,如何实现分布式计算器各模块的功能?下面我们将从组件化、声明式描述和状态管理三个维度来解析分布式计算器的实现。

图片

图1 计算器界面

1. 组件化

ArkUI开发框架定义了一些具有特殊含义的

组件管理装饰器

,如图2所示:

图片

图2 组件管理装饰器

根据声明式UI的组件化思想,我们可以将通过组件管理装饰器将计算器界面上的各个模块组件化为一个个独立的UI单元。

2. 声明式描述

通过ArkUI开发框架提供的一系列基础组件,如Column、Text、Divider、Button等,以声明方式进行组合和扩展来对各个模块进行描述,包括参数构造配置、属性配置、事件配置以及子组件配置等,并通过基础的数据绑定和事件处理机制实现各个模块的逻辑交互。

3. 状态管理

ArkUI开发框架定义了一些具有特殊含义的状态管理装饰器,如图3所示:

图片

图3 状态管理装饰器

通过状态管理装饰器装饰组件拥有的状态属性,当装饰的变量更改时,组件会重新渲染更新UI界面。

以上就是实现分布式计算器的核心原理,下面我们将为大家带来分布式计算器的基础计算功能与分布式功能的具体实现。

二、基础计算功能的实现

上文中提到,分布式计算器的基础计算功能由键盘模块及显示模块实现。

1. 键盘模块

键盘模块响应了用户的点击,并实现了计算器的基本功能。下面我们将介绍键盘布局以及键盘功能的实现。

(1) 键盘布局

计算器界面上的键盘,其实是一张张图片按照 4*5格式排列,如图4所示:

图片

图4 键盘模块

首先,我们需要将所有图片保存至项目的media文件夹下,并初始化为ImageList,代码如下:

poYBAGKLRiuANTtDAACygk54nkU546.png

然后,我们需要对键盘模块进行组件化操作。这里我们通过@Component装饰器让键盘模块成为一个独立的组件。

最后,使用ArkUI开发框架提供的内置组件及属性方法进行声明性描述。这里我们使用了Grid组件进行布局,并通过ForEach组件来迭代图片数组实现循环渲染,同时还为每张图片添加了ClickButton事件方法。代码如下:

poYBAGKLRk-Ae1lkAAC8eUfmvWE814.png

(2) 功能实现

按键功能包含了“归零”、“清除”、“计算”三个功能。

① 当用户点击C按钮后,运算表达式与运算结果“归零”,代码如下:

pYYBAGKLRmuAIs7QAAA_-sAkIZU893.png

pYYBAGKLRoSAbpHXAACv2sV8wv4907.png

pYYBAGKLRpKAWw3SAACWJOCSO7A818.png

注:计算功能的实现依赖于JavaScript的math.js库,使用前需通过npm install mathjs--save命令下载并安装math.js库。

2. 显示模块

显示模块实现了“

键入的运算表达式

”与“

运算结果

”的显示,本质上是Text文本,如图5所示:

图片

图5显示模块

首先我们通过@Component装饰器使该模块具有组件化能力,然后在build方法里描述UI结构,最后使用@Link状态装饰器管理组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新。代码如下:

poYBAGKLRq6AZ_ZVAADMkr6ZVAM373.png

至此,一个初具计算功能的计算器就实现了。下面我们将实现计算器的分布式功能。

三、分布式功能的实现

计算器的分布式功能以菜单栏模块为入口,并基于分布式设备管理与分布式数据管理技术实现。

1. 菜单栏模块

菜单栏

”模块为计算器顶部菜单栏,是计算器分布式功能的入口。

图片

图6菜单栏模块

如图6所示,当用户点击图标

图片

时,执行terminate()方法,退出计算器应用。当用户点击按钮时,执行showDialog()方法,界面上弹出的分布式设备列表弹窗,选择设备后将获取分布式数据管理的权限,最后实现远端设备的拉起。代码如下:

pYYBAGKLRs-ARAKOAADK_0mWay0014.png

2. 分布式设备管理

在分布式计算器应用中,分布式设备管理包含了分布式设备搜索、分布式设备列表弹窗、远端设备拉起三部分。首先在分布式组网内搜索设备,然后把设备展示到分布式设备列表弹窗中,最后根据用户的选择拉起远端设备。

(1) 分布式设备搜索

通过SUBSCRIBE_ID搜索分布式组网内的远端设备,代码如下:

pYYBAGKLRt6AHyUSAABhO-nqhps278.png

(2) 分布式设备列表弹窗

分布式设备列表弹窗实现了远端设备的选择,如图7所示,用户可以根据设备名称选择相应的设备进行协同计算。

图片

图7 分布式设备列表弹窗

这里我们使用@CustomDialog装饰器来装饰分布式设备列表弹窗,代码如下:

poYBAGKLRwaALQjdAACtVwhrJ3o776.png

(3) 远端设备拉起

通过startAbility(deviceId)方法拉起远端设备的FA,代码如下:

pYYBAGKLRxiAdwYDAABRn_WkLjA999.png

3. 分布式数据管理

分布式数据管理用于实现协同计算时数据在多端设备之间的相互同步。我们需要创建一个分布式数据库来保存协同计算时数据,并通过分布式数据通信进行同步。

(1) 管理分布式数据库

创建一个KVManager对象实例,用于管理分布式数据库对象。代码如下:

poYBAGKLRzCACgYkAABu8l2--sY982.png

(2) 订阅分布式数据变化

通过订阅分布式数据库所有(本地及远端)数据变化实现数据协同,代码如下:

poYBAGKLR0WACJ4qAACJfgJj0O8337.png

至此,具有分布式能力的计算器就实现了。期待广大开发者能基于TS扩展的声明式开发范式开发出更多有趣的应用。

来源:HarmonyOS开发者

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 分布式计算
    +关注

    关注

    0

    文章

    28

    浏览量

    4458
  • HarmonyOS
    +关注

    关注

    79

    文章

    1966

    浏览量

    29985
收藏 人收藏

    评论

    相关推荐

    OpenHarmony开发案例:【分布式计算器

    使用分布式能力实现了一个简单的计算器应用,可以进行简单的数值计算,支持远程拉起另一个设备的计算器应用,两个计算器应用进行协同
    的头像 发表于 04-11 15:24 985次阅读
    OpenHarmony<b class='flag-5'>开发</b>案例:【<b class='flag-5'>分布式</b><b class='flag-5'>计算器</b>】

    HarmonyOS开发实例:【分布式邮件】

    基于TS扩展的声明开发范式编程语言编写的一个分布式邮件系统,可以由一台设备拉起另一台设备,每次改动邮件内容,都会同步更新两台设备的信息
    的头像 发表于 04-17 10:29 727次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>实例:【<b class='flag-5'>分布式</b>邮件】

    HarmonyOS应用开发-分布式任务调度

    1. 介绍本篇CodeLab将实现的内容HarmonyOS是面向全场景多终端的分布式操作系统,使得应用程序的开发打破了智能终端互通的性能和数据壁垒,业务逻辑原子化开发,适配多端。通过一
    发表于 09-18 09:21

    HarmonyOS应用开发-分布式设计

    设计理念HarmonyOS 是面向未来全场景智慧生活方式的分布式操作系统。对消费者而言,HarmonyOS 将生活场景中的各类终端进行能力整合,形成“One Super Device”,以实现
    发表于 09-22 17:11

    HarmonyOS分布式应用框架深入解读

    设备、分布式的能力及应用,二者具有无限能力。从开发者角度看,HarmonyOS上基本的组件分为3+1,其中3代表三个Ability,分别是:PageAbility:负责用户界面的显示
    发表于 11-22 15:15

    HarmonyOS应用开发-关于TS语言的整体理解

    语法的解析能力,提供了跨语言调用支持,提供了TS语言高性能运行环境。 声明UI后端引擎后端引擎提供了兼容不同开发范式的UI渲染管线,提供多
    发表于 11-30 11:03

    HDC2021技术分论坛:如何高效完成HarmonyOS分布式应用测试?

    作者:liuxun,HarmonyOS测试架构师HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分布式API。随着越来越多的
    发表于 12-13 14:55

    如何高效完成HarmonyOS分布式应用测试?

    作者:liuxun,HarmonyOS测试架构师HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分布式API。随着越来越多的
    发表于 12-13 18:07

    满满干货!手把手教你实现基于eTS的分布式计算器

    最近收到很多小伙伴反馈,想基于扩展的TS语言(eTS)进行HarmonyOS应用开发,但是不知道代码该从何处写起,从0到1的过程让新手们抓狂。 本期我们将带来“
    发表于 05-23 18:34

    HarmonyOS应用开发-EducationSystem分布式亲子早教系统体验

    HarmonyOS应用程序开发,多屏协作交互和分布式跨设备传输的经验。 • 从项目创建、代码编写到编译、构造、部署和操作。二、效果图:完整代码地址:https://gitee.com/jltfcloudcn/jump_to/tr
    发表于 07-25 10:23

    HarmonyOS应用开发-分布式语音摄像头体验

    一、组件说明使用HarmonyOS分布式文件系统和AI语音识别功能开发了一个分布式语音摄像头。使用此相机应用程序,同一分布式网络下的不同设备
    发表于 08-24 15:06

    HarmonyOS测试技术与实战-HarmonyOS分布式应用特征与挑战

     HDC 2021华为开发者大会HarmonyOS测试技术与实战-HarmonyOS分布式应用特征与挑战
    的头像 发表于 10-23 14:41 1649次阅读
    <b class='flag-5'>HarmonyOS</b>测试技术与实战-<b class='flag-5'>HarmonyOS</b><b class='flag-5'>分布式</b>应用特征与挑战

    HarmonyOS测试技术与实战-分布式应用测试解决方案

    HDC 2021华为开发者大会HarmonyOS测试技术与实战-HarmonyOS分布式应用测试解决方案
    的头像 发表于 10-23 14:48 1560次阅读
    <b class='flag-5'>HarmonyOS</b>测试技术与实战-<b class='flag-5'>分布式</b>应用测试解决方案

    HarmonyOS分布式应用评分工具定位于帮助开发者本地快速测试

    HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分布式API。随着越来越多的开发者投入到Harmo
    的头像 发表于 12-17 13:50 1426次阅读

    HarmonyOS分布式应用上架问题分析

    HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分布式API。随着越来越多的开发者投入到Harmo
    的头像 发表于 12-24 17:56 1876次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>分布式</b>应用上架问题分析