应用界面渲染方法及装置的制造方法_4

文档序号:9597158阅读:来源:国知局
就是说,Dynative内核的主要作用就是将用json等 语言描述的界面数据中定义的组件,转换成移动终端中的原生组件,以便进行界面的渲染 展示。为了完成该转换,可以首先对界面数据进行解析,获得其中定义的各个组件的组件信 息。例如,具体的组件信息可以是指组件的类型名称信息,具体可以包括前文所述的text、 image等类型名称。
[0165] S203:根据对应关系,将所述界面数据中定义的组件信息映射成当前终端设备中 的原生组件;
[0166] 具体在进行映射时,Dynative内核可以首先根据界面数据中各组件的类型名称信 息,将界面数据中定义的组件转换为native层的逻辑组件,换而言之,也就是从界面数据 中提取出各个组件的类型名称,每个类型名称对应一个逻辑组件;并且,由于SDK包中预先 还保存了组件类型名称与移动终端中的原生组件之间的对应关系,因此,可以利用这种对 应关系将逻辑组件转换为移动终端中的原生组件。例如,当解析出界面数据中包含类型名 称为text的组件时,如果当前所在的移动终端为Android,则根据表5,可以将该组件映射 为textview组件,如果当前所在的移动终端为iOS,则根据表6,可以将该组件映射为lable 组件。
[0167] S204 :调用当前终端设备的原生代码对所述原生组件进行渲染,以用于展示所述 指定界面。
[0168] 在将逻辑组件转换成当前终端设备中的原生组件之后,就可以对这种原生组件进 行渲染,由于原生组件是用户界面的组成构件,因此,展现出原生组件之后,就可以展示出 对一个的指定界面。
[0169] 具体在进行界面展示时,可以首先根据界面数据中各组件的类型名称以及各自之 间的嵌套关系等信息,生成逻辑树。所述逻辑树包括多个第一节点,每个第一节点对应一个 使用界面描述语言定义的组件信息,主要用来存储界面中各组件的静态内容数据,并供脚 本函数等信息。另外,每个第一节点的信息还可以包括界面布局数据中定义的坐标信息。也 艮P,可以将服务器返回的界面数据用树形数据结构进行表示,逻辑树中包含了整个界面所 有的信息,包括样式、布局、交互脚本等等。之后,可以根据每个第一节点的信息,对逻辑树 进行排版布局,确定出各第一节点在屏幕上显示时的坐标;再之后,就可以遍历逻辑树中的 各个第一节点,并根据各第一节点的信息,以及各个逻辑组件与原生组件之间的对应关系, 将逻辑树转换为物理树。所述物理树包括多个第二节点,每个第二节点对应一个原生组件, 每个第二节点的信息包括在屏幕上显示时的坐标信息以及内容信息。最后就可以将物理树 上的各个第二节点绘制到屏幕上。其中,第二节点与第一节点一一对应,脚本函数只能操作 第一节点,第一节点会将脚本函数的操作结果透传到对应的第二节点,并最终展现在屏幕 上。
[0170] 例如,假设某界面数据中的某段代码为:
[0171]
[0173] 其中定义了两个文本组件,分别为txtl和txt2,则对应生成的逻辑树如图3-1所 示,如果是在Android系统中,转换成物理树之后,如图3-2所示,如果是在iOS系统中,转 换成物理树之后,如图3-3所示。
[0174] 如果界面布局数据与内容数据独立定义,则具体在生成逻辑树时,可以首先对界 面布局数据(也即前述layout数据)进行解析,确定逻辑树中的各第一节点,以及各个第 一节点的坐标信息,当然,同时还可以确定出各个第一节点对应的组件id,然后,根据组件 id到前述Content数据以及function数据中查找各个组件的内容数据,并绑定到对应的第 一节点上,生成逻辑树。
[0175] 如前文所述,界面数据中为各个组件定义的内容数据,包括静态内容数据以及动 态内容数据,其中,在生成逻辑树时,对于静态内容而言,可以直接从服务器端返回的界面 数据中进行提取,对于动态内容而言,可以通过界面数据中的动态脚本函数来获取。
[0176] 其中,如果某界面数据中仅包括静态内容数据,则Dynative的处理流程可以为:
[0177] 步骤1 :解析layout数据,提取出其中定义的各个组件的类型名称,确定出各个逻 辑节点的名称,并根据layout数据中的嵌套关系,确定出各个逻辑节点之间的父子关系, 进而生成逻辑树(相当于html中的dom树);
[0178] 步骤2 :遍历逻辑树,并将对应Content中的数据绑定到逻辑树上,此时逻辑树上 信息才完整;
[0179] 步骤3 :根据各节点中的坐标信息和内容信息,对逻辑树进行排版布局;
[0180] 步骤4 :遍历逻辑树,根据表5或是表6中保存的对应关系,将界面数据中定义的 组件映射为具体终端设备中的原生组件,生成对应的物理节点,这样物理树生成(相当于 html 中的 render 树);
[0181] 步骤5 :将物理树上各节点绘制到屏幕上。
[0182] 如果某界面数据中除了静态内容数据,还包括动态内容数据,并且这部分动态数 据对应的脚本需要在视图初始化时就触发,则Dynative的处理流程可以为:
[0183] 步骤1 :解析layout数据,生成逻辑树(对应前述步骤1以及步骤2);
[0184] 步骤2 :根据逻辑树中的信息,对逻辑树进行初步布局;
[0185] 步骤3:遍历逻辑树,根据各第一节点中的信息,生成对应的第二节点,创建出对 应的物理树;
[0186] 通过前三步生成的逻辑树中,包含了界面数据中定义的全部组件,只是其中部分 组件还没有绑定数据,只确定出了坐标、尺寸等布局信息;
[0187] 步骤4 :根据表7或表8中保存的对应关系,将界面数据中定义的脚本函数映射为 移动终端中原生API函数,并通过调用该API函数获取动态组件对应的内容数据;
[0188] 步骤5 :将获取到的内容数据绑定到逻辑树对应的第一节点上;
[0189] 步骤6 :根据补充过数据的逻辑树中的信息,再一次重新对逻辑树布局;
[0190] 步骤7 :将逻辑树中的更新信息同步对物理树中;
[0191] 步骤8 :将物理树上各第二节点绘制到屏幕上。
[0192] 另外,界面数据中定义的动态组件对应的动态脚本可能需要通过其他事件触发, 例如视图绑定数据时,或者被用户点击等操作时,等等。但是,脚本的解析可以是一次性完 成的,也即在Dynative框架启动,初始化一个Dynative页面的时候,如果发现有定义了脚 本,那么就可以一次性完成所有解析。而具体的执行,则要等到视图元素触发特定事件,t匕 如用户点击了某个按钮时,才会发生。
[0193] 例如,以下是在业务中使用的Dynative脚本一个实例:它实现的功能就是通过判 断传入参数里的值是否为true,来更改某个视图元素的显示或隐藏。它综合运用了条件判 断、赋值运算等基本功能。结合这份示例,下面再继续介绍如何解析、执行这段脚本。
[0194]
[0196] 每一段Dynative脚本里由一系列函数对象的定义组成,这一系列函数往往呈嵌 套关系(尤其是在用JSON这种结构化数据格式下)。就比如上面filterWapFinalPrice这 段脚本里,主体是一个条件判断语句,判断语句本身调用了一段eq函数,而根据判断结果, 在then、else分支里又分别调用了 setdata函数。
[0197] 当这样一段脚本传入Dynative解析器时,解析器也会一层层解析。每一次解析 时,解析器首先提取type字段,如果type字段里的值是已注册的,也就是已经在协议中定 义过的,那么根据表7或者表8中保存的对应关系,再实例化出与它映射的函数对象,并解 析出其他字段里的内容。假如发现type的值不是协议里注册的,那么这段脚本将会被抛 弃。当解析好一个函数对象的时候,解析器还可以将它放到一个公共函数对象池中,以它的 id来标识它,方便其他Dynative框架的其他地方使用这个函数对象。在上述示例中这个 id就是filterWapFinalPrice,只有第一层函数的id是有意义的,因为它们是一个整体,单 独引用then或者else里的函数是没有意义的。
[0198] 如前文所述,脚本的执行一般由事件触发,事件是指Dynative框架里定义的、在 特定时候发生的事情。比如页面中的视图元素初始化的时候,视图元素绑定数据的时候,或 者用户点击了按钮的时候等等。上述这段filterWapFinalPrice脚本是在视图元素绑定数 据之后通过调用^function. filterWapFinalPrice来触发,Dynative框架会根据id找到这 段脚本对应的函数对象。不过不管是哪一种事件,触发脚本执行的流程是一样的,首先在事 件里定义好需要调用的函数,被调用的函数通过上述提到的id指定;然后定义好函数所需 要的参数。Dynative框架在触发调用前,会先设置好参数,这些参数在脚本里最终可以通过 $args开头的变量去引用。紧接着Dynative框架通过id查找函数,假如函数存在,那么就 会让函数触发执行,执行的流程则会按照协议约定好的流程进行。
[0199] 以上对本申请实施例提供的Dynative框架进行了详细的介绍,为了更好的体现 出其相对于Hybird框架的优点,下面通过一个实际应用中的例子来进行介绍。
[0200] 为了实现某功能,在Hybird框架下,需要准备两套代码,其中一套为HTML代码, 如图4所示,另一套为Java代码,如图5所示。在运行时,需要两套代码的相互配合。例 如,图4的第5行以及第10行,用HTML语言定义了两个函数,分别为javacalljsO和 javacall jswithargs (arg),如果要加载这两个函数,则需要通过Java代码来完成,参见图 5中的第38行以及第40行,在Java代码中,需要调用webview的loadUrl方法来加载这两 个函数,并且在此之前的第38行,还需要将java代码注册到Webview中。可见,对于Hybird 框架而言,其架构如图6所示,使用HTML编写的代码,需要通过JavaScript、Webview的中 转才能到达的native层完成代码的执行。
[0201] 而为了实现相同的功能,利用本申请实施例提供的方案,则只需要准备一套代 码(例如,JS0N格式的数据),如图7所示,其中不存在到Webview中进行注册,以及调用 Webview中的方法等过程,在运行时,Dynative内核就可以识别出其中定义的组件,并映射 为移动终端中的原生组件,之后通过调用原生代码,就可以实现对界面的
当前第4页1 2 3 4 5 6 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1