设备连接同一无线网络#xff0c;安装分布式手写板应用。

进入应用#xff0c;点击允许使用多设备协同#xff0c;点击主页上查询…介绍

本篇Codelab使用设备管理及分布式键值数据库能力实现多设备之间手写板应用拉起及同步书写内容的功能。

操作流程

设备连接同一无线网络安装分布式手写板应用。

进入应用点击允许使用多设备协同点击主页上查询设备按钮显示附近设备。

选择设备确认若已建立连接启动对方设备上的手写板应用否则提示建立连接。

输入PIN码建立连接后再次点击查询设备按钮选择设备提交启动对方设备应用。

建立连接前绘制的内容在启动对方设备后同步此时设备上绘制的内容会在另一端同步绘制。

点击撤销按钮两侧设备绘制内容同步撤销。

相关概念

[设备管理]模块提供分布式设备管理能力。

[分布式键值数据库]分布式键值数据库为应用程序提供不同设备间数据库的分布式协同能力。

相关权限

本篇Codelab使用了设备管理及分布式键值数据库能力需要手动替换full-SDK并在配置文件module.json5文件requestPermissions属性中添加如下权限

[分布式设备认证组网权限]ohos.permission.ACCESS_SERVICE_DM。

[设备间的数据交换权限]ohos.permission.DISTRIBUTED_DATASYNC。

约束与限制

本篇Codelab部分能力依赖于系统API需下载full-SDK并替换DevEco

Studio自动下载的public-SDK。

本篇Codelab使用的部分API仅系统应用可用需要提升应用等级。

环境搭建

10。

鸿蒙指导参考qr23.cn/AKFP8k点击或者复制转到。

硬件要求

鸿蒙HarmonyOS与OpenHarmony文档籽料mau123789是v直接拿取

开发板类型[润和RK3568开发板]。

OpenHarmony系统4.0

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建本示例以RK3568开发板为例参照以下步骤进行

[获取OpenHarmony系统版本]标准系统解决方案二进制。

以4.0

Release版本为例

Studio的安装和开发环境配置。

开发环境配置完成后请参考[使用工程向导]创建工程模板选择“Empty

代码结构解读

本篇Codelab只对核心代码进行讲解对于完整代码我们会在gitee中提供。

代码区

主界面由导航栏及绘制区域组成导航栏包含撤回按钮及查询设备按钮。

绘制区域使用Canvas画布组件展示绘制效果。

Index.ets文件完成界面实现使用Column及Row容器组件进行布局。

Index.ets

撤回按钮Image($r(app.media.ic_back)).width($r(app.float.ic_back_width)).height($r(app.float.ic_back_height))...Blank()//

查找设备按钮Image($r(app.media.ic_hop)).width($r(app.float.ic_hop_width)).height($r(app.float.ic_hop_height))...}.width(CommonConstants.FULL_PERCENT).height(CommonConstants.TITLE_HEIGHT)Row()

{//

绘制区域Canvas(this.canvasContext).width(CommonConstants.FULL_PERCENT).height(CommonConstants.FULL_PERCENT)...}....width(CommonConstants.FULL_PERCENT).layoutWeight(CommonConstants.NUMBER_ONE)}.height(CommonConstants.FULL_PERCENT).width(CommonConstants.FULL_PERCENT)}...

}分布式组网

创建设备管理器。

设备管理器创建完成后注册设备上线离线监听信任设备上线离线时触发。

执行获取本地设备信息获取信任设备列表初始化展示设备列表等方法。

其中deviceManager类需使用full-SDK。

RemoteDeviceUtil.ets

ohos.distributedHardware.deviceManager;class

RemoteDeviceUtil

创建设备管理器deviceManager.createDeviceManager(CommonConstants.BUNDLE_NAME,(error,

value:

注册信任设备上线离线监听this.registerDeviceStateListener();//

获取本地设备信息this.getLocalDeviceInfo();//

获取信任设备列表this.getTrustedDeviceList();//

初始化展示设备列表this.initDeviceList();resolve(value);});}

catch

{Logger.error(RemoteDeviceModel,createDeviceManager

failed,

error${JSON.stringify(error)});}});}...

}注册设备状态监听。

已验证设备上线或有新设备验证通过时状态类型为ONLINE将设备添加至信任设备列表。

设备离线时状态类型为OFFLINE将设备从信任列表中移除。

RemoteDeviceUtil.ets

注册设备状态改变监听registerDeviceStateListener():

void

注册监听this.myDeviceManager.on(deviceStateChange,

(data)

deviceManager.DeviceStateChangeAction.ONLINE:

{this.deviceStateChangeActionOnline(data.device);break;}//

设备离线case

deviceManager.DeviceStateChangeAction.OFFLINE:

{this.deviceStateChangeActionOffline(data.device);break;}...}});}

catch

