OpenHarmony3.1-Ace-Form组件源码分析

更多开源请访问：51CTO开源基础软件社区https://ost.51cto.comformcomponent简介用于展示桌面图标和卡片。卡片类似于Android上的widgets，可以显示在桌面上，也可以显示在其他一些系统服务页面中。展示卡片时，使用card_frontend解析html标记语言，与应用展示不同。OpenHarmony支持的应用界面开发有js-likeweb（hml+css+js）和ets两种声明式风格。显示卡片时，这种更轻的卡片样式（也是类似web的，hml+css+json）。虽然图标和卡片的来源和管理者不同，但用户之间并没有太大的区别。桌面上的app图标相当于一张1*1的卡片，实现点击跳转到应用，无需动态刷新（allowUpate=false）。下面以卡片的形式进行分析。代码位置/foundation/ace/ace_engine/frameworks/├──bridge│├──card_frontend│├──js_card_parser.h││├──js_card_parser.cpp││├──card_frontend.h││_├──card.cpp││├──card_frontend_delegate.h││└──card_frontend_delegate.cpp│└──declarative_frontend/jsview│├──js_form.h│└──js_form.cpp└──core├──common│├──form_manager.h│└──form_manager.cpp└──components/form├──resource│├──form_request_data.h│├──form_callback_client.h│├──form_manager_resource.h│├──form_manager_resource.cpp│├──form_manager_delegate.h│└──form_manager_delegate.cpp├──form_component.cpp├──form_component.h├──form_element.cpp├──form_element.h├──render_form_creator.cpp├──render_form.cpp├──render_form.h├──rosen_render_form.cpp├──rosen_render_form.h├──flutter_render_form.cpp├──flutter_render_form.h├──form_window.cpp├──form_window.h├──sub_container.cpp└──sub_container.hbridge/card_frontend虽然和declarative_frontend、js_frontend位于同一个目录，但它实际上是给sub_container使用的，目录之前并不是一种应用程序界面的方式。它是映射UI的作法。bridge/declarative_frontend/jsview下的js_form是一个ace引擎组件实例，将ets中的组件与c++关联起来。core/components/form下是ace引擎组件form_component。系统架构图1系统架构卡片提供者为ace_form_ability。卡片的内容是hml+css+json，ace_form_ability负责更新里面的数据。用户是ace_ability，显示卡首先在ace中创建组件form_component，其中的sub_container通过card_frontend解析前端hml+css+json显示。打个比方：formmgr相当于服务器，提供者相当于服务器上的服务，用户相当于客户端。form_component可以和卡片管理器formmgr通信，通知formmgr卡片被安装的事件。formmgr将激活能力通知卡提供者。图2类图关键类介绍了FormComponentAttribute和JSForm。sdk的ts接口和关联的c类。它们将应用程序中的控件转换为c对象。前端FormComponent创建时设置的属性包括：id,name,bundle,ability,module,dimension(1*2,2*2,2*4,4*4),temporary。interfaceFormComponentInterface{(value:{id:number;name:string;bundle:string;ability:string;module:string;dimension?:FormDimension;temporary?:boolean;}):FormComponentAttribute;}JSForm是在Create()中创建的FormComponent时，属性通过RequestFormInfo传递给FormComponent实例。设置的回调包括：onAcquired、onError、onRouter、onUninstall。FormComponent、FormElement、RenderForm[RosenRenderForm、FlutterRenderForm]。一套三件套的ace控件。请注意，RenderForm是从RenderSubContainer继承而来的。FormComponent持有卡片属性。FormElement在Prepare()中设置FormManagerDelegate的回调方法，在update()中创建SubContainer。RenderForm里面的内容很少，因为卡片的实际绘制是在SubContainer里面的。FormManagerDelegate。能够与管道和FormMgr通信。在标准系统中，卡片通过FormMgr进行管理；【在lite系统中，没有FormMgr，通过pipeline中的PlatformResRegister来管理】。通过FormCallbackClient调用FormMgr发起的ipc。表单管理器。在本地管理SubContainer的单个实例。子容器。卡片实际呈现的位置。outSidePipelineContext_是整个FormComponent的管道，pipelineContext_是SubContainer本身用来渲染卡片的管道。这两行代码可以说明两者的关系：auto&&window=std::make_unique(outSidePipelineContext_);pipelineContext_=AceType::MakeRefPtr(std::move(window),taskExecutor_,assetManager_,nullptr,frontend_,instanceId_);CardFrontend用于呈现卡片。CardFrontend、CardEventHandler、CardFrontendDelegate、JsCardParser卡片渲染引擎。流程分析初始化流程图3初始化时序图首先，前端创建FormComponent组件，并设置属性和回调。然后ace框架在vsync事件中创建FormElement和RenderForm。FormElement初始化创建FormManagerDelegate并注册事件回调。FormElement在update事件中创建SubContainer，然后通过FormManagerDelegate通知卡片管理器。RouterEvent仅在lite系统中使用，本文后面不再分析。管理中心发起事件流程图4加载成功时序图图5数据更新时序图卡片数据更新由manager回调通知，如果是第一次是Acquire流程，否则是Update流程.Acquire流程先一步步回调事件给应用js，然后SubContainer调用CardFrontend显示卡片。Update过程只需要SubContainer调用CardFrontend更新卡片即可。图6卸载时序图卸载事件通知应用程序，应用程序可以在回调中移除FormComponent。Figure7SequenceDiagramofProviderAbilityExit图7SequenceDiagramofProviderAbilityExit这个事件我理解是provider能力宕机了，但是用这个继续使用，通知manager重启。Interactioneventflowchart8Interactioneventsequencediagram卡片加载完成后，SubContainer在runcard方法中向管道注册回调。管道响应事件并回调SubContainer方法。SubContainer回调FormElement，FormElement通过FormManagerDelegate发送给卡片管理器。事件仅支持路由器和消息类型。路由器事件进一步调用管道的OnActionEvent。最终提供者能力响应事件。provider是FormExtension的子类能力，在方法onEvent(formId,message)中处理事件。与其他控件最大的区别在于UI和UI事件代码和事件响应代码在两个位置，以两种能力运行。总结本文主要介绍了FormComponent控件的关键实现机制、主类关系和重要处理流程，着重介绍了控件本身的变化。如果需要更完整的卡片原子服务流程，还需要分析卡片管理器FormMgr。只有把两者联系起来学习，才能更清楚地理解完整的过程。了解更多开源信息，请访问：51CTO开源基础软件社区https://ost.51cto.com。