金蝶中间件总经理技术总监 张勇:大家下午好!蔡总给大家介绍了Web改变世界,我来给大家介绍一下我们怎么改变Web。正如蔡总在前面所属,Web改变了我们在座的每一位同仁的生活,时至今天,如果我们要去查询信息,我们可以去百度一下,如果我们买卖物品,我们可以淘宝一下。如果你想表现自己,可以去博客一下。Web深刻影响了我们在座每一位同事的生活。包括昨天晚上,我刚刚被Web改变了一下。昨天晚上我们的开源社区,我们有一个OperaMasks.org的网站,昨天晚上凌晨两点钟,他们说有黑客袭击我们的网站,所以Web给我们带来变化,也可能会带来苦恼。
今天我给大家带来的主题是Apusic OperaMasks的介绍。作为推动Web应用持续发展的Web开发技术,它又是怎样的?我们花两三分钟的时间回顾Web开发技术的变化。首先我们来看一下客户端技术,从94年后期和IE产生了浏览器大战,无疑这样的浏览器大战有利推动Web的发展。我们的Web应用并不简单是进入页面,我们具备了与客户的能力。最后我们要提的是…我们很纳闷,为什么在2005年一个崭新的词汇诞生,很多人对AJAX的技术褒贬不一,有人说它好,说是一次创新,有人说这个东西不过如此而已。他用的技术在很久以前就存在,但是事实上为什么成为时尚品,他给我们带来的意义是有效地带来Web应用的人机交互体验,也给我们改变了对Web应用不佳的印象。
我们再来看服务器端技术,能够跟客户交互的应用系统,这就意味着一种新型的应用系统的模式诞生了。94年PHP语言出现,由于他可以讲逻辑和页面绑在一起,他的诞生简化了 Web应用的开发。迅速成为微软WINDOWS的Web开发核心技术。同样J2EE借鉴了ASP语言的特点,并且成为J2EE核心开发技术。2000年J2EE和NET两大技术平台相继诞生,他们之间的竞争达到了白热化的程度。到02年程度,微软推出了全新的Web编程模型,有许多令人激动人心的特性,微软在Web开发领域这一块,取得了一些突破。我们反思在J2EE阵营里面,它的Web开发技术出于怎样的状况呢?从2002年,我们只要在J2EE里面开发Web应用,我们就知道三个词,是Servlet、JSF、Struts,我们不妨可以统计一下,现在至少70%、80%的用户依然在采用这Servlet这样的技术架构,那么这种技术架构到底能不能解决一下的普遍性问题?比如在座的很多都是搞J2EE开发,下面有很多的程序员,一个程序员需要懂JSF、Java等等,造成门槛比较高。再比如说,软件在经过这么多年的历史发展周期,其中的组件技术是提升软件复用度、进而提升软件开发效率的最有利的手段。但是在目前的J2EE Web开发技术中,我们缺乏一种标准的,并且得到业界广泛认同的组件技术。再举例说,Web的人机交互体验没有得到有效的提升。再举一个大家的切肤之痛,我们遇到过很多的项目经理,在开发应用的时候一开始信誓旦旦,我的外部应用支持FireFox,但随着开发项目周期进入尾期会发现这个目的永远没有办法达成。综上所述,我们说J2EE Web开发技术,期待一次全新的、彻底的变革。今天我给大家介绍的就是Apusic OperaMasks这样一个开源的J2EE Web开发解决方案。
我这里的标题是用最优秀的,但是优秀不是自吹自擂的,作为Web开发解决方案,衡量它是否优秀需要有几个因素,譬如说首先客户端,你需要解决客户端的数据展现,录入和编辑,还要解决客户端页面以及页面里面的组件的布局和样式、风格,还要解决客户端要能够跨浏览器,现在人们的选择是多样的,需要解决客户端和服务其的交互模式,包括最新的、最时尚的Ajax模式。还要考虑跟后台的业务逻辑打交道,还有分布式计算等一系列的基础式服务,当然所有的一切一切都需要良好的工具支持。为什么微软可以成功?微软有很优秀的工具支持,这是衡量外部解决方案是否优秀的指标。Apusic OperaMasks是怎么解决下述问题的?它提供了丰富的组件,Rich component,解决数据的展现,录入与编辑以及叶面积组件的布局问题,原生支持Ajax的JSF引擎,解决交互问题,同样OperaMasks完全兼容IE、FireFox等主流浏览器。OperaMasks解决了客户端和交互性的问题,服务器端我们有历经多年打造的Apusic OperaMasks服务器,有效解决存储、事务、安全、分布式计算等服务。我们解决了“所见即所得”的可视化设计,一体化的操作过程,提升开发效率。看起来金蝶中间件公司提供了比较完整的Web解决方案,但是完整意味着优秀吗?我们还看一下Apusic OperaMasks几个重要的技术特性,第一个就是原生Ajax支持的JSF引擎,我们分析几句话,第一首先这是JSF引擎,为什么要基于JSF引擎?JSF与展现层无关的展现层技术,什么叫与展现层无关的展现层技术,首先说JSF是展现层技术,能够把组件通过一种模式把组件渲染成需要出现的展现描述,但同时这个是可插拔,可替换的,换成不同得以为着展现层发生变化。
其次叫原生支持Ajax,怎么理解?我们说并不是我们一家提供了JSF引擎,有蛮多JSF可以实现,这些引擎、这些JSF实现是否可以支持Ajax,确实也可以支持。但是是怎么支持的?通过一些特殊的组件库来完全对Ajax的支持,意味着如果用这种技术,要绑定到他们的平台之上,他们的组件库是侵入型的设计,影响程序的设计模型,而Apusic OperaMasks ,我们是原生支持,从容器级别予以支持,任何标准的JSF应用,放到Apusic OperaMasks运行时,只需要更改参数。话先说到这里,我们给大家做一个事例。大家看到的是 Apusic Studio,Apusic Studio提供的特点是一体化,我们看到服务器使用完毕了,现在连接上服务器,我们这里有两个应用,其中我给大家演示的这个应用,首先我给大家简单表述一下,这是Java宣传JSF技术所宣传的事例,教大家怎么写JSF应用的。这个应用程序我们完全由于Java,J2EE是开放的,可以移到Apusic OperaMasks运行。下面大家请注意,这里面需要点击不同的按钮,大家请注意观察两方面,一个是上面的标题栏,一个是滚动条。当每点击一次,你发现下面在刷新,滚动栏在最上面,意味着每点击一次要发送一次请求,这是一个整个页面的渲染,这个常规的JSF应用。什么叫原生Ajax支持,下面只需要更改一个参数,我们看到这是应用的配置文件,我们把默认换成Ajax,把应用重新启动一下,我们看到应用重新启动了,然后重新访问一下CAR数值依然发生变化,不会影响应用,但是你发现了没有,界面刷新过那?界面并没有刷新,标题栏没有刷新,滚动条依然在这个位置。这种特性就是所谓的Ajax特性支持,这就是我们的竞争力。
下面回到PPT,这是第一个重要特性。第一个重要特性是Rich component,我们需要用类似Java实现结构,而Rich component不仅仅提供了标准,并且原生提供Ajax的JSF引擎,同时提供了许多的组件,我们可以以表格形式展现数据,我们还可以以图表形式描绘数据,甚至还可以用任何一个你所能想到的方式描述数据。没有做到的,只有想不到的。还可以解决页面内的布局问题,这就是我给大家看的界面的截图,我给大家准备了一个事例。我们同样访问一下事例,这个事例把Apusic OperaMasks所拥有的Rich component都列出来了。举一个简单的例子,你可以看一下表格组件,包括组件的排序,所有的格式都可以自己定义,这是一种模型,包括图表。包括布局组件,实际上我们所看到的就是布局组件,这是给大家简单看一下有哪些组件,不仅仅是组件丰富性,本身还有许多其他的特性,再给大家做一个简单的事例,刚才已经看到了CAR DEMO的试用,放到OperaMasks 上应用时,我们除了变成Ajax,还可以改变风格。现在有两个页面,我给他加上两个参数,只有这样的全局参数,全部的空间都可以瞬间变成自己的Rich component。第二个参数是皮肤风格,这里面变成苹果操作系统的操作风格,加上两个参数,现在把应用启动一次,应用启动完毕可以看到,现在再去访问它,这是旧有的风格,大家看看这种按钮风格,再和以往的按钮风格截然两样。同样你也只需要两个配置参数就可以标准的空间变成Rich component,而且可以具备换肤。不仅仅是这么多,我们是开源的,开放的,你可以构建自己的组件,也可以去完善想要的皮肤风格。
Rich component的特性给大家介绍到这里,我们继续往下看第三个特性,与Apusic的紧密集成。我们谈过OperaMasks是开源的,我们有自己的开源社区,它可以运行在任何实现容器以上,如果运行到Apusic运行服务器之上,可以具备很多的特性。比如说JSF有一个核心的技术,叫托管并,把客户端的UI和…紧密联系在一起的连接性,但是这个地位蛮尴尬,因为我们需要托管并需要其他的特性,比如能否拥有OP的模型,以为以后的拓展能力可以变得很强。只要运行在Apusic运行服务器之上,就可以具备这么多的特性。稍候在演示里面也会介绍托管并的技术。最后我们来看四个特性,叫Apusic Studio提供的支持,JSF有一句话非常核心,JSF在规范的层面上非常强调工具对它的支持,Apusic Studio 包括可视化的设计,拖拽操作,一体化的操作流程,贴这么多的截图大家看不那么真切,下面我给大家做一个事例,从头把事例构建一下。大家需要将近15分钟、20分钟的时间。
我们以北京2008年奥运会为背景,首先页面分成这样的部分,左边有这样一个表格,表格里面显示的是国家、金牌、银牌、铜牌,点击这个国家右边会显示所有这个国家的运动员获得奖牌的列表,下面把这个显示从头到尾做一遍。我们有两张表,从数据库取出。他在Apusic Studio中的数据建模,我们还看一下的实体模型,在我们的实体模型里面,有两个实体分别对应了两张表格,如果要在Apusic Studio里面完成实体建模也很简单,在里面拖放几个属性就OK了,今天不是我们演示的重点,我们只知道有两个实体模型,其中最关键的是把国家、有多少金牌、银牌、铜牌反馈成一个数组。我们现在展示OperaMasks之旅。我们现在需要建一个外部模块,按照标准的直接点击就OK了,在外部模块建一个JSP 页面,选择一个JSF的模板点击下一步,这个页面分成三个部分,分别是北、西、其中为了让代码更多重用,想把JSP放到另外两个子文件中。下面把图片先放过来,下面在最上方放一张图片,拖一张图片上去,选择图片的位置,这个页面就OK了。我们随时可以运行它。我刚才故意到Apusic关上,这样一点击就自动把部署复制上去,服务器就绪,登录进来,我们看到北京成功启动了,并且打开浏览器,这个页面最基本的,简陋的框架已经出来了。下面我们要做的是左边的导航栏,双击导航到外击JSP里面,然后做的第一件事是放一个…,这个…需要有四联,分别是国家、金牌、银牌和铜牌。我就放四列,有四列分别把列的名称改掉,可以直接在代码里面改。下面我们要做的到后台取数,就用托管并,我们新建一个托管并,其中托管并的实体模型我们是绑定一个组件。大家如果做JSF的人都知道,所有JSF的声明,必须要进行声明,但是在OperaMasks不需要。同样托管并希望用三个组件,只需要注入说我现在注入一个就OK了。这跟页面上的成员变量绑定,首先声明一个成员变量,然后做好方法。再需要把数据取出来,非常简单,其中里面所有的是数组,然后分别是金牌、银牌、铜牌的个数。托管并我已经准备完毕,下面再回到页面一一对立起来,需要绑定的是,生成的变量不需要管。申明一个值,下面国家对应的是这个数组的第零个原数。由于我们更改了托管并,所以必须要应用重新启动一次。下面就刷新一下页面,我们看国家已经出来了,下面我们需要再调整一下页面,让页面左右可以拖动,尺寸稍微大一点,让它可以被拖动,再让他能够被关闭。然后重新访问一下页面,我们可以看到,这个页面达到你的期望值了,现在可以在这里面来回拖动,也可以在这里面点击让它收缩进去。下面我们再花几分钟时间把图表做出来,这个非常简单,现在只需要拖动一个图表,首先我们需要捕获一个事件,让你选择某一行数据的时候,我要知道你选择哪一行数据,我们需要设定一个变量记录一下,这就代表着你选择的是哪一行,我们生成方法。事件怎么过去呢?需要绑定一个Ajax,当行被选择的时候。你点击的哪一行的时候,就会自动制成你选择的是哪一行。我们回想刚才取数的过程,你选择的一行所反映的数据第零员数是国家、金牌、银牌、同行的个数。我们扔给他三个数据,分别是金牌、银牌、铜牌的个数。奖牌分布率结果值我已经取到了,在这里面进行绑定,把它关联起来。首先给一个奖牌分布,然后给一个值,再起一个变量,后面要引入它。到现在为止,最左边这个已经OK了,由于我们更改了数据,需要把应用重新启动一次。启动完毕我们刷新,可以看到数据已经出来了,当你点击某一个国家,下面的奖牌分布率自己发生变化,这时候图稍微有一些大,我们再调整一下,你也可以拖拽,我们最左边的导航页面已经构建完毕。
再耽误大家两分钟时间,把右边做返回的运动员的列表展现出来,这块给大家展示一个最复杂的控件,用你任何想到的方式去展现数据。首先把无用的给删掉,返回的这个我们到底有多少个奖牌,我首先需要做一个绑定,生成方法,绑定以后这里面首先获取选择哪一个国家,把这行代码拷贝过来,现在选择的数据都有了,其中第零个就是Counry,至此数据准备完毕,下面很简单,把页面绑定一下。现在要显示多少数据,什么叫做以你能够想象的方式展示数据,需要展示什么数据就定义出来,我展示三个,分别是项目叫什么,项目的图片是什么,还有这个项目的运动员是谁。数据全部准确完毕,下面就是展现了,用你任何能想到的方式展现,我做一个简单的组件布局,放上一个Apusic的布局管理器,默认一行显示三列,右边显示这个项目的名称和运动员的名称。右边的数据和页面可以了,由于更改了托管并,我们需要重新启动一次应用,不需要重新启动服务器,现在再刷新一次,我们可以看到,点击中国,下面显示的是中国的奖牌分布,右边是中国获取奖牌的运动员列表,还有一点点遗憾,发觉右边可以分页就好了,以往分页很复杂,在OperaMasks上面很简单,拖一个分业组件就可以了。分页是分了,但是下面的数据很多,一页显示多少数据,我们有指令,有一个属性是一页只显示五笔记录,大家可以看到,一页只显示五笔记录。
至此为止,我带领大家去看一下Apusic OperaMasks开发一个日常中经常要开发的Web系统,到底需要做那样的事情,最后再耽误大家两分钟时间,把PPT走完,有了这些够不够?其实我们上面所谈到的所有的技术特点,所有的OperaMasks的特点,我认为都是一些技术层面上可以解决的问题,我觉得最关键的OperaMasks的特性我们是标准的,并且我们是开放的,标准的意味着我们可以获得众多厂商的支持,开放的意味着把所有文档、原码通过OperaMasks.org的社区跟国内外的业界同仁开放,共同打造OperaMasks的社区,由社区来推动OperaMasks技术的发展,并且由社区决定下一步的发展方向。今天借这个机会跟大家分享一下,从今天开始,我们会采用更开放的态度,如果各位用OperaMasks去构建你们的应用系统,并且把它作为商业目的没有问题,我们支持并鼓励这样的行为,我给大家的展示到此为止,谢谢大家! |