{Logger.error(RemoteDeviceModel,registerDeviceStateListener

failed,

error${JSON.stringify(error)});}}//

设备上线加入信任列表及展示列表deviceStateChangeActionOnline(device:

void

{this.trustedDeviceList[this.trustedDeviceList.length]

device;this.addToDeviceList(device);}//

设备下线将设备移出信任列表和展示列表deviceStateChangeActionOffline(device:

void

(this.trustedDeviceList[i].networkId

device.networkId)

{list.push(this.trustedDeviceList[i]);continue;}}this.deleteFromDeviceList(device);this.trustedDeviceList

list;}...

点击主界面的查询设备按钮执行发现设备方法注册设备发现监听任务同时拉起弹窗展示设备列表。

当弹窗关闭时执行停止发现设备方法注销监听任务。

RemoteDeviceUtil.ets

{Logger.info(RemoteDeviceModel,

deviceFound

exist${JSON.stringify(data)});return;}}this.discoverList[this.discoverList.length]

data.device;this.addToDeviceList(data.device);}startDeviceDiscovery():

void

注册发现设备监听this.myDeviceManager.on(deviceFound,

(data)

处理发现的设备this.deviceFound(data);});...let

info:

CommonConstants.SUBSCRIBE_MODE,medium:

CommonConstants.SUBSCRIBE_MEDIUM,freq:

CommonConstants.SUBSCRIBE_FREQ,isSameAccount:

false,isWakeRemote:

CommonConstants.SUBSCRIBE_CAPABILITY};//

发现周边设备this.myDeviceManager.startDeviceDiscovery(info);}

catch

{Logger.error(RemoteDeviceModel,startDeviceDiscovery

failed

error${JSON.stringify(error)});}}//

void

停止发现设备this.myDeviceManager.stopDeviceDiscovery(this.subscribeId);//

注销监听任务this.myDeviceManager.off(deviceFound);this.myDeviceManager.off(discoverFail);}

catch

{Logger.error(RemoteDeviceModel,stopDeviceDiscovery

failed

error${JSON.stringify(error)});}}...

若设备在信任设备列表执行startAbility()方法启动连接设备上的应用将当前的绘制信息作为参数发送至连接设备。

若设备不是信任设备执行authenticateDevice()方法启动验证。

此时连接设备提示是否接受接收连接后连接设备展示PIN码本地设备输入PIN码确认后连接成功。

再次点击查询设备按钮选择已连接设备点击确认启动连接设备上的应用。

RemoteDeviceUtil.ets

设备验证authenticateDevice(context:

common.UIAbilityContext,device:

deviceManager.DeviceInfo,positionList:

Position[]):

this.trustedDeviceList.filter((item:

device.deviceId

执行设备认证启动验证相关弹窗接受信任显示PIN码输入PIN码等this.myDeviceManager.authenticateDevice(device,

authParam,

{Logger.error(RemoteDeviceModel,authenticateDevice

failed

error${JSON.stringify(error)});}}//

启动连接设备上的应用startAbility(context:

device:

启动连接设备上的应用context.startAbility(wantValue).then(()

{Logger.info(RemoteDeviceModel,

startAbility

wantValue${JSON.stringify(wantValue)});}).catch((error:

Error)

{Logger.error(RemoteDeviceModel,

startAbility

error${JSON.stringify(error)});})}...

}资源释放

程序关闭时注销设备状态监听任务并释放DeviceManager实例。

RemoteDeviceUtil.ets

注销监听任务unregisterDeviceListCallback():

void

注销设备状态监听this.myDeviceManager.off(deviceStateChange);//

释放DeviceManager实例this.myDeviceManager.release();}

catch

{Logger.error(RemoteDeviceModel,unregisterDeviceListCallback

stopDeviceDiscovery

error${JSON.stringify(err)});}}...

}绘制功能

Canvas组件区域监听触摸事件按照按下、移动、抬起等触摸事件记录绘制的起点、中间点以及终点。

触摸事件触发时使用CanvasRenderingContext2D对象的绘制方法根据位置信息进行绘制。

绘制结束后将当前位置信息列表存入分布式键值数据库。

Index.ets

{Canvas(this.canvasContext)...}.onTouch((event:

TouchEvent)

{this.onTouchEvent(event);})...}...}//

TouchEvent):

