4、通用组件、页面、桌面

组件(component)是一种用户接口(UI)对象,如一个标签、按钮、树。

页面(page)是一个组件的集合。

桌面(desktop)是一个包含相同URL请求的页面。

4.1、ZUML页面的生命周期

(1) 页面初始化阶段

ZK会运行一个叫做init的处理指示。如果没有定义这样的处理指示,就会跳过这个(初始化阶段)。

对于每个init处理指示,都有一个class属性,在其中会创建一个指定类的失利,并调用她的doInit()方法。<?init class="MyInit"? >指定了MyInit类作为页面的初始化类。这个类的处理依赖于你的应用程序的需求。

另一种传递init处理指示的方式是,制定一个zscript文件。<?init zscript="/my/init.zs"?>,那么会在页面初始化阶段对这个zscript文件进行解析。

当执行页面初始化阶段时,并没有在桌面中添加页面。

(2)组建创件阶段

ZK加载器解析ZUML页面,创建并初始化组件。

a、对于每个元素而言,ZK加载器检查if和unless属性,判断它们是否为true。如果不是,就会忽略这个元素及他的子元素。

b、对于一个集合而言,如果指定了forEach属性,ZK将为集合中每个集合项一次执行以下步骤c~g。

c、ZK加载器根据元素名称或类中指定的use属性,参加一个组件。

d、按照顺序一个个地初始化组件类的成员,并在ZUML页面中指定属性。

e、ZK加载器解析到任意嵌套元素,就重复整个过程。

f、如果组件实现了org.zkoss.zk.ui.ext.AfterConpose接口,加载器将调用afterCompose()方法。

g、创建完所有子元素后,将发送onCreate事件给该组建,这样应用程序就能够接着初始化剩下的元素内容。子组件首先提交onCreate事件。

(3)事件处理阶段

在时间处理阶段中,zk一次调用桌面队列(queue)中每个事件监听器。每次调用监听器都会使用一个独立的线程,因此它能够进行自动悬挂式运行,而不影响其他事件的处理。

在处理过程中,一个事件监听器可能会触发另外的事件。

(4)回填阶段

处理完所有的事件后,ZK将所有的组件会天到一个有规则的HTML页面中,并将该页面发送给浏览器。要回填组件,需要调用redraw()方法。

redraw()方法不会改变组件的任何内容。

4.2 更新页面

ZK异步更新引擎将请求以管道的形式添加到队列中,并未每个桌面创建一个队列。因此,同一个桌面的请求会按顺序进行处理,不同的桌面请求会并发进行处理。

(1)请求处理阶段

ZK异步更新引擎可能会根据请求中的要求来更新相关的内容,这样,这些组件和显示在客户端的内容保持一致。然后,ZK异步更新引擎将相关的事件提交到队列中。

(2)事件处理阶段

这个阶段和加载ZUML页面的时间处理阶段采用同样的方式。他一次处理事件,并且对每个事件的处理使用独立的线程。

(3)回填阶段

处理完所有事件后,ZK传送已更新的组件,生成相应的ZK响应,并将这些响应信息发送会客户端。客户端引擎根据这些响应信息更新浏览器中DOM树。

4.3 组件垃圾回收

ZK的每个组件并没有destroy()或close()方法。只要从页面上卸载了组件,就应该从浏览器中删除了该组件。一个页面一旦卸载了一个组件,如果应用程序没有任何指向它的引用,那么ZK将不再对其负责管理。而组件分配的内存将通过Java虚拟机(JVM)的垃圾收集器进行释放。

4.4 使用组件的属性

4.4.1 组件id,if,unless

组件一般使用的属性是id,它为组件分配一个唯一的标识符。可以在if或unless属性中制定相关语句,来决定是否创建组件,而且也可以使用forEach属性来决定要创建的组件数量。同时,也可以使用use属性将组件赋值给另一个Java类,这样可以替换原来默认的Java类。

if和unless属性定义true或false,可以用来判断是否创建组件。如果为组件指定了这两个属性,那么只有这两个属性均为true时才创建该组件。

4.4.2 组件的forEach属性

组件的forEach属性用来决定创建多少个组件。若为一个集合对象指定了该属性,zk加载器将会为该集合内的每一个条目创建一个组件。

4.4.3 组件use属性

将UI部分代码和控制处理的代码进行分离,可以减轻维护的负担。试图分离常见两种方式:

将控制代码放到一个单独的类中,然后注册事件监听器来调用和公司的方法。

另一种方式是使用use属性指点过一个类来取代默认的组件类。

<window use="MyWindow" />
时间: 2024-10-25 18:51:12

4、通用组件、页面、桌面的相关文章

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

Vue2.0的通用组件

饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍

[从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应用. 需求 需求大概是这样的: 开一个新的 Angular 项目,并且一开始选择加入 Router 功能 根组件是 AppComponent ,然后下方有三个子组件分别是 page1 page2 page3 可以在 AppComponent 内点击连结切换到这三个页面 参考文档: 路由与导航 Rou

com组件远程桌面rdp模块的调用

rdp(remote desktop protocol)是一个多通道的协议,包括客户端视音传输.文件传输和通讯端口转向等等功能,通过压缩处理的数据网络传输也是相当快.我们在windows操作系统下面,经常用到的mstsc.exe,也提供了com组件调用的接口. 可以建立一个winform的project,通过[工具箱]->[Choose Items]将com控件添加进来. ↑ 可以看到选项卡下面列了多个版本的组件,这里要提醒一下,它们是有版本功能的区别的,他们的clsid都是不一样的,而且代表着

jQueryMobile的组件——页面(page)

data-role="page"--代表这个div是一个page,在一个屏幕中只会显示一个page: data-transition--可以定义页面切换的动画效果: <div data-role="page"> <div data-role="header"> ... </div> <div role="content" > ... </div> <div da

vue从一个组件跳转到另一个组件页面router-link的试用

需求从helloworld.vue页面跳到good.vue页面 1.helloworld.vue页面代码 <template> <div class="hello"> 我是小可爱 <router-link :to="{ path: '/cute'}" replace>点我啊,傻</router-link> </div> </template> <script> import Good

Vue 路由跳转传递参数,子组件页面刷新后数据不丢失

原文地址:https://www.cnblogs.com/yscec/p/12408492.html

面试官: 写过『通用前端组件』吗?

前言 设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design.Antd.iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理. 能否设计出通用前端组件也是区分前端工程师和前端api调用师的标准之一,那么应该如何设计出一个通用组件呢? 下文中提到的组件库通常是指单个组件,而非集合的概念,集合概念的组件库是 Antd iView这种,我们所说的组件库是指集合中的单个组件,集合性质的组件库需要考虑的要更多. 文章目录 前端组件库的

单页面应用SPA架构

个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当然,SPA也有它自身的缺点,例如不利于搜索引擎优化等等,这些问题也有其相应的解决方案. 下面要介绍的这种方式可以说是一种模式或者工作流,和前端使用什么框架无关,也和后端使用什么语言.数据库无关.不能说是The Best Practice,我相信经过更多人的讨论和思考会有A Better Practi