{this.canvasContext.beginPath();this.canvasContext.lineWidth

CommonConstants.CANVAS_LINE_WIDTH;this.canvasContext.lineJoin

CommonConstants.CANVAS_LINE_JOIN;this.canvasContext.moveTo(positionX,

false,

{this.canvasContext.lineTo(positionX,

positionY);this.pushData(false,

false,

{this.canvasContext.lineTo(positionX,

positionY);this.canvasContext.stroke();this.pushData(false,

true,

{break;}}}pushData(isFirstPosition:

boolean,

存入位置信息列表this.positionList.push(position);if

{//

当前位置为终点时将位置信息列表存入分布式键值数据库this.kvStoreModel.put(CommonConstants.CHANGE_POSITION,

JSON.stringify(this.positionList));}}...

}点击撤销按钮时从位置列表中后序遍历移除位置信息直到找到轨迹的初始位置完成移除上一次绘制的轨迹。

移除完成后将位置信息列表存入分布式键值数据库中。

执行redraw()方法清空画板上的内容遍历位置信息列表重新绘制。

Index.ets

{...LocalStorageProp(positionList)

positionList:

撤销按钮Image($r(app.media.ic_back)).width($r(app.float.ic_back_width)).height($r(app.float.ic_back_height)).margin({

left:

CommonConstants.ICON_MARGIN_LEFT

}).onClick(()

{this.goBack();})...}.width(CommonConstants.FULL_PERCENT).height(CommonConstants.TITLE_HEIGHT)...}...redraw():

void

删除画布内的绘制内容this.canvasContext.clearRect(0,

使用当前记录的位置信息重新绘制this.positionList.forEach((position)

{...if

{this.canvasContext.beginPath();this.canvasContext.lineWidth

CommonConstants.CANVAS_LINE_WIDTH;this.canvasContext.lineJoin

CommonConstants.CANVAS_LINE_JOIN;this.canvasContext.moveTo(position.positionX,

else

{this.canvasContext.lineTo(position.positionX,

{this.canvasContext.stroke();}}});}//

撤回上一笔绘制goBack():

{break;}}this.redraw();this.kvStoreModel.put(CommonConstants.CHANGE_POSITION,

JSON.stringify(this.positionList));}...

}分布式键值数据库

使用分布式键值数据库需申请数据交换权限ohos.permission.DISTRIBUTED_DATASYNC。

应用启动时创建分布式键值数据库设置数据库数据改变监听。

数据改变时执行回调获取插入或更新数据列表遍历列表匹配位置信息列表的设置key更新位置列表后重新绘制。

Index.ets

KvStoreModel();...aboutToAppear()

{...this.createKVStore();}...createKVStore():

void

创建分布式键值数据库this.kvStoreModel.createKvStore(this.context,

(data:

distributedKVStore.ChangeNotification)

{//

使用分布式键值数据库内的内容重置位置信息列表this.positionList

[];let

data.updateEntries;entries.forEach((entry:

{if

(CommonConstants.CHANGE_POSITION

entry.key)

位置信息列表更新后重新绘制this.redraw();}});});}...

}创建分布式键值数据库。

设置数据库类型为KVStoreType.SINGLE_VERSION单版本数据库其他配置参考[创建数据库配置信息]。

创建数据库成功后调用enableSync()方法开启同步调用setDataChangeListener()方法订阅数据变更通知。

KvStoreModel.ets

distributedKVStore.SingleKVStore;...createKvStore(context:

common.UIAbilityContext,callback:

(data:

distributedKVStore.ChangeNotification)

void):

创建一个KVManager对象实例用于管理数据库对象this.kvManager

distributedKVStore.createKVManager(config);}

catch

{Logger.error(KvStoreModel,createKvStore

createKVManager

err${JSON.stringify(error)});return;}//

options:

distributedKVStore.KVStoreType.SINGLE_VERSION...};//

获取分布式键值数据库this.kvManager.getKVStore(CommonConstants.KVSTORE_ID,

distributedKVStore.SingleKVStore)

{...this.kvStore

开启同步this.kvStore.enableSync(true).then(()

createKvStore

{Logger.error(KvStoreModel,createKvStore

enableSync

error${JSON.stringify(error)});});this.setDataChangeListener(callback);}).catch((error:

Error)

{Logger.error(getKVStore,createKvStore

getKVStore

error${JSON.stringify(error)});})}...

}订阅数据变更通知。

创建分布式键值数据库设置数据变更订阅订阅类型为全部当更新数据集或插入数据集大于0时执行传入的callback()方法。

KvStoreModel.ets

distributedKVStore.SingleKVStore;...setDataChangeListener(callback:

(data:

distributedKVStore.ChangeNotification)

void):

订阅数据变更通知this.kvStore.on(dataChange,

distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_ALL,(data:

distributedKVStore.ChangeNotification)

{if

{Logger.error(KvStoreModel,setDataChangeListener

on(dataChange)

err${JSON.stringify(error)});}}...

Index.ets

KvStoreModel();...aboutToDisappear()

{this.kvStoreModel.removeDataChangeListener();}...

}//

distributedKVStore.SingleKVStore;...removeDataChangeListener():

void

取消数据改变监听this.kvStore.off(dataChange);}

catch

{Logger.error(KvStoreModel,removeDataChangeListener

off(dataChange)

err${JSON.stringify(error)});}}...